WP子テーマ2-子テーマ用ファイルの作成-
この記事について
Hello World
WordPressサイトのデザインやレイアウトのカスタマイズをする為、子テーマの作成について次の部分を調査した。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WP子テーマ2-子テーマ用ファイルの作成-
フォルダの作成
子テーマ用ファイルを格納する為のフォルダを用意する。ディレクトリには以下のファイルを作成し格納する。
- style.css
- functions.php
style.cssの編集
テキストエディタを使い以下の形式で情報を入力し編集する。
編集内容
/*
Theme Name: 子テーマの名前
Theme URI: 子テーマのURI
Description: 説明
Author: 著者名
Author URI: 著者URI
Template: 親テーマ名
Version: バージョン
License: ライセンスについて
License URI: ライセンスURI
Tags: タグ
Text Domain: 子テーマテキストドメイン
*/最低限必要な内容
以下の内容だけでも動作するよう。
/*
Theme Name:子テーマの名前
Template:親テーマ名
*/functions.php
子テーマとしてはstyle.cssのみで機能するようだが、スタイルを正しくキューに入れるのに functions.phpが必要。
キューの入れ方
functions.phpでwp_enqueue_script()を用いる。親テーマを原則以下のコードをそのまま使えば良い。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}以前は@import:という方法で行っていたらしいが、記事作成時では非推奨。上記方法が推奨されている。
留意する事
テーマが複数の .css ファイルを持つ(例：ie.css、style.css、main.css) 場合は、すべての親テーマの依存関係を管理する必要がある。依存関係に ‘parent-style’ を設定すると子テーマのスタイルシートは親テーマの後に読み込まれる。
<?phpについては本来phpコードの終わりを?>で閉じるのが構文となるが、?>は省略可能かつ、省略しない場合に不具合がでるケースもあるようで、原則?>で閉じる事は避ける。
子テーマが上手く読み込まれない場合
子テーマのスタイルシートは通常、自動的に読み込まれる。そうでない場合は、同様にエンキューする必要がある。 依存関係として「parent-style」を設定、その後に子テーマのスタイルシートをロード。
<?php
add_action( 'wp_enqueue_scripts', 'theme_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')
);
}まとめ
子テーマの使用でまず準備するの子テーマについての登録情報を入力する2ファイルのみで、特に複雑な部分はなく、シリカゲル系ニートでも問題なく作成できそう。
よろしく。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
