wordpressでHPを作成したいけど何から設定したら良いか分からない。
この記事で解決！
設定方法やヘッダーメニューの設定、ウィジェットの使い方など、扱いやすいと言われるwordpressでも、つまづくポイントは多くあります。
今回は用語解説も含めた、wordpressでHPを作成する際に必ずしておきたい設定手順を分かりやすくご紹介いたします。
- wordpressの初期設定が分かる
- WordPressでのHP作成の具体的な流れが分かる
- テーマやウィジェット、ヘッダーなどの基本的な用語が理解できる
前置きはこのくらいで、
早速解説します！
Wordpresの設定方法とHP作成手順
初期設定
まずは、Wordpressにログインし、管理画面の「設定」から初期設定を行いましょう。
以下の項目を設定しましょう。
- サイトタイトル：サイト名を入力
- キャッチコピー：サイト名に続いて表示されます(例)長野制作CONNECT|長野のWebサイト制作・SNS運用はお任せください
- サイトアイコン：サイトのロゴを設定します
- サイトの言語：日本語を選択
- 最後に「保存」ボタンを押す
- ホームページの表示：「固定ページ」を選択し、ホームページを「TOP」投稿ページを「BLOG」にする。※固定ページから「TOP」「BLOG」ページを作成する必要があるため、後ほど設定。「トップページとブログページの表示設定」で改めて解説しています。
- 検索エンジンでの表示：チェックを入れる※これは検索エンジンで表示されないようにするための項目。制作途中はチェックを入れておき、完成後にチェックを外す
- 最後に「保存」ボタンを押す
パーマリンク構造において、「投稿名」を選択し「保存」
テーマ設定
続いて、テーマの設定を行います。
ホームページのデザインテンプレートのことを指す。PHP、CSS、HTMLファイルなどで構成されているため、HTMLの知識がなくても管理画面から設定するだけで、プロ並みのWebサイトが簡単に作成できる。 代表的なものとして、LightningやCocoonなどの無料テーマから、SWELLやsangoといった有料テーマもある。
まずは無料テーマから初めてみるのがおすすめ！
ここで、Wordpressにテーマをインストールする方法は、以下の2通りあります。
1.Wordpressの管理画面から検索してインストールする場合
2.外部から取得したzipファイルをアップロードする場合
基本的には、②を選ぶことが多いです。
①の場合、wordpressの管理画面からでもたくさんのテーマを選べますが、そのほとんどが海外製であり、初心者の方にはハードルが高いものが多いです。ただ、その中でも無料テーマであるLightningは日本の多くのサイトで使用されているおすすめのテーマになります。
その他のテーマは、使用したいテーマの公式サイトからファイルをダウンロードしておきましょう。
- 「テーマを追加」をクリック
- 「テーマを検索」に使用したいテーマを検索する（今回はLightning）
- 検索して表示された対象のテーマにカーソルを合わせ、「インストール」をクリック
- インストールできたら、「有効化」をクリック
- 「テーマを追加」をクリック
- 「テーマのアップロード」をクリック
- 「ファイルを選択」をクリックし、あらかじめダウンロードしたテーマファイルをアップロード
- アップロードが完了したら「有効化」する
子テーマも必要ですか？
HTMLやCSSをいじる上級者は必須！
管理画面だけの設定であれば必要ありません。
親テーマと子テーマについて
親テーマはデザインの基礎や土台を構成しており、子テーマは、CSSなどを用いてWebサイトのデザインを変更したりカスタムする際に必要なテーマです。多くの場合、親テーマ「テーマ名（ローマ字）」子テーマ「テーマ名（ローマ字）-child」という名称になっています。
子テーマは、親テーマのアップデートの影響を受けずに済むため、CSSやテーマファイルを直接いじるようなカスタマイズをする場合は子テーマが必要になります。
例えば、Wordpressの管理画面にある「追加CSS」からデザインをカスタマイズする場合は、親テーマがアップデートされても影響を受けず、そのまま残ります。一方、「外観」→「テーマファイルエディター」でコードをいじった場合は、アップデートされた場合にリセットされてしまいます。
テーマファイルエディタ↓
テーマファイルをいじる予定がない場合は、親テーマのみで問題ありませんが、不安な場合は子テーマもインストールしておくと良いでしょう。
その場合、必ず親テーマを入れてから子テーマを入れましょう。
カスタマイズ設定
続いて、サイトの基本カラーやヘッダー、フッター、メインビジュアルの設定を行います。
使用するテーマによって若干変わりますが、基本的な操作方法は同じです。
WordPressの管理画面にある「外観」→「カスタマイズ」をクリックして設定していきます。
サイト全体設定
カスタマイズ画面の「サイト全体設定」をクリックします。
ここでは、メインカラー・テキストカラー・リンクカラー・背景色を設定できます。
特にメインカラーによってサイト全体の雰囲気が大きく変わりますのでこだわりましょう。
設定できたら、必ず「公開」をクリックして保存。
ここでは主に、ベースとなるフォントを設定できます。
使用したいフォントを選択し、「公開」をクリックして保存します。
基本的な設定はこのくらい。
その他、必要に応じてカスタマイズしてください。
ヘッダー・フッター設定
続いて、カスタマイズにある「ヘッダー」「フッター」をそれぞれ設定します。
ヘッダーとは、上部に表示されるロゴやメニューのこと。フッターは、下部に表示されるメニューのこと。
主に以下の項目を設定しましょう。
- ヘッダーの背景色
- ヘッダーの文字色
- ヘッダーロゴ
- ヘッダーの追従設定（スクロールした際にヘッダーを追従させるかどうか）
設定後、「公開」をクリックして保存します。
主に以下の項目を設定しましょう。
- フッター背景色
- フッター文字色
設定後、「公開」をクリックして保存します。
トップページ設定
トップページのメインビジュアルを設定します。
画像一つでサイトの印象は大きく変わります。文字とのコントラストにも注意しましょう。
- メインビジュアルに使用したい画像をアップロード
- 「メインテキスト」「サブテキスト」を設定
- その他、必要に応じて調整を行う。
固定ページ設定
固定ページとは、「会社概要」や「お問い合わせページ」、「ブログ一覧ページ」など、各ページの中身（コンテンツ）を編集する機能です。
WordPressの管理画面にある「固定ページ」から設定を行います。
固定ページの作成方法
固定ページ作成の流れは以下の通りです。
- 固定ページの追加
- タイトルを入力
- 本文の編集（ブロックエディタ利用）
- 下書きをプレビューして確認
- スラッグ（URL）の変更
- ページの公開
順番にご説明します。
「固定ページを追加」で新しい固定ページが表示されます。
タイトルは、検索結果やブックマークに表示されるため、ぺージの内容がひと目で分かるタイトルを付けましょう。
たとえば、「会社概要」や「プライバシーポリシー」、「お問い合わせ」などです。
「タイトルを追加」の欄にカーソルを合わせることで入力できます。
ここで、HPとして表示されるデザインを作成していきます。
テキストや画像などを挿入していきましょう。そこで使うのが、「ブロック」と「ブロックタグ」です。
記事や固定ページを構成する「見出し」「段落」「画像」「ボタン」などの各要素を、パーツ単位（ブロック）で追加・配置・管理する仕組み。HTML等の専門知識なしに、洗練されたレイアウトのHPが作成できます。
ブロックの追加は、「＋」ボタンから可能です。
「＋」ボタンを押すと、以下のような画面が出てきます。
左側が「ブロック」、右側が「ブロックタブ」になります。
「ブロック」には、例えば段落（テキスト）・メディア（画像）・ボタン・Youtubeなどの埋め込みができるブロックが表示されています。
そして、「ブロックタブ」では、「ブロック」で選んだ項目に関する設定を行います。例えば、段落（テキスト）の場合は、テキストの色や背景色などの設定が可能です。
上手く組み合わせて見栄えの良いHPを作成しましょう。
また、ページ作成において、プラグインの活用も有効です。
プラグインについては、後ほど「プラグインの設定」で解説しています。
固定ページのデザインが完成したら、「下書き保存」をしてプレビューを確認しましょう。
- 右上にある「下書き保存」をクリックします。
- 「下書き保存」の隣にある「パソコンのマーク」をクリック
- 「新しいタブでプレビュー」をクリックし、表示を確認します。
プレビューの確認が済み、ページ作成が完了した後は、スラッグの変更が必要です。
スラッグとは、URLの一部を構成する文字列のこと。例えば、HPにあるお問い合わせページのURLは「https://×××.com/contact」の場合、末尾にある「contact」をスラッグという。
WordPressの場合、デフォルトでタイトルで設定した日本語がスラッグとして表示されます。
しかし、日本語の場合、URLを共有したり、外部へ貼り付ける場合に文字化けして見栄えが悪くなってしまいます。
そのため、ページの内容が推測できるローマ字表記のスラッグを設定する必要があります。
設定方法は、以下の通りです。
- ブロックタブにある「固定ページ」をクリック
- スラッグをクリック
- ローマ字のスラッグに書き換える
- 設定できたら、「下書き保存」をする
最後に、ページの公開を行います。
右上の「公開」ボタンを押すことで、公開できます。
トップページとブログページの表示設定
固定ページにおいて、トップページとブログページを作成した後、表示設定も変更しておく必要があります。
「トップページがどのページか」「ブログページがどのページか」
を設定します。
初めに設定していた、設定画面に戻ります。
ブログページが必要ない場合は、トップページのみの設定でOK
ヘッダーメニュー・フッターメニュー設定
固定ページが作成できた後は、ヘッダーメニューとフッターメニューを設定します。
WordPress管理画面にある「外観」→「メニュー」を表示します。
まずは、「メニューを追加」の欄に、任意のメニュー名を入力しましょう。
具体的には、以下の名称が分かりやすいです。
- グローバルメニュー（ヘッダー・フッター含め、全ページに共通して表示されるという意味）
- フッターメニュー（フッターメニューだけ別のメニュー表示にしたい場合）
次に、「メニュー設定」から表示させたい「メニューの位置」を選択します。通常のヘッダー・フッター表示の場合、「グローバルナビ」を選択しましょう。
設定できれば、「メニューを作成」をクリック。
左側の欄から、表示させたいページを選択し「メニューに追加」をクリック。
すると、右側のメニュー構造の欄に、追加した各項目が反映されています。
各項目をドラッグ＆ドロップすると、並び替えが可能です。
外部ページを表示させたい場合は、
カスタムリンクにURLを追加してね。
メニュー構造の各項目をクリックすると、下画像のように、表示名を変更することができます。
例えば、メニューを英語表記に統一させたい場合、「ナビゲーションラベル」に「CONTACT」と入力することで変更可能です。
フッターメニューも同じように作成します。
ウィジェットの設定
WordPressの管理画面にある「外観」→「ウィジェット」を表示させます。
ウィジェットとは、サイトやブログ記事の上下や横部分に配置できるパーツのことを指します。
多くの場合、ブログ記事の右側に表示される「プロフィール」「新着記事」「カテゴリ一覧」「広告」などを設定させるために、使用されます。
今回は、ブログ記事のサイドバーにウィジェットを表示させる方法をご紹介します。
「利用できるウィジェット」には、「検索欄」「プロフィール」「新着記事」「カテゴリ一」「アーカイブ」などの項目があります。
その中から、表示させたい項目を選択し、「共通サイドバー」にチェックを入れて、「ウィジェットを追加」をクリックします。
そうすると、右側の共通サイドバーに項目が表示されます。
各項目をドラッグ＆ドロップすると、並び替えが可能です。
設定ができれば、「保存」して実際の表示を確認しましょう。
テーマによって利用できるウィジェットや設定方法が異なります。
プラグインの活用
WordPressのHP制作には、プラグインの活用が欠かせません。
プラグインとは、簡単にいえば「拡張機能」のこと。お問い合わせフォームの設置や、ブロック機能の追加、セキュリティ対策など、Wordpressの機能を増やすことができます。種類は豊富にあるため、必要なプラグインを精査して活用しましょう。
例えば、以下のようなプラグインがよく使用されます。
| Elementor | Worpress標準機能であるブロックエディタではなく、Elementor独自の機能で直感的にデザイン性の高いページ作成ができるプラグイン。 |
| Contact Form 7 | お問い合わせフォームの作成によく使用されるプラグイン。チェックボックス機能や自動返信メールの設定などの設定が簡単に行えます。 |
| VK Blocks | 無料のブロックプラグイン。スライダー・ボタン・レイアウトブロックなど、デザイン性の高いブロックを追加できます。 |
| XML Sitemap Generator for Google | SEO対策に必要なプラグイン。WordPressサイトのページ構成を検索エンジンに伝え、検索エンジンが巡回しやすくなることで、検索結果の上位表示を狙います。 |
| SiteGuard WP Plugin | セキュリティ対策に必要なプラグイン。ログイン時の画像認証や、情報漏えいを防ぎます。 |
プラグインの種類は豊富にあるので、
サイトに合うものを見つけましょう。
いずれ、プラグインの選び方についての記事も出します！
以下に、プラグインのインストールから有効化までの手順をお伝えします。
- 「プラグインを追加」をクリック
- プラグインの検索に、インストールしたいプラグイン（今回は「Contact Form 7」）を入力
- 表示された「Contact Form 7」から「インストール」をクリック
- 「有効化」をクリック
プラグインによって、使い方や設定方法が異なるため、公式サイトやブログサイトをチェックしながら設定してください。
以上で設定は終わりです！
公開の際に、表示設定にある「検索エンジンでの表示」のチェックを外すのを忘れないように！
まとめ
最後までご覧いただきありがとうございました。
WordPressでのHP制作で最低限必要な設定や操作は以下の通りです。
細かい操作は割愛させていただきましたが、大まかな流れはご理解いただけたかと思います。
今後もWordpressに関する情報を発信していくので、もしよろしければご覧いただけると嬉しいです。
WordPressやオリジナルデザインでのHP制作を承っています！
お気軽にご相談ください♪
