WordPressで子テーマを使ってカスタマイズしたい!作成・設定方法を解説します!
  • facebookページ
  • twitterページ
  • 2018.04.10

    WordPressで子テーマを使ってカスタマイズしたい!作成・設定方法を解説します!

    WordPressの公式サイトからインストールしたテーマをさらに自分好みのデザインや仕様にカスタマイズしたい時、子テーマを作成することで編集が可能になります。

    こちらの記事ではWordPressでの子テーマ作成・設定・編集方法などについて詳しく紹介します。

    WordPressのテーマとは

    はじめにWordPressのテーマについて詳しく紹介します。

    WordPressのテーマとは簡単にいうと作成したサイトのデザイン・機能をインストールするだけでカスタマイズしてくれるものです。通常WordPressのデザインのカスタマイズをする場合、CSSやHTMLの知識が必要になります。しかしテーマを利用すればインストールするだけでおしゃれなデザインに切り替えることができます。

    またテーマは無料のものであってもSEO対策がされていたり、問い合わせフォームがついていたりと機能がついています。なのでテーマを選ぶ時はデザインだけではなく必要な機能があるか調べるのが賢明です。

    そしてWordPressは無料のテーマと有料のテーマがあります。有料の場合アフィリエイト広告の収入を目的としたテーマや、ボタンなどサイトの細部まで幅広いデザイン案があるテーマなどがあります。作成するサイトに明確な目的があり、またPV数を伸ばしたいという希望がある人は有料のテーマを選ぶのがおすすめです。

    テーマの選び方・設定方法

    つづいてWordPressのテーマの選び方、そして設定方法について詳しく紹介します。

    選び方のポイント

    はじめてWordPressのテーマを選ぶ時気を付けてほしいのは目的と安全性です。

    現在WordPressのテーマは公式サイトだけでも数え切れないほどあり、闇雲に探すと適切なテーマ選ぶことができません。

    なのでテーマを検索する前に、自分はどういったサイトを作成したいのか、またどんなデザインのサイトが好ましいのか明確にしましょう。ブログ向け、ポートフォリオサイト向け、ECサイト向けなど様々なジャンルのテーマがあります。またデザインも様々です。

    またはじめてテーマを選ぶ時は公式サイトから探して選ぶことをおすすめします。なぜなら日本語で書かれていない海外の配布サイトなどのテーマの場合、安全性が約束されていないためインストールしたあとに不具合が生じる可能性があります。

    自分が選択したテーマが安全かどうか確認するためにも、事前にそのテーマをネット検索して評判を確認しておくことをおすすめします。調べたテーマで日本語でのサイトが出てこなかった場合、そのテーマは日本であまり導入されていない可能性が高いので注意が必要です。

    設定方法

    WordPressでテーマを設定するには、まずインストールする必要があります。

    テーマをインストールするにはWordPressのダッシュボードからインストールして設定する方法が簡単です。

    ダッシュボードからテーマをインストールする場合、はじめにメニューから「外観」を選択し、つづいて「テーマ」を選びます。そして画面左上にある「新規追加」というボタンをクリックします。

    するとWordPressの公式サイトのテーマを検索する項目が出てきます。なのでここから自分の目的に沿ったテーマを探します。そして気に入ったテーマがあればそのテーマの画像をクリックし、画面左上の「インストール」ボタンを押します。

    テーマのインストールが終了したあと、インストール完了のメッセージの下にある「有効化」という部分をクリックします。有効化をクリックすれば作成したサイトにインストールしたテーマが反映されます。

    子テーマとは

    WordPressの「子テーマ」とは、簡単にいうとインストールしたテーマの機能やデザインを編集するためのテーマです。そしてインストールした大元のテーマは「親テーマ」といわれることが多いです。

    なぜすでにあるテーマをカスタマイズするために子テーマが必要かというと、親テーマを編集すると知らない間にファイルが上書きされ、編集した記録が消えてしまう可能性があるからです。

    WordPress公式サイトからインストールしたテーマの場合、バグの修正や機能の追加などをするため、自動的にアップロードされます。そのためカスタマイズのために親テーマを編集してしまうとアップデートのタイミングで編集したファイルが上書きされてしまいなくなってしまいます。

    しかし子テーマを編集していれば自動アップデートがあってもファイルが上書きされることはありません。なのでインストールしたテーマをさらに自分でカスタマイズしたい時は子テーマを作成し、そちらのファイルを編集しましょう。

    子テーマを使うメリット

    インストールしたテーマのカスタマイズをおこなう上で子テーマをし作成し編集するメリットは2つあります。テーマがアップデートされた時も編集した内容が残る点と、致命的なミスを防止できる点です。

    親テーマをカスタマイズのために編集すると、そのテーマの自動アップデートのタイミングで編集したデータが上書きされてしまいます。なので自分でカスタマイズをしたい時は必ず子テーマを作成し、アップデートしても上書きされないファイルでカスタマイズをおこないましょう。

    また子テーマを作成しそのファイルで編集をすれば、重要なコードなどを誤って削除してしまった時も、親テーマにコードが残っているのでコピーすることができます。なので子テーマのファイルであれば様々なカスタマイズを好きなだけ試すことができます。

    子テーマを設定するのに必要なもの

    つづいて子テーマを設定する時に必要なものを詳しく紹介します。

    子テーマを作成する上で必要となるファイルは「スタイルシート(style.css)」と「functions.php」の2点です。

    スタイルシート(style.css)はサイトの装飾に関するCSSの装飾をするために必要で、functions.phpはインストールしたテーマ特有の機能に関するコードが記述されたファイルです。

    テーマのカスタマイズに必要なファイルはこの2点になりますが、サイトのヘッダーの部分を変えたい時は「header.php」というファイルを子テーマに作成する必要があります。

    また子テーマを作成してカスタマイズする場合、CSS、HTML、PHPといったコードを記述します。なのでコードを記述するテキストエディタも必要です。プログラミングをしている人はテキストエディタはパソコン内にあると思いますが、インストールしていない人は使い勝手のいいものを入れておきましょう。

    子テーマの設定方法

    つづいて子テーマの設定方法について詳しく紹介します。

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

    はじめに子テーマ用のフォルダを新規作成します。フォルダ名は何でも良いのですが、すでにあるテーマの子テーマであることが明確に分かる名前が好ましいです。

    作成したフォルダに必要なファイルを作成する

    子テーマ用のフォルダを作成したら、そのフォルダ内にカスタマイズに必要な空のファイルを作成します。そしてテーマのカスタマイズに最低限必要なファイルは「スタイルシート(style.css)」と「functions.php」です。

    またサイトのヘッダー部分もカスタマイズしたい人は「header.php」という空のファイルも作成してください。

    親テーマのファイルのコードをコピーする

    必要なファイルを作成したら、そのファイルに親テーマ内にある同じ名前のファイルのコードをコピーして貼り付けましょう。

    そしてスタイルシート(style.css)で親テーマのコードをコピーして貼り付けたあと、「Theme Name」の欄には子テーマだと分かる名前を記入しましょう。そして「Template」の欄には親テーマのフォルダを記入してください。

    作成した子テーマをWordPressで有効化させる

    「スタイルシート(style.css)」と「functions.php」のファイルに親テーマ内のファイルのコピーができたら、WordPressの管理画面から作成した子テーマを有効化させます。

    子テーマを有効化させるにはWordPressの管理画面から「外観」を選択し「テーマ」へと進みます。そしてテーマ内に子テーマの表示を見つけたら、その子テーマを有効化させます。

    子テーマが有効化されれば設定完了となります。

    子テーマのカスタマイズ方法

    つづいて子テーマのカスタマイズ方法について詳しく紹介します。

    フォントの変更

    サイト内全体のフォントを変更させたいとき、サイトの装飾のコードが記述されているスタイルシート(style.css)を編集します。

    フォントを編集したい時は{font-family:}と書かれている部分のあとに指定したいフォントを書きます。たとえばフォントをゴシック体に変更したい場合は、{font-family:sans-serif;}と記述します。

    またフォントは名称で指定することもでき、 “”の中にフォントの名称を記述することでフォントの指定できます。例えばメイリオのフォントを指定したい場合は{font-family:”Meiryo”}と記述します。

    サイトの装飾を変更する

    サイト内の文字の装飾だけではなく、特定の場所のみ背景色を変えたかったり、特定の見出しに下線を入れたかったり、サイト内の特定の線の色を変えたりすることもスタイルシート(style.css)を編集すれば可能です。

    特定の場所の背景色を変えたい場合、その部分のCSSの記述箇所に{background:red;}といった記述が書かれているので、「background:」より右側に書かれている部分の色を変更しましょう。

    また特定の見出しの下に下線を入れたい時、その下線について記述されているスタイルシート(style.css)の箇所に{border-bottom:}と記述します。そしてこちらの記述の横にボーダー(線)のスタイル・太さ・色などの指定を記述していきます。

    たとえば下線部を一本線で4px、色は赤にしたい時、記述は{border-bottom: solid 4px red ;}になります。

    こんな時はどうする?

    最後にWordPressのカスタマイズで注意する点について詳しく紹介します。

    子テーマが反映されない

    カスタマイズの編集をした子テーマが反映されない時、考えられる原因は2つあります。

    ①:スタイルシート(style.css)の親テーマのフォルダ名が違っている

    親テーマからコピーして貼り付けたスタイルシート(style.css)のコードの欄の「Template」の部分には親テーマのフォルダ名を記入します。こちらのフォルダ名が間違っていないか確認してみてください。

    ②:WordPress上で子テーマを有効化していない

    子テーマをサイトに反映させるにはWordPressの管理画面から子テーマを有効化しておく必要があります。管理画面メニューに「外観」から「テーマの編集」に行き、「編集するテーマを選択」の部分が子テーマになっているか確認してみましょう。

    親テーマのCSSが読み込まれない

    WordPressで子テーマを使用すると、基本的には子テーマの中のファイルが適用されます。そしてサイトを装飾するスタイルシート(style.css)も子テーマのものが適用されます。

    そして子テーマを適用したあとにサイトのデザインが汚くなってしまった時、それは親テーマのスタイルシート(style.css)が読み込まれていない可能性が高いです。

    子テーマを有効化させていても親テーマのスタイルシート(style.css)を適用させたい場合、「functions.php」に親テーマのスタイルシート(style.css)適用させるコードを記述する必要があります。コードを記述して適用させるようにしましょう。

    まとめ

    WordPressでインストールしたテーマをカスタマイズする時は、必ず子テーマを作成してください。子テーマであれば自動アップデートがあった時も上書きされず、また誤って重要なコードを消してしまった時も親テーマからコピーすることができます。

    こちらの記事を参考にして、ぜひ子テーマを使用してテーマのカスタマイズに挑戦してみてくださいね。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料10万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア

    関連ワード

    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE