¦ページ末尾 ¦

WordPressのテーマ(テンプレート)をゼロから作成する方法(3)

Date:2009.10.07

Author:イノマタ

Category:WordPress

Tag:, ,

WordPressのテーマ(テンプレート)をゼロから作成する方法(3)

前回のおさらい。

  1. サイドバー（sidebar.php）を作成する
  2. 検索フォーム searchfrom.php を作成する
  3. Blog の単一記事を表示する single.php を作成する

前回は途中で力つきてしまったので、今日は最後まで一気に紹介します。

手順11：コメント表示用のテンプレートを functions.php で指定する

これから作成する functions.php というのは WordPress ではオプションの関数ファイルです。

テーマ関数ファイル:テーマでは、オプションとして、テーマのサブディレクトリ内に functions.php というファイル名で「関数ファイル」を置くことができます。このファイルは基本的にプラグインのような動作をし、現在使っているテーマ内に存在していれば、自動的に WordPress の初期化中に読み込まれます（管理パネルとサイト表示の両方で）。
（WordPress Codex 日本語版 より引用）

投稿されたコメントを表示するときは、

1
wp_list_comments()

というコメント表示用のテンプレートタグを書くだけで充分なのですが、このままだとデザインはデフォルトのままになってしまいますので、

1
mytheme_comments

という関数名を使って、オリジナルのコメント表示用テンプレートを作成したいと思います。

コメント表示用テンプレート（functions.php）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
function mytheme_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li>
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php printf(__(‘<cite>%s</cite> <span class="says">says:</span>’), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == ’0′) : ?>
<em><?php _e(‘Your comment is awaiting moderation.’) ?></em>
<br />
<?php endif; ?>
<?php comment_text() ?>
<div class="comment_meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__(‘%1$s at %2$s’), get_comment_date(), get_comment_time()) ?></a>
<?php edit_comment_link(__(‘Edit’),’ ‘,”) ?>
<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘reply_text’ => ‘返信’, ‘before’ => ‘ | ‘, ‘after’ => ‘ | ‘) ) ); ?>
</div>
</div>
<?php
}
?>

このように functions.php を作成します。

1
function mytheme_comments ...

と始めに書いていますが、これが関数の名前です。

その他の細かい設定についてですが…

1
comment_reply_link

は、コメントに対する返信リンクを表示するためのテンプレートタグです。

投稿されたコメントに対する返信リンク:

1
<?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘reply_text’ => ‘返信’, ‘before’ => ‘ | ‘, ‘after’ => ‘ | ‘) ) ); ?>

※コメントへの返信リンク (

1
comment_reply_link

) を使用したい場合は、「設定」>「ディスカッション設定」で「コメントを xx 階層までのスレッド (入れ子) 形式にする」にチェックを入れる必要があります。

コメントが許可されていないとき:

1
2
3
4
<?php if ($comment->comment_approved == ’0′) : ?>
<em><?php _e(‘Your comment is awaiting moderation.’) ?></em>
<br />
<?php endif; ?>

投稿したコメントが未承認のときの表示です。（投稿者だけに表示します）

functions.php に設定した mytheme_comments は、

1
<li>

ではじまっているのに、どこにも

1
</li>

がないことに気がつくと思います。
しかし、WordPress では子要素を追加した後に

1
</li>

は自動で追加されますので、ここでは

1
</li>

の指定は必要ありません。

手順12：記事へのコメントフォームテンプレート comments.php を作成する

comments.php については、面倒だったので 便利だったので defaultテンプレートから、comments.php を拝借してほぼそのまま使ってしまいました。

手を加えたのは、さきほど作成した functions.php から

1
mytheme_comments

関数を呼び出す箇所だけで、あとはほとんど変更してません。
（いずれはここもしっかり作成しないと… と思いつつ、どうせコメント少ないしなぁ〜。という思いとで葛藤）

