この記事では『 子テーマを作る方法 』を解説します。
解説サンプルは、WordPressの標準テーマ「Twenty Twenty-One」とサーバー「CnoHa wing」の組み合わせです。作業は基本的にどのテーマ、どのサーバーでも変わりありません。
なお操作方法は自分独自の方法となっているので正確な操作かは不明です。作業をする場合はバックアップを取り自己責任のもと行ってください。
このページにたどり着いた人は「子テーマ」が作りたくて来訪されていると思いますので、「子テーマ」の必要性などは説明しません。「子テーマ」を作るとテーマの基本的な設定はやり直しになるので早めに作業することをオススメします。
子テーマを作る方法
作業手順は以下の通りになります。※()内は作業場所
- ConoHa WING のコンパネからファイルマネージャーを開く
( ConoHa WING コントロールパネル ) - サーバー上に子テーマのフォルダを作る
( ConoHa WING ファイルマネージャー ) - 子テーマのフォルダにファイルをコピーする
( ConoHa WING ファイルマネージャー ) - ファイルをダウンロードし内容を書き換える
( PCデスクトップ で作業 ) - 子テーマフォルダに上書きアップロードする
( PCデスクトップ から ConoHa WING ファイルマネージャーへ ) - テーマ設定で子テーマを選び完成
( WordPress 管理画面 )
ConoHa WING のコンパネからファイルマネージャーを開く
作業は ConoHa WING で進めます。他のサーバーでも同じようなことができると思うので探してみてください。
まず ConoHa WING のコントロールパネルから「ファイルマネージャー」を開きます。
「サイト管理」で対象のサイトを選び「ファイルマネージャ」をクリック。
サーバー上に子テーマのフォルダを作る
「ファイルマネージャー」が別枠で開いたら「themes」を選択
「themes」のフォルダの中に「新規フォルダ」を作成し、名前を「元テーマ-child」としましょう。ここでは「twentytwentyone-child」としています。
子テーマのフォルダにファイルをコピーする
フォルダを作ったら、もとのテーマ「twentytwentyone」のフォルダを開きます。
中に「function.php」というファイルがあるので右クリックしてコピーします。
さきほど作ったフォルダ「twentytwentyone-child」にもどり、何もない場所で右クリックしペースト。さきほどコピーした「function.php」が生成されます。
同様に「style.css」をコピペで「twentytwentyone-child」フォルダに生成します
これで「twentytwentyone-child」のフォルダの中に「function.php」と「style.css」のファイルができました。
ファイルをダウンロードし内容を書き換える
コピーしたファイルをダウンロードします。
「function.php」をダブルクリック。するとファイルがダウンロードされます。同様に「style.css」もダブルクリックしてダウンロード。
ダウンロードしたファイルの中身を変更
作業はPCのデスクトップです。
編集アプリには『Brackets』がおすすめ。もちろんいつも使用しているアプリでも大丈夫です。（メモ帳はNG）
『Brackets』は2021年9月1日にサポートが終了する予定で『Visual Studio Code』への移行が推奨されています。
関連記事Visual Studio Code ダウンロードページ
function.php の内容を変更する
function.phpの中身を以下のように変更します。
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_parent_theme_file_uri() . ‘/style.css’ );
}
?>
style.css の中身を変更する
Theme Name: Twenty Twenty-One-child
Template: twentytwentyone
Theme URI: https://wordpress.org/themes/twentytwentyone/
*/
上記のコードは以下のサイトを参考にさせていただきました。
子テーマフォルダに上書きアップロードする
ファイルの修正が完了したらファイルをアップロードします。
最初に作ったフォルダ「twentytwentyone-child」にファイルを直接ドラッグ＆ドロップします。
「上書きしますか？」のアラートが表示されるので「はい」を選び上書きします。間違ってもテーマのもとファイルを上書きしないよう注意してください。
テーマ設定で子テーマを選び完成
WordPress の管理画面に戻ります。
テーマを確認すると「Twenty Twenty-one-child」という名前で子テーマが表示されているはずなので選択して有効化しましょう。
外観 → テーマ → 有効化
以上で完成です。おつかれさまでした。
関連記事Twenty Twenty-One ダークモードをカスタマイズ
関連記事Twenty Twenty-One 「Powered by WordPress」を変更する
あとがき
じつは、多少の設定を行ってから「やはり子テーマがあったほうが良いな」となり、急遽子テーマを使用することになりました。書いた記事などは特に変更する必要はありません。ただしテーマの基本設定はやり直しとなりました。「twenty twenty-one」の設定項目は多くないので大変ではありませんが、二度手間なので最初から子テーマを用意するのがおすすめです。
今回も管理画面が使いやすい『ConoHa WING』のおかげでスムーズに作業ができました。表示速度も速く価格も手頃な『ConoHa WING』はオススメのサーバーです。
