SHARE

【超初心者】WordPressカスタマイズ6選!テーマ・外観・レイアウト編

WordPressは初心者でも直感的に利用できるので、個人ブログから企業サイトまでさまざまな形で利用されています。

とはいえ、自由にカスタマイズするためには一定の知識が必要です。この記事に来られている方は「サイトを自分好みにカスタマイズしたいけど、やり方がわからない」「サイトを作成してみたけど、タイトルやWebのトップページに表示する画像の変更方法がわからない」というような悩みをお持ちではないでしょうか。

本記事ではWordPressでサイトを立ち上げた初心者の方に向けて、カスタマイズ方法を解説します。この記事を読めばHTMLやCSSといったコードの知識がなくても、WordPressをカスタマイズできるようになります。ぜひ参考にしてください。

デザイン・開発・動画編集・SNS運用など、経験豊富なプロに直接頼める!

WordPressをカスタマイズする前に理解すべき4つの基本構造

キーボードとプログラミング

WordPressをカスタマイズする前に、基本構造を理解しておきましょう。基本構造を理解しておけば、WordPressのカスタマイズに時間がかかったり、失敗した場合に元に戻せなくなってしまったりする可能性が低くなるからです。

WordPressの基本構造は大きく分けて以下の4つです。

  1. WordPressのカスタマイズに大きく関わる「テーマ」
  2. WordPressサイトの機能を向上させる「プラグイン」
  3. Webコンテンツ作成の基本となる「HTML」
  4. WordPressサイトを自分好みにカスタマイズできる「CSS・PHP」

それでは、上記4つの基本構造について詳しく解説します。

1. WordPressのカスタマイズに大きく関わる「テーマ」

Webサイトを作るためのコードやプログラミングの知識がない初心者でも、WordPressを使用すると簡単にWebサイト作成・カスタマイズができます。その土台となるのがテーマと呼ばれるものです。WordPressにおけるデザインの土台、いわばキャンパスの役割を担っています。

テーマごとにデザインやカスタマイズ性が異なり、基本的な機能が備わった無料テーマや、ネットショップを構築する優秀な機能が備わった有料のものがあります。用途に合ったテーマを選ぶことでカスタマイズがしやすくなり、Webサイトを作るための時間も短縮できます。

2. WordPressサイトの機能を向上させる「プラグイン」

プラグインとは、WordPress機能を拡張し、機能を向上させるツールです。プログラミングの知識はなくても、お問合せフォームの設置やWebサイトに訪れたユーザーの分析機能などが拡張できます。

デザインを変更するプラグインもあり、機能拡張以外にも使えるので、初心者でもデザイン性豊かなサイト制作が可能です。

3. Webコンテンツ作成の基本となる「HTML」

HTMLはWebサイトに表示するコンテンツを作成する際の基本となるコードです。WordPressでも使われており、ネットショップの商品ページやオウンドメディアの記事コンテンツなど、すべてHTMLで作成されています。

WordPressは直感的な操作で投稿ページ(Webコンテンツ)が作成できるため、専門的な知識は不要です。HTMLを理解しておけば「コンテンツの配置変更」や「サイトにYoutube動画を入れる」「自社のGoogleマップを埋め込む」といったカスタマイズが可能になります。

4. WordPressサイトを自分好みにカスタマイズできる「CSS・PHP」

CSSとPHPはWebサイトのレイアウトを自由にカスタマイズできる言語です。WordPressのテーマはすでにCSS・PHPを整えてくれています。理解しなくてもWebサイト制作は可能です。

ただし、Webサイト内で使われるフォントやデザインを自由にカスタマイズしたい方は理解しておくべき言語と言えます。

WordPressのカスタマイズ方法は2種類

WordPressのカスタマイズ方法は「テーマカスタマイズ」と「CSS・PHPを使ったカスタマイズ」の2種類があります。テーマカスタマイズ方法は、WordPressのデザインの土台となるテーマを自分好みにカスタマイズするものです。プログラミングの知識がない初心者に向いている方法です。

CSS・PHPを使ったWordPressのカスタマイズは、言語を覚える必要がありますが、自分好みにカスタマイズできるメリットもあります。

今回はWordPressでサイトを立ち上げて間もない初心者の方に向けた記事になりますので、「テーマカスタマイズ」を重点的に解説していきます。

