去年の、【WordPress】TwentySixteen の子テーマ作り記録♪ – oki2a24 と同様、WordPress の公式テーマ TwentySeventeen をベースとした子テーマを作り、切り替えました♪
その内容を、ノートいたします！
タグ: 子テーマ
TwentySixteen テーマは WordPress 4.4 以上が必要だそうですの。
2015年12月7日21時37分現在、まだ WordPress 4.4 はリリースされておりません。
ですけれども、TwentySixteen の子テーマをささやかながら作成し、未完成ではありますが一段落つきました。
そこでカスタマイズ内容を残しておきますの♪
全体の参考
- 【WordPress】Twenty Fifteen の子テーマを作った記録！ | oki2a24
- 子テーマ – WordPress Codex 日本語版
- WordPress/twentysixteen · GitHub
-1. 準備
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 の読み込み方が実は古い。」という課題を、解決しましたので記録いたしました。
実際の子テーマのソース修正部分・内容
子テーマを作り始めてから完成！切り替えるまでの大まかな流れ、概要
開発環境でテーマを作り、確認、テストも済ませてから本番環境へアップロードし、切り替えるのが１番間違いのない、おすすめの方法でございます。
ですけれども面倒ですの！ですので本番環境で直接ファイルやディレクトリを作って編集しながら、でも失敗してもできるだけ簡単に復旧できるように工夫しながら進めていった方法をノートいたします♪
- 本番環境へターミナルからログインし、CUI 環境でコマンドとエディタは Vim を使いながら進めていった
目次
ポイント
- style.css で text-transform: none; を指定するように修正する。修正前は text-transform: uppercase;
実際にやってみましたの♪
WordPress の新しい標準テーマ、Twenty Fourteen とは？
これですの♪
- Twenty Fourteen | A beautiful magazine theme
サンプルページですの♪ - Twenty Fourteen – WordPress Codex 日本語版
機能の紹介と設定方法ですの♪ - WordPress › Twenty Fourteen « Free WordPress Themes
テーマの配布ページですの♪サポート掲示板や、評価もございます♪評価が高いですの♪
今回、わたくしたちのウェブサイトにこの Twenty Fourteen テーマを反映いたしました。その過程をメモいたします♪
本ブログの現在のテーマは Twenty Eleven をベースとして修正を加えたものです。そろそろ見直そうかと思います。見直して、反映したいと考えていますのは次の点です。
- 子テーマを使う（New！）
- ヘッダー画像を設定する
- h2 の見出し、h3 の小見出しを修正するか検討する → WordPressテーマTwenty Elevenの見出し（hタグ）スタイルを修正します！ | oki2a24
- Jetpack 2.0 の無限スクロールを導入する
- moreタグでURL末端に付く #more-xxxx を削除する
今回は、はじめての試みとなります「子テーマを使う方法」を確認しました。子テーマを有効にして、親テーマと同じ動き、見た目をさせるやり方、つまりは世界で一番簡単に子テーマを作る方法をノートいたします♪