WordPress初心者がテーマを作成する上で躓いた事まとめ

April 21st, 2011

配布されているテーマで十分なんですが、メインはデザイナーだった事を思い出しちゃったのでBlogデザインをリニューアルしました。
しばらく更新してなかったのはこの為でした。

WordPressなんて2年以上前に1度触ったっきりのほぼ素人がテーマを作成する上で、躓いた事や、参考にしたサイトをご紹介します。
これからテーマを作成したい方の参考になればと思います。

ちなみに製作時のWordPressのバージョンは3.1で、使用文字コードはUTF-8です。

素人なので間違ってても許してねッ！！！

2011-04-25 アイキャッチ系のところに、やっぱ間違ってたところあったので修正しました＾＾；
2011-05-01 title属性除去の部分、貼り付けるコード間違ってたグヘヘ
2011-05-12 Remove Title Attributesのバグについて記述
2011-05-24 トラックバック/ピンバック関連でバグがあったので、コード修正

そもそもテーマってどうやって作るんだっけ？
bloginfo(‘url’)とbloginfo(‘wpurl’) どっちがいいの？
wp_head()とwp_footer()
the_time()で英語表記の月名が表示されない
ツイートボタンとはてなブックマークボタンを設置する
アイキャッチ画像を使う
the_content()で出力されるmoreリンクを使わず、好きな場所に表示したい
next_post_link()やprevious_post_link()で出力されるリンクテキストを省略したい
隣接する記事がある時だけnext_post_link()、previous_post_link()したい
コメントとトラックバック・ピンバックをわけて表示する
コメントとトラックバック・ピンバックの出力をカスタマイズする
wp_list_categories()で出力されるコードを修正する
imgやa要素に付与されるtitle属性を除去する

1. そもそもテーマってどうやって作るんだっけ？

テーマなんてどうやって作るんだっけ状態だったので、まずはそこからでした。

WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

サンプルのテーマファイルがダウンロードでき、それを使ったテーマ作成の流れが解説されています。
シンプルなものであれば、ここを読むだけでテーマが作成できます。

目次へ

2. bloginfo(‘url’)とbloginfo(‘wpurl’) どっちがいいの？

特に何も設定等を行っていなければ、この二つは同じURLを出力します。
それぞれどのような用途に使用するのか分からなかったので調べました。

bloginfo(‘url’): ブログのサイトURLを出力
bloginfo(‘wpurl’): WordPressをインストールしたURLを出力

そのまんまですね。
基本的にトップページへのリンクなどで使用する場合は「bloginfo(‘url’)」でいいと思います。

WordPressはコアファイルを専用のディレクトリにインストールすることもできます。そのディレクトリまでのURLを出力したい場合に「bloginfo(‘wpurl’)」を使用します。
また、WordPress3.0から実装された「マルチサイト機能」を使用している場合などでも使うシーンがありそうです。

URLを取得した後ゴニョゴニョしてから出力したい場合にはget_bloginfo()を使用します。

目次へ

wp_head()とwp_footer()

特定のプラグインを使用する場合などに、この二つをテンプレートファイルに入れていないとうまく機能しない場合があります。特に問題がないのであれば、あらかじめ入れておきましょう。
それぞれの一般的な挿入場所は以下のとおりです。

wp_head()

<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<?php wp_head(); ?> // </head>タグの直前
</head>

wp_footer()

</div>
<?php wp_footer(); ?> // </body>タグの直前
</body>
</html>

目次へ

the_time()で英語表記の月名が表示されない

the_time('F jS, Y'); // April 20th, 2011の表示を期待する

日本語版WordPressでは上記のコードでは「4月 20th, 2011」と不思議表記になってしまいます。
これはWordPress内で自動的に日本語に切り替えるような処理が働いているためです。

日本語版WordPressの曜日・月表記を英語にする方法

上記サイトより日本語版WordPressの曜日・月表記を英語にするプラグインが公開されています。
こちらをインストールして有効にするだけで解決しました。

目次へ

ツイートボタンとはてなブックマークボタンを設置する

最近ではほとんどのブログに付いてますね。
プラグインであらゆるサービスのボタンを一括で設置してくれるものもありますが、今回は手動で埋め込みを行いました。

ツイートボタン

ツイートボタン | Twitter

水平方向にカウント数を表示

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="ツイッターのユーザー名" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

垂直方向にカウント数を表示

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="ツイッターのユーザー名" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

上記コードの「ツイッターのユーザー名」をあなたのものに置き換え、好きな場所にコピペしてください。

はてなブックマークボタン

はてなブックマークボタン | はてなブックマーク

水平方向にカウント数を表示

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

垂直方向にカウント数を表示

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

上記コードを好きな場所にコピペしてください。

目次へ

アイキャッチ画像を使う

記事一覧や記事先頭にある画像のことです。
デフォルトではこの機能が無効になっているので、有効にします。

参考サイト
WordPressの投稿サムネイル画像（アイキャッチ画像）の使い方 | Blog × Play Under World

functions.php

