WordPressのTwenty TwelveにZenbackを導入してみる

新テーマ作成からのお裾分け第一弾。

Zenbackを導入するときに前に書いたエントリだとTwenty Twelveのテーマでは編集する場所がわかりにくかったので改めて書いてみます。一応Twenty Ten, Twenty Elevenもソースを読む限り互換性があります。

なお、公開されているテーマを編集する場合、そのテーマの更新時に自分が行った編集が上書きされてしまうので注意が必要です。 試していませんがEZ zenback というZenbackを導入するプラグインもあるようなのでテーマを編集したくない人はこっちを使うのがよいでしょう。自分は自作のテーマを書いており、パフォーマンスの都合でなるべくプラグインの数を減らしたいと思っているのでそのままテーマを編集しています。

Zenbackをコメント欄に追加する

Twenty Ten, Twenty Eleven, Twenty Twelveのいずれもcomments.phpの先頭に入れてしまいます。

<?php if (!is_preview() && comments_open() && (is_single() || is_page())):?>
<aside id="post-zenback">
<!-- X:S ZenBackWidget -->...<!-- X:E ZenBackWidget -->
</aside>
<?php endif ?>

<div id="comments">

…のところはサイトによって違うのでZenbackの管理ページにアクセスしてZenbackで取得したコードを追加してください。

前回からの変更点として分岐にcomments_open()を追加しました。Aboutページのような固定ページではZenbackを表示したくなかったのでコメント欄の凍結によってZenbackも制御することにしました。aside#post-zebackはレイアウト調整でcssを適応させるために入れています。

comments.phpを編集しない方法でZenbackをコメント欄に追加する

Twnety *系のテンプレートはcomments.phpファイルがあるのですが、幾つかのテーマではcomments.phpがないものあるようです。comments.phpを修正しない対応もあります。single.phpのcomments_template()を呼び出しているところにコメント欄が表示されるのでその前に追加します。comments.phpファイルでの対応がうまくいかない場合はこちらも試してみてください。

<?php if (!is_preview() && comments_open() && (is_single() || is_page())):?>
<aside id="post-zenback">
<!-- X:S ZenBackWidget -->...<!-- X:E ZenBackWidget -->
</aside>
<?php endif ?>

                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>

Zenbackに解析させるエントリ箇所を囲む

Zenbackは記事の内容を解析して似たようなエントリを表示してくれます。そのためには投稿の本文をどこから始まって、どこで終わるのかを指定してあげなければいけません。WordPressの場合は the_content を囲めば良いのですが、この指定方法がTwenty *系のテーマで single.phpに the_content が記載されておらず代わりに別のテンプレートファイルが参照されています。

// Twnety Tenの場合
get_template_part( 'loop', 'single' );
// Twenty Eleven の場合
<?php get_template_part( 'content', 'single' ); ?>
// Twenty Twelveの場合
<?php get_template_part( 'content', get_post_format() ); ?>

この場合、編集するテンプレートファイルはそれぞれ以下のようになります。

テーマ 個別投稿のページ 固定ページ
Twenty Ten loop-single.php loop-page.php
Twenty Eleven content-single.php content-page.php
Twenty Twelve content.php content-page.php

個別投稿のページではget_post_format()は空文字が帰ってくるのでTwenty Twelveではcontent.phpが使われるようです。
上記の編集するテーマファイルにはthe_contentが呼び出されているので以下のように前後の行を追加してください。

<!-- zenback_body_begin -->
<?php the_content(...); ?>
<!-- zenback_body_end -->
<!-- zenback_date <?php echo get_post_time('Y-m-d') ?> -->

記事タイトルの認識をあげる

記事タイトルの認識をあげるために投稿のタイトル部分も囲います。先ほどthe_contentを編集したファイルで以下のようにthe_titleの前後の行を追加してください。

<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- zenback_title_end -->

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。