ぴいブログも【ワードプレスの子テーマ】対応しました

 ワードプレスは、バージョンアップする度に、CSS がリセットされ、カスタマイズが台無しになってしまう。そして、アナリスティックス、コンソール、アドセンスコードも消えてしまいます。

 正直、直すの大変ですので、子テーマを導入しました。

 スマホで設定したので一時間かかってしまいました。

 ついでにショートコードのプラグインも入れ、装飾デザインも多少楽に作れるようにしました。

 ↓ という感じが簡単になった

利用状況
・サクラサーバー
・ワードプレス5.1.1
・テーマはtwenty seventeen

 

 

1.サーバーに入り込みます

 日頃あまり入らないですが、サクラサーバーにログインして、先頭ページの「ファイルマネージャー」をクリックします。

サクラサーバーの先頭ページ

 

 すると、サーバーに入れます。※パスワードを聞かれます。初期に記録しておかないと入れなくなります。

2.子テーマのフォルダを作ります

 

サーバー内

 上の写真のようにブログのフォルダがあり、「wp-content」の下の階層に「themes」という階層があります。

 この更に下の階層にインストールされているテーマがあります。

 このテーマと同格の位置に【子テーマ】のフォルダを新規作成します。

《注意!》
 twenty seventeen フォルダをコピーするのではなく、新規で空フォルダを作ります。(まるまるコピーは、ミスで本体を削除したりするので避けるべき)

 私は「twenty-seventeen-child」とつけました。

 名前は重複さえしなければ何でも大丈夫です。

 

3.子テーマのフォルダにファイルを作ります

 子テーマを機能させるために必要なファイルは「functions.php」「style.css」の2ファイルです。

 

子テーマのファイル

 

 私は改造する可能性の高いindex.php はtwenty seventeen からまるまるコピーしました。また、後にタイトルの中にcss で改造したいので、ヘッダーのファイルもコピーする予定です。

 

 「functions.php」「style.css」については、twenty seventeen からコピーしてきましたが、中身を全て消しました。

《最大注意!》
 まるまるコピーして、ファイル内を全削除するので、非常に注意が必要です。間違って親テーマのファイルの中身を削除したらブログ終了になる場合もあります。

 

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

 


 これをコピーしてファイル内に貼り付けファイルを保存します。(責任負えませんので自己責任でお願いします)

 ちなみに、見えている範囲の右側にも続いているのでスライドさせると見えます。

 ファイル内をいじる必要はないです。そのまま貼り付けです。

 

「style.css」の中身

 

/*
Template:twentyseventeen
Theme name:twentyseventeen-child
*/

 


 二行目のテンプレートは、親テーマの名称と完全一致させて下さい。

三行目の名称は好きな名前で大丈夫だと思います。私の場合はtwentyseventeen-childとしました。フォルダ名と一致していません。ワードプレス側に表示される名前になります。

《またまた注意!》
 この2ファイルの中身は、今書いた記述のみです。コピーしてきたファイルには大量のcssが書かれていますが、子テーマ側にコピーしたファイルの中身は全削除し、上記内容にしないといけません。

※親テーマ側のファイルはコピーするだけですので、親テーマ側は一切いじってはいけません。

 

4.ワードプレス側の対応

 

 ワードプレスの編集画面の「外観」の「テーマ」を選びます。

ワードプレス 外観 テーマ

 

 すると、画像もない味気ない自分の作ったテーマが登場しているはずです。

 

子テーマ 出現

 

 カスタマイズを選ぶと馴染みの画面になると思います。

馴染みの画面

 

 ここで、twenty seventeen から変更で、付けた名前の子テーマを選びます。

《超大注意!》
 必ずプレビュー見て下さい。その前に公開してはいけません。私はとんでもない画面になってました。(2つのファイルを適正な内容にしなかったため)

 

 親テーマで追加css で改造した場合は、子テーマが優先されるため消えます。親テーマの追加css を子テーマ側にコピーする必要があります。

 

【最後に】

 2つのファイル以外は親テーマから、まるまるコピーして、子テーマ側で改造するために使います。サーバーの中に入らなくても、ワードプレス側の編集でもいじれます。表示幅でも何でも好きなように改造出来ます。

 

 子テーマ作るより、記事書くほうが時間かかった。