タグ: テーマ
WordPress テーマのサムネイルについて
- 880 px x 660 px の PNG 画像
- テーマのルートディレクトリに screenshot.png のファイル名で格納
サムネイルを作成した手順
- Chrome > 検証 (デベロッパーツール) の Toggle device mode
- Screen 1320 x 990 と入力し、左のチェックを打つ。
- 表示されたページのスクリーンショットを撮る。
- プレビューアプリで 1690 x 1267 に切り取り。
- プレビューアプリの、ツール > サイズを調整で 880 x 660 に変更し、保存
- ファイル名を screenshot.png に変更
- ファイルを子テーマのルートディレクトリに置く。
【WordPress】数分で子テーマを作ります！カスタマイズの準備♪【Twenty Fifteen】 | oki2a24 での子テーマ作り方が、問題は無く動くけれども古くて非推奨でしたので、新しくて推奨される作り方を改めて具体的に記します。
子テーマを作るのに必要なことまとめ
- テーマディレクトリを作成する。
- style.css ファイルを作成する。
- 冒頭のコメントで、Theme Name: を記述する。
- 冒頭のコメントで、Template: を記述する。
- functions.php ファイルを作成する。
- wp_enqueue_style 関数で親テーマのスタイルシートをキューに入れる関数を作る。
- wp_enqueue_scripts アクションに作った関数をフックする。
※注意※2015年2月17日追記
この投稿の作り方で最低限の子テーマを問題なく作ることができますが、スタイル（CSS）を正しくキューに入れる（HTML のヘッダーで読み込む）ことができない、少し古いやり方です。
本投稿の後日そのことに気が付き、次の投稿で修正しました。
子テーマを作るのに必要なことまとめ
- テーマディレクトリを作成する。
- style.css ファイルを作成する。
- style.css 冒頭のコメントで、Theme Name: と、Template: を記述する。
- 親テーマの style.css をインポート（@import）する。
実際の具体的な作成例
はじめに
わたくしたちのブログは WordPress で構築しております。テーマは、デフォルトの Twenty Fourteen をベースとして子テーマにしております♪
ただ、ヘッダー画像がありませんので設定したく存じます。まずは流れを把握したいですので 9 つのヘッダー画像で行います。今回は、その記録を投稿いたしますね♪
以前のテーマでは、本ブログの「続きを読む →」をクリックした時の URL に手を加えまして、末尾に付きます #more-xxxx を削除するように修正を加えておりました。
新しくしました Twenty Twelve での子テーマでも同様のことを行い、しかし、若干コードを変更して実現したいと思います。
調べました♪
子テーマを、Twenty Twelve を親として作成しておりますけれども、そのようなケースに限らず WordPress テーマを変更した時に忘れがちなことをメモしておきます。わたくし、やっぱりオッチョコチョイ＞＜。
WordPress テーマを変更した時に忘れがちなポイント
- 外観 > メニューの、テーマの場所がリセットされたことを見逃していました＞＜
- 外観 > ウィジェットをざっと見なおすことを忘れていました＞＜
ヘッダー画像は目立ちますから忘れることはないのですけれどもねー♪具体的に見ていきます♪
Jetpack の無限スクロールを利用させていただいております。大変便利で面白いのですけれども、管理メニューからの設定だけでは有効にならず、テーマファイルの修正が必要でした。そのときの様子を以前、まとめました。
さて、この度、
- テーマを Twenty Twelve の子テーマにいたしました。
- そのとき、Jetpack の無限スクロールはオンにしたままです。
以前使用していたテーマは Twenty Eleven を改造した全く別のテーマでしたので、この状態ですと Jetpack 用のソースが子テーマには入っておりません。
よって、Jetpack 無限スクロールはオフになっていることが予想されます。
しかし！
WordPress テーマ「Twenty Twelve」「Twenty Eleven」「oki2a24」の見出しを比較し、Twenty Twelve ベースの子テーマ（すでに適用済み♪）ではどうするか考えます♪
- Twenty Twelve
- 見出しと本文の間が一番大きい
- h3 までは本文以上の文字サイズ
- 全ての見出しが太文字
- Twenty Eleven
- h3 が見出しの中では一番小さく、本文文字サイズよりも小さい。ナンデ？
- h3 のアルファベットが強制的に大文字に変換される。ナンデ？
- 太文字となるのは h1、h2 のみ
- oki2a24
- 次のように Twenty Eleven をベースに修正したもの → WordPressテーマTwenty Elevenの見出し（hタグ）スタイルを修正します！ | oki2a24
- h1 〜 h3 までに見出しを強調するために縦線を入れている
- h4 〜 h6 までは Twenty Eleven と同じ
本ブログの見出しをどのように変更したしましょうか？
WordPress 子テーマでヘッダー画像を設定するポイント
- 編集するのは functions.php の 1 ファイルのみ
- register_default_headers → 管理画面で選択できる画像を登録する関数
- 子テーマのディレクトリパスは %2$s のプレースホルダーで定義される。親テーマの時の %s ではない。
- add_action で after_setup_theme にフックする
- after_setup_theme にフックする関数名は twentytwelve_setup 以外とする。親テーマのセットアップ関数を上書き（オーバーライド）したくないため。
【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします！ | oki2a24 の続きとなります。このときは、子テーマのディレクトリを作って、style.css で子テーマの定義をし、同じファイルで親テーマの CSS を読み込んだのでした。続きでございまして、今回で見た目が大きく変わる予定です♪