
ワードプレス(Wordpress)を使うときに「小テーマ」を作ったほうがいいという話を聞きますよね。
ワードプレスに詳しくないと子テーマ?となってしまいます。
子テーマを作るメリットとSTINGERを使った子テーマの作り方をまとめました。
子テーマを作るといっても初心者には難しいんです。
私も何度も試してようやく設定することができました。
ワードプレスに詳しくない私ができた子テーマの設定方法を、同じ初心者の方にもわかるように簡単にまとめています。
目次
子テーマとは
子テーマとは、ワードプレスで使っているテーマのオプションのようなものです。
子テーマを作るメリット
簡単に言うと元々のテーマ(ここでは、親テーマとします。)のバージョンアップ等のアップデートがあった時に、子テーマが活躍します。
親テーマがアップデートされるとテーマの設定が初期設定に戻ってしまいます。
初期設定に戻ってしまうということは、これまでしてきたテーマの変更が無駄になるということです。
アップデートしたあとに一から修正するのは大変ですよね。
もし、子テーマを作って子テーマに修正をしていれば、親テーマがアップデートされても以前の修正が初期化されないんです。
親テーマがアップデートされても修正をしなくても済むことが子テーマを作るメリットです。
子テーマの作り方(STINGER7)
子テーマの作りかたを「STINGER7」を例に説明します。
子テーマを作るのは、基本的には、サイトを作り始めるときです。
サイトがある程度できている状態で子テーマを作ってもそれ以前に変更している箇所が反映されません。
子テーマのファイルを作る
デスクトップにフォルダを作りましょう。
フォルダの名前を「stinger7-child」としてください。
ファイルを作る
作るファイルは2つです。functions.phpとstyle.cssです。
親ファイルで変更する予定があれば、その分のファイルが必要です。
簡単に子テーマを作ることを前提とすると、最低限この2つあれば子テーマを作成できます。
ファイルの記入方法(functions.php)
ワードパットかメモ帳を開きます。
<?php から ?> までをコピーして貼り付けます。
functions.phpと名前を付けて保存してください。
今の段階では、functions.php.txtとなっていても問題ありません。
<コード>
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
ファイルの記入方法(style.css)
ワードパットかメモ張を開きます。
/* から */までをコピーして貼り付けます。
style.cssと名前を付けて保存します。
今の段階では、style.css.txtとなっていても問題ありません。
/*
Theme Name: STINGER7Child
Template: stinger7
*/
作成したファイルをフォルダにまとめる
先ほど作成した2種類のファイル(functions.phpとstyle.css)をフォルダ(stinger7-child)に移動します。
stinger7子テーマをアップロード
作成した子テーマ(stinger7-child)をアップロードします。
方法は2種類あります。
ワードプレスのテーマの追加でアップロードをする方法とFFFTPを使う方法です。
今回はFFFTPを使ってアップロードします。
アップする場所は以下です。
/ドメイン名/public_html/tsumemizumushi/wp-content/themes
stinger7子テーマファイル修正
先ほどファイル名の後ろに.txtがついていたファイルがあれば、名前を変更して削除しておきます。
削除して以下のようになれば終了です。
stinger7子テーマ有効化
ワードプレスの外観を開くとsinger7childが表示されています。
singer7childを有効化します。
有効化されたら、正確に反映されているかホームページを確認します。
反映されていれば、singer7の子テーマ作成は無事終了です。
singer7childが正確に反映されていない場合
私も最初正確に反映されていないことがありました。
要因1
ヘッダー画像が表示されない。
これは、singer7childの問題ではないんです。
なぜかヘッダー画像の登録ができていない状況になっているので、
外観ーカスタマイズーヘッダー画像 でヘッダーに表示したい画像を選びましょう。
これで解決です。
要因2
ホームページに表示されたフォントが崩れている。
これは、functions.phpの表記が間違っている可能性があります。
内容を確認しましょう。
まとめ
ワードプレスで、STINGER子テーマを作るのも初心者には一苦労です。
インターネットを見ると専門的なことが書いてあるサイトを見かけます。
詳しい方には分かるかもしれませんが、初心者の私には、内容を理解することも難しいです。
今回、一番シンプルな方法をまとめましたが、この方法で子テーマを作成することができるはずです。
テーマについても、singer7を例に作成しましたが、他のテーマでも応用ができます。