FAQ

Just another 仙台入門new weblog

逆引き　テンプレートコーディング

2009年 5月 29日

テーマファイルは、「wp-content/themes/テーマファイル名」にあります。

http://ブログURL/archeves/としてアクセスしたときに、表示するhtmlと、どのような内容を表示するか、wordpress関数で表示内容や動作の制御を行う命令が書き込まれています。

このテーマファイルに、コードを書き足す事で、表示内容やレイアウト等のスタイル設定をカスタマイズできます。
記述されたPHPコードやワードプレステンプレート関数は、不用意に利用するとブログに大きなダメージを与える事もありますので、注意してください。

もし、あなたが、htmlやstyleならわかるという事であれば、テーマは、style.cssだけで、サイトをカスタマイズする方法もあります。

ご自身の持っているスキルの範囲で最大限に自分だけのブログ作りを楽しむ事ができます。

参考まで、基本的な機能を実現するためのコードスニペットを書き出してみます。

head line

ブログ名

<?php bloginfo('name');?>

メインページへのURL

<?php bloginfo('url');?>

サブタイトル

<?php bloginfo('description');?>

メタタイプの入力

<meta http-equiv="Content-Type" content="ここの部分; charset=文字コード" />

例）
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');?>; charset=<?php bloginfo('charset');?>" />

ここの部分
<?php bloginfo('html_type');?>

文字コード

<?php bloginfo('charset');?>

スタイルシートの適応

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

バージョン情報

<meta name="generator" content="WordPressここの部分"/>

例）
<meta name="generator" content="WordPress<?php bloginfo('charset');?>"/>

<?php bloginfo('charset');?>

フィールドファイルのアドレス（RSSとATOM）

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name');?>(RSS2.0)" href="<?php bloginfo("rss2_url"); ?>" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name');?>(RSS2.0)" href="<?php bloginfo("atom_url"); ?>" />

記事タイトルをリストアップ

<?php if(have_posts() ): while(have_posts() ): the_post(); ?>

<h2><?php the_title(); ?></h2>　//記事タイトル

<?php the_content(); ?>　//記事タイトル

<?php endwhile; endif; ?>

前後ページへリンクする

<?php posts_nav_link(' |','«前のページ','次のページ »'); ?>

表示設定で設定した数値が超えたときに表示されます。

最近の記事のメニューリストを作る

<?php wp_get_archives('type=postbypost&limit=10'); ?>

カテゴリーメニューリスト

<?php list_cats(0,'name')?>

月別のアーカイブメニュー

<?php wp_get_archives('type=monthly'); ?>

テンプレートタグ種類

ファッションスタイル

1. パラメータの記述（パラメータ値を指定する。このとき、文字列（'type','format','before','after'）・数値（'limit',）パラメータ（show_post_count）は「''」で囲む。またブーリアンの場合は「''」で囲まない。

例）<?php get_archives('type','limit','format','before','after',show_post_count); ?>

注意）指定順序を変えないこと、省略もしないこと

デフォルトの指定）<?php get_archives();?>、またはパラメータのデフォルトの指定は<?php　get_archives('','','','before','after',show_post_count); ?>

クエリースタイル

1. クエリーの記述（パラメータ名と値）

例）<?php wp_get_archives('type=xx & limit=xx & format=xx & before=xx & after=xx & show_post_count=xx'); ?>

テンプレートの分類

一般

記事

日付

カテゴリー

リンク

コピーライト

コメント

その他

パラメータの一覧

管理画面へのログイン

<?php wp_loginout(); ?>

ユーザ登録、登録画面へのリンク

<?php wp_register();?>

記事タイトルのループ表示

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<p><?php the_title(); ?></p>

<?php endwhile; endif; ?>

記事タイトルのループ表示（beforeとafterの記載例）

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<?php the_title('<p>','</p>'); ?> //このように記載すると上記と同じようになる。

<?php endwhile; endif; ?>

記事タイトルのシングル表示

<?php single_post_title(); ?>

記事の内容のループ表示

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>

<?php endwhile; endif; ?>

記事の内容のループ表示（文字だけ）

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_excerpt(); ?> //RSSの場合はthe_excerpt_rss();を使用する。

<?php endwhile; endif; ?>

カスタムフィールドのエリア、キーワードを表示

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_meta(); ?>

<?php endwhile; endif; ?>

記事のID（カウント）を表示

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_ID(); ?></h1>

<?php edit_post_link(); ?>

