【テーマ作成 その⑤】からのつづきです。
今回はテーマを構成するテンプレート（single.php や page.php など）を作っていきます。
index.php をコピーして single, page を作成
index.php だけだとちょっと困るんで、投稿用のテンプレートファイルである single.php、ページ用のテンプレートファイルの page.php を作ります。
最初のコメントだけ書き変えてコピー→リネーム。
<?php
/**
* 投稿のテンプレートファイル
*
* @package WordPress
* @subpackage Hoho
*/
get_header(); ?>
<div class="wrapper clearfix">
<div class="main clearfix">
<?php
// content.php を読み込む
get_template_part( 'content' ); ?>
</div>
<!-- #main -->
<?php get_sidebar(); ?>
</div>
<!-- #wrapper -->
<?php get_footer(); ?>
<?php
/**
* 固定ページのテンプレートファイル
*
* 固定ページを表示するデフォルトのテンプレート
*
* @package WordPress
* @subpackage Hoho
*/
get_header(); ?>
<div class="wrapper clearfix">
<div class="main clearfix">
<?php
// content.php を読み込む
get_template_part( 'content' ); ?>
</div>
<!-- #main -->
<?php get_sidebar(); ?>
</div>
<!-- #wrapper -->
<?php get_footer(); ?>
これで投稿・ページ用のテンプレートファイルが作成されました。簡単。
抜粋と全文を出し分ける
前々回 index.php を作成した後、ループ処理をテンプレート化しました。
その時は抜粋表示だけさせる the_excerpt を使いましたけども、今の段階だと投稿テンプレートやページテンプレートでも抜粋になってしまってます。
これね
このままじゃよろしくないんで、single, page で表示を出し分けましょう。
WordPress で使えるテンプレートタグ、ってやつです。
この is_***** って関数は全て、判別するための関数なんですよ、べんり！
is_singular は、is_single + is_page + is_attatchment 、つまり投稿とページと添付ファイルのテンプレートな時を判別してくれるやつです。
これを前々回作成した content.php に実装します。
振り分けを実装する
content.php を編集。
※ソースコードを貼ってるところの先頭行に -が付いてるのは削除行、+が付いてるのは追加行になります。
--- a/content.php
+++ b/content.php
@@ -24,7 +24,11 @@
</header>
<section>
- <?php the_excerpt(); // 記事の抜粋を表示 ?>
+ <?php if ( is_singular() ) : ?>
+ <?php the_content(); // 記事を表示 ?>
+ <?php else: ?>
+ <?php the_excerpt(); // 記事の抜粋を表示 ?>
+ <?php endif; ?>
</section>
<footer>
これで振り分けができましたー。
comments.php は必須です。
必須だよ、ということです。
コメントのテンプレートで必要なのは、
- コメントを送信するフォーム
- コメントがあればループで表示
です。
フォームは一番簡単な方法で作ります。
その方法は、WordPressで標準搭載されているコメントフォームを呼び出してあげる、です。
フォームを呼び出す
Codex の comment_form に詳しく書いてありますね。
コメントはプラグインを使ってるブログがおそらく大多数だと思うんで、詳細は省いてあっさりいきます。
<?php
/**
* コメントを表示するためのテンプレート
*
* コメント・コメントフォームの両方が含まれる。
*
* @package WordPress
* @subpackage Hoho
*/
?>
<?php comment_form(); // コメントフォームを呼び出す ?>
コメントをループで表示する
このままだとフォームしか出ず、コメントを書いても表示されません。
コメントを表示させるループを実装しましょう。
コメントはプラグインを使ってるブログがおそらく大多数だと思うんで、詳細は省 (ry
Codex の Enhanced Comment Display を参考に。
<?php
/**
* コメントを表示するためのテンプレート
*
* コメント・コメントフォームの両方が含まれる。
*
* @package WordPress
* @subpackage Hoho
*/
?>
<div id="comments" class="comments">
<?php
// パスワード保護機能のサポート
if ( post_password_required() ) {
echo '<p class="no-comments">この投稿はパスワードで保護されています。コメントを表示するには、パスワードを入力して下さい。</p>';
return;
}
?>
<?php if ( have_comments() ) : // コメントがある ?>
<h4 id="comment-title">
<?php comments_number(); ?>
</h4>
<ul class="comment-list">
<?php wp_list_comments(); ?>
</ul>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link(); ?></div>
<div class="alignright"><?php next_comments_link(); ?></div>
</div>
<?php else : // コメントがない ?>
<?php if ( comments_open() ) : // コメントは公開状態だけどコメントがない ?>
<p>コメントはまだありません。</p>
<?php else : // コメント閉鎖中 ?>
<p>コメントは閉鎖されています。</p>
<?php endif; ?>
<?php endif; ?>
</div>
<?php comment_form(); // コメントフォームを呼び出す ?>
こんな感じで。
comment のループは Codex の have_comments あたりを参照。
コメント欄をカスタマイズしたいなら wp_list_comments あたりも見とくといいはず。
コメント返信用のスクリプトを header で enqueue する
コメントフォームを実装したら、コメント返信用のスクリプトを呼び出す必要があります。
別になくてもいいのですが、ない場合、返信ボタンを押すとページ遷移処理から返信への処理をしてしまうので、あったほうがいいやつです。
今まで出てきていない関数、wp_enqueue を使います。
この先詳しくやるんで今は言われるがまま header.php に記述。
--- a/header.php
+++ b/header.php
@@ -31,6 +31,7 @@
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+ <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
page, single.php で comments.php を呼び出す
コメントのテンプレートファイルはもちろん、作っただけじゃ呼び出されませんので、呼び出してあげます。
呼び出す関数は comments_template 。
引数でファイル名やコメントの種類を分けるかどうかを指定できたりします。
--- a/content.php
+++ b/content.php
@@ -40,3 +40,5 @@
<?php endwhile; ?>
<?php endif; ?>
+
+<?php comments_template(); ?>
ついでに投稿へのリンクを content.php に追加
これまではサイトのトップ画面から各投稿に飛べなかったので、飛べるようにリンクをつける。
--- a/content.php
+++ b/content.php
@@ -15,7 +15,11 @@
<article <?php post_class(); ?>>
<header>
- <h1><?php the_title(); ?></h1>
+ <h1>
+ <a href="<?php the_permalink(); ?>">
+ <?php the_title(); ?>
+ </a>
+ </h1>
<time><?php the_time( 'Y.n.j' ); ?></time>
これでやっと各投稿・コメントを見られるようになりましたー。
こんな
だいぶ形ができあがってきたのでいい感じです。
まだまだやることは山ほどありますが、次は2回目のテーマチェックとともに、functions.php を触っていきます。
ここまでのzipがこちら、今までの履歴は Github でも辿れます。
