ワードプレスの子テーマの作り方

ネットビジネスのブログ運営などでワードプレスを使用されている方が多いと思います。

そのワードプレスでデザインやレイアウトの編集の際、cssファイルは子テーマを使って編集されていますか?
通常のテーマをそのまま使うことはあまりおすすめできません。

子テーマを使ってない人は下記を参考にして作成してみてはいかがでしょうか。
そんなに時間もかからず簡単にできます。

親テーマとは:適用しているテーマ
子テーマとは:親テーマに関連付けられて作成したテーマ

ワードプレスで子テーマを作るメリット

親テーマではなく子テーマを適用すれば様々なメリットがあります。

子テーマの編集箇所は親テーマより優先されるので複雑な親テーマのcssをいじるより格段に作業がしやすい

・親テーマだとなかなかいじりにくい躊躇するような箇所がある時も子テーマだと安心して色々試せる。(最悪もう一度作ればいい)

・自分でカスタマイズしたcssのテンプレートとして別のワードプレスにも流用しやすい

親テーマはアップデートすると上書きされるため、編集した内容が消えてしまう
子テーマは名前が異なる別のテーマなので影響しない

 

一番下の部分だけでも子テーマを作る理由は十分あります。
時間かけて作ったデザインを保持するためにも子テーマの使用はは必須です。


子テーマの作成手順

※作業は慎重にご自身の責任で行ってください
元となる親テーマのフォルダの中身を削除したり書き換えたりしないように注意してください

まずはワードプレスが入ってるサーバーを開きます。
(契約してるサーバーのファイルマネージャーや自分で用意したフリーのFTPサーバーを使用します。)

そしてサーバー内のワードプレスの使用しているテーマのフォルダを開きます。
ほぼ以下の階層の中にあります。

 

(ワードプレスのフォルダ)/wp-content/themes/

 

この「themes」の中に普段自分が使用しているテーマ名があるはずです。
そのテーマ(親)のフォルダとは別に、新たに「-child」と加えた子テーマのフォルダを作ります。

例として「hitmag」のテーマなら「hitmag-child」を新たに作成。

ネットビジネスで生活する道 ワードプレスの子テーマ

 

続いてデスクトップ上にメモ帳などで「style.css」という名前でCSSのファイルを作成します。
中身は以下のコードを記述してください。


/*
Template:○○○
Theme Name:●●●
*/


○○○には親(元)のテーマ名
●●●には子テーマ名を入れます。

<例>
/*
Template:hitmag
Theme Name:hitmag-child
*/

※全角半角、大文字小文字など入力ミスに気をつけてください

以上を記述したCSSファイルを作成した子テーマのフォルダの中に入れます。

 

続いてPHPファイルのファイルを作成します。
同様にメモ帳などの中に以下のコードを記述し、「functions.php」という名前のファイルを作ります。


<?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’)
);
}
?>


作成後、こちらもCSSと同様に子テーマのフォルダの中に入れます。

サーバーへの準備は以上です。

 

子テーマのフォルダーと中の2つのファイルが正しく設定できていれば、ワードプレス管理画面の
「外観」→「テーマ」に作成した子テーマが表示されるので「有効化」にしましょう。

ネットビジネスで生活する道 ワードプレスの子テーマ
※ここで作成した子テーマを選択できない場合は、上のテキストやフォルダー名が間違ってる可能性あるのでよく確認しましょう。

 

ネットビジネスで生活する道 ワードプレスの子テーマ

「テーマの編集」の右側で親テーマを引き継いでるのが確認できます。
これで子テーマの設定が完了です。

 

以降は子テーマを使って作業していきましょう。
子テーマに変更した直後は親テーマで「カスタマイズ」した内容がはずれたりしてます。
再度、子テーマ上で新たにカスタマイズをすれば問題ありません。

今後、編集作業は子テーマのファイルを使い、親テーマの中身は触らないのが理想です。

 

今回のファイル以外でも「index.php」や「header.php」などを編集する必要性が出た場合、phpファイルを直接いじるのに抵抗があるなら、一度親テーマから編集したいファイルをダウンロードして編集し、その編集したファイルは「子テーマ」の中に入れてください。

そうすれば何かあっても最悪、親テーマに編集元のファイルは残りますし、設定内容が優先されるのは子テーマの方なので安心です。

中身全部ごっそりコピーすることもできますが、子テーマの中は自分が編集を加えたファイルだけをおいてた方が見栄え的にも作業がわかりやすいと思います。

 

ザ・トール(THE THOR)はSEOに強くアフィリエイトに最適なワードプレスの優良テーマ

ワードプレスのテーマ ザ・トール hte thor

「ザ・トール(THE THOR)」は、SEO対策に特化した検査上位表示に有利なワードプレスのテーマです。
さらに本来はプラグインをインストールしなければいけない機能なども豊富に標準で搭載し、アフィリエイトの管理にも便利なツールが用意されています。(19/10/27)
記事を読む







スポンサーリンク

考察TOPへ
HOMEへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください