カテゴリー
WordPress

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

スクリーンショット 2014-03-09 15.53.49.png

はじめに

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

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

ヘッダー画像を作成

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

  • ヘッダー画像 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

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

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

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

rm memo
rm /tmp/TwntyFourteenHeader.zip

WordPress 管理画面から設定

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

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

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

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

おわりに

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

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

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

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

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

以上です。

コメントを残す