WordPress の Twenty Eleven テーマのヘッダー画像を根本的に入れ替えます。「画像をアップロード」からではなく！その2、実践編♪

WordPress の Twenty Eleven テーマのヘッダー画像を根本的に入れ替えます。「画像をアップロード」からではなく！その１、準備編♪ | oki2a24 の続きになります。変更箇所を前回つかみましたので、実際に修正していきます。

はじめに

前回は、カスタマイズの元としている Twenty Eleven テーマのディレクトリ、wp-content/themes/twentyeleven からのパスとしましたが、今回は実際に使用しているテーマ、wp-content/themes/oki2a24 ディレクトリからの場所として記述します。

ヘッダー画像の追加

Twenty Eleven テーマのやり方に倣って、同じ場所にファイル配置、同じサムネイルファイル名のつけ方をしています。

• images/headers に、フロントに表示する 1000 X 288 のヘッダー画像と、そのサムネイルである 230 X 66 の画像を置きます。
• ファイル名は半角英数とし、サムネイルのファイル名はヘッダー画像ファイル名の後に「-thumbnail」と追加しています。

ヘッダー画像についてのプログラム部分の修正

	// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
	register_default_headers( array(
		'wheel' => array(
			'url' => '%s/images/headers/wheel.jpg',
			'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
			/* translators: header image description */
			'description' => __( 'Wheel', 'twentyeleven' )
		),
･･･

の145行目「’wheel’ => array(」の前に、145～150行目の内容でヘッダー画像のファイル名などを入れ変えたものを追加していきます。具体的には1ブロックにつき次の4箇所となり、上の例で説明すると次のようになります。

• 145行目 ‘wheel‘ => array( の wheel
• 146行目 ‘%s/images/headers/wheel.jpg’ の wheel
• 147行目 ‘%s/images/headers/wheel-thumbnail.jpg’ の wheel
• 149行目 ‘Wheel‘ の Wheel

大量の場合は、ソースコードの作り方は PHP を使って複数行テンプレートからテキストをダーっと作る、お手軽な方法を実践したよ♪ | oki2a24 を参照にしてください。

そして、WordPress 管理画面の、概観　＞　ヘッダー、でカスタムヘッダーページへ行きます。「デフォルト画像」が「ランダム」となっていること、追加した画像が表示されていることを確認します。

なお、もともとのヘッダー画像を消したい場合は、「’wheel’ => array(」以下の行を削除することになりますが、最後の

			'description' => __( 'Hanoi Plant', 'twentyeleven' )
		)

を削除してから一点注意してください。上の wheel の例で言う150行目「),」のようにカンマ「,」が入っていることと思います。最後のカンマは削除しましょう。

おわりに

翻訳ファイルである、languages/twentyeleven.pot と、languages/ja.po には手を加えません。

• 追加したヘッダー画像の数が多く翻訳ファイルも修正するのが面倒だったから。
• Twenty Eleven テーマがバージョンアップしたときに、バージョンアップ内容を今使っている Twenty Eleven ベースのこのテーマに反映したいけれども、面倒くさい

以上の理由からです。ある程度は、しっかり手を抜いていこうと思っています。

ちなみに、新しいヘッダー画像は183パターンありますので、しばらくは飽きずにすみそうです♪