安心してサイト運営をするために必要な子テーマとは?仕組みから作り方まで徹底解説します!

安心してサイト運営をするために必要な子テーマとは?仕組みから作り方まで徹底解説します!

どうも、なぎです!

ワードプレスでブログなどのウェブサイトを運営する場合、多くの人がテーマを利用していると思いますが、そのテーマを自分流にカスタマイズしたくなる時がくると思います。

例えば…
  • 記事の最後にこんなボタン付けたいなー
  • ここの画像もう少し大きくしたいなー
  • 文字のフォントや大きさを変えたいなー

既存のテーマの機能やデザインなどに加えて、より良いウェブサイトにするために上記の例のよう欲求がいろいろと出てくるはずです。

ですが、自分流にテーマをカスタマイズをするには、そのテーマ内部に入っている情報を少なからず編集することが必要になってきます。

テーマ内部に入っている情報を編集するということは、誤って大事な情報を消してしまう可能性がありますし、サイトのレイアウト崩れを起してしまう可能性もあります。

つまり、カスタマイズするのはリスクを伴うということです。

初心者にはかなり難易度が高そう…

“ねこさん”

初心者さんでもそうでなくても、「そんなリスクが伴うなら怖くてカスタマイズできない」と思った方が大勢いらっしゃると思いますが、安心してください。

そのリスクを限りなく下げる方法は、きちんとあります!

ということで、今回の記事では【カスタマイズのリスクを軽減する子テーマの仕組みと、その作成方法について】を、詳しく解説させていただきたいと思います!

その前に「ワードプレスやテーマって何?」という方には以下の記事が参考になると思いますので、ぜひこちらもご一読いただければと思います^^

WordPress(ワードプレス)とは?初心者でもわかるよう特徴を解説します! WordPress(ワードプレス)とは?初心者でもわかるよう特徴を解説します! アイキャッチ画像 WordPressのテーマとは?選び方のポイントと変更する場合の注意点を解説

子テーマとは

子テーマとは

まず最初に、子テーマとは一体何なのか?ということについてお話しさせていただきたいと思います。

子テーマとは【テーマ(親)の機能やスタイルを継承している、カスタマイズ用のテーマのこと】です

子テーマについて

カスタマイズ用である子テーマを編集することによって、親テーマには手を加えること無くカスタマイズすることができるというわけです!

子テーマを使うメリット

子テーマを使うメリット

それでは次に【何故わざわざ子テーマを作成して、子テーマでカスタマイズする必要があるのか】ということについて、お話しさせていただきます。

親テーマに手を加えること無くカスタマイズできるということには大きなメットがあるので、しっかりとその重要性を理解してくださいね^^

安心してカスタマイズできる

:安心してカスタマイズできる

親テーマには手を加えないので、子テーマのカスタマイズによってトラブルが生じた場合でも、子テーマを消してしまえばすぐに解決することができます。

  • 誤って大事な情報を消してしまった!
  • レイアウトが大きく崩れてしまった!

上記のようなトラブルがあった場合でも、編集した子テーマを消すことによってすぐに元の状態に戻せるので、安心して作業することができるのです!

テーマを更新してもカスタマイズを残せる

テーマを更新してもカスタマイズを残せる

テーマは定期的に更新があります。そして、テーマを更新するときには、親テーマの情報は全て修正(上書き)されます。

つまり、子テーマを作成せずに親テーマに直接カスタマイズする内容を書いていた場合、それらも全て修正(上書き)されてしまうということです。

“なぎ”

一生懸命カスタマイズしたものが全て初期化されてしまうということですね…
子テーマなしの場合

一方、子テーマにカスタマイズの内容を書いて編集しておくことで、更新によってその内容が初期化(上書き)されてしまうことを防げます。

子テーマありの場合

  • 安心してカスタマイズできること
  • テーマを更新してもカスタマイズを残せるこ

上記の2点が【子テーマでカスタマイズすること】のメリットの中でも、特に大きなメリットになります!

子テーマの作成方法

子テーマの作成方法

テーマによっては、そのテーマ専用の子テーマを提供してくれる場合があります。

ですが専用の子テーマを提供していないこともありますので、ここからは「子テーマを作成する方法について」も、合わせてご紹介させていただきます!

MEMO
専用の子テーマが提供されているテーマをご利用の場合は、その子テーマをご利用いただければと思います。

子テーマのフォルダを作成する

子テーマのフォルダを作成する

まずは、お使いのパソコンの任意の場所(デスクトップなど)に「子テーマのフォルダ」を作成してください。

フォルダの名前は任意なので何でも大丈夫ですが、テーマ(親)の名前に「-child」を付け加えた名前を付けることをオススメしています。

“なぎ”

例えば、僕が利用しているテーマは「SANGO」なので、子テーマは「SANGO-child」にするみたいな感じです!

親テーマの名前に「-child」を付け加えた名前にすることをオススメする理由は非常に単純で、「わかりやすいから」です!

ご自身が管理しやすい、お好きな名前にしてください^^

style.cssを作成する

style.cssを作成する

子テーマのフォルダを作成したら、次に「style.css」というファイルを作成します。

メモ帳でも何でも大丈夫ですので、任意のテキストエディタを開いて以下の記述(/*〜*/まで)をコピー&ペーストしてください。

/*
Theme Name:最初に作成したフォルダの名前
Template:親テーマの名前
Version:親テーマの現行バージョン
*/

「:」の後の赤字になっている部分は、ご自身のお使いのテーマなどに合わせてそれぞれ入力していってください。

赤字の部分の入力が完了したら「style.css」という名前で保存して、最初に作成しておいた子テーマのフォルダの中に入れておきましょう!

親テーマの名前がわからない場合

レンタルサーバーを確認してみてください。「wp-content/themes/」の直下にあるフォルダがテーマ名のはずです!

親テーマの現行バージョンがわからない場合

親テーマの現行バージョンはワードプレスの管理画面で確認できます。

ワードプレス管理画面から「外観」⇒「テーマの編集」をクリックすると、親テーマのstyle.cssが表示されるのですが、そこのバージョンが書かれています!

親テーマの現行バージョン

function.phpを作成する

function.phpを作成する

次に、style.cssと同じ要領で「function.php」というファイルを作成してください。

先ほど同様にテキストエディタを開いて、以下の文章を全てコピー&ペーストしてください。

HTML
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

こちらは得に書き換えはないのでコピペが完了したら、「function.php」という名前で保存して、最初に作成した子テーマのフォルダの中に入れておいてください。

アップロードして有効化する

アップロードして有効化する

「style.css」と「function.php」の2つのファイルを最初に作成した子テーマのフォルダの中に入れたら、次にそのフォルダを圧縮してください。

圧縮

フォルダを圧縮することができたら、圧縮したものをワードプレスに直接アップロードしていきます。

まず、ワードプレスの管理画面から「外観」⇒「テーマ」をクリックしてください。

アップロード方法1

「新規追加」をクリックしてください。

アップロード方法2

「テーマのアップロード」をクリックしてください。

先ほど圧縮したzipファイルを選んで「今すぐインストール」をクリックしてください。

インストールが完了すると「有効化」というボタンが表示がされるので、それをクリックしたら完了です。

“なぎ”

これで子テーマの追加ができました!

今後はワードプレスの管理画面の「外観」⇒「テーマの編集」から子テーマを選択して編集することによって、安心して自由にカスタマイズすることができます。

注意
「テーマの編集」ではデフォルトで子テーマのstyle.cssが最初に表示されますが、念のため「子テーマのstyle.css」かどうか、毎回確認するようにしてください!

その他のファイルをカスタマイズしたい場合

その他のファイルをカスタマイズしたい場合

header.phpやfooter.phpなど、その他のファイルをカスタマイズしたくなった場合はどうすればいいのか、というのを少しだけお話させていただきます。

たとえば、サイトのヘッダー部分のデザインを変えたくなったとします。

その場合、親テーマの「header.php」をFFTPソフトを使用して、まるっとコピーして複製します。(FFTPソフトについては以下の記事を参考にしてください)

FTPソフトに関する解説のアイキャッチ画像 利便性を大幅に上げる便利なFTPソフトとは?メリットも合わせて解説します! FileZillaの解説記事のアイキャッチ 無料で使えるFTPソフト【FileZilla】のダウンロード方法と基本的な使い方

そして、そのコピーして複製したheader.phpを、子テーマフォルダの中に入れるのです。

というのも、基本的には親テーマよりも子テーマのファイルが優先されて読み込まれるんです。つまり、子テーマ内のheader.phpが優先して読み込まれるということです。

複製したファイルを編集集するので、親テーマには手を加えることなく安心・安全に自由にカスタマイズすることができるのです!

さいごに

さいごに

以上が【カスタマイズのリスクを軽減する子テーマの仕組みと、子テーマの作成方法について】になります。

トラブルになるリスクを減らして安心・安全に自分だけのユニークなサイトを作るためにも、子テーマはぜひ活用してくださいね!

コメントを残す

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