今更聞けない!WordPressの既存テーマを利用する

スポンサーリンク
Pocket

 

配布されているテーマの中には、悪質なスクリプトが埋め込まれ、セキュリティ上問題があるものなどが存在するのも事実です。公式のWordPressテーマであれば、安心して、すべて無料で利用できます。

1、子テーマを作ります。

「子テーマ」とは、選択した既存のWordPressテーマである「親テーマ」の機能やスタイルを継承した上で編集していくためのテーマです。既存テーマのカスタマイズ専用テーマということです。

※既存のテーマを直接カスタマイズして使っていると、テーマがアップデートされた際にファイルがすべて上書きされて、苦労してカスタマイズしたものが全て無になってしまいます。

1-1、子テーマのフォルダーを作成

childtheme-folder
親テーマ(既存のテーマ)と同じ階層である /wp-content/themes に新しい空フォルダーを作成します。フォルダーの名は「親テーマ名-child」などにします。

2、「 style.css」の作成

作成した子テーマフォルダー内に「style.css」という名前でCSSファイルを作成します。作成した style.css に以下のコードを記述します。

これらは子テーマの情報として認識されます。(各項目はサイトに合わせて書き換えます)

必要なのは以下の2つ:

Theme Name … 子テーマの名前(例:Twenty Fifteen Child)
Template … 親テーマのフォルダ名(例:twentyfifteen)

下記コードだけでOKかも・・・・(上記コードが長いので手抜き)

/*
Theme Name:   子テーマの名前(例:Twenty Fifteen Child)
Template:     親テーマの名前(例:twentyfifteen)
*/

これだけで子テーマが利用できるようになりました・・・・!

4、子テーマを有効化する

 

 

管理画面から 外観 > テーマ に進むと、子テーマが表示されています。有効化すれば子テーマの設定完了です!

子テーマをカスタマイズの準備が出来ました。

子テーマが作成できたら、後は変更したい箇所を書いていくだけです!

フォントを変更する(練習に・・・・)

サイト全体のテキストで使用されているフォントを日本語のものに設定できます。作成した子テーマの style.css を開き、好みのフォントを書き込んで下さい。

下記は、ゴシック体フォントのコードです。ヒラギノ系フォントはMacに搭載されているフォントなので、Windowsの場合はメイリオというフォントが表示されます。ゴシック体フォントの王道設定?。

 その他必要なファイルのカスタマイズ

CSS以外のファイル、例えば header.php や sidebar.php などのファイルを変更したい時もあります。

親テーマのフォルダーにある変更したいファイルを、子テーマのフォルダーにコピーして修正していきます。親テーマよりも子テーマにあるファイルを優先的に読み込まれるので、思い通りのカスタマイズが可能です。

※PHPをいじることになるので、PHPについてあまり自信がない場合はCSSのみの調整に・・・・。

WordPressは既存テーマが豊富で便利なCMSですが、カスタマイズをするには最初の設定をきちんとしておかないと取り返しのつかないことになります。子テーマ作りはですが、やり始めるとサクサク進められると思います。

親テーマのフォルダーにある変更したいファイルを、子テーマのフォルダーにコピーする。

親テーマのページから、FTPサーバーで子ページへコピーすることになります。(ロリポップFTPの場合の手順)

➀ データが入っているフォルダ⇒wp-content⇒theme⇒親テーマです。

② wp-contentをクリックします。

③ themeをクリックします。

④ 親テーマをクリックします。

⑤ コピーしたいファイルにチェックを付けます。

⑥一番下部までスクロールして「コピーする」をクリックします。

次にコピー先のフォルダを選択する(子テーマのフォルダ)

➀子テーマのフォルダを探しラジオボタンをチェックします。(コピー先のフォルダがどこか?と聞かれるので選択する)

親テーマにしかなかったファイルが子テーマにコピー出来ました。

②Word Pressの管理画面にログインして、左のサイドバーから「外観」⇒「テーマの編集」を選択します。右のサイドバーにコピーしたファイル名があれば成功です。

「functions.php」だけはコピーしてはいけません。というのもこれと同じファイルを作ってしまうとサイトが表示されません。空のフォルダを作ってファイル名を「functions.php」とします。

カスタマイズしたいページ(CSSを記述したいページ)が親テーマにしかない場合は、子テーマにコピーしてから記述するようにすればカスタマイズできます。

参考サイト:詳しく説明されてます。

◆子テーマを作ってWordPressの既存テーマをカスタマイズする

◆子テーマの作り方と有効化する方法【図解】

 

 

スポンサーリンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください