記事の投稿ページに独自のカスタムフィールドを追加する方法です。

公式ドキュメントにサンプルコードがあるのでそちらを参考に手順を追ってみます。ただ、サンプルコードは古いバージョンのWordPressにも対応するようなコードになっているようです。個人的に使うだけの予定なので、古いバージョンは無視してWP2.7のみに対応する簡単なコードに書き換えます。

アクションフック

add_action('admin_menu', 'myplugin_add_custom_box');
add_action('save_post', 'myplugin_save_postdata');

add_action()でアクションフックの設定をします。admin_menuフックに実行したい関数名（例ではmyplugin_add_custom_box）を指定しています。admin_menuフックは「管理画面メニューの基本構造が配置されたあとに実行する」フックになります。

もうひとつは記事を保存したときに実行されるようにフックを設定します。ここで登録している関数myplugin_save_postdataは入力された値をデータベースに保存するための関数です。

次ではここで登録した関数の中身をチェックしていきます。

カスタムフィールドを登録

myplugin_add_custom_box()はカスタムフィールドを登録？するための独自関数です。この関数のなかではadd_meta_box()を使っています。この関数の中身はサンプルを書き換えています。

function myplugin_add_custom_box () {
  add_meta_box( 'myplugin_sectionid', 'My Post Section Title', 'myplugin_inner_custom_box', 'post', 'advanced' );
}

書式

add_meta_box('id', 'title', 'callback', 'page', 'context', 'priority')

パラメータ

id

生成されるフィールドはいくつかのdiv要素で囲まれることになりますが、この一番外側のdiv要素につけるid名のようです。複数のフィールドを追加するときは重複しない名前にしたほうがいいでしょう。

title

フィールドの名前。

callback

ページが出力されたら呼び出される関数。

page

どの編集ページに表示するかを指定します。"post"、"page"、"link"から選びます。記事投稿ページなので"post"。

context

編集ページのどの部分に表示するかの選択（？）。選べる値は"normal"、"advanced"、"side"。"normal"と"advanced"の差がわかりませんが、wysiwygエディタと同じブロックに表示するなら"advanced"、サイドバーは"side"を選択するといいようです。

priority

優先順位。フィールドが呼び出される順番かな？。

コールバック関数に指定したmyplugin_inner_custom_box()で実際に出力する内容を決めます。ようやくですね。

function myplugin_inner_custom_box() {
  global $post;
  echo '<input type="hidden" name="myplugin_noncename" id="myplugin_noncename" value="' .wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
  echo '<label for="myplugin_new_field">フィールド名</label> ';
  echo '<input type="text" name="myplugin_new_field" value="'.get_post_meta($post->ID,'myplugin_new_field',true).'" size="25" />';
} 

わかりやすいよう少し書き換え。隠しフィールドの行はよくわかりませんが、ファイル名を元にwp_create_nonce()でランダムな文字を作成し、フォームから正しく投稿された値かどうかを認証してるということでしょうか？この部分はつけていたほうが良さそうですね。

次にラベルとテキストフィールドを出力します。テキストフィールドのname属性がデータベースのフィールド名になるようです。初期値としてget_post_meta()でデータベースから値を取ってくるようになってます。

入力データの保存

function myplugin_save_postdata( $post_id ) {
  if ( !wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
  }
  if ( 'page' == $_POST['post_type'] ) {
    if ( !current_user_can( 'edit_page', $post_id )) return $post_id;
  } else {
    if ( !current_user_can( 'edit_post', $post_id )) return $post_id;
  }
    
  $mydata = $_POST['myplugin_new_field'];

  if (get_post_meta($post_id, $mydata) == "") 
    add_post_meta($post_id, 'myplugin_new_field', $mydata, true);
  elseif($mydata !=get_post_meta($post_id, 'myplugin_new_field', true)) 
    update_post_meta($post_id, 'myplugin_new_field',$mydata);
  elseif($mydata=="") 
    delete_post_meta($post_id, 'myplugin_new_field',get_post_meta($post_id,'myplugin_new_field',true));
 
}

