Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

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

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

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。