【ワードプレスで子テーマをカスタマイズしてみよう】

ワードプレスで子テーマをカスタマイズしてみよう。ワードプレスのテーマには「親テーマ」と「子テーマ」があります。今回は、ワードプレスで子テーマをカスタマイズしてみようについて書いていきます。

 

本格的にテーマをカスタマイズするのであれば「子テーマ」の準備をしておきましょう。「子テーマ」とは、カスタマイズしたいテーマのテンプレートを継承しつつ、一部分だけを変更又は追加する為におこなうテーマの複製を意味します。

 

結論を先に話ししておきます

テーマを更新すると、今まで作り上げてきたブログのデザインが崩れたり、編集していたコンテンツなどが消去されたりすることがあります。その理由は、テーマの更新がそれまでのファイルの上書きによって、おこなわれる為です。   このような時、テーマを更新する以前のバージョンに戻そうとしても簡単にはいきません。サーバー側では、予期せぬトラブルで貴重なデータを失わない為に、データのバックアップをしてますが、あなたがこれらのバックアップファイルを使うことは不可です。   なぜなら、個別データのバックアップの義務は、あなたに課せられることが多い為です。コンテンツを含め、テーマ全体のバックアップを取ることは、テーマをカスタマイズするのかどうかに関わらず、サーバーの管理者にとって、基本的な仕事な訳です。

 

【親テーマと子テーマの違い(動画付き)】

 

テーマを複製して「子」のテーマを作ることは、ワードプレスに於いて、推奨されているカスタマイズ方法と言っても良いでしょう。テーマの複製と言っても、全く同じものを2つも3つも作ると言う訳ではありません。

 

この場合、もとになるテーマを継承すると言った方が正しい言い方かも知れませんね。つまり「継承しながら、一部分だけを変える」訳です。これこそが、正に言うカスタマイズと言うものです。

 

ワードプレスをカスタマイズする為に用意されているテーマを「子テーマ」と呼び、もとのテーマを「親テーマ」と呼びます。良く覚えておきましょう。

 

ではここで動画を視聴してみて下さい。題して「8分でわかる【WordPressの親テーマ・子テーマ】って何？(初心者向け)」です。

 

子テーマが引き継ぐもの

 

「子テーマ」は「親テーマ」を引き継ぎます。この際「子テーマ」側で「親テーマ」を決めます。テーマの親子関係と言うのは「子テーマ」が勝手に「親テーマ」を継承するだけの話しです。何だかややこしいですが。

 

ワードプレステーマの親子関係は、親の家に住んでいる子が、親に内緒で裏口に自分専用の表札を掲げるのに似ていると言えます。ですが、表札だけ違って、同じ家と言うのでは「子テーマ」がカスタマイズに適しているとは言えません。

 

「子テーマ」では、二世帯住宅のように、共有部分の他、独立した部分を作ることができるのです。例えばですが、親子関係が結んだ「親テーマ」から「子テーマ」へ「header.php」を複製します。

 

header.phpを複製とは

つまり「header.php」については「親テーマ」「子テーマ」それぞれ別々に、カスタマイズが可能な訳です。この場合、一方でおこなった変更に関して、もう一方側には全く影響を及ぼすことはありません。

 

仮に、複製なしの場合「子テーマ」は「親テーマ」のファイルを使っているので「親テーマ」側で変更があれば、自動的に「子テーマ」側も変更されます。「子テーマ」は「親テーマ」のテンプレートファイル全てを複製する必要はありません。

 

カスタマイズしたいファイルだけを複製し、それを編集すれば良くて、この変更は「子テーマ」だけで「親テーマ」は変更されません。また複製してあったテンプレートファイルが書き変わってしまうこともありません。

 

 

 

子テーマに必要なファイル

 

「子テーマ」にはないファイルと言うのは「親テーマ」から継承されると言うルールがある訳ですが「子テーマ」が機能する為には、必須のファイルが一つあります。それは「style.css」と言う言語です。

 

「子テーマ」のディレクトリーには、最低限「style.css」を作成しなければなりません。このファイルには「子テーマ名」と「親テーマのディレクトリー名」の2つを記述することになっています。

 

 

親テーマ(ベーステーマ)	デザインや機能は引き継がれます。	子テーマ
style.css functions.php	親テーマのものとは別に、子テーマのものも作成します。	style.css functions.php
header.php content.php	子テーマになければ、親テーマのテンプレートファイルが参照されます。	header.php content.php

 

「親テーマ」のディレクトリー名を入力することで、継承する「親テーマ」を指定します。「style.css」には、デザイン上の様々なスタイル情報が記述されていますが「子テーマ」には、これらの記述がなくても大丈夫です。

 

これは「親テーマ」と「子テーマ」における「style.css」の関係が、他のテンプレートファイルとは異なる為です。「style.css」ファイルは、まず先に「親テーマ」のものが読み込まれ、続いて「子テーマ」のものが読み込まれます。

 

【子テーマを作ろう(動画付き)】

 

「子テーマ」の作成には、FTPクライアントソフトがあると便利かも知れません。レンタルサーバーサイトによっては、WebブラウザーでFTP機能を実行できる場合もあります。ちなみに私はエックスサーバーを使っています。

 

FTPクライアントソフトとは

FTPクライアントソフトとは、レンタルサーバーとの間でファイルのやり取りをする為のソフトを言います。分からない方の為に図解を用意しましたので、下記の図解をご覧になってみて下さい。   下記の図解で「赤色枠」で囲まれているデスクトップ上にダウンロードした「FTPクライアントソフト」。一般的には「FFFTP」もしくは「FTPソフト」などと呼ばれています。   上記の「FFFTP」を開くと下記のような画面が開きます。まずは「ホスト一覧」内に必要な情報を入力してから使っていくことになります。「FFFTP」の使い方については割愛させて頂きます。   「FFFTP」を使ってみたい方、右記よりダウンロードしてみて下さい。「FFFTPのダウンロードはコチラ」。ダウンロード方法には「FFFTP(32bit版)」と「FFFTP(64bit版)」がありますので間違えのないようにして下さい。   ではここで動画を視聴してみて下さい。題して「FFFTP v4.4 ダウンロードからサーバー設定」です。

 

念の為、話ししておきますが、エックスサーバーを使っている方であれば、Webブラウザーから「FTPソフト」を利用することができます。利用するには、エックスサーバーのサーバーパネルを利用します。

 

サーバーパネルから「サブFTPアカウント設定」を選択し、ワードプレスを運用しているドメインに、FTP用のアカウント(FTPユーザーID)と(パスワード)を設定します。FTP機能を起動した時に自動で接続するディレクトリーも設定可能です。

 

エックスサーバーでは「(root)/(ドメイン名)/public_html/」の下にワードプレス用のディレクトリー「(wp-admin)(wp-content)(wp-includes)」と言ったものが予め用意されています。

 

子テーマのディレクトリーを準備しよう

 

「子テーマ」用のディレクトリーを準備する中で、FTPを用いて、ワードプレスサイトにアクセスし、ディレクトリーを作成します。この際「親テーマ」のディレクトリーを複製して、名前を変更し「子テーマ」用のディレクトリーを作成してもOKです。

 

この場合、あなたが使用しているレンタルサーバーで、どのようにしてFTPを利用するのかを最初に確認しておきましょう。仮に無料のレンタルサーバーの場合、メールや電話でのサポートがないので、FAQなどで確認しておきましょう。

 

ディレクトリーには、既にインストールされているテーマで必要なファイルがテーマごとのディレクトリーの中に保存されています。一般的にディレクトリー名には、テーマ名が付けられています。

子テーマのテンプレートファイルを準備しよう

 

「子テーマ」用のディレクトリーが作成できたら、次に「style.css」と「functions.php」の2つのファイルを作成しましょう。「子テーマ」用のスタイルシート(CSS)ファイルを作成するには、レンタルサーバーに直接アクセスします。

 

アクセスしたら「リモート操作でファイルを作成する方法」「手元にあるパソコンで作成したファイル」を「FTPソフト」でアップロードする方法などがあります。一応ここでは、ワードプレスのテーマエディタ機能を使います。

 

「子テーマ」のディレクトリー中に「style.css」と「functions.php」の2つの主ファイルを保存します。これらは、親ファイルからコピーしておいてもFTPクライアントでアップロードしておいてもどちらでも構いません。

子テーマのテンプレートファイルを編集しよう

 

任意のテーマが有効化されているダッシュボードで「外観→テーマエディター」を開きます。そうすると現在有効となっているテーマの「style.css」が編集モードで読み込まれます。当ブログ(miブログ)では「DIVER」を使用しています。

 

テーマを編集ページの右上部にある「編集するテーマを選択」ボックスをクリックすると、プルダウンメニューが表示されます。するとインストールされているテーマの一覧を確認することができます。

 

この中には「子テーマ」のテーマ名はないと思います。「親テーマ」の「style.css」ファイルをコピーしたのであれば「親テーマ」のテーマ名が2つ並んで表示されるはずです。一つは「親テーマ」のもの、もう一つは「子テーマ」のもの。これから編集しようとするものです。

 

 

「オレンジ色枠」で囲まれている枠内には、インストールされている情報が記載されており「緑色枠」内には「この子テーマは、親テーマのテンプレートを引き継ぎます」と記載されています。

 

 

当ブログでは、テーマに「DIVER」を使用している為、あなた側の画面とは違って見えるかも知れません。

 

今回は以上となります。ワードプレスで子テーマをカスタマイズしてみようについては難しい内容だったかも知れません。特に初心者さんには訳の分からない内容だったでしょう。ですがこれもアフィリエイトで稼いでいく為の勉強です。

 

 

トップページへ戻る