子テーマ作成方法・2015以降の推奨設定wp_enqueue_style解説他

WordPress自分色にカスタマイズするなら子テーマで

子テーマを作る理由

子テーマを作る最大の理由は、

『テーマを改造(カスタマイズ)するにあたって、元のテーマを直接改造してしまうと、元のテーマがアップデートされた時に改造した所が上書きされて消えてしまうから』です。

カスタマイズしなければいいのでは?と思われる方は・・カスタマイズしたくなったらこのページを思い出してください(笑)

この一連の記事を書くにあたって、SNS連携をプラグインだけで(=子テーマ作成しないで)なんとか出来ないものかと、いろいろ試行錯誤してみました。

プラグインだけでも、投稿記事のシェアやブックマークだけなら問題なく動くと思います。

ただ、サイト全体へのシェアやブックマークは、やはりきちんとしたOGP設定を入れないと妙なことになります^^;

下のキャプチャは、投稿記事ではなく、トップサイト全体へのブクマ。
適切なOGP設定をしていなかったために、ブクマ時の最新記事のディスクリプションがサイトのディスクリプションとして登録されています(-_-;)

一度ブクマされてしまうと変更が効かないため、SEOにもブランディングにも良くありません(-_-;)

HUBLOGサイトのブクマ

別にこんなこと↑が起こっても気にしない

投稿記事だけちゃんとシェアできればいい

プラグインでSNS連携を終らせたいので、カスタマイズはしない

という方は子テーマも不要なので、SKIPしていただいてかまいません(^^;)

プラグイン以外で子テーマを作成する場合

子テーマをテーマ内の機能で作る事が出来る場合

テーマ内の機能で子テーマ作成が出来る場合は、素直にそちらの機能を使って作成して下さい。

テーマの取説に子テーマの作成方法が記載されている場合

また、テーマの取説に子テーマの設定方法が書かれていた場合は、そのやり方に従わないとCSSの読み取りがおかしくなる=サイトレイアウトが崩れることがあります。

取説の子テーマの設定方法、作成方法に従ってください。

子テーマ作成プラグインで子テーマを作るには

子テーマを、簡単で効率的に作る事ができるプラグインOne-Click Child Themeを使用して作成する方法を説明します。

他にも有名な子テーマ作成プラグインがあるのですが、テーマによってはコンフリクトを起こす場合もありましたので、一番シンプルなプラグインを詳解します。

プラグインの画面を開け、新規追加ボタンをクリックします。

子テーマの作成プラグイン

One-Click Child Theme を検索します。

子テーマの作成プラグイン

インストールします。

子テーマの作成プラグインOneClick Child Theme

有効化します。

子テーマの作成プラグインOneClick Child Theme有効化

設定をします。
メニューの外観をクリック、外観のサブメニュー内のChild Themeをクリックします。

子テーマの作成プラグイン

Child Themeの名前は、親テーマ名+childといった名前をつけます。Give your theme a nameの欄に「親テーマchild」を記入し、Create Childボタンをクリックします。

子テーマの作成プラグイン

メニューの外観をクリックすると、子テーマが作成され、かつ親テーマであるTwentyTwelveから、切り替わっています。
子テーマの作成

メニューのテーマ編集をクリックし、テーマの編集画面を開いてみましょう。

新しい子テーマの編集

テーマの編集画面を開くと、子テーマのスタイルシートが最初に表示されます。
子テーマスタイルシート

確認が出来たら、再びプラグインの画面を開き、One-Click Child Themeを停止しておきます。
※もう使いませんので、削除してしまっても良いのですが、初めての時は何が起きて、もう一度子テーマ作り直し!という事になるかわかりませんので(笑)、もう大丈夫、と思ったら、削除して下さい(^^)

 

◆2015/5/12追記

2015年はじめに子テーマの推奨設定が変更になりました。

以前の子テーマには子テーマ用スタイルシートを作成し、そのスタイルシートに以下のような記述をして、親テーマのスタイルシートを読み込むのが推奨設定でした。

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

以前の子テーマ用スタイルシート
子テーマ編集画面

これに伴って、One-Click Child Themeも設定が変更になり、子テーマを作成すると、子テーマ用スタイルシートと、functions.phpが作成されるようになりました。

現在作成される、子テーマ用スタイルシート
子テーマスタイルシート

スタイルシート記述からは親テーマからのスタイルシート読み込みの

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

が削除され、代わりにfunctions.phpで親テーマスタイルシートをwp_enqueue_script()で呼び出します。

子テーマ用functions.php
ws051

子テーマ読み込みのwp_enqueue_styles()は設定済みの状態で作られるようになっていますので、特別に他に何かする必要はありません。

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
//
// Your code goes below
//

この記述内容について、WordPress Codex 日本語版 子テーマ によると、

Wordpressコーデックス日本語版・子テーマ

 

wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );

は必要だとは書かれていません。

しかし、調べてみたところ、親テーマがwp_enqueue_style()を使用していない場合は、この記述が無いと子テーマスタイルでの上書きがされなくなるため、この一文が必要になる、というやりとりがあるページがありました。

Child theme does not overwrite parent themes style.css|WordPress Development
From:http://wordpress.stackexchange.com/questions/164059/child-theme-does-not-overwrite-parent-themes-style-css

汎用性を持たせる為に記述がされていると考えられますが、親テーマでwp_enqueue_style()を使用している場合は、wp_enqueue_style( ‘child-style’,…は削除してかまいません。

 

さて、最後に推奨設定変更前の子テーマの作成方法も記載しておきます。

何故なら、全く非公式に作られたテーマの場合、古いやり方でしか子テーマが作成できない場合があるからです。

テーマがwp_enqueue_style()に対応していない古い、または非公式テーマの場合の以前の作成方法

自由に作成された非公式なテーマの場合、推奨設定のwp_enqueue_style()に対応する気もない場合があります(^^ゞ

そういったテーマの場合は、昔ながらの方法で作成するしかありません。

また、「カスタマイズは想定外」で作られたテーマの場合は、以前の子テーマ作成でもうまくいかない場合もあります。

この場合は、子テーマ作成をあきらめざるをえません。

カスタマイズをしたいのであれば、テーマを直接カスタマイズするしかありませんが、カスタマイズしたらサイトが真っ白!または謎の文字列がページに表示される!という事態に備えて、

カスタマイズをする前には必ずFTP経由でカスタマイズするphpファイルのバックアップを取り、トラブルが起きたらすぐに元に戻せるようにしておく、といった保全策をとることを強くおすすめします。

また、気をつけたいのは、カスタマイズ想定外ということは、WordPress のバージョンアップも多分想定外ということです。

この場合、基本プログラムである、WordPressがどんどんバージョンアップしていく現状に、遠からずテーマがついていけなくなる可能性が高いです。

子テーマの推奨設定もWordPressのバージョンアップによるもの、これについてこられないということは、すでに取り残されつつある、またはWordPressのバージョンアップは無視ということです。

WordPressはセキュリティ上のプログラムのアップデート、ブラウザのアップデートへの対応、Googleアルゴリズムの変化への対応(SEO)、ウェブ標準(HTML、CSS、PHP)のアップデートへの対応などで、バージョンアップするのは当然ですし、バージョンアップしてくれなくては困ります。

WordPressのバージョンアップを拒否すればいい?そうですね、それならしばらくは大丈夫ですが、やはり”しばらく”だと思います。

以上のような状況を考えると、子テーマが作成できない時点でそのテーマの使用することについて考えた方が良いように思います。

さて、では以前の子テーマの作り方についてです。

以前の@importによる子テーマの作り方

TeraPadなどのテキストファイルで以下の記述をします。

親テーマ名という記述を使いたい親テーマの名前(例 Twenty Twelve)に変更して下さい。

作者名はご随意に。


/*
Theme Name: 親テーマ名Child
Description:
Author: 作成者名
Template: 親テーマ名

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../親テーマ名/style.css");

 

名前をstyle.cssとし、保存しておきます。
文字コードはUTF-8N(BOMなし)であることを確認しておきましょう。

これを子テーマディレクトリを作成してそこにアップします。

子テーマ用ディレクトリは、FTPソフトでthemesディレクトリを開き、
ディレクトリツリー図解

themesディレクトリ内に新規ディレクトリ(FFFTPではフォルダ)を作成します。
新規ディレクトリ作成例

ディレクトリに子テーマ名をつけて作成します。
子テーマディレクトリ名をつける

作成したディレクトリに先ほどのstyle.cssをアップロードします。
新しいディレクトリをダブルクリックして開いておき、そこにstyle.cssをドラッグアンドドロップすればOKです。
style_cssのアップロード

ココまでの手順をきちんと出来ていれば、ダッシュボードの外観→テーマで開くと、子テーマが以下のように表示されています。
子テーマの表示

有効化すれば子テーマに切り替わります。

どこか記述などに間違いがある場合には、以下のように表示されます。
子テーマエラー表示

スタイルシートの記述をもう一度見直してみてください。

ではでは、今日はこの辺で。

お役に立ちましたら、シェアなどしていただけると幸いです。

Published:2014/01/27

Written by