Webに携わるお仕事をしているKanaが繋がったモノ、コトを書きためるブログ。

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

WordPress ,

Wordpress Original Theme

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

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

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

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

オリジナルテーマを作りたいけど、まず何をしたらいいの?

まずは、Webクリエイターボックスさんの記事を読んで、ブログのテーマを作っていきましょう。
WordPress オリジナルテーマの作り方 3.0+ |Webクリエイターボックス
非常にわかりやすくまとめてくださっています。ブログ立ち上げ前に非常にお世話になりました:) マナさんありがとうございます!

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

PR

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

記事抜粋を表示させたい!

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

<?php the_excerpt(); ?>

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

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

WP Multlbyte 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に記述します。

3つ目の引数、trueって何?

set_post_thumbnail_size( 300, 200, true );

上記サンプルコードの引数の1つ目、2つ目はアイキャッチ画像のサイズを表します。
3つ目の引数は、アイキャッチ画像に指定したサイズに、元画像が合わなかった場合、どのように画像を切り出すかの指定になります。

アイキャッチ3つ目の引数について

set_post_thumbnail_sizeの3つ目の引数「true」は、300px × 200pxに画像を切り抜くという設定になります。
ここでfalseを指定すると、縦幅と横幅以内に収まる画像になるようにリサイズされます。

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

<?php the_post_thumbnail(); ?>

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

あれ…?アイキャッチ画像のサイズが違う

functions.phpにコードを記述し、喜んでページを確認したにも関わらず、アイキャッチ画像のサイズが指定のものと違っていました。
原因を調べてみると、この指定がきちんと動くのはfunctions.phpにコードを記述した後アップロードした画像のみのようです。

またアップロードしなおすの…?いいえ、このプラグインを使えば大丈夫!

また最初から画像をアップロードしなおさなくてはならないのか…と肩を落としそうになりましたが、素敵なプラグインがありましたXD
WordPressのサムネイルを再生成してくれる、便利なプラグインです!

WordPressのサムネイルを再生成するプラグイン「Regenerate Thumbnails|Creatorish

何だか中途半端なところでトリミングされる…

WordPressで自動的に作られるアイキャッチ画像は、ちょうど真ん中あたりを基点として、画像を切り出してくれます。
私は、左端を基準に切り出ししたかったので、非常に困りました。
何か方法があるのかと思って調べたのですが、コアファイルを触るしかなさそうでした。
コアファイル触らずにできる方法があるのかな…。ご存知の方、教えてください!

2013/02/20:コアファイルを触らずに修正できる方法を教えていただきました。

How to change post thumbnail crop position in WordPress WITHOUT HACKING CORE | E. George Stephanis

WordPress3.4以上の環境で、functions.phpに以下のコードを記述します。
Kana-LierのWordPressのバージョンは、2013/02/20時点で3.5.1です。

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 レッスンブック 3.x対応

既存のテーマをカスタマイズを指南するのではなく、最初からWordPressのテーマを作るための本でした。ファイルの準備から詳しく解説されており、全てフルカラーなので見やすいです。
まさに私にぴったりのご本で、このブログのカスタマイズ中は、ずっと手元に置いていました。
また、お仕事でWordPressをカスタマイズするときにも役だってくれています。おすすめです!

WordPress レッスンブック 3.x対応
エビスコム
ソシム
売り上げランキング: 4,071

最後に…

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

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

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

PR

トラックバック: