WordPressの基本的なカスタマイズ方法｜Wordpressのカスタマイズを利用するメリットもご紹介！【2024年最新版】

WordPressを使うと、難しいプログラミングを使わずにWebページを制作できます。WordPressはカスタマイズ性能が高く、好みのデザインや機能を追加しやすいのも特徴の一つです。WordPressのカスタマイズを理解して、自社のWebサイトをより充実させたいという方も多いでしょう。この記事では、さまざまな分野の発注先を比較検討できる「アイミツ」が、WordPressの基本構造と初心者ユーザーでもできるWordPressのカスタマイズ方法、WordPressでカスタマイズするメリットについて詳しく解説します。

【関連ページ】
WordPress制作にかかる費用・相場感や、あなたの目的別にホームページ制作会社をお探しいただけます。
WordPress制作の費用・相場
WordPressに強いホームページ制作会社 / Web制作会社一覧

カスタマイズ方法を説明するために、まずはWordPressの基本構造を簡単に説明します。WordPressは、以下のように複数のPHPファイルで構成されています。

【phpファイルの一例】
・home.php：トップページ
・page.php：固定ページ
・single.php：投稿ページ
・header.php：ヘッダー
・footer.php：フッター
・archive.php：一覧ページ

それぞれのPHPファイルが、各箇所のテキストやレイアウトなどを生成するしくみです。通常のWebページはHTMLとCSSだけで構成される場合もありますが、WordPressは複数のPHPファイルで構成されるという違いを覚えておきましょう。

ここまで解説したように、WordPressは複数のPHPファイルで構成されています。PHPファイルをカスタマイズするのは上級者向けで高度な知識を必要とします。たとえば、ヘッダー部分を変更したい場合には、header.php、フッター部分を変更したいときにはfooter.phpの編集が必要です。PHPの編集は複雑なコードの知識を必要とするため、初心者ユーザーにはおすすめしません。初心者の方は、WordPressの便利な機能を利用して、より簡単にカスタマイズすることをおすすめします。テーマの設定や管理画面で手軽にデザインをカスタマイズするだけでも、十分に見た目や機能を自分好みに変えられます。

それでは、実際にWordPressのカスタマイズ方法を紹介します。初心者ユーザーも簡単にできるように、PHPの編集をせずにできるものです。具体的には以下の3つがあります。

・テーマ設定
・テーマカスタマイズで細かい部分を設定
・CSSコードを打ち込んでデザインのカスタマイズ

1つ目の「テーマ」とは、WordPressのテンプレートファイルのことです。テーマを使うことで、簡単にデザイン性の高いWebサイトを手に入れられます。2つ目は、管理画面のテーマカスタマイザーを利用して、細かい部分の設定を行う方法です。3つ目に紹介するカスタマイズは、追加CSSを使うことによってフォントや文字色などを変更する方法です。以下から更に詳しく解説していきます。

WordPressには「テーマ」と呼ばれるデザインテンプレートがあります。WordPressを使ったWebサイトでは、テーマをインストールするのが一般的です。1からWebサイトのデザインを構築する場合は、専門的な知識を要し時間もかかります。テーマを入れることで、簡単にデザイン性の高いWebサイトを作成できて時間もかかりません。テーマには無料のものと有料のものがあり、デザイン性や操作性、機能などそれぞれ異なる特徴をもちます。無料で使えるテーマも充実しているため、初心者でも気軽にデザインを変えることが可能です。無料のテーマであれば、使ってみて気に入らなかったとしても、気軽に変更しやすいでしょう。
以下からは設定のための具体的な方法を解説していきます。

WordPressのテーマを設定するためには、管理画面にある「外観」から「テーマ」を選択したあと「新規追加」をクリックしましょう。「新規追加」をクリックすると、WordPressテーマのインストール画面に進むことができます。この「テーマ」ページは使用したいテーマをいくつも登録しておけるスペースです。このスペースに好きなテーマを登録しておくと、すぐにテーマを変更することもできます。ただ、一度決めたテーマは何度も変更することは少ないためテーマが決定している場合は一つだけでも問題ないでしょう。

