子テーマなんぞササッと作っちゃえ!悩む必要もない。これも勉強だ。

子テーマなんぞササッと作っちゃえ!悩む必要もない。これも勉強だ。

WordPressを利用して間もなくの頃、知らなかったことの一つ。

親テーマ(このブログではMAG-TCD036)は常に進化しています。
進化しているということは、バージョンアップを繰り返しているということ。

それらを理解することなく使っていたら問題発生!

そんなお話を・・

━━━━━━━━━━━━━━━━━━━━━━━━

こんにちは。“Wd-Labo”ディレクターのOtsukaです。

Google Search Console 「所有権」確認ができていない!なぜ?

通常ならWordPressブログを新規に立ち上げた際に、Google先生に認知してもらわなくてはなりません。

以前は、Googleウエブマスターでしたが、現在はGoogle Search Consoleと呼ばれているやつです。

Search Consoleに登録していくと、所有権を確認するためにトラッキングコードを自分のサイトに貼り付けとGoogle先生から「確認できました!」ってお墨付きを貰えちゃいます。お~~なるほど。

登録されていない方は必ず登録してくださいね。

その他にも、解析をする上にもGoogle Analyticsのコードを同じく貼り付ける必要があります。

この解析は、 Analytics以外にも様々な解析がありますが、いずれにせよコードを自身のサイトの親テーマ内に貼り付ける必要があるわけです。

最初はいいのですが、親テーマがバージョンアップされると今までの親テーマの上から上書きされちゃいますから、貼り付けたコードが無くなっちゃうことになります。

ポイント

親テーマに直接入れなくてもプラグイン等(All In One SEO Packなど)を使えば問題なし

そんなこと知らずに使っていたことを覚えています。

で、子テーマを利用して、子テーマ内に記述しておけば、親テーマがバージョンアップされようがこれらの問題が解決されるわけです。

カスタマイズも同じ理屈になります。

ですから子テーマって重要な役割を果たしてくれます。

プラグインのOne-Click Child Themeを使えば作成は簡単

子テーマ作成のプラグイン「One-Click Child Theme」を使えば簡単に子テーマを作ることができますが、今回は勉強がてらに自分で作る方法を選びました。

なお、この「One-Click Child Theme」は子テーマを作成後プラグインを削除しても問題がないようです。

自作・・これも経験ですからね。

 

MAG-TCD036の子テーマはササッと作っちゃえ

今回の子テーマ完成品は⬇

▼子テーマには親テーマのような画像が無いスタイル。

 

▼親テーマと同じ画像付きスタイル。

 

作成はどちらでも問題はありません。折角ですから画像つきの方で進めますね。

なお、ここから先はカスタマイズと同じく自己責任でお願いします。

メモ帳を用意

Windowsにはメモ帳が標準装備されています。
が、メモ帳は使わないでください。Windows用のTeraPadとかサクラエディタなどのテキストエディタを使ってください無料ですから。。僕はサクラエディタを使っています。

※メモ帳はHTML、CSSなどの記述には不向きです。(ここでは解説しません)

用意ができましたら、、

 

フォルダを1個作ります

デスクトップ上の何もないところで右クリックし新規作成フォルダを作りましょう。

▼名前を変更します。「MAG-child」にします。親テーマにchildを付けただけです。

 

ファイルを作ります

下のソースをコピペでメモ帳に貼り付け「style.css」の名前でデスクトップに保存します。

ソースコード
<pre><code>/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.4
*/</code></pre>

 

一番下のバージョンが1.4になっていますが、お使いの親のテーマのバージョンに入れ替える必要があります。 バージョンの確認は、 外観⇒テーマに移動し親テーマをクリックすると表示されます。

これで1個完了です。

 

functions.phpフアイルを作成します

次に下記をそのままコピーし貼り付け「functions.php」の名前で同じように保存します。

functions.php
<pre><code>/<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}</code></pre>

 

個別投稿 (single.php)を作ります

外観⇒テーマの編集へ移動します。

初心者の方は訳が分からないような文字列が並んでいることでしょう。心配しなくてOKですからね。

右側のサイドのから、個別投稿 (single.php)を選んでクリックしてください。

そうすると左側に個別投稿 (single.php)のCSSソースが表示されます。

それをそのまま全部コピーしてください。

メモ帳に貼り付け「single.php」の名前で保存します。

これで完了です。

 

最後に画像をアップロードします

この作業は、親テーマと同じ画像付きにしたい方のみです。
画像はいらないよ、という方は次へ進んでください。

ご自分のレンタルサーバーにログインしましょう。

ご利用のドメインの中のファイルマネージャーの中を調べます。

httpdocs⇒wp-content⇒themes⇒mag_tcd036へと移動していきます。

これがMAGのファイルの中身になります。

その中に「screenshot.png」があります。これがテーマの画像になります。

screenshot

 

これをダウンロードし、名前を「screenshot.png」で保存します。

 

作ったファイルを全部フォルダに入れます。

上記で作ったファイル「style.css」「functions.php」「single.php」「screenshot.png」を最初に作ったフォルダMAG-childの中に入れ、フォルダを圧縮します。

圧縮方法はそれぞれのパソコンによって違うと思われますが、参考まで下記に(僕の場合です)

フォルダMAG-childの上で右クリック。送る⇒圧縮で完了⬇

 

ここまできたらあと一息です。

最後にアップロードします。

 

子テーマのアップロード

外観⇒テーマへ移動します。上部に「新規追加」からデスクトップ上の圧縮された「MAG-child」を選んでアップロードし完了後「有効化」を押して作業が完了です。

最後の最後、サイトを表示させてデザイン等が崩れていないか確認してください。

表示されていれば完了です。

あとは自由に子テーマに付け加えたりしてください。

親テーマがバージョンアップされようが、あなたのカスタマイズは反映され続けます。

大分長い記事になってしまいましたがご参考にされてください。

それでは・・また

 

コメントを残す

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