WordPress初心者がオリジナルテーマを作って困った5つのこと

2013/02/20：アイキャッチの箇所について新たな情報をいただきましたので、記事を修正しました。

こんにちは。Kanaです。
このブログKana-Lierは、WordPressのテーマをオリジナルで作りました。

「WordPressでオリジナルテーマ？？WordPress全然わからないんだけど…」

そんな私がオリジナルテーマを作るにあたって、つまづいたことを書き留めたいと思います。
今回私は、どのテーマも流用せず、白紙の状態からテーマを作ることにしました。
functions.phpも0からはじめています。そのため、なぜそんなところで躓いた？！というなところで躓いてしまっていることもありました…X(

では、躓いた点は以下の通りです。

• 1.ブログ記事本文の抜粋を表示したい
• 2.アイキャッチ画像を使いたい
• 3.ウィジェットエリアを増やしたい
• 4.プラグインが動かない
• 5.オリジナルソーシャルボタンをつけたい

1.ブログ記事本文の抜粋を表示したい

抜粋を表示させたい箇所に、(私の場合ですと、loop.phpでした)

<?php the_excerpt(); ?>

と記述することで、記事の抜粋が表示されます。

このままだとデフォルトの文字数の設定のままなので、プラグインの一覧画面から、WP Multibyte Patchを有効化します。

functions.phpに

function new_excerpt_mblength($length) {
     return 100; // 抜粋で表示したい文字数をいれます
}
add_filter('excerpt_mblength', 'new_excerpt_mblength');

上記コードを追加すれば指定した文字数で抜粋を表示させることができます。

抜粋を表示させることができたので、「続きを読む」リンクを付けたいと思います。

function new_excerpt_more($post) {
return '...<br />' . '<a href="'. get_permalink($post->ID) . '" class="read_more">' . '▼続きを読む' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

あとは、CSSで見た目を整えてやるだけです。
続きを読むのaタグにread_moreというクラスを振ってあるので、CSSファイルに指定を書き加えればOKです。
クラス名は適当に変えても問題ありません。

2.アイキャッチ画像を使いたい！

巷で見かける素敵なブログには、アイキャッチ画像が使われていました。
私もアイキャッチ画像が使いたい！ということで早速調べました。

アイキャッチ画像を使うには、functions.phpに「アイキャッチ画像を使います」という宣言がいるそうです。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 200, true );//横幅300px×縦幅200pxの画像

上記のコードをfunctions.phpに記述します。

アイキャッチ画像を表示させたい箇所に、

<?php the_post_thumbnail(); ?>

このコードを記述すれば、アイキャッチが表示されるはずです。

function my_awesome_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
	if( false )
		return $payload;
	if ( $crop ) {
		$aspect_ratio = $orig_w / $orig_h;
		$new_w = min($dest_w, $orig_w);
		$new_h = min($dest_h, $orig_h);

		if ( !$new_w ) {
			$new_w = intval($new_h * $aspect_ratio);
		}

		if ( !$new_h ) {
			$new_h = intval($new_w / $aspect_ratio);
		}

		$size_ratio = max($new_w / $orig_w, $new_h / $orig_h);

		$crop_w = round($new_w / $size_ratio);
		$crop_h = round($new_h / $size_ratio);

		$s_x = 0;
		$s_y = 0;
	} else {

		$crop_w = $orig_w;
		$crop_h = $orig_h;

		$s_x = 0;
		$s_y = 0;

		list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
	}

	if ( $new_w >= $orig_w && $new_h >= $orig_h )
		return false;
	return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );

}
add_filter( 'image_resize_dimensions', 'my_awesome_image_resize_dimensions', 10, 6 );

3.ウィジェットエリアを増やしたい

Kana-Lierではフッターにウィジェットを使っています。

ウィジェットエリアを増やすには、functions.phpに下記コードを記述し、

register_sidebar( array(
     'name' => __( 'WidgetName' ),//ウィジェットの名前
     'id' => 'WidgetID',//ウィジェットのID
     'before_widget' => '<div class="widget_area">',//ウィジェットエリアの開始タグ
     'after_widget' => '</div>',//ウィジェットエリアの終了タグ
     'before_title' => '<h3>',//ウィジェットエリアのタイトル開始タグ
     'after_title' => '</h3>',//ウィジェットエリアのタイトル終了タグ
) );

ウィジェットを表示させたい箇所に、

<?php dynamic_sidebar( 'WidgetID' ); ?>//表示したいウィジェットのID

と追加することで、新しく作ったウィジェットが表示されます。
Kana-Lierでは、footer.phpに追加しました。

4.プラグインが動かない

プラグインのインストールと設定を終え、いざページを見てみると、
プラグインで設定したのにページに反映されていないという壁に直面しました。
調べたところ、header.phpとfooter.phpにソースコードが足りていないことがわかりました…X(
header.phpには、</head>直前に

<?php wp_head(); ?>

footer.phpには、</body>直前に

<?php wp_footer(); ?>

をそれぞれ記述することで、プラグインは正常に動作しました。
これらは、プラグインに必要なjsやcssを読み込むために必要なコードだそうです。

さて、無事これでプラグインも動いた、と安心してソースコードを確認すると、
今度は</head>タグ内にWordPressのバージョン情報や、意図しないものがたくさん書きだされていました。
不要なものは消したいので、functions.phpに以下を追加します。

remove_action( 'wp_head','wp_generator');

上記コードはバージョン情報を削除するためのコードになります。
他にも不要なものを消したいときは、wp-includes/default-filter.php内に「// Actions」と書かれた箇所があり、wp_headに書き出すものの記述がされているので、
そちらから不要なものを選び、functions.phpにremove_actionを記述してください。

wp-includes/default-filter.phpの内容を修正する方法もありますが、WordPressのバージョンアップをするたびに修正をしなければならなくなってしまうので、
functions.phpに記述する方法をおすすめします。

また、インラインスタイル要素も削除したいので、更にfunctions.phpに書き加えます。

function twentyten_remove_recent_comments_style() {  
    global $wp_widget_factory;  
    remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) );  
}  
add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' ); 

5.オリジナルソーシャルボタンをつけたい

ブログの記事を沢山の人に読んでもらうキッカケになりますように、と、ソーシャルボタンを付けたいなーと思いました。
いつか増やすかもしれませんが、取りあえずツイートボタンとはてブボタンを付けてみることにします。

まず、オリジナルボタンを表示させたいphpに、以下のコードを記述します。
私の場合は、single.php（単一記事用のphp）でした。

<?php
    $page_url=get_permalink();//記事のurlを取得します
    $page_title=trim(wp_title( '', false));//ページのタイトルに入ってしまう半角空白スペースを除去します
    $page_url_encoded=urlencode(mb_convert_encoding($page_url, "UTF-8"));//urlをエンコードします
    $page_title_encoded=urlencode(mb_convert_encoding($page_title, "UTF-8"));//ページのタイトルをエンコードします
?>

私は最初、このエンコードのコードをいれていないせいで、ボタンからのツイートが上手くいかないという壁に直面しました…X(
文字化けを起こして、途中で内容が消えてしまったりしていました。

次に、ボタンを挿入したい箇所に、以下のコードを記述します。

<!-- ツイートボタン -->
<a href="http://twitter.com/share?text=<?php echo $page_title_encoded ?>%ef%bd%9c<?php bloginfo('name'); ?>&amp;url=<?php the_permalink(); ?>&via=リンクさせたいTwitterユーザ" target="_blank"><img src="オリジナルツイートボタン" alt="ツイートする" /></a>

<!-- はてブボタン -->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $page_url_encoded ?>&title=<?php echo $page_title_encoded ?>" target="_blank"><img src="オリジナルはてブボタン画像のURL" alt="このエントリーをはてなブックマークに追加" style="border: none;" />

上記のコードの、&via=リンクさせたいTwitterユーザ名を、ご自身のTwitterアカウントユーザ名に変更します。
（当ブログの場合はkanalierがユーザ名なので、kanalierと記述しました）

そして、ツイートボタン、はてブボタン両方のimgタグ内の画像URLを、オリジナル画像のURLに書き換えると、完成です。

カスタマイズにあたって参考にさせていただいた記事と、ご本

最後に…

今回は、まさに私の無知っぷりをまとめた誰得記事になってしまいました。
でもきっと、はじめてWordPressのカスタマイズをする誰かに、役立つと信じていますXD
カスタマイズをしていて、先人の方々が偉大だなあと思い知りました…！

今度は私が入れているプラグインについての記事も書きたいです;)

2013/02/20追記：コメントにてご指摘くださった、菱川さん、Twitterにて教えてくださったYATさん、odyssey / おでっち1号さんありがとうございました。