では、テーマを探してインストールする方法を紹介します。「テーマを追加」画面には、たくさんの無料テーマから選択可能です。好みや作りたいサイトイメージに合うものを選択して「インストール」をクリックしましょう。テーマを探すときは、特徴フィルターを使って探すことで、自分に合ったテーマを見つけやすいほか、すでに欲しいテーマがある場合は、検索窓にテーマ名を入れるとすぐに見つかります。画面が「インストール済み」になったら、「有効化」をクリックするとテーマのインストールの作業が完了です。無料テーマはたくさんありますので、合うものが見つかるまで何度もテーマを変えることができます。使ってみて合わなかったとしても無料のテーマであれば、損はしません。

プラグインを設定すると、さらにWebサイトのカスタマイズがしやすくなります。プラグインとは、WordPressの機能を充実させる拡張機能です。ダウンロードして有効化すれば利用が可能です。WordPressにはプラグインが多数用意されていて、導入するとWordPressを使用するWebサイトをより便利に作成できます。たとえば「Shortcodes Ultimate」というプラグインを導入すると、記事の装飾が簡単になり、ボタンやボックス、リスト、カラム、タブ、カルーセルといった、テキストやコンテンツの装飾を直感的に作成可能です。こうした機能を追加できるのがプラグインです。必要に応じてプラグインを導入することで、サイトのカスタマイズが各段にしやすくなります。

それでは、テーマカスタマイザーを使った細かい部分の設定について解説します。テーマカスタマイザーは管理画面の「外観」から「カスタマイズ」を選択することで使用可能です。テーマカスタマイザーを利用すると実際のWebサイトの変化を見ながら編集をできるため、むずかしいプログラミング言語を必要としません。そのため、初心者でも簡単にWebサイトのデザインを編集できます。テーマカスタマイザーで変更できるのは、「タイトルの色」「サイトロゴ」「ウィジェット」「レイアウト」「ヘッダーの設定」「グローバルメニューの設置」「ファビコンの設定」の7つです。順番に解説します。

テーマカスタマイザーを使って、タイトル色を変更する方法を紹介します。まず「外観」の「カスタマイズ」を選択すると、テーマカスタマイザーの画面に移ります。この画面では、右側に大きく表示されるのは、現在のWebページのプレビュー画面です。左側にはカスタマイザーのさまざまな機能が並んでいます。使用しているテーマによって、カスタマイザーの機能は変わりますが、「色」や「カラー」などを選択することで、Webサイトのさまざまな箇所の色を変更可能です。タイトルの色や文字の背景色、ヘッダーの色やサイトのテーマカラーなどを設定できるため、好みの色になるまで変更してみましょう。色を決めたら「公開」ボタンを選択すると実際のWebページに変更した色が反映されます。

WordPressでは、サイトのロゴをヘッダー部分に表示されることが可能です。ここではサイトロゴの変更方法を紹介します。サイトロゴを変更する場合はカスタマイザーの「サイト基本情報」をクリックし、その中の「ロゴを選択」をクリック。「ロゴを選択」の画面に移り、メディアライブラリ内の好きな画像にチェックを付けたら右下の「選択」をクリックしましょう。または新しくファイルをアップロードすることも可能です。サイトロゴは正方形である必要があるため、画像切り抜きで任意の位置で正方形に切り抜きます。これでロゴの設定が完了です。「公開」を選択すると実際のWebページ上にもサイトロゴが反映されます。

続いて、ウィジェットを設定する方法を解説します。ウィジェットとは、Webページで動作する小さなアプリケーションのことで、Webページ内にカレンダーやカテゴリーといった増やせるパーツを指します。カスタマイザーの中から「ウィジェット」を選択したら、ブログサイドバーやフッターといったウィジェットを追加したい個所を選びましょう。ウィジェットにはRSSやカレンダー、ギャラリー、カテゴリーなど多くの種類があり、追加したいウィジェットを選ぶと、右側のプレビューに追加されます。マウスでドラッグ＆ドロップすることで好きな位置に移動させることも可能です。設定が終わったら、「公開」をクリックすると実際のWebページに反映されます。

つづいては、WordPressのレイアウトの設定を解説します。一部のテーマではレイアウトのカスタマイザーを利用可能です。レイアウトの設定では、主にカラム数を変更しましょう。Webページの基本のレイアウト構成は、上からヘッダー、メインコンテンツ、フッターという3段構成となっています。カラムは縦の列のことを指し、1カラムか、2カラムのどちらかのWebサイトが一般的です。2カラムのレイアウトではメインコンテンツが2列になり、サイドバーが表示されます。「レイアウト設定」の「トップページ」欄で、1カラムか2カラムかを選択しましょう。2カラムを選択した場合は、サイドバーが現れるため最近の投稿欄やカレンダー、カテゴリーなどをウィジェットとして表示できます。

