カテゴリー: コンピューター
Linux の悪戦苦闘記、プログラミング、WordPress、ウェブサービス、Windows、Mac などの話題ですの。
【WordPress】Twenty Fifteen の子テーマを作った記録! | oki2a24 で functions.php に次を追加しました。
- functions.php に、ヘッダー画像をテーマに組み込むプログラムを追加
- Function Reference/register default headers « WordPress Codex
- ヘッダー画像は数十個ある
2〜3個ならば手作業でヘッダーファイルをプログラムの中に記述しますけれども、数十個分も繰り返したくはありません><。
そこで、
- ファイル名のリストを用意しておき、
- 繰り返し部分にファイル名をはめ込んで表示し、
- これらをファイル数分繰り返す
というプログラムを組んで自動的に functions.php のヘッダーファイルを指定する部分を作りました♪なお、環境は Mac でございます。
【WordPress】数分で子テーマを作ります!カスタマイズの準備♪【Twenty Fifteen】 | oki2a24 での子テーマ作り方が、問題は無く動くけれども古くて非推奨でしたので、新しくて推奨される作り方を改めて具体的に記します。
子テーマを作るのに必要なことまとめ
- テーマディレクトリを作成する。
- style.css ファイルを作成する。
- 冒頭のコメントで、Theme Name: を記述する。
- 冒頭のコメントで、Template: を記述する。
- functions.php ファイルを作成する。
- wp_enqueue_style 関数で親テーマのスタイルシートをキューに入れる関数を作る。
- wp_enqueue_scripts アクションに作った関数をフックする。
tree コマンド気づいた点
- ディレクトリ指定をしないと、tree コマンドで表示される起点ディレクトリは「.」。つまり「tree」=「tree .」
- カレントディレクトリ名を表示結果に含めたい場合は、上のディレクトリに移動してからディレクトリを指定して tree コマンドを実行する必要がある
カレントディレクトリ名を表示結果に含めたいと思って少し具体的に試した結果♪
Twenty Fifteen 子テーマで公開した投稿のフォントを変更した時に気がついた、管理者ページ側の問題点
- 投稿の編集ページの入力フォームフォントが Noto Serif に設定されている。タイトル入力フォームは問題ない。
- しかしそのフォントは日本語が見つからないため設定されない。
問題解決まで
- 設定されないフォント、Noto Serif を指定している場所を探す
- 親テーマの functions.php で editor-style.css を検索、修正部分を特定する
- Noto Serif フォント指定をしている関数を子テーマで先に書く(オーバーライド(上書き)はできないが親テーマが関数を if で囲っているため親テーマで読込させないことが可能)
- 子テーマディレクトリに css/editor-style.css ファイルを作り、フォントの設定を上書きする
子テーマを作る時、CSS を読み込むポイント
- 親テーマ CSS を子テーマから読み込むには、functions.php で wp_enqueue_style 関数を使用する。
- 子テーマの style.css で @import url(“../twentyfifteen/style.css”); とする方法は古く、非推奨 ← 子テーマ – WordPress Codex 日本語版
- 子テーマで外部の CSS を読み込む時も、同様に wp_enqueue_style 関数を使用する。用途は親テーマの CSS の読み込に限定されない。
本投稿は、【WordPress】Twenty Fifteen の子テーマを作った記録! | oki2a24 の続きですの♪「CSS の読み込み方が実は古い。」という課題を、解決しましたので記録いたしました。
実際の子テーマのソース修正部分・内容
子テーマを作り始めてから完成!切り替えるまでの大まかな流れ、概要
開発環境でテーマを作り、確認、テストも済ませてから本番環境へアップロードし、切り替えるのが1番間違いのない、おすすめの方法でございます。
ですけれども面倒ですの!ですので本番環境で直接ファイルやディレクトリを作って編集しながら、でも失敗してもできるだけ簡単に復旧できるように工夫しながら進めていった方法をノートいたします♪
- 本番環境へターミナルからログインし、CUI 環境でコマンドとエディタは Vim を使いながら進めていった
目次
2015年1月のアクセス解析
先月 2015 年 1 月の 1 ヶ月間の Google アナリティクスの結果です。
- ユーザー > サマリー(左に先月、右に先々月と比較表示)
- コンテンツ > サイトコンテンツ > すべてのページ
- トラフィック > 参照元 > すべてのトラフィック
- トラフィック > 参照元 > 検索 > オーガニック検索
↓仕様が変わって、たどり着き方、項目名も変わったようです。
- ユーザー > サマリー(左に先月、右に先々月と比較表示)
- 行動 > サイトコンテンツ > すべてのページ
- 集客 > すべてのトラフィック > 参照元/メディア
- 集客 > 検索エンジン最適化 >検索エンジン
以上の 4 種類の Google Analytics 結果です。
本投稿の流れ
- Amazonギフト券をアカウントに追加する
- 買うときのAmazonギフト券使用方法
- ギフト券使用後のアカウントの変化
1.Amazonギフト券をアカウントに追加する
※注意※2015年2月17日追記
この投稿の作り方で最低限の子テーマを問題なく作ることができますが、スタイル(CSS)を正しくキューに入れる(HTML のヘッダーで読み込む)ことができない、少し古いやり方です。
本投稿の後日そのことに気が付き、次の投稿で修正しました。
子テーマを作るのに必要なことまとめ
- テーマディレクトリを作成する。
- style.css ファイルを作成する。
- style.css 冒頭のコメントで、Theme Name: と、Template: を記述する。
- 親テーマの style.css をインポート(@import)する。


