プログラマーだけどWordPressのテーマを1から作ってみる。（その3）

もうちょいでできそうだねー。

とりあえずコメント

twentyelevenのindex.phpにもcontent.phpにもcommentという単語は見当たらない。どこだ？と思ったら、個別ページではindex.phpではなくsingle.phpが読み込まれているらしい。

というわけでsingle.php内で検索するとあっさり発見。

wp-content/themes/twentyeleven/single.php #25

                    <?php comments_template( '', true ); ?>

この一行でコメント一覧と投稿フォームまで表示された。このHTMLはどこで記述してるんだろう？

というか、その前にsingle.phpとは？？

テンプレート階層

WordPressの最も強力な機能のひとつ、なんだと思う。

テンプレート階層 – WordPress Codex 日本語版

例えば投稿の個別ページであれば、single-post.phpがあればそれを、なければsingle.phpを、これもなければindex.phpを使って出力する、というふうになっている。

おおお、こりゃすごい。特定のページだけHTMLをがらっと変える事ができるわけですね。Ruby on Railsだったら「レイアウトを切り替える」てやつですなあ。

まあ今回はレイアウト（とHTML構造）は全ページ統一にするから、index.phpに集約した方が捗る気がするけどね。index.phpの中でis_single()とか使って分岐させるようにします。

一方jQueryプラグインのページなんかは別テンプレートで表示するようにしたら良さそうだな。覚えておこう。すげー便利そうだ。

改めてコメント

さてコメントは動くようになったけれど、これもどこかデフォルトがあって、それを読み込んでる感じだな。たしかget_head()とかもそうだった。

Function Reference/comments template « WordPress Codex

デフォルトはcomments.phpだが、なくても動く。どこかに持ってるんだろうな。twentyelevenがcomments.phpを持ってるから、そこまでは追わないでいいや。（だいぶ差があるみたいだけど。）

意外と長いので分割しながら見て行くことにする。

コメント欄の開始

wp-content/themes/twentyeleven/comments.php #15

    <div id="comments">

パスワードが必要か？

wp-content/themes/twentyeleven/comments.php #15

    <?php if ( post_password_required() ) : ?>
        <p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>
    </div><!-- #comments -->
    <?php
            /* Stop the rest of comments.php from being processed,
             * but don't kill the script entirely -- we still have
             * to fully load the template.
             */
            return;
        endif;
    ?>

    <?php // You can start editing here -- including this comment! ?>

投稿がパスワード保護されているものであれば、コメント欄も表示しない。メッセージを表示して、returnしている。returnだと！？

Stop the rest of comments.php from being processedという事なので、どうやらこのファイルからreturnできるらしい。ふむむ。PHPの機構だよね。知らなかった。

ここで</div>しちゃったりreturnしちゃったりってのは、プログラミング的にはちょっとアレかなとは思わないではないんだけれど、この場合はいっそこう書いちゃうのも悪くないかな。ううん、どうかな。

コメントの有無を確認

wp-content/themes/twentyeleven/comments.php #30

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

タイトル出力

wp-content/themes/twentyeleven/comments.php #31

        <h2 id="comments-title">
            <?php
                printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentyeleven' ),
                    number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
            ?>
        </h2>

Function Reference/ n « WordPress Codex

「n件のコメントがあります」ってやつ。_n()は数の数え方の国際化。コメントが1件なら'One thought on “%2$s”'、それ以上なら'%1$s thoughts on “%2$s”'になり、それぞれ翻訳されたものが返る、と。

ページネイション

wp-content/themes/twentyeleven/comments.php #38

        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
        <nav id="comment-nav-above">
            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
            <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
        </nav>
        <?php endif; // check for comment navigation ?>

数が多いと複数ページに分かれるのかな。

コメント一覧

さあいよいよ本丸です。content.phpみたいな感じできっと盛りだくさんだぞ！！

wp-content/themes/twentyeleven/comments.php #46

        <ol class="commentlist">
            <?php
                /* Loop through and list the comments. Tell wp_list_comments()
                 * to use twentyeleven_comment() to format the comments.
                 * If you want to overload this in a child theme then you can
                 * define twentyeleven_comment() and that will be used instead.
                 * See twentyeleven_comment() in twentyeleven/functions.php for more.
                 */
                wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );
            ?>
        </ol>

　　　　　　　　∧∧
　　　　 　　ヽ(･ω･)/　 　ｽﾞｺｰ
　　　　 　＼(.＼ ノ
　　　　､ﾊ,,､　￣
　　　　￣

Function Reference/wp list comments « WordPress Codex

滅茶苦茶簡単でした。

関数の引数にオプションを渡して細かく指定できるみたい。

<?php $args = array(
    'walker'            => null,
    'max_depth'         => ,
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => ,
    'per_page'          => ,
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  =>  ); ?>

デザインを変更する場合はコールバックで変更してやる感じらしい。Comments Only With A Custom Comment Displayの項にサンプルがある。

コールバック使わないと日付の書式が指定できないのは残念だけど、まあそのままでも良いかなあ。それともどこかにあったっけ？

というわけで、コメント一覧の表示はとても簡単でした。ぽえ〜ん。

ページネイション

上でやったのと、クラス名以外は同じみたい。

コメントがないとき

wp-content/themes/twentyeleven/comments.php #66

    <?php
        /* If there are no comments and comments are closed, let's leave a little note, shall we?
         * But we don't want the note on pages or post types that do not support comments.
         */
        elseif ( ! comments_open() && ! is_page() && post_type_supports( get_post_type(), 'comments' ) ) :
    ?>
        <p class="nocomments"><?php _e( 'Comments are closed.', 'twentyeleven' ); ?></p>
    <?php endif; ?>

さらにコメント欄が既に閉じられているかを確認して、閉じられているならそうメッセージを出力。

コメントフォーム

wp-content/themes/twentyeleven/comments.php #

    <?php comment_form(); ?>

これも一行か。

Function Reference/comment form « WordPress Codex

そしてまた、連想配列でいろいろ指定できるみたい。

fields
comment_field
must_log_in
logged_in_as
comment_notes_before
comment_notes_after
id_form
id_submit
title_reply
title_reply_to
cancel_reply_link
label_submit

fieldsで任意のフィールドを追加できるのか、と思ったけど説明がInput fields: ‘author’, ‘email’, ‘url’.との事なので、固定のものの表示を変える感じになるんだろう。試してないけど。ただcomment_form_default_fieldsというフィルターを通るみたいなので、そっちであれこれした方が簡単かもしれない。

まあ文言は多少変えたくても、他はだいたいそのまま使う感じでいいんじゃないかな。

コメント欄の終了

wp-content/themes/twentyeleven/comments.php #77

</div><!-- #comments -->

これで終わり。

あと、コメントは変な事しないでそのまま出力したい

別記事に。

WordPressのコメント欄をタグ禁止とかにする。

隣接記事

という呼び名でいいのかよくわからんのだけれど、「前の記事」「次の記事」ね。これもsingle.phpにあった。

wp-content/themes/twentyeleven/single.php #17

                    <nav id="nav-single">
                        <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
                        <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
                        <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
                    </nav><!-- #nav-single -->

第1引数は%linkがリンクに置換される。'[%link]'を指定すると、リンクの外側に括弧が付く。

第2引数は%titleが記事タイトルに置換される。'[%title]'を指定すると、リンクの内側に括弧が付く。

これでだいたいできたかな？

時間がないので今日はここまで。

明日は実際に組み立ててみよう。