【WordPress】子テーマのカスタムヘッダーにデフォルト画像を登録しました作業記録♪【TwentyFourteen】

はじめに

わたくしたちのブログは WordPress で構築しております。テーマは、デフォルトの Twenty Fourteen をベースとして子テーマにしております♪

ただ、ヘッダー画像がありませんので設定したく存じます。まずは流れを把握したいですので 9 つのヘッダー画像で行います。今回は、その記録を投稿いたしますね♪

ヘッダー画像を作成

Lightroom ５で写真を編集して作成いたしました。

ヘッダー画像 1260 px x 240 px
サムネイル 230 px x 44 px

Twenty Fourteen をベースにしているため、ヘッダー画像のサイズは上記となります。調べ方は、Twenty Fourteen テーマを有効にした上で、カスタムヘッダーページヘアクセスすると推奨サイズとして表記されておりましたの♪

サムネイルサイズは、実際に WordPress 3.8.1 に適当に表示させてみて、その時のサイズ計り、それを採用しています。

Lightroom 5 の書き出しプリセットを作成♪

プリセットの設定を変更後は、右クリック > 現在の設定で更新、を適用してくださいまし！なんど変更が保存されず、あらららら！？となったことかしら＞＜。

ヘッダー画像用の書き出しプリセット

ユーザープリセットに作成
- 名前　TwentyFourteenHeader
書き出し場所
- フォルダー：指定は任意の場所に
- サブフォルダーに保存　チェック　TwentyFourteenHeader
ファイル設定
- 画質：100
画像のサイズ調整
- サイズ変更して合わせる　チェック：幅と高さ
- 拡大しない　チェック
- 幅：1260　高さ：240　pixel
- 解像度：240　pixel/inch
メタデータ
- 次を含める：著作情報のみ
- 撮影場所情報を削除　チェック
透かし
- 透かし　チェック
- 別途作成した透かしを設定（不透明度 50）

サムネイル用の書き出しプリセット

ユーザープリセットに作成
- 名前　TwentyFourteenHeader-thumbnail

以下、ヘッダー画像用のプリセットの TwentyFourteenHeader と違う箇所のみ記述

ファイルの名前
- 変更後の名前　チェック：編集… で、元のファイル名-thumbnail となるプリセットを作成し、指定
画像のサイズ調整
- 幅：230　高さ：44　pixel

Lightroom 5 で書き出し、サーバにアップロード

作成したプリセットでヘッダー画像とサムネイルを書き出し
zip で固めました。

まずはヘッダー画像を書きだした Mac での操作。書き出し時に作成されるように設定した TwentyFourteenHeader が配置されるディレクトリへ移動後、下記の通り zip 化

zip -r TwntyFourteenHeader.zip TwentyFourteenHeader/

サーバにアップロード

# scp -P ポート番号 アップするファイル ユーザ@ホスト:ディレクトリ
scp -P 3333 TwentyFourteenHeader.zip sshuser@oki2a24.com:/tmp/

以降は、WordPress のサーバでの操作。サーバに ssh ログインし、テーマの場所に移動

ヘッダー画像/サムネイルを格納するディレクトリを作成

mkdir -p images/headers/
chown -R apache:apache images/

解凍して、ヘッダ画像を移動

unzip /tmp/TwentyFourteenHeader.zip # テーマの場所に解凍される
mv TwentyFourteenHeader/* images/headers/
chown -R apache:apache images/
rm -rf TwentyFourteenHeader/

テーマの functions.php を編集

functions.php に次を追加いたしました。ヘッダー画像 9 つ分ですのでその分長くなっております。

/**
 * 親テーマ Twenty Fourteen のセットアップに追加する処理を定義します。
 */
function oki2a24_twentyfourteen_child_setup() {
        register_default_headers( array(
                'P1010303' => array(
                        'url' => '%2$s/images/headers/P1010303.jpg',
                        'thumbnail_url' => '%2$s/images/headers/P1010303-thumbnail.jpg',
                        'description' => 'P1010303'
                ),
                'P1010308' => array(
                        'url' => '%2$s/images/headers/P1010308.jpg',
                        'thumbnail_url' => '%2$s/images/headers/P1010308-thumbnail.jpg',
                        'description' => 'P1010308'
                ),
                'P8233212' => array(
                        'url' => '%2$s/images/headers/P8233212.jpg',
                        'thumbnail_url' => '%2$s/images/headers/P8233212-thumbnail.jpg',
                        'description' => 'P8233212'
                ),
                'PC272786' => array(
                        'url' => '%2$s/images/headers/PC272786.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC272786-thumbnail.jpg',
                        'description' => 'PC272786'
                ),
                'PC292698' => array(
                        'url' => '%2$s/images/headers/PC292698.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC292698-thumbnail.jpg',
                        'description' => 'PC292698'
                ),
                'PC292705' => array(
                        'url' => '%2$s/images/headers/PC292705.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC292705-thumbnail.jpg',
                        'description' => 'PC292705'
                ),
                'PC292709' => array(
                        'url' => '%2$s/images/headers/PC292709.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC292709-thumbnail.jpg',
                        'description' => 'PC292709'
                ),
                'PC312989' => array(
                        'url' => '%2$s/images/headers/PC312989.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC312989-thumbnail.jpg',
                        'description' => 'PC312989'
                ),
                'PC313024' => array(
                        'url' => '%2$s/images/headers/PC313024.jpg',
                        'thumbnail_url' => '%2$s/images/headers/PC313024-thumbnail.jpg',
                        'description' => 'PC313024'
                )
        ) );
}
/**
 * 親テーマ Twenty Fourteen のセットアップに処理を追加します。
 */
add_action( 'after_setup_theme', 'oki2a24_twentyfourteen_child_setup' );

以降はおまけでございます。ヘッダー画像、ヘッダーサムネイル画像のファイル名を vim のバッファに読み込んで補完に使いたいですの！

そこで、次のようにしました。もっと素晴らしい、変態的な素早い方法はあると思いますが次のように進めました。

ファイル名を書き込んだテキストファイルを用意する。

ll images/headers/ | awk '{print $9}' > memo

functions.php を編集（補完用のメモファイルを最初に開いている）

vim memo

vim 上で functions.php を開く

:e functions.php

繰り返し部分をコピペしておき、残りはファイル名を置換するのみにしておく。次の手順で置換していった。

ファイル名の先頭文字 PC で検索、ファイル名部分のみがハイライトされることを確認
n で検索対象に移動
R でファイル名を置換。このときに <C-n> や <C-p> で補完候補を memo から拾い <C-y> で確定
n で次の対象に移動。同じ変更であれば、. で一発で置換が可能。

編集が完了したら、ゴミの削除

rm memo
rm /tmp/TwntyFourteenHeader.zip

WordPress 管理画面から設定

以上でほぼ作業は完了しました。あと少しです♪WordPress の管理画面から設定します。

カスタムヘッダー > デフォルト画像に、アップロードした画像が表示されていれば成功

ランダムを選択し、変更を保存

実際にヘッダーに画像が表示されているかを確認

おわりに

毎年発表されるデフォルトテーマにその都度乗り換えておりますけれども、ヘッダー画像をその度に用意しますのが、大変手間でございますの＞＜。

毎回毎回画像のサイズが異なりますから、毎回毎回ゼロから用意しなければなりませんの！

それで Twenty Fourteen の子テーマ適用後も数ヶ月ヘッダー画像がありませんでした。

今回一念発起してすこしヘッダー画像を追加いたしました！今後も地道に追加していきたいですわ。。。

今回作業に際し、以前に投稿下次ページが参考になりました♪

【WordPress】子テーマに、管理画面で選択できるヘッダー画像を登録するスマートなやり方♪【register_default_headers】 | oki2a24

以上です。