データの移行に伴い、phpコードの文字化けが発生している箇所があります。
＆lti や ＆gt; のような文字化けが出ているコードはコピーしないでください。
現在、手直し中です。すみません。
投稿記事 single.php のカスタマイズ
ここでは「投稿記事（シングルポスト）」のベースとなるsingle.phpのカスタマイズについて説明しています。
single.phpは、サイトのメインとなる部分ですので、「読みやすい」を第一に考えて、カスタマイズしていきましょう！
- sigle.phpの構成
- 記事ナビゲーション（ブレッドクラム）
- タイトルおよびメタ情報（カテゴリ、タグ、プレビューなど）
- コンテンツ（本文）
- 関連記事の表示
- 応用(1)：管理人情報の表示
- 応用(2)：カスタムフィールドの応用
まずsingle.phpの構成を理解しましょう。
『sunshine』の場合、シングル記事は次のように表示されます。
シングル記事を表示するsingle.phpは次のようになっています。
まず、ヘッダーを読み込む get_header();のタグがあり、optionに指定された機能が挿入されるよう設定されています。
次に、「もしシングル記事が存在するなら、以下のコードを実行する if (have_posts()) : the_post(); update_post_caches($posts);」という命令文があり、そこからシングルページに表示される内容が指定されています。
まず『ブレッドクラム』と呼ばれるナビゲーションがあり、次いで記事タイトル、メタ情報（日付、コメントの有無など）が表示されるようになっています。
肝心の記事本文を呼び出すタグは the_content(); （短いですネ）
次いで、作者名、カテゴリー、タグ、編集用リンクが表示されます。
次いで、『wp23_related_posts』というプラグインを使った関連記事を表示するコードが記入されおり、最後に、コメントのテンプレートを呼び出すindlude構文、php include(‘templates/comments.php’); 、そしてフッターを呼び出す php get_footer(); で終わっています。
項目の並び替えや、表示方法の変更は、sidebar.phpと同じく、テンプレートタグを編集することで可能です。
参考記事：
・サイドバーのカスタマイズ(1) 新着記事、カテゴリー内記事一覧、カテゴリーリスト
・サイドバーのカスタマイズ(2) フリースペースの応用、特化型サイドバー、incude構文
ナビゲーション（ブレッドクラム）
ブレッドクラムを表示する場所は何処でもOKなのですが、タイトルの上に表示するのが一番分かりやすいかと思います。
プラグインを使う方法もありますが、コードで表示するなら次の通りです。
<div id="○○">
<a title="<?php _e('Goto homepage', 'inove'); ?>" href="<?php echo get_settings('home'); ?>/">
<?php _e('Home', 'inove'); ?></a>
&gt; <?php the_category(', '); ?>
&gt; <?php the_title(); ?>
</div>
最初に「Home」へのリンク、それから、カテゴリー、記事タイトルが、> という記号を介して表示されるようになっています。
もちろん、> は、→ や、アイコンなどに置き換えてもOKです。
リンクのポップアップ表示を変更する場合は、Goto homepage の部分を他の語句に置き換えます。
プラグインを使うなら、『Breadcrumb NavXT』がおすすめ。
http://mtekk.weblogs.us/code/breadcrumb-navxt/
表示したい場所(sidebar.php、header.phpなど）に、次のコードを書き込むだけです。
<div id="○○">
<a title="<?php _e('Goto homepage', 'inove'); ?>" href="<?php echo get_settings('home'); ?>/">
<?php _e('Home', 'inove'); ?></a>
&gt; <?php the_category(', '); ?>
&gt; <?php the_title(); ?>
</div>
記事タイトルは、テンプレートタグ the_title で表示します。
参照ページ：テンプレートタグ/the title
<h2><?php the_title(); ?></h2> もしくは <h2><?php the_title(); ?></h2>
カテゴリーやタグ名など、記事のメタ情報の表示の仕方もいろんな方法がありますが、一番確実なのは、使っているテーマテンプレートの方法を応用することです。
たとえば『sunshine』の場合、本文下部のメタ情報は次のように設定されています。
<p class="○○">
<?php if ($options['author']) : ?><span class="author"><?php the_author_posts_link(); ?></span>
<?php endif; ?>
<?php if ($options['categories']) : ?><span class="categories"><?php the_category(', '); ?></span>
<?php endif; ?>
<?php if ($options['tags']) : ?><span class="tags"><?php the_tags('', ', ', ''); ?></span>
<?php endif; ?>
</p>
実例
それぞれの項目を入れ替えたり、削除する場合は、php if option から endif までのコードをまとめて編集します。
なお、($options['○○'])は、このテーマ独自の呼び出し機能であり、すべてのテーマテンプレートに共通するコードではありません。
それぞれのテンプレートタグについては、WordPressの公式Codexをご参照下さい。
作者名 the_aouthor_posts_link
カテゴリー名 the_category
タグ名 the_tags
カテゴリーやタグ名といったメタ情報は、通常、記事タイトルや本文下に表示されることが多いですが、single.phpやsidebar.phpにメタ用のボックスを作るのも一興です。
こちらは以前使用していたテーマの一例。
作り方はすこぶる簡単。
本文用のボックスをもう一段、上に配して、その中にメタ情報のテンプレートタグを書き込みます。
一行目の div id=author-box が、ボックスのスタイルを指示しています。
記事のサムネイルは、カスタムフィールドを応用しています。（使い方はまた後日）
他に表示できるメタ情報として、『現在表示しているカテゴリーに属する記事数』があります。
たとえば、
このカテゴリーの記事数は <strong><?php $cat = get_the_category(); $cat = $cat[0]; echo $cat->category_count; ?></strong>件です。
strongで囲んだ部分が太字の数字で表示されます。
記事のview数については、『WP-PostViews』というプラグインがおすすめです。
http://wordpress.org/extend/plugins/wp-postviews/
管理画面で有効化して、設定画面で、「Everyone（自己アクセスも含む）」「Guest only（ビジターのみ）」「Resisters User（登録されたユーザーのみ）」を選択し、『Exclude Bot Views』でロボットをアクセス数に含むか、含まないかを設定します。
次に、『Views Template』で表示方法を設定します。
たとえば、「閲覧数○○回」と表示したい場合は、「閲覧数 %VIEW_COUNT% 回」になります。
あとは、表示したい場所に次のコードを書き込めばOK。
<?php if(function_exists('the_views')) { the_views(); } ?>
カスタムフィールドを利用して、記事に特化したメッセージを流すのも面白いと思います。
一番簡単なやり方を紹介しましょう。
たとえば、書籍関連の記事に「共通のメッセージ」を流す場合、記事毎にカスタムフィールドを設定します。
『新規追加』をクリックするとダイアログが出るので、「名前（キー）」と「値」を入力します。
一例
次に、表示させたい場所に、次のコードを書き込みます。
<?php if ( get_post_meta($post->ID, 'book', true) ) { ?>
<font color="#003399">
おすすめ書籍 『天使と悪魔』ラングドン・シリーズ待望の映画化！</font>
<?php } ?>
実例
こうすると、「book」のキーを持つ全ての記事において、共通のメッセージを表示することができます。
記事毎に「値」を設定する場合は、次のように記入します。
表示したい場所に次のコードを書き込みます。
<?php echo get_post_meta($post->ID,'book',true); ?>
実例
こうすれば、「book」のキーをもつ全ての記事において、個別のメッセージを表示することができます。
なお、「book」キーの指定がない記事については、何も表示されません。
（レイアウト崩れは生じません）
本文を表示するテンプレートタグは、the_content になります。
（一番量が多いのに、一行ですね）
参考ページ：テンプレートタグ/the content
<?php the_content(); ?>
一般的に、「何度もスクロールするような長い記事は避ける」というのがユーザビリティの基本ですが、どうしても1ページで表示したい場合は、この記事のように、トップに『目次』を作成すると分かりやすいです。
章ごとに『Topに戻る』のリンクを挿入すると、いっそう親切になります。
実例：子供の癇癪、心配するな / 『ダダこね育ちのすすめ』 阿部秀雄
ページ内のリンクは、a name でラベル付けし、a href=”#ラベル名” でリンクを指定します。
参考ページ：TAG index 同じページ内にリンクする
実例
<div class="mokuji"> -目次- <ol> <li><a href="#about">WordPressについて</a> <li><a href="#plugin">プラグインについて</a> <li><a href="#theme">テーマテンプレ-トについて</a> </ol> </div> <p><a name="about">WordPressについて</a></p>
1つのコンテンツを複数のページに分割したい場合は、記事内に、nextpage のタグを挿入します。(pタグを忘れずに)
<p><!--nextpage--></p>
テンプレートファイルの表示させたい場所（この場合は、the_contentの下）に、wp_link_pageのタグを挿入します。
（引数は一例です）
<?php the_content(); ?>
<div style="font-weight:bold;margin-bottom:20px;>
<?php wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink=% ページ'); ?>
</div>
参考ページ：テンプレートタグ：wp_link_pages
記事投稿画面で、次のページと区切りたい部分に nextpage タグを挿入。
実例
表示方法はdivスタイルで設定すればOK。
記事内に顔アイコンを表示したい場合は、こちらのプラグインがおすすめ。
『wp-Monalisa』 http://wordpress.org/extend/plugins/wp-monalisa/
アイコンは、素材屋さんからダウンロードしたものに置き換えてもOKです。
関連記事の表示は、一般にプラグインを使います。
下記リンクにて、いろんな種類のプラグインが公開されています。
http://wordpress.org/extend/plugins/tags/related
機能には二種類あり、1つは「タグ」「カテゴリー」などを基準に関連づけるもの、もう1つは、コンテンツ（本文）から関連づけるものです。
しかし、後者の「コンテンツ・マッチ」は、マルチバイトの日本語だと上手く関連付けできない事があります。（明らかに関連記事が存在するのに「関連記事はありません」で返される）
私もいろいろ試しましたが、次の2つが無難に動作します。
http://xavisys.com/wordpress-plugins/efficient-related-posts/
管理画面でプラグインを有効にしたら、「設定」で表示する記事数や、除外するカテゴリーなどを設定します。
関連記事の表示場所を「Auto（自動表示）」にせず、好きな所に設定する場合は、「Other setting」で「Do Not Auto Insert Into Posts 」を選択し、表示したい場所に次のコードを挿入します。
たとえば、関連記事を5件、日付順に表示したい場合。
表示場所のポジションを指定したい時は、divスタイルを使います。
displayで表示したい記事数、no_rp_textで関連する記事がなかった場合の文章を設定します。
<?php echo wp_get_related_posts(array('num_to_display'=>5, 'no_rp_text'=>'No Related Posts Found')); ?>
投稿内に表示する場合は、こちらのコードも有効です
[relatedPosts num_to_display="1" no_rp_text="No Related Posts Found"]
次におすすめなのが、『WordPress 2.3 Related Posts』
http://fairyfish.net/2007/09/12/wordpress-23-related-posts-plugin/
管理画面でプラグインを有効化し、設定画面で表示方法を選び、表示したい場所に次のコードを書き込むだけです。
<div style="margin:20px 0 40px 30px;">
<?php st_related_posts('number=5&order=date-desc'); ?>
</div>
このプラグインのいい所は、該当記事がなかった場合、「ランダムポスト」「最もコメントの多いポスト」など、いくつかのオプションから選べる点です。
「関連記事はありません」と表示されるが淋しい方におすすめです♪
関連記事を手動で設定したいなら、こちらのプラグインが非常に使い勝手がいいのですが（投稿記事画面で、表示したい記事を選択することができる）、環境によっては「記事検索」の機能が上手く作動せず、どうも日本語だときちんと拾い出してくれないみたいなのです。
もしかしたら、動作する環境もあるかもしれませんので、興味のある方は一度トライしてみて下さい。
http://wordpress.org/extend/plugins/microkids-related-posts/
非常にクールなAjaxの記事検索機能。しかし、日本語だと、反応がイマイチ・・
日本人開発者によるプラグインなら、ベテラン・ユーザーの『hiromasaさん』が、日本語用の関連記事表示プラグインを公開されています。
http://wppluginsj.sourceforge.jp/wp-jrelated/
『Yahoo! Japan が提供する日本語形態素解析APIを利用して、WordPress の投稿をアナライズし、自動的に投稿の下部に「関連する記事」へのリンクを付与するプラグイン』とのことです。
利用するには、Yahooアプリケーションの取得が必要です（無料）。
管理画面で各種設定をすると、自動的にコンテンツの下部に関連記事を表示してくれるようになります。
ただし、このプラグインは、データベース内に独自の辞書を作成するため、MySQLの容量がどんどん増えていくので注意が必要です。
応用(1)：管理人情報の表示
上記のメタ情報ボックスと同じ要領になりますが、アバター入りの管理人情報を表示しても面白いと思います。
管理画面「あなたのプロフィール」の「あなた自身について」に記入したプロフィールが表示されます。
表示したい場所に次のコードを記入します。
基本的に、divスタイルは、本文レイアウトのボックスを模せばいいと思います。
<div id="○○" class="○○">
<h3 class="○○">About the Author</h3>
<?php
echo '<img class="○○" src="/image/me.gif"';
?>
<h4><?php the_author_posts_link(); ?></h4>
<?php the_author_description(); ?>
</div>
echoでアバター画像を呼び出し、the_author_post_linkが、そのAuthorに属する記事のアーカイブ・リストを、the_author_descriptionが、プロフィールを呼び出します。
アバターは、アバターメーカー http://www.moeruavatar.com/でどうぞ。
（他にも似顔絵作成の無料サイトはたくさんあります。Googleで探してみて下さい）
特定のカテゴリーや記事グループにだけ共通する自由スペース、もしくはメッセージを表示すると、よりデザインの特化を図ることが出来ます。
たとえば、それぞれのカテゴリーに特化した広告を表示させたい場合、ad_movie.php、ad_travel.php、などを作成し、表示したい場所にinclude構文を挿入します。
$post = $wp_query->post;
if ( in_category('3') || in_category ('4') || in_category('5') ) {
include(TEMPLATEPATH . '/ad_movie.php');
} elseif ( in_category('10') || in_category ('11') ) {
include(TEMPLATEPATH . '/ad_travel.php');
} else {
include(TEMPLATEPATH . '/ad_common.php');
}
?>
さらに、映画のカテゴリーでも、SFに関する記事には「スターウォーズ」、ドラマに関する記事には「アカデミーアワード」にまつわる情報を表示したい場合、カスタムフィールドで情報を設定し、ad_movie.phpの中にget_post_metaタグを書き込めばOKです。
たとえば、SFすべての記事に共通の情報を表示したい場合。
表示したい場所に、get_post_meta
<?php if ( get_post_meta($post->ID, 'starwars', true) ) { ?>
スターウォーズ・アンソロジー DVD6枚組 30%割引中！
<?php } ?>
実例
個々の記事に、それぞれに異なる情報を表示したい場合は、
<?php echo get_post_meta($post->ID,'starwars',true); ?>
実例
この場合も、「名前」と「値」を表示していない記事については、何も表示されません。
さらに、同じポジションで、SFには「スターウォーズ」、ドラマには「アカデミー・アワード」の情報を流したい場合は、各記事のカスタムフィールドを「名前(starwars もしくは drama）」「値（true）と設定し、表示したい場所に get_post_meta を併記します。
すると、「starwars」で設定した記事には、上記の「スターウォーズ・アンソロジー」に関する情報が、ドラマには「アカデミアワード」の情報が表示されるようになります。
この要領で、広告バナーを貼ったり、動画や画像を挿入したり、お知らせを表示したり、いろいろ遊んでみて下さい。
（このテクニックは全てのテンプレートファイルで有効です）
inlude構文とカスタムフィールドが自由自在に使いこなせるようになったら、もうコワイモノなし。
カスタマイズの幅がぐんと広がって、ますます楽しくなりますので、いろいろチャレンジしてみて下さいね☆
Ads
Leave a Reply
