WordPressでWebサイトを立ち上げたら、「WordPressをカスタマイズして良い見た目にしたい」と考える人は多いです。
WordPressはカスタマイズできる機能やデザインも多く、カスタマイズ性の高いCMSです。本記事ではWordPressをカスタマイズして見た目を自分好みにしたいけれど、プログラムの知識がなく不安な方に向けてWordPressの基本構造やカスタマイズの方法などをわかりやすく解説します。
ぜひ魅力あるWebサイト作りの参考としていただければと思います。
WordPress (ワードプレス)のカスタマイズにはまず基本構造を理解しよう
カスタマイズに関する内容に入る前に、WordPressの基本構造を理解していきましょう。以降で紹介する内容を踏まえたうえでカスタマイズを行うことが、思い通りにWebサイトをデザインできるベースとなります。
以下の画像はWebサイトの構造を表したものです。
以上の画像はヘッダー、コンテンツ、サイドバー、フッターから構成される”Webページ”のスクリーンショットです。Webサイトはこのようなページの集まりのことを指します。
これらのWebサイトをPHPなどのプログラムを知らない人が1から作りあげることは困難です。そこでWebサイトを容易に構築できるツールがあり、これをCMS (コンテンツ・マネジメント・システム)と呼んでいます。WordPressもCMSの1つです。
WordPress (ワードプレス)カスタマイズにおけるテーマとは
先ほど解説したヘッダーなどのWebページを構成するパーツの集合は、”テーマ”として統一されています。テーマの中にはそれぞれのパーツを構成するPHPやCSSといったコードが含まれています。
WordPressのテーマはあらかじめ複数のデザインパターンが設けられている場合が多いです。
テーマを含めWordPressでWebサイトのデザインを変更する際には以下の項目があり、それぞれにて編集可能です。
- テーマ
- カスタマイズ
- ウィジェット
- メニュー
- ヘッダー
- テーマエディター
テーマはテーマ開発者が作成したテーマをWordPressにインストールすることで使用可能になります。カスタマイズではWebページの色や画像などを編集可能です。
ウィジェットは小さなアプリのようなもので、カレンダーやサイドバーの検索機能などを容易に追加できます。
メニューについては例えば”事業概要について”、”沿革”、”代表者メッセージ”などのようにWebサイト内でのそれぞれのメニューを作成できます。メニューはWeb用語で”リンク集”のようなイメージです。
ヘッダーはWebサイトの上部に表示する画像などのことで、テーマエディターは直接CSSやPHPファイルを編集するものです。
WordPress (ワードプレス)のカスタマイズとは
ここからは実際にWordPressのカスタマイズについて解説します。
基本的にWordPressのカスタマイズは、CSSやPHPファイルを編集して行うことが多くなっています。もちろん公開されているWordPressテーマをインストールし、WordPress管理画面の”外観”メニューやテーマで選択できるデザイン設定によって、加えるデザインの変更もカスタマイズと言えるでしょう。
これらの作業によってWebサイトの配色やフォントの変更、ウィジェットの追加、メニューの追加、ファビコンの設定、抜粋の設定などが可能です。ファビコンとはブラウザーのタブに表示されるWebサイトのアイコンのことを指しており、検索結果、ブックマーク、スマホのホーム画面などにも表示されます。
このようにWebサイトに対して変更を加えることにより、個人や企業独自のブランディングやWebサイト訪問者へのイメージ作りが可能です。
「外観」メニューでカスタマイズ可能
WordPressのカスタマイズにはPHPやCSSの知識が必要と考えている人もいますが、ある程度のカスタマイズはWordPress管理画面の”外観”メニューでも可能です。
編集できる項目は”WordPress (ワードプレス)カスタマイズにおけるテーマとは”で述べたとおり、テーマやウィジェット、メニュー、ヘッダーなどです。
WordPress (ワードプレス)をカスタマイズする必要がない場合
Webサイトのデザインや機能をカスタマイズしようとするとき、必ずしもWordPressのテーマなどを編集しなくても良いです。なぜならインストールしたテーマを補完する意味合いで”プラグイン”を活用する方法があるためです。
実際にテーマをインストールすると、テーマの設定で多彩なデザインや機能を適用できます。つまり現在ではわざわざPHPやCSSを編集する必要性も少なくなってきているのです。
もしそれでもテーマの編集を行う場合には、””テーマを切り替えた後でもそのデザインや機能を維持するべきか”といった考慮のうえで行うべきです。
WordPress (ワードプレス)のカスタマイズ方法
以降ではWordPressのカスタマイズ方法を紹介します。
ページビルダーを使う
ページビルダーは見たそのままに編集できるページ編集機能と考えるとわかりやすいです。PHPやCSSの編集を行う際にはコードを記述しながら反映結果をイメージしますが、ページビルダーにおいては反映結果がすぐにわかります。
実際にページビルダーを使ってカスタマイズを行うには、ページビルダープラグインをインストールします。
ページビルダーでは変更と反映結果を即時に確認できる利点がありますが、細かな編集には向いていない場合もあるため注意が必要です。
フレームワークを使う
ページビルダーでなくテーマのフレームワークを利用してカスタマイズする方法もあります。テーマフレームワークとはテーマのベースとなるもので、子テーマを作成できます。
テーマフレームワークの詳細はWordPress Codex日本語版を参照ください。
CSS (カスケーディング・スタイル・シート)でデザインを変える
ページビルダーやテーマフレームワークよりも多彩で細かいカスタマイズができる方法が、CSSを使って編集する方法です。
CSSの編集は以下のようにWordPress管理画面から”外観”を選択した後、”テーマエディター”を選択すれば編集画面に移動できます。FTPソフトを用いてファイルにアクセスしエディターを利用して編集する方法もあります。
画像にあるとおり、CSSを直接編集することはさまざまなリスクが伴うことを把握しておかなければなりません。詳しくは後述します。
フォント
文字のフォントを変更する方法は以下の方法があります。今回はWordPress管理画面のテーマエディターから編集する方法で解説します。
しかしWordPress管理画面から編集する方法は管理画面が真っ白になってしまう可能性もあり、可能であれば先述のFTPソフトで編集することをおすすめします。
- WordPress管理画面のテーマエディターからスタイルシートを編集する
- FTPソフトを使用してスタイルシートを編集する
- プラグインを利用する
- 追加CSSを編集する
実際の手順はスタイルシートの編集画面から”font-family”と記述されている行を見つけ、指定したい書式に書き換えます。
実際に使用するフォント書式は各自でお調べください。”Google Fonts”を利用しても良いでしょう。
文字色
文字色を変更したい場合には、ブラウザーの検証ツールなどを利用して編集する箇所を調べます。環境によって操作の詳細は異なりますが、本記事ではChromeブラウザーを使用します。
文字色を変更したい文字部分にカーソルを当てて右クリックし、”検証”を選択しましょう。
すると検証ツールが表示されるので、”Styles”タブにある”element.style”の”Add color”を選択することで好みの色への模擬的な変更が可能です。
ここでの文字コードをコピーし、WordPressのスタイルシート編集画面から該当箇所にカラーを指定します。
文字コードを調べる際には原色大辞典を参考にすると良いでしょう。Chromeの検証ツールで候補色として出てきた色以外の色も設定可能です。
サイズ・太さ
文字のサイズ・太さを編集する際にも文字色とほぼ同様です。文字サイズは”font-size”で、文字の太さは”font-weight”で値を指定します。
サイズを指定するにはブラウザーの文字基準からの相対割合で指定する”％指定”や、ブラウザーの文字基準サイズを1emとした場合の絶対値を指定する”em指定”、”ブラウザー相対指定”、”pt指定”、”px指定”が可能です。
太さを指定する値は100、200、300などの数値で標準は400です。数値以外にも”normal”、”bold”、”lighter”、”bolder”のようにキーワードで指定もできます。実用的には”bold”がよく使われています。
PHPを利用してレイアウト・機能変更を行う
ここまではCSSを編集する方法を紹介しましたが、PHPを使ってレイアウトや機能の変更も可能です。ここでは以下のカスタマイズ方法を解説します。
- ファビコン
- ”前の記事へ””次の記事へ”
- 抜粋表示
ファビコン
ファビコンとは前述のとおりブラウザーのタブに表示されるWebサイトのアイコンのことを指しており、検索結果、ブックマーク、スマホのホーム画面などにも表示されるものです。
WordPressにインストールされたテーマによっては、PHPを編集しなくてもファビコンを設定できる項目が用意されている場合もあります。そのような場合はテーマの機能を使ってファビコンを設定してください。
PHPで編集する場合はファビコンにしたい画像をWordPress上でメディアとして追加しておきます。その後画像URLをコピーし”外観”の”テーマエディター”を選択後、右側の”テーマヘッダー”を選択します。
WordPress無料テーマ”Cocoon”の場合は上の画像のテーマヘッダーを選択します。
その後該当箇所にを記述しファイルを更新すると設定が完了します。
エラーが出る場合にはコードの記述やアイコン画像のサイズ、ファイル形式を確認してみてください。
「前の記事へ」「次の記事へ」
”前の記事へ””次の記事へ”のリンクを挿入したい場合には、WordPress管理画面のテーマエディター右側の”個別投稿”を選択し編集します。記述するコードは以下のとおりです。
「抜粋表示」
抜粋表示はコンテンツの抜粋を作成し記事の一覧を見やすくする機能です。編集する場合はWordPress管理画面のテーマエディター右側の、”テーマのための関数”を選択して以下のコードを記述します。
function my_excerpt_length($length) {
return 22;
}
add_filter(‘excerpt_mblength’, ‘my_excerpt_length’);
returnで指定する数字は抜粋したい文字数です。
WordPress (ワードプレス)のテーマをカスタマイズする際に意識したいこと
WordPressのカスタマイズ方法を解説してきましたが、事前に意識したいことがあります。それぞれ解説していきます。
コードをなるべく直接編集しない
PHPやCSSコードはなるべく直接編集しないようにしましょう。コードを直接編集してしまうとテーマが更新された場合に変更内容を失ってしまう可能性もありますし、不具合が起きてしまったときの復元にも手間がかかる場合が多いためです。
ローカル環境でまずは変更
変更を加える際には必ずバックアップととったうえで、まずはローカル環境で編集を行いましょう。実際のサイトに影響を与える前に、ミラーサイトで確認を行うことが重要です。
バージョン管理を活用
テーマを編集する際はバージョン管理を活用すると、いざというときのトラブルシューティングにもつながります。変更を追跡できると、どの変更によって不具合が生じたのか明確に調査でき、即座に問題のないバージョンに復元できます。
GitHubなどのサービスを活用しても良いでしょう。
ステージングサイトを利用
ステージングサイトは動作テスト用のWordPressサイトです。実装する前にステージングサイトで動作を確認できるため、ぜひ活用しましょう。具体的には同じサーバーの中でもう1つWordPressをインストールします。
テーマをスマホにも対応させる
Webサイトはデスクトップだけでなくスマートフォンなどモバイル環境下でも機能しなければなりません。カスタマイズする側はデスクトップPCやノートPCで行う場合が多いですが、Webサイトを訪問する側はモバイル環境である場合も多いです。
スマホ対応のWebサイトになっているかどうかはSEOにも影響するため注意しましょう。
障害のあるユーザーにも配慮のあるカスタマイズにしよう
モバイル環境のユーザーにやさしいWebサイトにする点と同様の考え方で、障害のあるユーザーにも配慮したWebサイトである必要があります。
具体的にはスクリーンリーダーが機能するようにしたり、障害者にも見やすい工夫をしたりします。WordPressのカスタマイズを行う際には注意しましょう。
Chromeの検証ツールなどを用いてアクセシビリティチェックを実施しても良いでしょう。
WordPressのコーディング標準に従う
コーディングを行う際にはWordPressのコーディング標準に従いましょう。コーディング標準には一般的なミスを減らし、コードの可読性を向上するなどの意味があります。
詳しくはWordPress コーディング規約｜WordPress.ORG 日本語を参考にしてください。
WordPress (ワードプレス)のカスタマイズに役立つ記事
WordPressのカスタマイズは実際に実施してみると幅広い知識が必要になります。そのため事前に知っておくべき内容をまとめられた記事に目を通しておくと良いでしょう。
以降ではWordPressのカスタマイズを実施するうえで役に立つ記事を要約しながら紹介します。
「WordPress初心者が知っておきたい22のポイント」
WordPressのカスタマイズに関する記事要約”WordPress初心者が知っておきたい22のポイント”
パーマリンク設定はまず初めに行っておきましょう。後から変更する場合には記事URLが変わってしまうなど、修正に手間がかかってしまいます。設定の際にはGoogleのガイドラインに沿って、”シンプルでわかりやすいURL”にすることをおすすめします。
Webサイト構築に関する知識が乏しくてもFTPソフトを利用しましょう。WordPressの管理画面に頼ってしまうと、少しのコードエラーにより管理画面にアクセスできなくなる可能性があるためです。
本記事でも紹介しましたが、ブラウザーの検証ツールの利用方法も押さえておきましょう。WordPressのカスタマイズを行ううえで非常に強力なツールです。
「WordPressカスタマイズの基本的な考え方」
WordPressのカスタマイズに関する記事要約”WordPressカスタマイズの基本的な考え方”
カスタマイズにはPHPやCSSの知識が必要だと感じてしまいますが、無理して覚える必要もありません。むしろ可能なかぎりPHPやCSSを編集せずにメニュー操作で簡潔することが望まれます。
そのためにもカスタマイズしやすいWordPressテーマを選びましょう。
「WordPress（ワードプレス）カスタマイズの基本！初心者必読のテーマ・テンプレートやウィジェット等のカスタマイズ」
WordPressのカスタマイズに関する記事要約”WordPress（ワードプレス）カスタマイズの基本！初心者必読のテーマ・テンプレートやウィジェット等のカスタマイズ”
カスタマイズ初心者ができるようになるべきカスタマイズは以下のとおりです。
- アイキャッチ画像の設定
- カスタムメニューの設定
- 特定の文字をリンクにする
- ファビコンの設定
- 余分なHタグをpタグに変更
- コメント部の説明文を削除
- フッターにあるWordPressへのリンクを削除
- 記事情報を抜粋表示にする
「WordPressのオリジナルテーマ作成フロー・基本マニュアル」
WordPressのカスタマイズに関する記事要約”WordPressのオリジナルテーマ作成フロー・基本マニュアル”
WordPressは常に機能が追加されるなど更新されるため、最新の情報は公式レファレンスサイトやフォーラムで調べましょう。
WordPressのカスタマイズをする前に以下のものを用意しておきましょう。
- ローカル環境
- PHP対応のテキストエディタ
- HTMLファイルや画像、CSS一式
- 確認用ブラウザー
「初心者でも3分でわかる！WordPressの子テーマの作り方」
WordPressのカスタマイズに関する記事要約”初心者でも3分でわかる！WordPressの子テーマの作り方”
WordPressの子テーマの作り方は、大まかに以下の流れになっています。
- 1作る
- 2 編集する
- 3 入れる
- 4 有効化する
具体的には子テーマ用のフォルダを作成しCSSファイルやPHPやファイルを格納します。その後ファイルを編集し、FTPソフトを使用して適切な場所に格納していきます。その後WordPress管理画面のテーマから、テーマを有効化するといった流れが一連の子テーマ作成の流れです。
「0から始めるHTMLとCSSの基本・基礎-webデザイン入門」
WordPressのカスタマイズに関する記事要約”0から始めるHTMLとCSSの基本・基礎-webデザイン入門”
DOCTYPEの宣言とは文書がHTMLであり、次にはじまるHTMLであり文書が、どのバージョンを利用してどの文書型定義に従って記述されているかをブラウザーに伝えるためのものです。HTMLファイルの冒頭に記述されます。
ブラウザーはの間にかかれている内容を表示します。
CSSにはmarginとpaddingというものがあり、どちらも表しているものは間隔です。なかでもmarginはボックスの外側を、paddingはボックスの内側を示しています。
HTML要素すべてにCSSのスタイルを適用するのではなく、特定の要素に指定したい場合には”id”と”class”を使用します。
「自分でカスタマイズしよう！WordPressでCSSを編集する方法【初心者向け】」
WordPressのカスタマイズに関する記事要約”自分でカスタマイズしよう！WordPressでCSSを編集する方法【初心者向け】”
- WordPressのCSSファイルを編集するには、管理画面から行う方法とFTPクライアントを使用する方法がある
- CSSの編集によってデザインを変更できる箇所はテーマによって異なる
「初心者必見！CSS編集でWordPressを自分好みにカスタマイズする方法」
WordPressのカスタマイズに関する記事要約”初心者必見！CSS編集でWordPressを自分好みにカスタマイズする方法”
WordPressでCSSを追加できる場所は以下の3つです。
- 親テーマ
- 子テーマ
- 追加CSS
親テーマのCSSの編集はWebサイトの土台となる部分を直接書き換えていくことであり、テーマの更新の際には変更内容が失われる可能性があるため注意しなければなりません。
しかし子テーマの編集のデメリットもあり、親テーマから情報を取得するため表示速度が遅くなってしまいます。
追加CSSで記述した内容はヘッダーに書き込まれ、親テーマや子テーマより優先して反映されます。しかしCSSをHTMLに埋め込むことは推奨されていません。
「PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】」
WordPressのカスタマイズに関する記事要約”PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】”
WordPressにはWordPress専用のコードがあり、PHPを覚えるよりもWordPressのコードを覚えておくと良いでしょう。WordPressをカスタマイズするうえで押さえておくべきポイントは以下のとおりです。
- ページによって読み込まれるファイルが違う
- ヘッダーやフッターなどのテンプレートを呼び出している
- 記事の情報を取得するためのコード
- 記事一覧を取得するためのモジュール
「WordPressでWebサービスを作る方法」
WordPressのカスタマイズに関する記事要約”WordPressでWebサービスを作る方法”
- PHPはサーバーサイド・スクリプト言語で動的にHTMLデータを生成する
その他PHPに関する基本を初心者にもわかりやすく解説している記事です。PHPの知識に自信がない方はぜひ参考にしてみてください。
WordPress (ワードプレス)のカスタマイズまとめ
WordPressのカスタマイズに関して、初心者向けに必要な知識などを解説してきました。現在ではWordPressのカスタマイズはテーマによって広い範囲で柔軟に設定可能なものもあります。さらにプラグインを活用することでやりたいことはある程度可能である場合も多いです。
それでもやりたいことができない場合もあります。その場合にはPHPやCSSを編集する必要がありますが、編集する前にバックアップをとっておく、ローカル環境で編集し動作テストを行うなど必要な措置を講じたうえで、本記事の内容を参考にしながらカスタマイズを行ってみてください。