if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }
if (!function_exists('fb_AddThumbColumn') && function_exists('add_theme_support')) {

	add_theme_support('post-thumbnails', array('post', 'page' ));

	function fb_AddThumbColumn($cols) {
		$cols['thumbnail'] = __('Thumbnail');
		return $cols;
	}

	function fb_AddThumbValue($column_name, $post_id) {

		$width = (int) 35;
		$height = (int) 35;

		if ('thumbnail' == $column_name) {
			$thumbnail_id = get_post_meta($post_id, '_thumbnail_id', true);
			$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
			if ($thumbnail_id)
				$thumb = wp_get_attachment_image($thumbnail_id, array($width, $height), true);
			elseif ($attachments) {
				foreach ( $attachments as $attachment_id => $attachment ) {
					$thumb = wp_get_attachment_image($attachment_id, array($width, $height), true);
				}
			}
			if (isset($thumb) && $thumb) { echo $thumb; }
			else { echo __('None'); }
		}
	}

	add_filter('manage_posts_columns', 'fb_AddThumbColumn');
	add_action('manage_posts_custom_column', 'fb_AddThumbValue', 10, 2);
	add_filter('manage_pages_columns', 'fb_AddThumbColumn');
	add_action('manage_pages_custom_column', 'fb_AddThumbValue', 10, 2);

}

上記コードをfunctions.phpにコピペするだけで、投稿画面でアイキャッチ画像が使えるようになります。
また、投稿一覧でもサムネイルが表示されるようになります。
設定したアイキャッチ画像を表示するには、テーマファイルに以下のコードを入れます。

index.php

<?php if (has_post_thumbnail()) : ?>
<p class="entry_eyecatch"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></p>
<?php endif; // has_post_thumbnail() ?>

single.php

<?php if (has_post_thumbnail()) : ?>
<p class="entry_eyecatch"><?php the_post_thumbnail(); ?></p>
<?php endif; // has_post_thumbnail() ?>

最新記事一覧ページでは、アイキャッチ画像に記事へのリンクを張っています。

目次へ

the_content()で出力されるmoreリンクを使わず、好きな場所に表示したい

the_contentタグは記事の本文を出力します。
記事内で<!–more–>タグを使用している場合は、自動的にmoreリンクが出力されますが、余計な#～～が付与されていたり、出力される場所を選べないなど、今回のデザインでは使えないものでした。

その為、moreリンクの出力を無効にし、記事内に<!–more–>タグがあるかどうかを判別して条件分岐する関数を用意しました。

functions.php

function has_more_tag() {
	global $post;
	if (preg_match('/<!--more(.*?)?-->/u', $post->post_content, $matches) ) { return true;  }
	else { return false; }
}

上記関数は記事内に<!–more–>タグがあれば「true」を、無ければ「false」を返します。
このコードをfunctions.phpにコピペします。

index.php

<?php the_content(false); ?>

引数に「false」を記述することで、moreリンクは出力されなくなります。

<?php if (has_more_tag()) : ?>
<p class="entry_more"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/entry_more_btn.gif" class="rollover" alt="続きを読む" width="108" height="20" /></a></p>
<?php endif; // has_more_tag() ?>

好きな場所に独自のmoreリンクを貼り、それをifで囲みます。

目次へ

next_post_link()やprevious_post_link()で出力されるリンクテキストを省略したい

next_post_link()やprevious_post_link()を使うことで、隣接する記事へのリンクを出力できますが、テーマのデザインによっては、記事タイトルをリンクテキストとして出力する場合、長いタイトルだとレイアウトが崩れてしまったり、バランスが悪くなってしまいます。

wordpressのナビゲーションを短縮表示させるその2 | ::Lunatic-Code

上記サイトよりプラグインをダウンロードし、有効にします。

single.php

// previous_post_link('%link', '%title');
previous_post_link_short('%link', '%title', false, '', 40); // これに置き換える

// next_post_link('%link', '%title');
next_post_link_short('%link', '%title', false, '', 40); // これに置き換える

それぞれの第5引数は、表示させたい文字のバイト数を指定。
上記では全角20文字、半角40文字くらい。

目次へ

隣接する記事がある時だけnext_post_link()、previous_post_link()したい

next_post_link()、previous_post_link()は隣接する記事がなかった場合は、何も出力しません。
今回のデザインでは表示ズレが発生してしまった為、隣接する記事が存在しない場合は「 ( )」を出力するようにしています。

<div class="previous_entry"><?php if (get_adjacent_post(false, '', true)) { previous_post_link_short('%link', '%title', false, '', 40); } else { echo '&#160;'; } ?></div>
<div class="next_entry"><?php if (get_adjacent_post(false, '', false)) { next_post_link_short('%link', '%title', false, '', 40); } else { echo '&#160;'; } ?></div>

if (get_adjacent_post(false, ”, true)): 前の記事がなければ戻り値としてnullが返って来ます
if (get_adjacent_post(false, ”, false)): 次の記事がなければ戻り値としてnullが返って来ます

目次へ

コメントとトラックバック・ピンバックをわけて表示する

wp_list_comments()でコメント・トラックバックを出力します。
別々に出力するには以下のようにパラメータを渡してやります。