ここでもよくわからない関数がいくつか出てきますが、これはまたわかったときに記事にしたいと思います。この関数は汎用的に使えそうなので"myplugin_new_field"の部分を変更すればほかでも使えそうですね。

これで一通り、カスタムフィールドを追加&保存する方法がわかりました。

トップページにおすすめの記事として特定のカテゴリの記事を表示するということはよくあります。今回はそれを実現してみます。

デフォルトではすべてのカテゴリから管理画面で指定した件数ぶんの記事を取り出すようになっているので、ループ中で特定のカテゴリだけに絞り込む必要があります。この場合、テンプレートタグのquery_posts()を使います。query_posts()はループ中で使い、クエリを変更することができます。

コードは次のようになります。

<?php if ( have_posts() ) : query_posts('cat=4'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>
<?php endif; ?>

これでカテゴリID「4」の記事タイトルをリンクつきで、管理画面で指定した件数ぶん表示します。これをテンプレート(index.php等)内の表示したい箇所に挿入します。

テンプレート内で表示件数を変えるときは引数showpostsに整数を指定します。

query_posts('showposts=5&cat=4')

実際には「特定カテゴリのトピックスを表示する」場合などに使えます。

トピックスを表示したら、その下にその他のカテゴリの記事を複数件ならべることもあると思います。この場合はカテゴリID「4」以外の記事ということになりますね。

新たにループをつくり次のコードを挿入します。

query_posts('showposts=10&cat=-4')

引数catの整数に「-（マイナス）」をつけると「それ以外」という意味になります。このループをquery_posts()なしで行うとトピックス部分と同じクエリになってしまうので注意が必要です。

query_posts()にはcategory__not_inという引数もあって同じことができます。この引数は配列です。category__not_inとほかの引数を同時に指定するには次のように書くと動きました。

query_posts('showposts=5&'.array('category__not_in' => array(4,10)))

最近のコメントを表示するテンプレートを作成します。

MovableTypeにはありますが、WordPressには「最近のコメント」を表示するタグや機能がありません。これはsimple_recent_commentsプラグインをインストールすれば簡単にできます。

単純にインストールしてもいいのですが、SQL文をつかったデータベースへのアクセス方法の勉強になりそうなので少しコードを追いながら仕組みを理解しようと思います。コードは以下。

<?php
       global $wpdb;
       $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
       comment_post_ID, comment_author, comment_date_gmt, comment_approved,
       comment_type,comment_author_url,
       SUBSTRING(comment_content,1,30) AS com_excerpt
       FROM $wpdb->comments
       LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
       $wpdb->posts.ID)
       WHERE comment_approved = '1' AND comment_type = '' AND
       post_password = ''
       ORDER BY comment_date_gmt DESC
       LIMIT 10";
       $comments = $wpdb->get_results($sql);
       $output .= "\n<ul>";
       foreach ($comments as $comment) {
       $output .= "\n<li>".strip_tags($comment->comment_author)
       .":" . "<a href=\"" . get_permalink($comment->ID) .
       "#comment-" . $comment->comment_ID . "\" title=\"on " .
       $comment->post_title . "\">" . strip_tags($comment->com_excerpt)
       ."</a></li>";
       }
       $output .= "\n</ul>";
       echo $output;
?>

それでは自分なりの理解の範囲で順にコードを調べていきます。PHPは勉強中なので間違っているところもあると思います。そのときは指摘ください。ちょっと長くなりそう・・・。

global $wpdb;

グローバル変数$wpdbを宣言します。これでデータベースへの接続準備ができるようです。データベース接続はwp-db.php内でwpdbクラスの形で定義されています。wpdbクラスはezSQLというPHPライブラリをもとに書かれているようなので興味のある方はそちらも参考にしてください。全部英語ですけど。

次はデータベースに接続するためのSQL文です。ほとんどやったことがないので少しずつ解決していきます。

SELECT文はデータを取り出すためにつかいます。基本の形は次のようになります。