カスタマイザーを使ってヘッダーを設定する方法を紹介します。管理画面から「外観」を選択して、「カスタマイズ」をクリックするとカスタマイザー画面に移動します。カスタマイザーの「ヘッダーメディア」を選択してヘッダーの設定をしましょう。ここではヘッダーの画像を変更可能です。「新規画像を追加」すると「画像を選択」の画面に移動します。変更したい画像をチェックして「選択して切り抜く」をクリックすると「画像を切り抜き」に移動するため、任意のサイズに切り抜きましょう。ここまでを行うとヘッダーの画像が変更されます。「公開」を押すと、Webページに変更したヘッダー画像の反映が完了です。

カスタマイザーを使って、グローバルメニューを設置する方法を説明します。グローバルメニューとは、クリックすると各記事に移動するためのメニュー一覧のことです。トップページ、サイトマップ、問い合わせ、各カテゴリーを並べるケースが多く見られます。グローバルメニューはカスタマイザーの「メニュー」から設定しましょう。メニュー名を任意で設定して、新規追加したらメニューの位置を選択し、メニューに表示させる項目を選んでいきます。項目は固定ページやリンク、投稿ページ、カテゴリー、タグ、LPなど好きなページを選択可能です。順番もドラッグ＆ドロップで入れ替えられます。「公開」をクリックすると実際のWebページへの反映が可能です。自分のWebサイトに適したグローバルメニューを作りましょう。

カスタマイザーを使って、ファビコンを設定する方法を紹介します。ファビコンとは、Webページをブラウザで開いたときにタブに表示されるアイコンです。設定することで、Webサイトのブランド力が向上し、クリック率も向上するといわれています。カスタマイザーを使うと、簡単にファビコンの設定が可能です。ファビコンの設定は、カスタマイザーの「サイト基本情報」内の「サイトアイコン」で行います。ファビコンに使いたい画像を選択したら、画像切り抜きでファビコン用のサイズの正方形に切り抜くだけで完了です。画像サイズは512×512px、画像形式はPNGという条件があるため、最初からファビコン用にした画像が必要です。自分で作るかフリーの画像などをダウンロードしておきましょう。

ここまでテーマの設定と、テーマカスタマイズを使ったデザイン変更の方法を紹介してきました。最後に紹介するのは、カスタマイザーの中にある追加CSSという機能を使ったデザイン変更の手法です。追加CSSとは、CSSコードを直接入力できる機能です。編集内容はプレビューで常に確認できます。通常、WordPressのソースコードに変更を加える場合は子テーマの作成やFTPソフトを使う必要がありますが、追加CSSを使うと例外で、管理画面からCSSを追加できるため初心者でも比較的簡単に操作が可能です。数行程度のCSSを記述に向いている機能ですが、本格的に全体デザインを変更する用途には向いていません。

追加CSSで文字色を変更する方法を紹介していきます。まずは管理画面の「外観」の「カスタマイズ」をクリック。テーマカスタマイザーの「追加CSS」でCSSを追加可能です。右側にプレビュー、左側に追加CSSを入力するエディタがあります。エディタに任意の色のCSSコードを入力すると文字色を変更でき、変化は常にプレビューで確認できるため初心者にも分かりやすく安心です。参考に文字色を赤色に変更するサンプルコードを紹介します。サンプルコード「p {color: red; }」redの部分を他の色に変えることで、任意の色にカスタマイズできるため使用してみてください。