comments.php

コメントのみ出力

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

トラックバック・ピンバックのみ出力

<?php wp_list_comments('type=pings'); ?>

※ 2011-05-24 コード修正

目次へ

コメントとトラックバック・ピンバックの出力をカスタマイズする

参考サイト
テンプレートタグ/wp list comments | WordPress Codex 日本語版

functions.php

function custom_wp_list_comments($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
?>
<?php if ($comment->comment_type == '') : ?>
<li class="cf">
	<div class="commentlist_meta">
	<h4><?php comment_author_link(); ?></h4>
	<p><?php comment_date(); ?> <?php comment_time(); ?></p>
	</div>
	<div class="commentlist_comment"><?php comment_text(); ?></div>
<?php elseif($comment->comment_type == 'trackback' || $comment->comment_type == 'pingback') : ?>
<li>
	<span><?php comment_author_link(); ?> - <?php echo ucfirst($comment->comment_type); ?> on <?php echo mysql2date('F jS, Y', $comment->comment_date); ?></span>
<?php endif; // $comment->comment_type == '' ?>
<?php
}

if ($comment->comment_type == ”)内にコメント用コード、elseif($comment->comment_type == ‘trackback’ || $comment->comment_type == ‘pingback’)内にトラックバック・ピンバック用のコードを記述しています。
</li>はWordPress側で自動的に出力されますので、入れないようにします。
今回はスレッド式のコメント表示については特に考えてません。

comments.php

コメントのみ出力

<?php if (have_comments()) : ?>
<ul id="commentlist">
	<?php wp_list_comments('type=comment&callback=custom_wp_list_comments'); ?>
</ul>
<?php endif; // have_comments() ?>

トラックバック・ピンバックのみ出力

<?php
foreach ($comments as $comment) :
	if (get_comment_type() != 'comment' && $comment->comment_approved != '0') :
?>
<ul id="trackbacklist">
	<?php wp_list_comments('type=pings&callback=custom_wp_list_comments'); ?>
</ul>
<!-- /#trackbacklist -->
<?php
		break; // $comments as $comment
	endif; // get_comment_type() != 'comment' && $comment->comment_approved != '0'
endforeach; // $comments as $comment
?>

パラメータのcallbackに「functions.php」で定義した関数を指定します。

※ 2011-05-24 一部コード修正

目次へ

wp_list_categories()で出力されるコードを修正する

WordPressとは親切なもので、特に意識しなくてもリスト要素などで整形したコードを出力してくれます。
wp_get_archives()ではパラメータで出力コードをイジれるのですが、何故かコイツではできない(？)ので無理やり対応します。

<li><a href="example">カテゴリ名</a></li>

これを以下のようにしたい

<li><span><a href="example">カテゴリ名</a></span></li>

functions.php

function custom_wp_list_categories($text) { return preg_replace('/(<a.+<\/a>)/u', '<span>$1</span>', $text); }
add_filter('wp_list_categories', 'custom_wp_list_categories');

目次へ

imgやa要素に付与されるtitle属性を除去する

個人的にtitle属性は、その要素に対しての補足なので、リンクテキストと同一だったり、説明ができないもの、特に補足の要らない物については付与しない方がよいと思っています。他にも理由がありますが、~~めんどくさいので~~割愛します。

Remove Title Attributes | WordPress Plugins

上記プラグインをインストールするだけで綺麗サッパリtitle属性が消えてくれました。

アイキャッチ画像からは除去してくれないようなので、「functions.php」に以下のコードを追記。
ついでにメディアからエディタに画像を貼り付ける時に付与されるtitle属性もとっちゃってます。

functions.php

function post_thumbnail_remove_title($text) { return preg_replace('/ title=("[^"]*"|\'[^"]*\')/u', '', $text); }
add_filter('post_thumbnail_html', 'post_thumbnail_remove_title');

function send_editor_remove_title($text) { return preg_replace('/ title=("[^"]*"|\'[^"]*\')/u', '', $text); }
add_filter('get_image_tag', 'send_editor_remove_title');

Remove Title Attributes使用時、複数カテゴリに属する記事でthe_category()が正常に機能しないバグがあります。
解決方法はRemove Title Attributes有効時に起きるthe_category()のバグフィクスをご覧ください。

目次へ

最後に

Blogとして最低限の機能しか盛り込んでないので、そこまで書くことないだろうな、とタカをくくってました。思ったより多かった…

ほとんどがfuncions.phpに記述していますが、よく使いそうなものはプラグインとして使ったほうが後々便利かと思います。

最初にも書きましたが、素人があちこちのリファレンスを見て考えたものなので、もっと簡単な方法があるとか、これはヤメておいた方がいいって部分も多々あるかと思います。
その場合はコメント欄などで指摘していただけると助かります。

WordPress, カスタマイズ, テーマ

Aptana 目に優しいダークカラーテーマ...

グリッドベースのミニマルなWebデザイン

WP3.3-Theme作ってみよう① « Ma-TaRi - Pingback on January 19th, 2012

WordPress初心者がテーマを作成する上で躓いた事まとめ