カテゴリー
WordPress

【WordPress】世界で一番簡単に子テーマを作る方法♪を勉強してオリジナルテーマを作る礎とします！

スクリーンショット_2013-07-02_20.48.18.png

本ブログの現在のテーマは Twenty Eleven をベースとして修正を加えたものです。そろそろ見直そうかと思います。見直して、反映したいと考えていますのは次の点です。

今回は、はじめての試みとなります「子テーマを使う方法」を確認しました。子テーマを有効にして、親テーマと同じ動き、見た目をさせるやり方、つまりは世界で一番簡単に子テーマを作る方法をノートいたします♪

子テーマを使う（New！）

今までは Twenty Eleven テーマをベースに変更したい装飾部分のソースを修正して使っておりました。修正箇所は、

  • ヘッダー画像の入れ替え
  • h2 の見出し、h3 の小見出しを修正
  • 無限スクロール導入
  • moreタグでURL末端に付く #more-xxxx を削除

の 4ヵ所のみです。ヘッダー画像の用意が 100 以上と多少数がございますのでほんの少しだけ面倒ですけれども、修正箇所としては 4ヵ所と少ないです。 ですので、Twnty Twelve テーマをベースとしたテーマに変更するにあたって、オリジナルには一切手を入れずに、子テーマを使用して必要箇所のみ追加したり変更したりしていこうと思います。

１．★情報収集　考え方★一番シンプルで簡単な子テーマの作り方

「WordPress 子テーマ」などで Google 検索いたしますと、たくさんの子テーマ解説ページがございます。これらのページは、井戸端会議の立ち聞き、パネルディスカッションの聴講という気持ちで読みます。 体験談として、とても有益です。ですけれども、正確ではないかもしれません。これらのページをよく読み、イメージを固めたうえで、公式ドキュメントを読みます。

Oh! English! ですけれども、今までたくさんの方の子テーマ解説を見て来ましたのでなんとなくわかり、嬉しく思います。翻訳ですのでどうしても古い情報となっておりまして、ちょっとだけ精度は落ちてしまいます。けれども、日本語版のページも非常に参考になります。

日本語版公式ページを読み、英語本家公式ページを読むことにいたします。

【１のまとめ】子テーマ作成ドキュメントの正確性順位！

２．★DIY　実践★一番シンプルで簡単な子テーマの作り方

次のディレクトリに子テーマを作ります。親テーマと同じ場所に配置いたします。

wp-content/themes/

ディレクトリ名はどのような名前でも問題ありませんが、慣例として「親テーマ名-child」とするのが一般的とのことです。

You can name the directory whatever you want, but it is common practice to use the name of the parent theme folder with “-child” appended to it. So, for instance, if you are making a child of the twentytwelve theme, your folder name would be twentytwelve-child.

Child Themes « WordPress Codex

ですけれども、ディレクトリを見ました時にぱっとわたくしのテーマがわかるようにしたく存じますので折衷案として「oki2a24com-twentytwelve-child」としようと思います。

また、子テーマを作りますのに最低限必要なファイルは次のとおりです。

style.css

簡単ですね♪

WordPress に子テーマとして認識していただくために style.css は次の内容から始めます。最低限必要なのは Theme Name と Template で、Template は親のテーマ名ではなく親テーマのディレクトリ名を指定します。

/*
Theme Name: oki2a24.com, Twenty Twelve Child
Theme URI: https://oki2a24.com/
Description: Twenty Twelveテーマを基にした子テーマです。
Author: oki2a24.com
Author URI: https://oki2a24.com/
Template: twentytwelve                             
Version: 1.0
*/

これで親テーマを読み込みましたけれども、CSS だけは別途読みこむ必要があります。これがなぜなのか考えてみますと、「テーマの機能は使いたい、でも CSS はオリジナルにしたい」という要望に応えているのだと思います。

CSS の読み込み方は簡単です。親テーマの CSS を、CSS の作法に則って指定するだけです。具体的には、style.css の最後に次を追加するだけです。

@import url("../twentytwelve/style.css");

これで完了です。

【２のまとめ】一番簡単でシンプルな子テーマの作り方

Twnty Twelve を親テーマとします。

  1. 最低限必要な style.css ファイル作成

    wp-content/themes/twentytwelve-child/style.css
  2. style.css ファイル編集 
    /*
Theme Name: Twenty Twelve Child
Template: twentytwelve                             
*/
@import url("../twentytwelve/style.css");

３．★確認★子テーマを有効にしていろいろチェックします♪

早速確認してみましょう♪

管理画面の外観 > テーマへ移動します。新しく作成した子テーマが認識されていることを確認します。そっけないですけれども「oki2a24.com, Twenty Twelve Child」があります。 いい感じですね♪

スクリーンショット 2013-07-02 19.52.52.png

まずは「ライブプレビュー」をクリックしてみます。Twenty Twelve と比較してみましても同じ見た目、動きをしています。とてもよいです。

テーマのライブプレビューはトップページだけではなく、個別のページも確認できる点が素晴らしいと思います。

スクリーンショット 2013-07-02 20.00.12.png

さて、この時点で気になった点がございます。

  • ヘッダー画像がない！
  • ヘッダーメニューが現テーマと違う！
  • なのにウィジェットのメインサイドバーが現テーマと同じ！
  • なのにウィジェットのフッターエリア1が現テーマと違う！
  • h2、h3 が現テーマと違う！
  • 無限スクロールが動いている！
  • moreタグでURL末端に付く #more-xxxx が付いていない！

ともかく、実際に反映してみましょう。ライブプレビューの「保存して有効化する」をクリックするか、テーマを選択するページ（外観 > テーマ）で「有効化」をクリックします。

その結果、上記の気になった点とは違うところがありました。

  • moreタグでURL末端に付く #more-xxxx が付いていない！

です。これは、修正方法もわかっていますし、次回以降に本格的に子テーマを作っていく時に対応しようと思います。ライブプレビューはきっと、変更前のテーマをベースに動いているということなのだと思います。

その点以上に、わたくしとしては次のウィジェットがテーマ変更で、一部だけ無効になったり引き続き有効であったりする箇所がそのままなところに納得いきません。

  • ヘッダーメニューが現テーマと違う！
  • なのにウィジェットのメインサイドバーが現テーマと同じ！
  • なのにウィジェットのフッターエリア1が現テーマと違う！

ですがこれらはおいおい、子テーマが完成して、ウィジェットまわりを調整するときに調べたいと思います。

また、やっぱり無限スクロールがテーマファイルを修正せずとも動いていることに、驚きました。Twenty Twelve テーマにはもともと JetPack プラグインの無限スクロールを有効にするコードが予めあるのか、それとも JetPack プラグインの方で、テーマに手を加えなくとも無限スクロールできるようにしたのか、興味深いです。

以上です。

コメントを残す