子テーマの作り方 2021 twenty-one child conoha

子テーマを作る方法 CnoHa wing & Twenty Twenty-One

この記事では『 子テーマを作る方法 』を解説します。

解説サンプルは、WordPressの標準テーマ「Twenty Twenty-One」とサーバー「CnoHa wing」の組み合わせです。作業は基本的にどのテーマ、どのサーバーでも変わりありません。

なお操作方法は自分独自の方法となっているので正確な操作かは不明です。作業をする場合はバックアップを取り自己責任のもと行ってください。

このページにたどり着いた人は「子テーマ」が作りたくて来訪されていると思いますので、「子テーマ」の必要性などは説明しません。「子テーマ」を作るとテーマの基本的な設定はやり直しになるので早めに作業することをオススメします。

 

子テーマを作る方法

 

作業手順は以下の通りになります。※()内は作業場所

  1. ConoHa WING のコンパネからファイルマネージャーを開く
    ( ConoHa WING コントロールパネル )
  2. サーバー上に子テーマのフォルダを作る
    ( ConoHa WING ファイルマネージャー )
  3. 子テーマのフォルダにファイルをコピーする
    ( ConoHa WING ファイルマネージャー )
  4. ファイルをダウンロードし内容を書き換える
    ( PCデスクトップ で作業 )
  5. 子テーマフォルダに上書きアップロードする
    ( PCデスクトップ から ConoHa WING ファイルマネージャーへ )
  6. テーマ設定で子テーマを選び完成
    ( WordPress 管理画面 )

 

ConoHa WING のコンパネからファイルマネージャーを開く

ConoHa WING ファイルマネージャー コントロールパネル 子テーマを作る方法

作業は ConoHa WING で進めます。他のサーバーでも同じようなことができると思うので探してみてください。

まず ConoHa WING のコントロールパネルから「ファイルマネージャー」を開きます。

「サイト管理」で対象のサイトを選び「ファイルマネージャ」をクリック。

 

サーバー上に子テーマのフォルダを作る

ConoHa WING ファイルマネージャー テーマフォルダ

「ファイルマネージャー」が別枠で開いたら「themes」を選択

 

ConoHa WING テーマ 子テーマを作る方法 フォルダ

「themes」のフォルダの中に「新規フォルダ」を作成し、名前を「元テーマ-child」としましょう。ここでは「twentytwentyone-child」としています。

 

子テーマのフォルダにファイルをコピーする

子テーマを作る方法 ファイルをコピー

フォルダを作ったら、もとのテーマ「twentytwentyone」のフォルダを開きます。

中に「function.php」というファイルがあるので右クリックしてコピーします。

 

子テーマファイル ConoHa WING

さきほど作ったフォルダ「twentytwentyone-child」にもどり、何もない場所で右クリックしペースト。さきほどコピーした「function.php」が生成されます。

同様に「style.css」をコピペで「twentytwentyone-child」フォルダに生成します

これで「twentytwentyone-child」のフォルダの中に「function.php」と「style.css」のファイルができました。

 

ファイルをダウンロードし内容を書き換える

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の中身を以下のように変更します。

<?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/
*/

 

上記のコードは以下のサイトを参考にさせていただきました。

WordPress【Twenty Twenty-One】の子テーマを作成する方法

 

 

子テーマフォルダに上書きアップロードする

function.php style.css アップロード サーバー

ファイルの修正が完了したらファイルをアップロードします。

最初に作ったフォルダ「twentytwentyone-child」にファイルを直接ドラッグ&ドロップします。

「上書きしますか?」のアラートが表示されるので「はい」を選び上書きします。間違ってもテーマのもとファイルを上書きしないよう注意してください。

 

サーバー アップロード 上書き保存 ConoHa WING

 

テーマ設定で子テーマを選び完成

ConoHa WING 子テーマを作る方法 Twenty Twenty-One

WordPress の管理画面に戻ります。

テーマを確認すると「Twenty Twenty-one-child」という名前で子テーマが表示されているはずなので選択して有効化しましょう。

操作手順
外観 → テーマ → 有効化

 

以上で完成です。おつかれさまでした。

関連記事Twenty Twenty-One ダークモードをカスタマイズ
関連記事Twenty Twenty-One 「Powered by WordPress」を変更する

 

あとがき

 

じつは、多少の設定を行ってから「やはり子テーマがあったほうが良いな」となり、急遽子テーマを使用することになりました。書いた記事などは特に変更する必要はありません。ただしテーマの基本設定はやり直しとなりました。「twenty twenty-one」の設定項目は多くないので大変ではありませんが、二度手間なので最初から子テーマを用意するのがおすすめです。

 

当サイトのテーマは子テーマ標準装備[THE THOR]

今回も管理画面が使いやすい『ConoHa WING』のおかげでスムーズに作業ができました。表示速度も速く価格も手頃な『ConoHa WING』はオススメのサーバーです。

 

>