推奨とされる子テーマ作成方法（functions.phpを使う）でやってみた

ワードプレスサイトはテーマテンプレで直接カスタマイズするとアプデする際デザインがまた崩れてやり直しになってしまうので、それを防ぐためにも子テーマは必須ですよね

その子テーマを超簡単に作成するなどについて以前このログサイトでも書きました。。。。。。。

で、前回記載したやり方が一番簡単だと思う↓

▶︎WordPress子テーマの作成とアップロード(誰にでもできる超簡単な方法）

▶︎子テーマをサーバーのファイルマネージャーから直接アップロードする方法

んが、この子テーマファイルの作成の仕方はやや古いやり方で、

現在では別のやり方が推奨とされているようなので、そのやり方に直してみました

そのメモです

♥1、@importを使うやり方は現在は推奨ではない

以前は、style.cssファイルに@import を記述してのやり方、つまり前回ここで書いた上記のリンクの内容が推奨とされていた

ですが、現在では、functions.phpファイルも使って作成するやり方が推奨になっているようです

その内容は下記のページに書かれています

▶︎子テーマ｜WordPress Codex 日本語版

ただ、上記にも書いてますが、style.cssファイルに@import を記述してのやり方が一番簡単です

推奨のやり方の、functions.phpファイルを使いますが、このfunctions.phpファイルはやや注意が必要なファイルなので、準備が整ってない方は@import方式でとりあえずやっておくのもアリだと思います

私もつい最近まで@import方式のままでした。。

最低限下記の注意事項は把握しておいた方がいいかなと……

♥2、functions.phpファイル作成の注意点

まずこの functions.phpファイル でうっかり上書きするとサイトが表示されなくなってホワイトアウトされ、ログインできなくなったりしやすい笑

それら色々の注意事項をざっとまとめると、

1. 元祖 functions.phpファイルのバックアップを取っておく
   (ファイルマネージャーやFTPを介してDLして開かずに保存しておく
   →失敗してログインできなくなったらそのバックアップファイルをファイルマネージャーやFTPを介してその失敗したファイルと書き換える）
2. 文字コードはUTF-8 （BOM無し）で保存できるエディタを使う
   （※メモ帳とかWordとかリッチテキストエディタなどはNG）
3. 他サイトから直接コピペしない
   （コピーするならした後エディタにコピペしてから→目に見えない余計な情報、開業、スペース等が入っているとNG）
4. 開始タグ前・終了タグ後にスペースや改行などを入れない
   （関数を書くたびに開始タグ、終了タグを入れると失敗しやすい
   →終了タグは必要ないっぽい？）

<?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')
    );
}
//関数の区切り

//新しい関数はこの中に追加していく

?>//修了タグ

とにかく、

• 余計な情報（改行・スペース・BOMなど）が入らないようにすること
• ダッシュボードからログインできなくなってもファイルマネージャーやFTPを介して復元できるようにしておくこと
  （サイトが真っ白になってログインできなくなることを前提に進める必要がある笑）

が必要みたいね…….

♥3、推奨とされる子テーマ作成の手順

❶style.css と、functions.php の２つのファイルを作成しておく

❷それをファイルマネージャーやFTPを介してアップロードする
（またはzipに圧縮してワードプレスのダッシュボードからアップロードする）

❸サイトがちゃんと表示されてるか確認する

という手順

❶style.css と、functions.php の２つのファイルを作成しておく

style.css

/*
Theme Name:あなたの私の子テーマ名
Template:あなたの私の親テーマ名
*/

※半角が全角スペースになっていたり、スペル間違いにご注意をばw

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

※開始タグ前や修了タグ後に不要なスペースや改行などを入れない
（上記のように修了タグを入れなくても今回はOK)
※文字コードはUTF-8 （BOM無し）

※▶︎子テーマ｜WordPress Codex 日本語版
よりコードを抽出して実際に自サイトで検証してみました。。。

❷それをファイルマネージャーやFTPを介してアップロードする
（またはzipに圧縮してワードプレスのダッシュボードからアップロードする）

基本的に前回に書いてあることと同じです

▶︎WordPress子テーマの作成とアップロード(誰にでもできる超簡単な方法）

▶︎子テーマをサーバーのファイルマネージャーから直接アップロードする方法

で、失敗上等でやるためにも、初めての方はまず、style.cssで@importを使って子テーマ作っておいて、そこにfunctions.phpファイルをアップしてみて試していけばいいと思う

失敗したらそのfunctions.phpファイルをとりあえず削除すればいいわけですから

私はもともと@importでやっていたのでそこからやりました。。。

❸サイトがちゃんと表示されてるか確認する

やってみたら必ずちゃんとサイトが表示されて異常がないか確認する

キャッシュのせいで編集が反映されてないように見えることもあるので、基本的にはリロードして確認する。反映されてないようであれば、他のブラウザでも見てみたり、ブラウザのキャッシュを削除してから確認するとわかる

▶︎ブログ・サイトカスタマイズが反映されないときはまずアレをチェック！参照

上記のメモは全て私が私の環境下の元実際やってみたことでまとめていますが、

環境（テーマやサーバー）などによって異なることもあるかもしれません

もし同じように試してみたい方は、しっかりバックアップをとり、自己責任の元に参考にしてみてください。。。

ってことで楽しいクリエイトあれ！

しゃらんるあぁああああ♥

沈黙のWebライティング —Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉	最新版！ これからのSEO内部対策 本格講座	本当によくわかるHTML＆CSSの教科書 (本当によくわかる教科書)

\(`^`)b