カテゴリー
ワードプレスの初期設定

ワードプレス、「子テーマ」作成

ワードプレスの子テーマ作成は、①子テーマフォルダを作る、②「style.css」を新規作成、③「functions.php」を新規作成、④子テーマを有効化するという流れ

【2020年3月更新】

「子テーマ」とは、ワードプレス本体に技術更新があった時に、「テーマ」(=親テーマと呼ぶ)も互換性を保つために更新されることが多く、この時、個人がカスタマイズした部分がなくならないように「子テーマ」として修正箇所を分離しておく仕組みです。

「子テーマ」は、「子テーマディレクトリ(フォルダ)」内の「style.css」(デザインの変更)と「functions.php」(機能の変更)の2つのファイルで成り立っています。

子テーマ作成の流れ

  1. サーバーで子テーマディレクトリ(フォルダ)を作る
  2. 「style.css」を新規作成
  3. 「functions.php」を新規作成
  4. ワードプレス管理画面で、子テーマを有効化する

※お使いのサーバーによって操作が違うので、サーバー名+子テーマで探すといいかも。

子テーマディレクトリ(フォルダ)作成

レンタルサーバーのコントロールパネルのファイルマネージャーに入ります。(ColorfulBoxなら↓)

カラフルボックス、ファイルサーバー

入った先で、public_htmlから階層構造を辿って、「themes」のフォルダー上で「+New Folder」を押して新しいフォルダーを作ります。

フォルダー名は「テーマ名_child」などと命名すると分かりやすいです。

Siteground、子テーマフォルダー

この辺の階層設定がサーバーで違います。↑はSiteGroundの例です。

style.css

上で作成した子テーマフォルダー内に、「style.css」という新規ファイルを作成します。

Siteground style-css 子テーマファイル

出来たファイルを「編集」で開いて↓を自分のデータに差し替えてコピペ。

/* 
Template: XXXXX (←親テーマの名前) 
Theme Name: XXXXX_child (←子テーマのファイル名) 
Theme URI: https://xxxxxx.com/wp-content/themes/twentyseventeen_child/ (←子テーマのフォルダーアドレス) 
Author: XX (←筆者) 
Author URI:https://xxxxxx.com/customize-memo/article-author/xxxx/ (←あれば筆者紹介ページ) 
Description: Child Theme of Twenty Seventeen (←ファイルの説明文) 
*/

functions.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' ); 
} 
?>

※念のため「プレーンテキストとして貼り付ける」方がいいカモ。

※子テーマがあれば、そちらを優先。なければ親テーマを参照しますって感じ?、英文的には、親テーマを読んだ後に、子テーマも読み出しますという意味ですね。

※functions.phpの更新に失敗すると、管理画面からして真っ白になってギョッとするのは、ワードプレスあるある?、そういう時はサーバーに戻ってこのファイルを削除するか、バックアップを復元すると取り敢えず真っ白画面の恐怖からは解放されます。

子テーマを有効化する

function.phpが作成できたら、ワードプレス側の管理画面に戻ります。

外観 → テーマ → 有効化

ワードプレス、子テーマを有効化する

この状態の子テーマは、styles.phpとfunctions.phpが整っていますから、機能としては十分です。

ただ、上の画像の様に子テーマにイメージがついてません。興味があれば、「ついでに」まで読んでいってください。

ついでに

screenshot.png

コントロールパネルのファイルマネジャーに戻ります。

親テーマのフォルダから「screenshot.png」というファイルを探して、「コピー」を押すとポップアップが出てきます。

スクリーンショットpngをコピー

ココに子テーマのフォルダのパスを入れると、丸っと子テーマにコピーされます。

スクリーンショットpngペースト後

ワードプレスの管理画面に戻って、ページの再読み込みをかけるとイメージが反映されていると思います。

画像は、screenshot.pngという名前だったら違う画像ファイルでも同じところに反映されます。

参考資料:wordpress codex(日本語版)、「Codex子テーマ

最後までお読みいただきありがとうございました。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

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