SELECT <列名> FROM <テーブル名> [WHERE 検索条件];

これをベースに細かな条件を指定していくようです。

SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,

DISTINCT文は結果に重複した行があるとき、それを削除した結果を返してくれます。この場合はDESTINCT以下の列名の組み合わせで重複がないものを取り出します。

SUBSTRING(comment_content,1,30) AS com_excerpt

SUBSTRINGでcomment_content（コメントの本文）の1～30文字を抜き出します。それをcom_excerptという別名に名前を変更するという処理です。

FROM $wpdb->comments

$wpdb->commentsというテーブルからデータを取り出します。普通、コメントテーブル（wp_comments）からデータをとってくるなら

FROM wp_comments

と書きますが、$wpdb->commentsを実行するとwp_commentsという文字列が帰ってきてこれがテーブル名になります。詳しくは公式ドキュメント（下のほう）を参照してください。

Function Reference/wpdb Class « WordPress Codex

テーブル構造は以下に書いてあります。

Database Description/2.5 « WordPress Codex

 LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID)

ここではwp_commentsとwp_postsの2つのテーブルを結合しています。FROMで指定したwp_commentsテーブルをすべて参照してwp_postsテーブルと比べます。そのなかからcomment_post_IDとwp_postsテーブルのIDが等しいものを選んで結合するということらしいです。できあがったテーブル名は$wpdb->commentsで参照される文字列wp_commentsです。

WHERE comment_approved = '1' AND comment_type = '' AND
         post_password = ''
         ORDER BY comment_date_gmt DESC
         LIMIT 10";

さきほど結合したテーブルをさらに絞り込みます。comment_approved = "1"で認証されていて、且つcomment_typeが空、且つpost_passwordが空という条件を満たすものをコメント日時でソートして10件取り出すという処理になります。

SQL文ができたらget_results()でデータベースに問い合わせをします。

$comments = $wpdb->get_results($sql);

結果はオブジェクトで帰ってきます。$commentsをprint_r()で出力したらこうなります。

stdClass Object 
  (             
   [ID] => 記事のID
   [post_title] => 記事のタイトル
   [post_password] => 記事のパスワード
   [comment_ID] => コメントID
   [comment_post_ID] =>  コメントをつけた記事ID
   [comment_author] => コメントの投稿者名
   [comment_date_gmt] => コメントの投稿日時             
   [comment_approved] => コメントの状態              
   [comment_type] => コメントタイプ              
   [comment_author_url] => コメント投稿者のURL               
   [com_excerpt] => コメントの抜粋
  )

あとはforeachでまわして必要なデータを抜き出してHTMLに整形です。

SQLは難しいですね。

最近書いた記事をサイドバーなどに表示する方法を紹介します。

今回のポイントとなるテンプレートタグはquery_posts()です。このタグをつかうとループ内に表示する記事の表示件数を変えたり、特定のカテゴリに属する記事のみ抽出することができます。

最新X件の記事を表示

たとえば次のようにすると最新5件の記事タイトルを表示します。

<?php if ( have_posts() ) : 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>
<?php endif; ?>

query_posts()の引数はいろいろあるのでけっこう自由に絞込みができると思います。詳しくは以下のページで。

WordPress Codex 日本語版ドキュメント – query posts

カテゴリで絞り込む

次の例はカテゴリで絞り込むパターンです。たとえばカテゴリ2の記事を5件表示するには次のように書きます。

query_posts( ' showposts=5&cat=2 ' );

カテゴリ名でもいけます。「ウェブデザイン」というカテゴリがあったとすると・・・

query_posts( ' showposts=5&category_name=ウェブデザイン ' );

ただしカテゴリのスラッグを見ているようなので日本語表記とスラッグが異なっていると日本語で指定してもうまくできません。URLはできるだけ短くしたいほうなのでスラッグを短く設定してます。なので個人的にはカテゴリIDのほうが使いやすいですね。

指定件数だけスキップして表示

最新の記事をトップに表示して、それより古い記事を違うレイアウトで表示したいときに使える方法です。

query_posts( ' showposts=5&offset=1 ' );

ここまでで基本の機能をもったテーマをつくったので今回は必要になると思われる残りのテンプレートを作成しようと思います。

今回作ったのはこの5つ。

• 404.php
• category.php
• date.php
• page.php
• functions.php

“cateogry.php”、”date.php”、”page.php”の中身はindex.phpと同じなので内容は省略しておきます。404.phpの中身もページが見つからなかったときに表示するだけなので「ページが見つかりません。」とか表示するようにしておきます。functions.phpは独自の関数を定義するファイルですが、まだ勉強してないので空のままです。

それぞれのテンプレートはこれから必要になったときにデザインにあわせた編集をしていく予定です。

これでテーマに必要な一通りのテンプレートの作成はできたと思います。あとはカスタム関数を勉強して、デザインををつければ基本テンプレートのできあがり！ですね。

サイドバーに検索フォームを設置します。

今回の目標は次のようにします。

• 検索フォームをサイドバーに設置（searchform.php）
• 検索結果を表示するテンプレートを作成（search.php）

検索フォーム（searchform.php）

searchform.phpという名前で新規ファイルを作成しておきます。コードは以下。

<!--BEGIN #searchform-->
<div id="SearchForm">
  <form method="get" action="<?php bloginfo( 'url' ); ?>">
    <fieldset>
    <legend><label for="s">検索</label></legend>
    <p>
      <input name="s" id="s" type="text" value="keyword(s)" tabindex="1" />
      <input id="submit" type="submit" tabindex="2" />
    </p>
    </fieldset>
  </form>
</div>
<!--END form#searchform-->

Web標準を意識してコーディングしてみました。

ひとつめのinput要素のnameとid属性はかならず"s"でないと検索クエリが送信できないのでここは変更不可です。あまり関係ないことですが、送信ボタンにname属性をつけると検索時に

?s=キーワード&submit=実行

と無駄なクエリがついてしまうのでボタンのname属性はなしです。

検索結果テンプレート（search.php）

search.phpという名前で新規ファイルを作成します。コードは以下。

<?php get_header(); ?>
<div id="PageBody">
  <div id="Primary">
    <div id="PrimaryInner">
      <h1>検索結果</h1>
      <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
      ～ここに記事を表示するためのコード～
      <?php endwhile; ?> 
      <ul class="navigation">
        <li class="next-posts"><?php next_posts_link('Older Entries') ?></li>
        <li class="previous-posts"><?php previous_posts_link('Newer Entries') ?></li>
      </ul>
      <?php else: ?>

      ～キーワードに合った記事が見つからなかったときに表示する内容～
      <?php endif; ?>
    </div>
  </div>
<!-- END div#Primary -->
<?php get_sidebar(); ?>
</div>
<!-- END div#PageBody -->
<?php get_footer(); ?> 

基本的にindex.phpの記事表示部分とほぼ同じテンプレートになります。表示内容やデザインを変えるときはこのテンプレートを編集することになります。

シンプルすぎるのでいずれは変更します。いまのところはこのままいきます。

今回はこれまで作成したindex.phpファイルからヘッダー、フッター、サイドバーのテンプレートに分割しました。

• header.php
  htmlのhead要素とページのヘッダー部分を書いたテンプレート。
• sidebar.php
  サイドバーの内容を書いたテンプレート。
• footer.php
  ページのフッター部分。コピーライトとかはここです。
• index.php
  コンテンツ部分はこれになります。
  

header.php

どのあたりで切るかという問題になりましたが、htmlのhead要素とページタイトル（h1要素）を含むdiv#Headerまでを含めることにしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta http-equiv="Content-Style-Type" content="text/css" />
       <meta http-equiv="Content-Script-Type" content="text/javascript" />
       <title><?php bloginfo('name');?></title>
       <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet" type="text/css" />
       <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url');?>" />
       <link rel="alternate" type="application/atom+xml" title="Atom cite contents" href="<?php bloginfo('atom_url');?>" />
       <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
       <?php wp_head(); ?>