初心者でも設定しやすいWordPressテーマカスタマイズの6つの方法

初心者でも設定しやすいWordPressのテーマカスタマイズ方法を解説します。まずはカスタマイズの土台となるテーマを設定しましょう。

まずはWordPressの管理画面を開き、画面左のメニューから「外観」をクリックしましょう。

キャプチャ1

テーマという項目が表示されるので、「新規追加」を選択します。テーマがずらっと表示されるので、気になるデザインのものを選び、インストールします。

キャプチャ2

最後にインストールしたテーマを「有効化」すれば準備は完了です。

キャプチャ3

有効化できたら、カスタマイズを選択します。

キャプチャ4

カスタマイズを選択することで、テーマカスタマイズの編集画面が表示されます。

キャプチャ5

上記の編集画面では、以下の6項目をカスタマイズできます。

  1. タイトル
  2. サイトロゴ
  3. ヘッダー
  4. ウィジェット
  5. レイアウト
  6. グローバルメニュー

詳しく解説していきます。

1. タイトルの変更方法

まずはサイトの基礎となるタイトルを設定しましょう。

カスタマイズ画面から「サイト基本情報」を選択します。

キャプチャ6

「サイトのタイトル」にテキストを入力すれば、タイトルを設定できます。

2. サイトアイコンの設定方法

カスタマイズ画面から「サイト基本情報」を選択し、「サイトアイコンを選択」をクリックします。

キャプチャ6

サイトアイコンに設定したい画像を選択します。

キャプチャ8

設定が完了すれば以下の箇所に選択した画像が表示されます。

キャプチャ9

3. ヘッダーの設定方法

「ヘッダーメディア」を選択し、「新規画像を追加」を選択します。

キャプチャ10

設定したい画像を選択したら「選択して切り抜く」を選択します。

キャプチャ11

最後に「画像切り抜き」を選択すれば、ヘッダー画像を変更できます。

キャプチャ12

4. ウィジェットの設定方法

「ウィジェット」とは以下の部分を指します。

キャプチャ13

ここを変更するためには、「ウィジェット」を選択し、追加したい項目を選択します。

キャプチャ14

画像を追加したい場合は、画面左下の「+」ボタンをクリックし、画像を選択します。

キャプチャ15

画像は「アップロード」するか、ライブラリから選択した画像が表示できます。

キャプチャ16

5. レイアウトを変更する方法

「レイアウト設定」を選択します。テーマによっては、レイアウトの編集項目がない可能性がありますので、注意してください。

キャプチャ17

次に「カラム設定」を選択します。

キャプチャ18

トップページの「1カラム」を「2カラム」に変更します。

キャプチャ19

変更することで画面右側にウィジェットが表示されます。

キャプチャ20

Webサイトにプロフィールや投稿へのリンク、広告を貼りたいときに有効な設定です。

6. グローバルメニューの設定方法

グローバルメニューの設定では、以下画像の箇所を変更できます。

キャプチャ21

カスタマイズ画面から「メニュー」を選択します。

「メニューを新規作成」を選択します。

キャプチャ22

メニュー名やメニューの位置を選択したら、「次」を選択します。

キャプチャ23

「項目を追加」を選択し、表示したい項目を選択します。

キャプチャ24

右側の項目の「+」、もしくは「+追加」でメニューを追加できます。

キャプチャ25

初心者でも設定しやすいWordPress管理画面/ダッシュボードカスタマイズの3つの方法

ECサイト作成
管理画面やダッシュボードは、WordPressを使う際に何度も目に触れるところだからこそ、不必要な情報や項目があると使いづらく感じてしまいます。そこで、ここでは初心者でもできる、WordPressの管理画面やダッシュボードのカスタマイズ方法を解説します。

1. ダッシュボードの不要な項目の表示を消す方法

WordPressのダッシュボードには、「ウィジェット」とよばれるブロックごとに、サイトの概要や直近のアクティビティなどが表示されています。目的の情報を何度も見る際に便利ですが、ウィジェットには必要でない情報が表示されている場合もあります。

そこで、ダッシュボードに表示されているウィジェットの中から、不要な項目を消して、スッキリさせる方法を紹介します。

  1. 管理画面の上部にある「表示オプション」をクリック
  2. 「画面上の要素」というメニューの中から、表示したい項目のチェックを外す

この2つのステップで、ダッシュボードの不要な項目が非表示にできます。また、項目ごとのチェックボックスにチェックを入れることで、再び表示させることも可能です。必要な項目を非表示してしまっても、すぐに戻せるため慌てずに対応できます。

2. ユーザーごとに与える権限を変える方法

WordPressの権限には、以下の5種類があり、それぞれの権限ごとに操作可能な範囲が異なります。

ユーザー権限操作可能範囲
購読者閲覧のみ
寄稿者記事の下書きと自分が制作した記事の編集
投稿者自分が作成した記事の投稿、編集、公開
編集者全記事の管理
管理者全管理機能

基本的に、1人でWordPressを使う場合は、これらの管理者権限は関係ありません。しかし、記事の作成を外注するなど、複数人でWordPressを使用する場合は、あらかじめ権限の範囲を設定しておかないと、「全記事が削除される」などのトラブルが起こるリスクもあります。

そのためWordPressの使用ユーザーごとに、適切な権限が付与できるよう付与方法について理解しておきましょう。

  1. 左メニューの「ユーザー」から「新規追加」を選択
  2. 新規ユーザーを追加」の画面から「権限グループ」を選択し、付与したい権限を選ぶ
  3. 「新規ユーザーを追加」をクリック

既存ユーザーの権限を変更する場合は、以下の手順で行います。

  1. 左メニューの「ユーザー」から「ユーザー一覧」を選択
  2. 権限を変更したいユーザーの「編集」を選択
  3. 「名前」の項目にある「権限グループ」から、付与する権限を選ぶ
  4. 「ユーザーを更新」をクリック

このように、権限はいつでも変更できるため、状況に合わせて最適な権限を与えて、安全にWordPressを管理しましょう。

3. サイドバーの不要な項目を非表示にする方法

管理画面の左側にあるサイドバーは、記事の作成画面へのショートカットなど、役に立つツールです。しかし、普段は使わない項目があると、目的の項目をクリックするのに余計な手間がかかってしまいます。

そこで、「function.php」で「remove_menu_page」を使用した以下のようなコードを活用して、項目を非表示にしましょう。

function remove_menus () {
if (!current_user_can(‘administrator’)) {
remove_menu_page( ‘upload.php’ );       // メディア
remove_menu_page( ‘themes.php’ );       // 外観
remove_menu_page( ‘profile.php’ );       // プロフィール
remove_menu_page( ‘users.php’ );       // ユーザー
remove_menu_page( ‘edit-comments.php’ );       // コメント
remove_menu_page( ‘tools.php’ );       // ツール
}
}
add_action(‘admin_menu’, ‘remove_menus’);

また、表示しておきたいメニューには「//remove_menu_page(‘index.php’);〇〇(項目名)」を用います。必要な項目だけを表示させると、メニューがスッキリし使い勝手が良くなります。

上級者向けのCSS・PHPを使ったWordPressのデザイン変更・機能追加方法

プログラミング画面

この章では、WordPressのCSS・PHPを編集する方法について解説します。「どんなカスタマイズをしたいか」によって、記述するコードは異なりますし、プログラミング知識を身に付けなければなりません。

この記事はあくまでも「WordPressで作ったサイトをある程度形にしたい」という方に向けた記事になりますので、具体的なCSS・PHPの編集はコードの解説はしていません。

ただ、どんなカスタマイズができるのかを詳しく解説しているので、「プログラマーを雇う」「WordPressカスタマイズの外注を考えている」など、プログラマーに制作を依頼する予定の方は参考にしてください。

CSSのカスタマイズ方法

CSSはWordPressのデザイン面をカスタマイズする際に使える言語です。WordPressのCSS編集は、管理画面の左メニューにある「外観」から「テーマエディター」「スタイルシート」の順に行います。

CSSは以下のような編集が可能です。

  • 文字フォント変更
  • 文字色の変更
  • 文字サイズ・太さの変更

WordPressのCSSのカスタマイズは、以下のような悩みを抱えている方におすすめです。

  • テーマに標準搭載されているボタンやサイトデザインが気に入らない
  • テーマに用意されているフォントや文字色が気に入らない

CSSは重要なコードを削除してしまうと、カスタマイズした部分が消えてしまったり、戻せなくなってしまったりする場合があります。カスタマイズする前に、必ずバックアップもしくは元のコードをコピーし、メモアプリなどに貼り付けて保存しておきましょう。

PHPのカスタマイズ方法

PHPはWordPressの機能面をカスタマイズするときに使えるコードです。PHPの編集はWordPressの管理画面の左メニューにある「テーマエディター」を開き、画面右にある「テーマのための関数 (functions.php)」を選択することで、編集画面を呼び起こせます。

PHPは以下のような編集が可能です。

  • 掲示板や問い合わせフォームの作成
  • ショッピングカートの追加

例えば、ネットショップで商品をカートに入れる際、ユーザーごとに点数や商品が異なり、確認画面で表示される内容も異なるはずです。これを実現しているのがPHPになります。WordPressのPHPカスタマイズは、以下のような悩みを抱えている方におすすめです。

  • ネットショップを作りたい
  • 予約システムを実装したい

WordPressサイトでサービスの予約や商品の販売をしたい方はPHPが全て解決してくれます。

ただ、PHPでは作成できるものが多い分、理解するには時間がかかります。セキュリティー対策万全のネットショップや予約システムを作りたい、というような高度なカスタマイズを求めている方は、外注依頼するのがおすすめです。

ランサーズにはさまざまなジャンルのプロが在籍しており、WordPressのカスタマイズが自由自在に行える登録者もいます。大手代理店より費用が抑えられ、高品質なものを納品してもらえるのでコストパフォーマンスが高い傾向にあります。

WordPressの高度なカスタマイズを求められている方はぜひランサーズの利用を検討してみてください。

WordPressのカスタマイズならランサーズ

WordPressのカスタマイズと一緒に導入しておきたいプラグイン

Wordpressの画面

WordPressはプラグインを入れれば、CSSやPHPを触らなくても機能性やデザイン性を向上させられます。プログラミングの知識がない初心者の方は、プラグインを導入すればある程度自由にカスタマイズできます。

プラグインは以下の手順で導入できます。

  1. プラグインから「新規追加」を選択
  2. プラグイン名を検索
  3. 「今すぐインストール」を選択
  4. 利用したいプラグインを「有効化」する

これでプラグインの導入・有効化が可能です。プラグインの導入方法を理解できたら、機能性とデザイン性を向上できるプラグインを見ていきましょう。

WordPressサイトの機能を向上させるプラグイン

WordPressサイトの機能を向上させるプラグインを解説します。実際に導入する際には、プラグイン名をコピーし、WordPressで検索し、インストールしてください。

プラグイン名特徴導入目的
Akismetスパムコメントを防ぐサイトのセキュリティーを強化したい
All in One SEOSEO設定をまとめてできるプラグインSEO対策をしたい
Google XML SitemapsSEO対策に関係するサイトマップ自動作成を手助けするSEO対策をしたい
JetpackSNS連携やSEO機能など、さまざまな機能を利用できる機能を拡張したい
Contact Form 7専門知識不要で問い合わせフォームを作成できる機能を拡張したい
Broken Link Checkerサイト内のリンク切れを見つけ、アラートしてくれるサイトの保守・運用を強化したい
BackWPupバックアップを簡単に取れるサイトの保守・運用を強化したい

上記のプラグインは5万以上ダウンロードされています。500万以上ダウンロードされているものや多くのwebサイトで使われているものだけを紹介しています。

WordPressサイトのレイアウトがカスタマイズできるプラグイン

プラグインを使えば、プログラミングの知識がなくても動きのあるWebサイトが制作できます。以下は、デザイン・レイアウトをカスタマイズするのに使えるプラグインです。

プラグイン名特徴導入目的
Smart Slider 3サイト内にスライドショーを作成できるサイトにスライドショーを流したい
Page Builder by SiteOriginサイトのレイアウトを自由に変えられる直感的な操作で魅力的なWebサイトを作りたい

Smart Slider 3はサイトにスライドショーが設置できます。ネットショップを例に挙げると、トップページに人気の商品をスライドショー形式で流したり、画像をクリックすれば商品ページに移動できたりするようなカスタマイズが可能です。

Page Builder by SiteOriginはプログラミングの知識がなくても、プロレベルのサイトを作ることができます。それぞれのプラグインのインストールページにサンプルが掲載されているので、導入を検討されている方はチェックしてみてください。

WordPressのカスタマイズができない場合の4つの対処法

笑顔で仕事をこなす人

WordPressをカスタマイズする際、画面が真っ白で編集項目が出ない不具合が発生する場合があります。ここでは、WordPressのカスタマイズができない場合の対処法を3つご紹介します。

  1. プラグインを一旦停止する
  2. WordPressをダウングレードする
  3. テーマを変更する

1つずつ見ていきましょう。

1. プラグインを一旦停止する

WordPressのカスタマイズができない場合は、プラグインを一旦停止してみましょう。テーマとプラグインの相性が悪く、カスタマイズに不具合が起きている可能性があります。

導入したプラグインを1つずつ「停止」していき、どのプラグインが原因となっているのか一つ一つ調べていきましょう。

2. WordPressをダウングレードする

WordPressをダウングレードすることで、カスタマイズできない不具合が解消される場合があります。WordPressは最新版にバージョンアップすることで、カスタマイズやそのほかの部分に不具合が出る可能性があり、テーマが最新バージョンに適していない場合にカスタマイズできない不具合が起きます。

この場合、ダウングレードすれば、テーマとWordPressのバージョンが一致し、カスタマイズ可能です。ダウングレードは「WP Downgrade | Specific Core Version」のプラグインを使えば初心者でも簡単に設定できます。

ダウングレードはプラグインの設定画面を開いて「Current WP Version」に表示されている数字よりも低いバージョンの数字を入れるだけで完了します。アップデートバージョンの数字はこちらのサイトに記載されています。

参考:WordPressの公式サイトでリリースバージョンを確認する

3. テーマを変更する

使用しているテーマが原因でWordPressのカスタマイズに何らかの問題が起きている可能性があります。テーマを変更する、もしくはテーマの再インストールで不具合を解消できます。

CSSやPHPを知らない間に改変していたり、テーマ自体がクラッシュしたりしている場合はテーマカスタマイズに異常が出る可能性があります。

テーマに異常が起きている場合は、テーマ自体を削除、再インストールすることでテーマをリセットできます。リセットすることで不具合が起きる前の状態にできるので、WordPressのカスタマイズ画面が表示されない場合は一度テーマを変更、もしくはインストールを試してみましょう。

4. 専門家に相談する

WordPressは、自由にカスタマイズしようとするほど、複雑な操作や専門知識が必要です。そのため、自分でカスタマイズできない原因を解決しようと試行錯誤した結果、問題が複雑化して何もできない事態に陥ってしまう場合もあります。

そこで、自分では解決できない問題だと判断したら、無理に自分で解決しようとせず、WordPressにくわしい専門家に相談することがおすすめです。もし、解決方法を教えてもらっても自分ではできないときは、管理者として専門家をユーザー登録し、自分の代わりに操作してもらうのもいいでしょう。

また、始めから基本的なカスタマイズを専門家に依頼することも効果的です。ランサーズでは、WordPressにくわしい専門家が多数在籍しているので、用途や予算に合わせて、信頼できるクリエイターWordPressのカスタマイズを依頼してみましょう。

WordPress初心者はテーマのカスタマイズとプラグインがおすすめ

この記事では、WordPressのカスタマイズについて解説しました。

WordPressカスタマイズは「テーマをカスタマイズする方法」と「CSS・PHPでカスタマイズする方法」の2つがありますが、初心者の方はテーマをカスタマイズがおすすめです。

プラグインを導入すればあるデザイン性や機能性も拡張できます。ただし、プラグインの入れすぎは、サーバーへの負荷が大きくなり、Webサイトの表示速度が遅くなってしまいます。表示速度が遅いとユーザーはサイトを離脱してしまう可能性があり、集客に繋がらない可能性があります。

CSS・PHPを使ったカスタマイズは、デザイン性や機能性を拡張しても、サーバーに負荷がかからず、表示速度の遅延には繋がりにくいです。

ランサーズではWordPressのカスタマイズに強いフリーランスの方がたくさん在籍しており、費用・品質共にコストパフォーマンスが高いです。

ネットショップ構築などの高度なカスタマイズにも対応してもらえるので、ランサーズを利用して外部の方に依頼するという方法も一つの手です。

WordPressのカスタマイズならランサーズ

デザイン・開発・動画編集・SNS運用など、経験豊富なプロにカンタン依頼