comments.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php // Do not delete these lines
if (isset($_SERVER['SCRIPT_FILENAME']) && ‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
die (‘Please do not load this page directly. Thanks!’);

if ( post_password_required() ) { ?>
<p class="nocomments"><?php _e(‘This post is password protected. Enter the password to view comments.’; ?></p>
<?php
return;
}
?>

<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number(‘コメント/トラックバックはありません’, ’1件のコメント/トラックバックがあります’, ‘コメント/トラックバックが %件あります’);?></h3>
// 投稿されたコメント・トラックバックの件数に応じてタイトルを変更しています

<ol class="commentlist">
<?php wp_list_comments(‘callback=mytheme_comments’);?>
// ここで、さきほど設定した mytheme_comments を呼び出しています
</ol>

<?php endif; ?>

// ここより以下は、コメント投稿用の記述になります
<?php if (‘open’ == $post->comment_status) : ?>

<div id="respond">

<h3>この記事へのコメント</h3>

<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>
// 投稿コメントへの「返信」を行ったときの、返信キャンセル用リンクです

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p><?php printf(__(‘You must be <a href="%s">logged in</a> to post a comment.’), get_option(‘siteurl’) . ‘/wp-login.php?redirect_to=’ . urlencode(get_permalink())); ?></p>
<?php else : ?>

// ここより、コメント投稿フォームになります
<form action="<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p><?php printf(__(‘Logged in as <a href="%1$s">%2$s</a>.’), get_option(‘siteurl’) . ‘/wp-admin/profile.php’, $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e(‘Log out of this account’); ?>"><?php _e(‘Log out &raquo;’); ?></a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required=’true’"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(必須)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required=’true’"; ?> />
<label for="email"><small>Mail (非公開) <?php if ($req) echo "(必須)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!–<p><small><?php printf(__(‘<strong>XHTML:</strong> You can use these tags: <code>%s</code>’), allowed_tags()); ?></small></p>–>

<textarea name="comment" id="comment" cols="60" rows="6" tabindex="4"></textarea>

<input name="submit" type="submit" id="submit" tabindex="5" value="コメントを投稿する" />
<?php comment_id_fields(); ?>

<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; ?>
</div>

<?php endif; ?>

こんな感じです。

コメントの数に応じたタイトルを表示:

1
2
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number(‘コメント/トラックバックはありません’, ’1件のコメント/トラックバックがあります’, ‘コメント/トラックバックが %件あります’);?></h3>

投稿されたコメント・トラックバック数に応じてタイトルを変更させる場合は、以下のように設定しておきます。

1
<?php comments_number('投稿がない場合', '投稿が 1件 あったとき', '投稿が n件以上あったとき');?>

このように表示されます。

投稿されたコメントをリスト表示する:

1
2
3
<ol class="commentlist">
<?php wp_list_comments(‘callback=mytheme_comments’);?>
</ol>

さきほど functions.php に作成したコメント表示用テンプレート（関数名：mytheme_comments）を

1
wp_list_comments('callback=mytheme_comments')

で呼び出します。

【ここまでのテーマフォルダの内容】
  • comments.php
  • functions.php
  • single.php
  • searchform.php
  • sidebar.php
  • index.php
  • page.php
  • blog
  • top.php
  • header.php
  • footer.php
  • style.css
  • img フォルダ
  • css フォルダ

手順13：アーカイブ用ページのテンプレート archive.php を作成する

記事を月別、カテゴリ別、タグ別に表示したときのアーカイブ用テンプレートを作成します。

archive.php アーカイブ用テンプレート:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php get_header(); ?>

<div id="blog" class="clearfix">

<div id="blog_main">
<?php if (have_posts()) : ?>

<?php $post = $posts[0]; ?>
<?php if (is_category()) { ?>
<h2 class="pagetitle"><?php printf(__(‘Archive for the &#8216;%s&#8217; Category’), single_cat_title(”, false)); ?></h2>
<?php } elseif( is_tag() ) { ?>
<h2 class="pagetitle"><?php printf(__(‘Posts Tagged &#8216;%s&#8217;’), single_tag_title(”, false) ); ?></h2>
<?php } elseif (is_month()) { ?>
<h2 class="pagetitle"><?php printf(_c(‘Archive for %s|Monthly archive page’), get_the_time(__(‘F, Y’))); ?></h2>
<?php } ?>
// いま、どのアーカイブを表示しているかを判断して、マッチしたタイトルを表示

<?php while (have_posts()) : the_post(); ?>

<h3 class="archive"><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h3>
<p class="post_date"><?php the_date(‘Y-m-d’); ?> Posted by <?php the_author(); ?></p>

<div class="entry">
<?php the_content(); ?>
</div>

<div class="cat_tag clearfix">
<p class="cat">カテゴリー: <?php the_category(‘, ‘); ?></p>
<?php if (get_the_tags()) the_tags(‘<p class="tag">タグ: ‘, ‘, ‘, ‘</p>’); ?>
</div>

<?php endwhile; ?>

<div class="archive_navigation">
<?php posts_nav_link(‘ | ‘,’前のページ’,'次のページ’); ?>
</div>

<?php else : ?>

<div class="entry">
<h2><?php echo "見つかりませんでした"; ?></h2>
<p class="caution"><br /><?php echo "お探しの記事、ページは見つかりませんでした。"; ?><br /><br /></p>

<p><a href="<?php bloginfo(‘url’); ?>/blog/">Blog Topに戻る</a></p>
</div>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

大部分は index.php とさほど変わりありません。
ひとつだけ大きく違うのは、どのアーカイブを差しているかを表示している箇所です。

表示しているアーカイブのタイトル:

1
2
3
4
5
6
7
8
<?php $post = $posts[0]; ?>
<?php if (is_category()) { ?>
<h2 class="pagetitle"><?php printf(__(‘Archive for the &#8216;%s&#8217; Category’), single_cat_title(”, false)); ?></h2>
<?php } elseif( is_tag() ) { ?>
<h2 class="pagetitle"><?php printf(__(‘Posts Tagged &#8216;%s&#8217;’), single_tag_title(”, false) ); ?></h2>
<?php } elseif (is_month()) { ?>
<h2 class="pagetitle"><?php printf(_c(‘Archive for %s|Monthly archive page’), get_the_time(__(‘F, Y’))); ?></h2>
<?php } ?>

条件分岐タグを使用して、表示させるタイトルを変えています。

1
is_category()
… 「カテゴリー」のアーカイブページが表示されている場合
1
is_tag()
… 「タグ」のアーカイブページが表示されている場合。
1
is_month()
… 「月別」のアーカイブページが表示されている場合。

※「月別」アーカイブは当Blogでは単に「アーカイブ」と表示されています。

該当するアーカイブページがなかった場合の表示や、記事の表示部分などは index.php とほぼ変わりありません。

【ここまでのテーマフォルダの内容】
  • archive.php
  • comments.php
  • functions.php
  • single.php
  • searchform.php
  • sidebar.php
  • index.php
  • page.php
  • blog
  • top.php
  • header.php
  • footer.php
  • style.css
  • img フォルダ
  • css フォルダ

最後：screenshot.png を追加

これで、ひととおり動作するページになりました。

最後の仕上げとして、今回デザインしたテーマのイメージキャプチャを 300px × 225px の大きさにして screenshot.png という名前でテーマフォルダに保存します。

こうしておくと、WordPressの管理画面「テーマの管理」でこんな風に表示されます。

screenshot.png を追加する

screenshot.png を追加したときのテーマ管理の表示

これで、いまどのテーマが選択されているかがすぐに判断できます。

WordPress ではここで説明した以外にもたくさんのテンプレートタグや、条件分岐タグが用意されています。
今回は基本的な部分しか触れませんでしたが、次回は Giraffy Blog で使った条件分岐のしかたなどもメモしていきます。

というわけで、ひとまずテーマの作成についてはここまでです。

関連する記事

この記事へコメントを投稿する

※コメントはスパム対策の為、承認制となっています。あらかじめご了承ください。

 

トラックバックURL

¦ページ先頭 ¦
ブログ内検索
カテゴリー
タグ
Adobe Android BlackBerry CS4 CSS Debian html iPad iPhone Java Linux Mac Plugins VirtualBox VPS Windows WordPress Xperia YMPA お知らせ カスタマイズ サーバ テンプレート テーマ 動画 書籍 無料 製品 買い物
アーカイブ
株式会社ジラフィー / 755-0005 山口県宇部市五十目山町1-24-101 / TEl:0836-38-5229 FAX:0836-32-06194
Copyright 2010, GIRAFFY inc.