<?php endwhile; endif; ?>

記事のURLを表示する

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_parmalink(); ?>　//RSSの場合は<?php parmalink_single_rss(); ?>　//PHPの記述の場合<?php echo get_parmalink(10); ?>

<?php endwhile; endif; ?>）

複数に分裂した記事番号へのURLの表示

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>

<p><?php link_page(); /></p>

<?php endwhile; endif; ?>）

複数に分裂したページに前後リンクを表示させる

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_content(); ?>

<?php endwhile; endif; ?>

<p><?php posts_nav_link(); ?></p>

<p><?php previous_posts_link(); ?></p>

<p><?php next_posts_link(); ?></p>

記事の投稿日を表示する

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_date(); ?> <?php the_time(); ?>

<?php endwhile; endif; ?>

カテゴリー名を表示する

<?php if(have_posts() ):while(have_posts() ): the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php the_category(); ?> //ドロップダウンで表示させたい場合は<?php dropdown_cats(); ?>

<?php endwhile; endif; ?>

カテゴリーのパンぐずリストを表示

<?php echo get_category_parents($cat); ?>

アーカイブメニューを表示する

<?php get_archives(); ?>

<?php get_archives('type=postbypost&limit=5',); ?>

カレンダーを表示する

<?php get_calendar(); ?>

パーツを読み込む

<?php get_header(); ?> //ヘッダーを読み込む

<?php get_footer(); ?> //フッダーを読み込む

<?php get_sidebar(); ?> //サイドを読み込む

<?php get_comments_template(); ?> //コメントテンプレートを読み込む

コンディショナルタグ

コンディショナルタグは、どのコンテンツをいくつ表示するかをコントロールすることができる。

ダイナミックハイライトメニュー

Home、Category、Archive、Search、Singleのどれかのページにいるとすると、箇条書き（ナビゲーション）のはじめの項目のliタグに、class="current"を追加する。

例）"about"という名前のページにいるときに、class="current"を追加する。

<ul id="nav">
<li<?php if ( is_home() | | is_category() | | is_archive() | | is_search() | | is_single() | | is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li>
<li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
<li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>
</ul>

ダイナミックタイトルタグ

動的にtitleタグをheader.phpに加える

<title>
<?phpif (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() | | is_month() | | is_year() ) {
echo 'Archives:'; wp_title('');
} else {echo wp_title('');
}
?>
</title>

ダイナミックコンテンツ

トップページのみに表示されるファイルを指定

<?php if ( is_home() ) { include ('file.php'); } ?>

ハイライトする記事を目立たせる

CSSクラスを追加

<?php if ( in_category('2') ) { echo ('class="feature"'); } ?>

1つのテンプレートをユニークにする

あるカテゴリで個々の記事を表示するために、1つの違うテンプレートを使いたいとする。
記事がどのカテゴリに属しているかをin_categoryでチェックし、それからテンプレートを選択すればよい。

デフォルトのsingle.phpには、以下のコードを入力する。記事がカテゴリ1に属していればsingle1.phpというテンプレートを使い、一方カテゴリ2であればsingle2.php、ほかのものならばsingle_other.phpを適用する、というコードになっている。

<?php

$post= $wp_query- >post;

if ( in_category('1') ) {
include(TEMPLATEPATH . '/single1.php');
} elseif ( in_category('2') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single_other.php');
}
? >

カテゴリテンプレートをユニークにする

異なるカテゴリテンプレートを使って、特定のカテゴリを表示したいとしよう。これは単純にカテゴリテンプレートをcategory-2.phpとして保存すればよい。（注意："-"とカテゴリID番号をファイル名にする）すると、category-2.phpはカテゴリ2を表示した際に使われ、category-3.phpはカテゴリ3のときに使われる、など。

（訳者注：上記と絡ませて使うと便利。コンディショナルタグで表示ページを指定し、カテゴリごとにページデザインを変える、など）

1つ目の記事のあとにGoogle Adsenseを表示する

多くの人が僕に質問する。「どうやって、1つ目の記事のあとにGoogle Adsenseを表示しているんだい？」これはすごく単純。ループ内に変数($loopcounter)を加えればよいだけだ。

もし、$loopcounterが1以下、または等しいのであれば、そのときはgoogle-ad.phpを組み入れる。

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); $loopcounter++; ?>
// the loop stuffs
<?php if ($loopcounter <= 1) { include (TEMPLATEPATH . '/ad.php'); } ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

クエリーポスト

