【制作編①】今スグ作れるホームページ！～ページの準備～

▶初回から受講する

▶この講座の画像を見る

前回の講座ではWordPressの初期設定をしました。
今回からページ作りに入っていきます！

1．固定ページの準備

1-1．固定ページと投稿ページ

WordPressには大きく分けて
「固定ページ」と「投稿ページ」というページがあります。

とってもシンプルにいうと、

・固定ページ：「ホーム」「よくある質問」「会社概要」などのページ
・投稿ページ：「ブログ」のように投稿を行うページ

といった違いがあります。
ここでは固定ページを作成していきます。

1-2．デフォルト固定ページの削除

WordPressをインストールした時点で、
「Privacy Policy」と「Sample Page」という名前の固定ページが
自動的に追加されているので、こちらを削除します。

🔶手順🔶

①「固定ページ」▶「固定ページ一覧」
②Privacy Policy、Sample Pageを「ゴミ箱へ移動」
これでデフォルトの固定ページが削除されました。

💡Point
今後、お問い合わせフォームの設置などで個人情報を取得する場合は、
プライバシーポリシーは必要になります。
今回はユーザーの情報は取得しない前提なので削除しました。

1-3．固定ページの新規作成

作りたい固定ページを追加していきます。

・ホーム
・当院について
・よくある質問
・院長の気まぐれ日記（ブログ一覧ページ）

の4ページが必要なのですべて作成しておきます。

🔶手順🔶

③「新規固定ページを追加」
④タイトルに「ホーム」と入力 ▶「公開」▶ サイトアイコンをクリック
これで「ホーム」という固定ページが追加されました！
同じ作業を全ページ分行ってください。

すべての固定ページを追加するとこのようになります。

1-4．スラッグの変更

ここでトップページ（ホーム）以外のスラッグを変更します。

※ここでいうスラッグとは、
「https://○○○.com/△△△」
というURLの△△△の部分です。

固定ページを追加しただけでは日本語のスラッグになっていますので、
「ホーム」以外のスラッグを英語に変更していきます。

🔶手順🔶

⑤「クイック編集」
⑥「スラッグ」を変更 ▶「更新」
ここでのスラッグはそれぞれ、

・よくある質問→「faq」
・当院について→「about」
・院長の気まぐれ日記→「blog」

としてください。

💡Point
「ホーム」はトップページのURL（https://○○○.com/）になるため、
変更不要です。

2．ページ設定

2-1．トップページ・ブログページ設定

今の時点でWordPress側は、

・ユーザーに一番最初にどのページを見せたいのか
・ブログの記事一覧ページはどのページにしたいのか

といった、こちら側の希望をまったく知らない状態です。

なのでここからは、

・一番最初は「ホーム」のページを表示してほしい
・ブログ記事一覧は「院長の気まぐれ日記」のページにしてほしい

ということをWordPress側に伝えていきます。

🔶手順🔶

⑦「外観」▶「カスタマイズ」
⑧「ホームページ設定」
⑨「固定ページ」
⑩以下のように設定 ▶「公開」

ホームページ：「ホーム」
投稿ページ：「院長の気まぐれ日記」

これで無事、トップページは「ホーム」に、
投稿ページは「院長の気まぐれ日記」に変更されました！

2-2．Lightning世代設定

Lightningには世代というものがあります。
これはLightning特有の概念で、テーマのバージョンのようなものと
思ってください（あまり深く考えなくて大丈夫です）。

この世代を最新のものに切り替えます。

🔶手順🔶

⑪戻るボタン
⑫「Lightning機能設定」
⑬「Generation 3」▶「公開」▶「ページを再読み込みする」
これで世代設定は完了です！

3．ナビゲーションメニューの作成

ホームページではほとんどの場合、
ページ上部のヘッダーや下部のフッターにメニューがあります。

▼ヘッダー
▼フッター
このようなメニューを作成していきます。

🔶手順🔶

⑭「外観」▶「メニュー」
⑮メニュー名を入力 ▶ すべてにチェック ▶「メニューを作成」
※ヘッダー・フッター・モバイル（スマホ）メニューとして反映されます。
⑯「すべて表示」▶「すべて選択」にチェック ▶「メニューに追加」
※ここには先ほど作成した固定ページが表示されます
⑰ドラッグで並び順を変更
⑱「メニューを保存」
これでメニューが作成されました！
実際の表示を確認するときちんと反映されていることが分かります。

少しホームページらしくなってきましたね！

4．ヘッダーへのロゴ反映

ヘッダー左側にはサイト名が表示されているので、
ここにロゴを表示したいと思います。

🔶手順🔶

⑲「外観」▶「カスタマイズ」▶「Lightning デザイン設定」
⑳「画像を選択」
㉑ロゴ画像をアップロード ▶ 代替テキストを入力 ▶「画像を選択」
※うまく画像が読み込まれなかった場合などに、この代替テキストが表示されます。
㉒「公開」
これでヘッダーにロゴを表示することができました！

5．デフォルト要素の削除

デフォルトで用意されているこちらの部分は、
今回は使わないので削除します。
🔶手順🔶

㉘「えんぴつマーク」▶「OK」
㉙「オプション」▶「削除」
※「Archives」も同様に削除してください。
㉚「えんぴつマーク」▶「本文の後」のチェックを外す ▶「公開」
これでデフォルト要素が削除できました！

まとめ

お疲れさまでした！

これでコンテンツ作りの準備が整ったので、
次回からはホームページの中身を作り込んでいきます！

◀前の記事へ　　　　　次の記事へ▶