コース内容
1.WordPressのデモサイトを作ろう
0/1
1.ホームの構築
0/1
2.会社概要の構築
0/1
3.サービスの構築
0/1
4.おしらせの構築
0/1
5.お問い合わせの構築
0/1
6.テンプレートの変更
0/1
7.モバイルサイトで確認してみよう
0/1
9.HTMLとCSSを入れてみよう
0/1
【WordPress】デモサイトを作ってみよう

今回やること

  1. デモサイトの確認と素材の準備
  2. テーマを「Twenty Twenty-Four」に変更
  3. 5つの空の固定ページを作る(スラッグの変更)
  4. トップページの表示設定を変更する
  5. グローバルメニューの順番を並び替える

1. デモサイトの確認と素材の準備

WordPress(ワードプレス)は、直感的な操作でホームページが作れるシステムです。まずは先生が作った「デモサイト」を確認して、最終的にどんなサイトを作るのかイメージしてみましょう。

確認できたら、サイト制作に使う画像などの素材をダウンロードしてください。

デモサイトはこちら

WP-sozai

2. テーマを変更する

  1. 管理画面の左メニューから「外観」>「テーマ」を開きます。
  2. 「Twenty Twenty-Four」というテーマを見つけて、「有効化」ボタンを押します。

3. 空の固定ページを5つ作る

ホームページに必要な「ページ(部屋)」の枠組みを先に作ります。

  1. 左メニューにある「固定ページ」を開き、上部の「新規固定ページを追加ボタンを押します。
  2. ※このとき画面に「パターン(デザインの雛形)」がポップアップで出てきますが、下部にある「チェックボックス」のチェックをつけてから、右上の「 × 」で閉じてください(次回から出なくなります)。
  3. デモサイトを参考に、以下の5つのページを1つずつ作っていきます。スラッグは、半角英数字ならなんでも構いません。
ページ名(タイトル) スラッグ(半角英数字)の例
ホーム home など
お知らせ news(または oshirase)など
サービス service など
会社概要 company(または about)など
お問い合わせ contact(または otoiawase)など

重要ポイント:
※ページ名を入れたら、右側の設定パネル(固定ページタブ)にある「URL(スラッグ)」を必ず英小文字に変更してください。
※タイトルとスラッグを設定したら、画面右上にある「公開」ボタンを押し、確認画面でもう一度「公開」を押して完全に公開状態にしてください。
※「下書き」のままになっていると、この後の手順で設定ができません。

ページの整理:
最初から入っている「プライバシーポリシー」はそのままで公開し、「Sample Page(サンプルページ)」はゴミ箱へ削除しましょう。

4. トップページの表示設定を変更する

サイトのURL(アドレス)を開いたときに、今作った「ホーム」のページが一番最初に表示されるように設定します。

  • 左メニュー「設定」>「表示設定」を開きます。
  • 「ホームページの表示」の項目で「固定ページ」にチェックを入れます。
  • その下にある「ホームページ:」の選択肢から「ホーム」を選び、画面最下部の「変更を保存」を押します。

5. グローバルメニューの順番を変える

ホームページの最上部にあるリンクメニュー(グローバルメニュー)の並び順を綺麗に整えます。

  • 左メニュー「外観」>「エディター」を開きます。
  • 左側のメニューから「ナビゲーション」を選び、メニューの編集画面(または鉛筆マークの修正ボタン)を開きます。
  • 表示されているページ名をドラッグ&ドロップ(または上下の矢印ボタン)で、デモサイトと同じ順番に並び替えます。
  • 並び替えが終わったら、右上の「保存」ボタンを(確認画面も含めて2回)必ず押してください。