ループ内にいくつの記事を表示するのかを制御する

どのコンテンツが、どこに、どうやって表示されるのかを制御させられるのがクエリーポスト

特定のカテゴリにクエリーを要求することもできるし、除外することもできる。

最新記事の一覧を表示したもの、特定の記事を表示するもの、またどうやって特定のカテゴリから除外するのかについて、クエリーポストを使った例を示してみよう。

最新記事を表示する

以下のコードが最新5件を一覧に表示するものだ。

<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

特定の記事を表示する

カテゴリ2は特別なカテゴリとする。このカテゴリから5件をサイドバーに表示したい。そんなときは、こんなコードをsidebar.phpに入れればよい。

<?php query_posts('cat=2&showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

特定のカテゴリから除外する

特定のカテゴリを表示しない

以下のコードはカテゴリ2の全ての記事を除外したものだ。（注意：ID番号の前にマイナス記号が入っている）

<?php query_posts('cat=-2'); ?>
<?php while (have_posts()) : the_post(); ?>
//the loop here
<?php endwhile;?>
Tips：posts_per_page引数を使うことによって、ページの記事ごとに上書することもできる。（例：query_posts('posts_per_page=6');）

カスタムフィールド

記事のコンテンツや抜粋と同じように、特別なデータやテキストを記事に加えることができる。

はじめに記事のカスタムフィールドに追加する。

記事イメージと記事へのリンクを表示するため、以下のコードをループに入れる。

<?php //get article_image (custom field) ?>
<?php $image= get_post_meta($post->ID, 'article_image', true); ?>

<a href="<?php the_permalink() ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>
Tips：WordPressでは複数のキーを作り、保存もできる。その上、そのキーはほかの記事にも使うことができる。

サイトのサムネール、ツールチップのイメージ、URLを表示するために、カスタムフィールド等に使う

リストページ

wp_list_pagesというテンプレートタグは、ナビゲーションのためにヘッダーやサイバーにページの一覧を表示するために使われる。どのようにwp_list_pagesを用いて、サイトマップやサブメニューを作るのかを示してみよう。

サイトマップ

全てのページのサイトマップ（サンプル）を作るために、サイトマップのページテンプレートに次のコードを入れよう。（注意：僕はページID12を除外している。なぜならページID12は僕のサイトマップ自身のページであり、そのページを表示する必要がないと思うからだ）。

<ul>
<?php wp_list_pages('exclude=12&title_li=' ); ?>
</ul>

ダイナミックサブページメニュー

サブページにいるとすると、サブページのメニューを出力する。そうするためには、このコードをsidebar.phpに入れよう。

<?php

$children= wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');

if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

ページテンプレート

WordPressをホームページのように使う

どのようにページがどのように表示されるべきかを制御するのがページテンプレート機能だ。

この機能を使うためには、まずページテンプレートを作る必要がある。それから、あるページに特定のテンプレートを指定することができるようになる。

ページテンプレートがどのように構造化されたのかを示してみよう。（例えば、portfolio.php）

<?php


/*
Template Name: Portfolio
*/

?>
<?php get_header(); ?>
//the loop here
<?php get_footer(); ?>

記事を投稿したり編集したりするときに、右側に"Page Template"というタブがあります。
利用できるテンプレートが表示される。

WordPress各種設定

管理画面には、はじめからたくさんの設定をすることができ、もっとあなたのサイトをよくできる。ここにいくつかあげよう。

トップページをカスタムする

デフォルトにおいては、WordPressはトップページにあなたの記事を表示する。しかし、もし静的なページ（ようこそやスプラッシュなど）を代わりに使いたいのであれば、管理画面 > 各種設定 > 表示設定から決定することができる。

パーマリンク

デフォルトのWordPressは記事のURLにwww.yoursite.com/?p=123というものを使っているが、これは検索エンジンにとって好ましいURLではない。パーマリンクは、管理画面 > 各種設定 > パーマリンク設定から変更することができる。個人的には、パーマリンクは/%category%/%postname%/が気に入っている。

カテゴリ接頭語

デフォルトのWordPressのカテゴリの接頭語は、カテゴリになっている（例：yoursite.com/category/cat-name/）。

これにarticleをカテゴリーベースに入れることにより（各種設定 > パーマリンク）、カテゴリURLをyoursite.com/article/cat-name/にすることができる。

Posted in |　 No Comments »

ページネーション

.
© FAQ Entries (RSS) and Comments (RSS)