続いて、追加CSSでフォントを変更する方法を紹介します。まず管理画面の「外観」の「カスタマイズ」をクリックしましょう。テーマカスタマイザーの「追加CSS」でCSSを追加で右側にプレビュー、左側に追加CSSを入力するエディタがあります。エディタに任意のフォントのCSSコードを入力するとフォントを変更できるほか、エディタにフォントのCSSコードを入力することで、簡単にフォントを変更可能です。参考にフォントを変更するサンプルコードを紹介します。サンプルコード「body { font-family:”ヒラギノ角ゴ Pro W3″」こちらのコードをぜひ活用してみてください。

追加CSSで文字サイズを変更する方法を紹介していきます。まず管理画面の「外観」の「カスタマイズ」をクリックしましょう。テーマカスタマイザーの「追加CSS」でCSSを追加可能で、右側がプレビュー、左側が追加CSSを入力するエディタです。ちょっとした修正のためだけに子テーマを作るのは大変ですが、追加CSSを使うと簡単に文字サイズを変更できます。参考に文字サイズに変更するサンプルコードを紹介します。サンプルコード「p { font-size:20px;}」20の部分を他の数字に変えることで、任意の文字サイズにカスタマイズできるため、ぜひこのコードを使ってみてください。

追加CSSで画像の位置を変更する方法を紹介していきます。まず管理画面の「外観」の中の「カスタマイズ」をクリックしましょう。テーマカスタマイザーの「追加CSS」でCSSを追加できます。右側がプレビュー、左側が追加CSSを入力するエディタです。少しの修正のためだけに子テーマを作るのは大変ですが、追加CSSを使うと簡単に画像の位置を変更できます。参考に文字サイズに変更するサンプルコードを紹介します。サンプルコード「.post img { margin: 3em 4em;}」数字を他の数字に変えることで、任意の位置に画像を移動できるため、このコードを使ってみてください。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

つづいては、WordPressにおけるカスタマイズ面のメリットを確認しておきましょう。WordPressでカスタマイズを行うメリットは以下の通りです。

・比較的簡単にカスタマイズできる
・豊富なプラグインで拡張性が高い
・いろいろなタイプのサイトを構築できる

ここからは更に詳しく説明していきます。

まず1つ目のメリットは、WordPressを使うことで簡単にカスタマイズできる点にあります。テーマの設定やカスタマイザー、追加CSSというWordPressならではの機能があるため、初心者でも簡単にカスタマイズできます。Webサイトを作成するためにはプログラミング言語などの専門的な知識が必要ですが、WordPressであれば専門知識なしでカスタマイズが可能です。追加CSSは少しコードの知識が必要ですが、サンプルコードを入力するだけで初心者でもすぐに設定できます。またWordPressは利用者が多く、カスタマイズの情報はインターネット上で簡単に入手できるなど、環境が整っているため、WordPressのカスタマイズは比較的簡単です。

2つ目のメリットは、プラグインが豊富で拡張性が高いことです。プラグインとは、さまざまな機能を追加できるプログラム集を指します。WordPressなどのCMSを使わずにWebサイトに機能を追加する場合、機能に必要なプログラミングコードを記述する必要があり、初心者には現実的ではありません。WordPressを使うことで、コーディングなしで欲しい機能を追加できます。たとえば、問い合わせフォームを追加するプラグインや、自動で記事の目次を作成してくれるもの、簡単に表を作成できるプラグインなど多彩なプラグインが提供されています。このように、現在6万以上あるといわれる豊富なプラグインがあることも、カスタマイズに向いている大きな理由です。

3つ目のメリットは、豊富なテーマによって多くのサイトを構築できることです。テーマの設定方法を紹介したように、WordPressにはさまざまなテーマが提供されています。HTMLやCSSなどの知識がない初心者の方でも、テーマを導入するとハイセンスなWebサイトや、使い勝手のいいレイアウトのサイトを作成可能です。個人ブログや企業のオウンドメディアは、WordPressと相性がよく、企業のコーポレートサイトや採用サイト、ECサイトに向いているテーマもあります。そのほかにも会員制サイトやアフィリエイトサイトも、テーマを使うことで作成可能です。このようにあらゆるタイプのサイトを構築できるのがWordPressの魅力の一つです。

ここまでWordPressのカスタマイズについて解説してきました。今回紹介したカスタマイズ方法を理解することで、自社のWebページをより効果的なサイトにできます。またWordPressのWebサイト制作やカスタマイズにさらにスピードと質を求める時は、ホームページ制作会社への相談がおすすめです。プロに相談したい場合や自社にあった会社を探すときは、複数の会社から見積もりを取るようにしましょう。「アイミツ」では要望を伺った上で、条件に合う複数のホームページ制作会社を無料で紹介します。お困りの方は、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】 
WordPressに強いホームページ制作会社 / Web制作会社一覧
【費用感を知りたいという方はこちら】 
WordPress制作の費用・相場