</head>
<body>
  <div id="Wrapper">
    <div id="WrapperInner">
      <div id="Header">
        <div id="HeaderInner">
          <h1> <a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a> </h1>
          <p> <?php bloginfo('description');?> </p>
        </div>
      </div>
      <!-- END div#Header -->
     

sidebar.php

サイドバーはきっちりdiv#Secondaryで分けました。

<div id="Secondary">
  <div id="SecondaryInner">
    <ul>
      <?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>
      <li> <h2>アーカイブ</h2>
        <ul>
          <?php wp_get_archives('type=monthly'); ?>
        </ul>
      </li>
      <li><h2>タグ</h2>
      <?php wp_tag_cloud('format=list')?></li>
    </ul>
  </div>
</div>
<!-- END div#Secondary -->
     

footer.php

フッターに表示する内容はまだ考えてないのでとりあえず、WPのバージョンとサイト名を表記しておくことにしました。

    <div id="Footer">
      <div id="FooterInner">
        <ul class="support">
          <li>Powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a></li>
          <li><a href="http://scianto.net/">PAOLOG</a></li>
        </ul>
      </div>
    </div>
    <!-- END div#Footer -->
  </div>
  <!-- END div#WrapperInner -->
</div>
<!-- END div#Wrapper -->
<?php wp_footer(); ?>
</body>
</html>

index.php

上のように各ブロックをテンプレートにわけたので、それぞれを読み込む場所に次のタグを挿入します。

• get_header()
  header.phpを読み込みます。
• get_sidebar()
  sidebar.phpを読み込みます。
• get_footer()
  footer.phpを読み込みます。

<?php get_header();?>
<div id="PageBody">
  <div id="Primary">
    <div id="PrimaryInner">
      <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
      <div class="entry">
        <div class="entry-header">
          <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
          <ul class="entry-meta">
            <li class="entry-meta-time"><em>投稿日時</em> <span><?php the_time('Y');?></span><span><?php the_time('m');?></span><span><?php the_time('d');?></span><span><?php the_time('g:i A');?></span></li>
            <li class="entry-meta-author"><em>投稿者</em> <?php the_author();?></li>
            <li class="entry-meta-category"><em>カテゴリ</em><?php the_category(); ?></li>
            <?php if (function_exists('the_tags')) : the_tags('<li class="entry-meta-tags">', ' | ', '</li>'); endif; ?> <?php edit_post_link('編集', '<li class="admin">', '</li>'); ?>
          </ul>
        </div>
        <div class="entry-body">
          <?php the_content(); ?>
        </div>
      </div>
      <?php comments_template('', true); ?>
      <?php endwhile; endif; ?>
    </div>
  </div>
  <!-- END div#Primary -->
  <?php get_sidebar(); ?>
</div>
<!-- END div#PageBody -->
<?php get_footer(); ?> 

コメントとトラックバックを分けて表示するようにテンプレートを改造します。

前回、コメントまわりのテンプレート（comments.php）を作成しました。WordPressではコメントとトラックバックが同じコメントとして扱われるのでwp_comments_list()を引数なしで使うと両方混ざって表示されてしまうようです。

しかもほかのブログには必ずあるはずのトラックバックURLもデフォルトでは表示されません。これはちょっと気持ち悪いのでコメントとトラックバックを分けて表示し、トラックバックURLも表示するようにします。

ピンバックというのもありますが、今回はトラックバックと同様に扱うことにします。

まずはコメントがあるかどうかで分岐します。

<?php if ( have_comments() ) : ?>

内部の変数$comments_by_typeは連想配列で、グローバル変数$commentsのcomment_typeの値を持っているようです。comment.phpのseparate_comments関数で定義されているのでそちらを参照してください。以下はcomment_typeが ‘comment’ だったらというif文。

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

もっていたらコメントのリストを表示します。wp_list_comments()にはいろいろなパラメータがありますが、そのなかの「type」を使うとリストをコメントとトラックバック別々に表示することができるようです。typeがとる値は ‘all’, ‘comment’, ‘trackback’, ‘pingback’, ‘pings’ です。’pings’ は ‘trackback’ と ‘pingback’ をあわせたものです。デフォルトは ‘all’ です。 たとえば、コメントだけのリストを作るときは次のようにします。

<ol>
 <?php wp_list_comments('type=comment'); ?>
</ol>

コメントがないときは、「コメントはありません。」と表示。

<?php else: ?>
<p>コメントはありません。</p>
<?php endif; ?>

同じようにトラックバックとピンバックのときは次のように。

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="Trackbacks">Trackbacks/Pinbacks</h3>
<ol>
<?php wp_list_comments('type=trackback'); ?>
</ol>
<?php else: ?>
<p>トラックバック/ピンバックはありません。</p>
<?php endif; ?>

次にリストをページ分割するときのリンクをつくります。前後のリンクはulリストにしたいので、分割したページがあると時だけ表示するようにします。

<?php if (previous_comments_link() || next_comments_link() ) : ?>
<ul class="navigation">
  <li class="previous-comments"><?php previous_comments_link() ?></li>
  <li class="next-comments"><?php next_comments_link() ?></li>
</ul>
<?php endif; ?>

あとは、はじめの分岐「コメント（トラックバック、ピンバックのいずれか）がないときの表示。

<?php else : // this is displayed if there are no comments so far ?>

         <?php if ( comments_open() ): ?>

  <!-- If comments are open, but there are no comments. -->

  <?php else: ?>

  <!-- If comments are closed. -->

  <p class="nocomments">この記事はコメント、トラックバックおよびピンバックを受け付けていません。</p>

  <?php endif; ?>
<?php endif; ?>

これでいいと思うのですが、if文のところは次のようにしたほうがいいかなと思ったりして・・・。

<?php if ( comments_open() || pings_open() ) : ?>

以上をまとめたのが以下。

<?php if ( have_comments() ) : ?>
  <?php if ( ! empty($comments_by_type['comment']) ) : ?>
  <h3 id="Comments"><?php comments_number('comment', '1 comment', '% comments' );?></h3>
  <ol>
   <?php wp_list_comments('type=comment'); ?>
  </ol>
  <?php else: ?>
  <p>コメントはありません。</p>
  <?php endif; ?>

  <?php if ( ! empty($comments_by_type['pings']) ) : ?>
  <h3 id="Trackbacks">Trackbacks/Pinbacks</h3>
  <ol>
  <?php wp_list_comments('type=trackback'); ?>
  </ol>
  <?php else: ?>
  <p>トラックバック/ピンバックはありません。</p>
  <?php endif; ?>
  <?php if (previous_comments_link() || next_comments_link() ) : ?>
  <ul class="navigation">
  <li class="previous-comments"><?php previous_comments_link() ?></li>
  <li class="next-comments"><?php next_comments_link() ?></li>
  </ul>
  <?php endif; ?>
<?php else : // this is displayed if there are no comments so far ?>
  <?php if ( comments_open() ): ?>
  <!-- If comments are open, but there are no comments. -->
  <?php else: ?>
  <!-- If comments are closed. -->
  <p class="nocomments">この記事はコメント、トラックバックおよびピンバックを受け付けていません。</p>
  <?php endif; ?>
<?php endif; ?>

シングルページ（記事の個別ページ）にコメントフォームとその記事に投稿されたコメントの一覧を表示するようにテンプレートをつくってみます。

デフォルトテンプレートをみてもコメントの部分はけっこう複雑なのでindex.phpだけではつらいです。なのでテンプレートを分けます。

「comments.php」という名前で新規ファイルを作成。これにタグを書いていきます。index.php側でこのテンプレートを読み込むには次の構文を記事のループの中に書きます。

<?php comments_template(); ?>

さらに、次の文をhead要素内に書きます。

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

コメント返信用のJavascriptを挿入するための記述です。wp_head()関数があるときはその前に挿入します。

それではcomments.phpの作成に入ります。参考にするのはドキュメントの次のページ。

Migrating Plugins and Themes to 2.7/Enhanced Comment Display – WordPress Codex 日本語版

2.7から追加されたタグを使ったテンプレートの書き方が紹介されています。それを参考にまずは大まかにテンプレートの構成を作ってみました。

//この部分は削除しない

if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
  die ('このページには直接アクセスできません。');
if ( post_password_required() ) {
  echo '<p class="nocomments">この投稿はパスワードで保護されています。コメントを閲覧するにはパスワードを入力してください。<p>';
  return;
}
//ここまでは削除しない
//ここから編集
<?php if ( have_comments() ) : ?>
  (1)コメントがあるときに表示する内容はここに書く
<?php else :>
  //コメントがひとつもないときに表示する内容はここに書く
  <?php if ('open' == $post->comment_status) : ?>
    (2)コメントを受け付ける設定になっているがコメントがないときに表示する内容をここに書く
    <?php else : ?> 
    (3)コメントを受け付けない設定のときに表示する内容をここに書く
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
(4) コメントフォームのテンプレートタグはここ
<?php endif; ?>

冒頭の部分はデフォルトを参考。「消さないでね」とあるのでそのままコピペです。comments.phpに直接アクセスできないようにするため（？）と記事がパスワードでロックされているかをチェックしているようです。個人的にはロックすることはないので必要ないかも・・・ですが・・・ロックの意味がよくわかりません。なのでこれはそのままスルー。

1.コメントがあるとき

if (have_comments() ): ?>

まずはhave_comments()でコメントがあるかどうかを判定します。コメントがあれば投稿されたコメントを表示します。コメントの表示にはwp_list_comments()を使います。

<ol>
  <?php wp_list_comments(); ?>
</ol>

デフォルトの設定ではリスト形式で出力されます。このタグのまわりをol要素やul要素で囲むことを忘れずに。特定のコメントに対するコメントがあると入れ子のリストで表示されます。

2. コメントを受けつける設定でコメントがないとき

記事にコメントがあるかどうかはグローバル変数の$postにアクセスして調べているようです。

<?php if ( 'open' == $post->comment_status ) : ?>

$postは記事の情報を持っている配列で、「comment_status」もそのひとつ。コメントを受け付ける設定になっているかどうかを表しています。受け付ける設定なら「open」になっています。

ひとつもコメントがないときは「コメントはありません」と表示するようにします。

#15<?php if ( 'open' == $post->comment_status ) : ?>

<p>コメントはありません。</p>

3. コメントを受け付けない設定のとき

このときは単純になにも表示しないか、「コメントは受け付けていません」とか表示するのがいいかと思います。

#17<?php else : ?>
<p>コメントは受け付けていません</p>

4. コメントフォームをつくる

コメントフォームはコメントを受け付ける設定のときに常に表示したいので、if文を追加します。

<div id="respond">
  <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    <input type="hidden" value="<?php echo $id; ?>" />
   	<?php comment_id_fields(); ?>
    <?php if ( $user_ID ) : ?>
    <p><a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>としてログインしています。ほかのユーザーIDでコメントするときは<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">ログアウト &raquo;</a>してください。</p>
    <?php else : ?>
    <dl>
      <dt> <label for="author">名前 <span><?php if ($req) _e('(required)'); ?></span></label></dt>
      <dd> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> </dd>
      <dt> <label for="email">メール<span><?php if ($req) _e('(required)'); ?></span></label> </dt>
      <dd> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> </dd>
      <dt> <label for="url">Webサイト</label> </dt>
      <dd> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> </dd>
   </dl>
   <?php endif; // Check for $user_ID ?>
   <p>次のタグを使うことができます: <?php echo allowed_tags(); ?></p>
   <dl>
     <dt> <label for="comment">コメント</label></dt>
     <dd> <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea> </dd>
   </dl>
   <ul>
     <li> <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> </li>
   </ul>
   <div id="cancel-comment-reply">
     <p><?php cancel_comment_reply_link() ?></p>
   </div>
   <?php do_action('comment_form', $post->ID); ?>
  </form>
