Wordpress関連

【WordPress】サイトデザインをカスタマイズするならまずは子テーマの作成から

note-160519

 

WordPressでサイト作成を始めたばかりのあなた。

まずはテーマを選びますが、これだけでは個性がないのでサイトのデザインを自分好みにカスタマイズしたいと思いますよね。

カスタマイズするにあたって、いろいろ調べているとCSS(Style.css)の編集に行き着くことかと思います。

初心者ですと、「なんじゃこりゃ」と思う事でしょう。

 

ということで、今回は子テーマについて書いてみたいと思います。

レンタルサーバがロリポップ!の場合の導入手順も添えておきますよ。

 

[adsense]

子テーマとは?

選択したテーマのコピーのようなものです。

厳密にいうとコピーではないのですが、本物のテーマ(親テーマと呼びます)自身は触らずに、そこにカスタマイズを反映させる為だけのテーマといえばわかりやすいでしょうか。

まずは、続きを読んで頂くと更にイメージがしやすいかもしれません。

とにかく絶対に子テーマは作成すべきです。

子テーマ無しにカスタマイズするのはとても無謀なことだと思って下さい。

 

子テーマを作るべき理由とは

作るべきと信じてとにかく作ろうという人は読み飛ばしてもらってもいいかもしれません。

失敗をすぐにやり直せる

子テーマには必要なことだけを書き込んでいきます。

親テーマ自身をまるまるコピーして修正するというわけではないので、とてつもなく長いCSSタグのどこを変えたとか気にしなくても良いです。

最初は白紙のところに書き足していくやり方なので、非常にシンプルでわかりやすいです。

修正を加えているうちに、何がなんだかわからなくなったということは起こりにくいです。

最悪、そうなった場合は編集ファイルをまるごと消せば元に戻ります。

トラブル時の対処も楽になるということをメリットの1つとして上げてもいいでしょう。

 

親テーマへの変更は、テーマのバージョンアップをした場合に全てリセットされる

WordPressでは、cssファイルやphpファイルの編集内容は、テーマがバージョンアップされるとリセットされてしまいます。

おそらく、どんなテーマでもそうだと思います(そうだと思っておいた方がいいでしょう)

すなわち、せっせとカスタイズした内容が全てなかったことになってしまいます・・。

 

しかし、子テーマを使うことによってこれを回避することができます。

子テーマは、親テーマのコードを読み込んでいます。そこに別ファイルで編集を加えているだけです。

親テーマはずっとデフォルトのままでいいんです。

なので、バージョンアップで親テーマの編集内容がリセットされようがなんだろうが、子テーマがあれば関係ないということです。

 

子テーマの作成方法

私の場合、レンタルサーバーはロリポップ、テーマは「Graphy」を使用していますので、これを前提に説明していきます。

まずはロリポップ!FTPにログインしてください。ログイン方法は、この記事を読んでいただいている時点でわかることかと思いますが、一応以下のページの対処方法に書いておりますので、わからなければ参考にしてください。

”ワードプレスのログイン画面が開けない時の対処方法”の記事へのリンク

 

ログイン後、ワードプレスをインストールしたフォルダ ⇒ wp-content ⇒ themesとフォルダを移動してください。赤枠の部分が以下のようになります。ワードプレスをインストールしたフォルダは私の場合はtkhbになります。

themesフォルダパス

 

この画面の下の方に、フォルダ内に格納されているフォルダやファイルがあります。

themesフォルダ内の画像

私の場合は、Graphyというテーマを使っているので、graphyというフォルダがあります。(赤枠部分)

子テーマ用のフォルダを画像のように同じ階層に作ります。(青枠部分)”子”テーマに因んでか、フォルダ名にchildと付けたりするのが主流のようです。

まずは以下の画像の赤枠部分を押してください。

フォルダ作成1

すると以下のような画面に切り替わります。

フォルダ作成2

上記の赤枠の部分に作成するフォルダ名を入れてから、少し下にある保存するボタンを押してください。
フォルダ名は何でも良いのですが、先ほども言ったようにテーマ名_childなど、childと付けるのがわかりやすいかもしれません。要は自分がわかりやすい名前でいいです。

そうすると上にあった青色で囲った部分のように新しくフォルダが出来上がります。

次に作ったフォルダを開きましょう。

ここにstyle.cssというファイルを作成します。
下の画像の赤枠で囲ったボタンを押してください。

style.css作成1

次に、下の画像の赤枠部分にstyle.cssと入れます。(ファイル名を入れています)

style.css作成2

 

続いて、この少し下にファイルの内容を入れる枠がありますので、そこに以下をコピーして貼付けて下さい。

/*
Template:graphy
Theme Name:graphy_child
Theme URI:http://tkhb7.com/
Description:graphyの子テーマです
Author:GIGS
Version:0.1
*//* 親テーマのスタイルシートを読み込む */
@import url(‘../graphy/style.css’);

 

style.css作成3

 

上の画像の通り、①~④は最低限変更が必要な箇所です。
難しくはないと思いますので、頑張って変更して下さい。

ここまでで子テーマは出来上がりです。
ただし、今は作っただけですので、テーマ選択をした時と同様に有効化が必要です。

ダッシュボードから以下のように、 外観 ⇒ テーマ と進んでください。

テーマ有効化1

 

以下の画面に移ります。

style.css内の”theme name”で指定した名前のテーマが出てきます(青枠部で確認)ので、有効化します。(赤枠部を押す)

テーマ有効化2

 

これで子テーマを作成し、サイトに反映できました。

もともと有効化していたテーマとサイトデザインは全く変わりませんので、本当にできているかがわかり辛いですが、子テーマのstyle.cssを編集し、サイトに内容が反映されることで確認が取れると思います。

子テーマを使うにあたり、他にもいろいろとあるかと思いますが、必要に応じ少しずつ修正を加えていけばいいと思います。サイト作りは一気にはなかなかできないものですね。

これがサイトデザインのスタートです。お互いサイト作りを楽しみましょう。

では良いワードプレスライフを。