</div>

ここは長いのでポイントだけ。

div#respond

コメントフォーム全体をid属性respondを指定したdiv要素で囲みます。これはコメントをスレッド（入れ子）形式にする場合は必須だと思います。

<?php comment_id_fields(); ?>

フォームの隠し属性を追加してくれます。これもスレッド形式のときは必須かも。出力される内容は以下のようなものです。

<input type='hidden' name='comment_post_ID' value='10' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />

<?php cancel_comment_reply_link() ?>

返信コメントの入力をキャンセルするためのリンクを表示するための関数です。

とりあえず完成

ひとまず形になりましたが、ちょっと変更したいところもあります。WordPressではコメントやトラックバック、そしてピンバックというものをまとめてコメントとして扱っているのでMTからの移籍組としてはちょっと理解できません。

ということで次回はこれらをわけて表示できるように修正しようと思います。

今回は2カラムを想定してサイドバーをつけてみたいと思います。

まずは簡単に次のものをつけてみます。

• カテゴリ一覧
• タグクラウド
• （月別）アーカイブ

カテゴリ一覧

カテゴリを取得するにはwp_list_categories()タグを使います。

<?php wp_list_categories(); ?>

引数に何も指定しないときは次のように出力されます。

<li class="categories">Categories
  <ul>
    <li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>
    <li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>
</ul>
</li>

wp_list_categories()タグの詳しい説明はドキュメントをご覧ください。
テンプレートタグ/wp list categories – WordPress Codex 日本語版

これはウィジェットで使うことが前提の出力です。テンプレートを公開するときなどはウィジェット対応のほうがいいと思いますが、そうでなければ独自スタイルにしたいですね。

title_liパラメータでリストのタイトル（この場合は「Categories」）表示を変えることができますが、これを空にするとリスト項目以外の出力はされなくなります。

<?php wp_list_categories(’title_li=’); ?>

出力はこのようになります。

<li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li> 
<li class="cat-item cat-item-ID"> <a href="カテゴリページへのリンク" title="カテゴリ概要">カテゴリ名</a> </li>

この場合、自分で外側に<ul></ul>をつけないといけないのでわすれないようにしましょう。

今回はタイトルのマークアップを変更し、カテゴリごとの記事数を表示することにします。

<?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>

アーカイブ（月別）

アーカイブを出力するにはwp_get_archives()タグを使います。月別のアーカイブの場合は次のようにします。

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

テンプレートタグ/wp get archives – WordPress Codex 日本語版

デフォルトで月別アーカイブを表示するようになっているので引数がなくてもOKです。ただ、カテゴリと違ってリストのタイトルは表示されないので自分で追加します。

<li><h2>アーカイブ</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>

タグクラウド

wp_tag_cloud()タグを使って記事につけられたタグの一覧を表示します。

<?php wp_tag_cloud()?>

テンプレートタグ/wp tag cloud – WordPress Codex 日本語版

デフォルトではホワイトスペースで区切られただけになってしまうので引数をformat=listとしてulリストとして表示します。タグクラウドではulがつくようです。

カテゴリやアーカイブ、そしてタグクラウドと出力がまちまちなのがちょっと気に入らないです。今回は次のようにしました。

<li><h2>タグ</h2><?php wp_tag_cloud('format=list')?></li>

まとめ

ここまでやったコードをまとめると次のようになります。次回はテンプレートを増やしてみようと思います。

 <ul>
 <?php wp_list_categories('show_count=1&title_li=<h2>カテゴリ</h2>'); ?>
 <li><h2>アーカイブ</h2><ul><?php wp_get_archives('type=monthly'); ?></ul></li>
 <li><h2>タグ</h2><?php wp_tag_cloud('format=list')?></li>
 </ul>