コラム(WEB制作のポイント)

WEB制作のポイント 2017年7月16日

初心者が、WordPressでコーポレートサイトを作る全手順-1

WordPressから、コーポレートサイトには不要な機能や表示を削除する

標準テンプレート上からコーポレートサイトとして不要な要素を取り除いていこう。下のキャプチャの×印が削除する要素だ。

削除する要素

管理画面の[外観]-[ウィジェット(※)]を選択すると、左側に利用できるウィジェット、右側に設定中のウィジェットの一覧が表示される。このなかの「メインウィジェットエリア」から取り除くウィジェットを削除する。

※「ウィジェット」とは、サイトを構成する「部品」。

削除管理画面

作業を終えると、不要なものはすべて排除され、スッキリとしたフォーマットになった。

削除後のTOP

こんどは、コーポレートサイトには必要のない、投稿ページへのコメントを受け付けないようにするための設定を行おう。
管理画面の[設定]-[ディスカッション※]を選択するとディスカッションに関する設定が表示される。

※「ディスカッション」とは、訪問者とコミュニケーションを図るためのツールのこと。

コメント停止など

初心者でも、かんたん!グローバルナビゲーション(サイトメニュー)の設定

固定ページを削除する

まず、WordPressのインストール時点でサンプルとしてすでに登録されている固定ページを削除する。
管理画面の[固定ページ]で固定ページの一覧が表示されるので、タイトルが「サンプルページ」のページを「ゴミ箱」へ送る。

サンプルページの削除

固定ページの「枠」を準備しておこう

次にWordPressの「固定ページ」でつくるページの「枠(内容はあとで入力)」を準備する。これらは、グローバルナビゲーション(サイトメニュー)からのリンク先ページとなるものだ。

  • TOPページ(HOME)
  • 会社案内
  • 事業内容
  • お問い合せ

これらは、管理画面の[固定ページ]-[新規追加]から入力する。
とりあえず、今のところ内容はなくても構わない。まったく何も入力していないと、グローバルナビゲーションのリンクをクリックしても変化がないので、ページタイトル程度は入力しておこう。

固定ページの入力

4ページ分を入力し、この状態で固定ページの一覧を表示すると以下のようになる。

固定ページ一覧

次に、登録した固定ページをグランドナビゲーション(サイトメニュー)に設定していく。
ちなみに、現状のままサイトのTOPを表示すると以下の様に表示されるが、固定ページの一覧がグランドナビゲーションに表示されているだけ。つまり、表示順も指定できないし、投稿ページで制作する「お知らせ」へのリンクも追加できない。
従って、あとで「メニュー」ウィジェットを使って作り直す。「メニュー」ウィジェットを利用すれば、表示順や任意のページへのリンク追加が自由自在になるのだ。

自動的に生成されたグランドナビゲーション

グランドナビゲーションの作成

管理画面の[外観]-[メニュー]を選択すると、「メニューの編集」画面が表示される。ここでは、画面右側にある「メニュー構造」にグランドナビゲーションのメニューを上から順に設定していく。

まず、固定ページで消したはずの「サンプルページ」が残っている(これはWordPressのバグっぽい)ので、これを削除する。メニューの個別設定を開き、「削除」をクリックすれば削除される。

メニューの編集(1)

次に、上から順にグランドナビゲーションに表示するメニューを追加していく。
追加したい固定ページをチェックし、「メニューに追加」をクリックすると、「メニュー構造」に表示される。これをメニューの分だけ繰り返す。順番を変更したい場合は、メニュー要素をつかみ、上下にドラッグすれば、かんたんに変更可能だ。

メニューの編集(2)

続いて、投稿ページで制作する「お知らせ」もグランドナビゲーション(サイトメニュー)に設定する。
「お知らせ」は、「カテゴリー」から選択する。
初期段階で、投稿のカテゴリーは「未分類」しか存在しないため、ひとまず「未分類」をチェックし、メニューへ追加する。さらに、グランドナビゲーション(サイトメニュー)の表示文字を「未分類」ではなく「お知らせ」に変更したいので、メニューの個別設定を開いて「ナビゲーションラベル」を「お知らせ」に修正する。
その後、「ナビゲーションメニュー」をチェックし、「メニューを保存」。設定を終了する。

メニューの編集(3)

ここまでの作業で、サイトのTOPページ(HOME)は、以下のようなイメージに仕上がった。
コーポレートサイト「らしく」なってきた。

ここまでのTOPページ(HOME)

WordPressがあれば、初心者でも十分にコーポレートサイトを構築できる

ここまでの作業で、コーポレートサイトらしい体裁は整った。WordPressを扱うこと自体が初めて、しかもHTMLを学んだこともない初心者でも、ここまでできることを理解していただけたと思う。
次回は、各固定ページの内容と見た目の修正を行っていき、サイト全体を仕上げていく。

時間とコストをかければ、WordPressでデザイン性に富んだWEBサイトを制作できる。しかし、それが正解ではない。この記事が、コストをかけず自社のWEBサイトを立ち上げたいと考える企業の担当者の参考になれば幸いだ。

誰にでも最初の一歩はあるのものだ。あなたの「なるほど!」を聞けるように、次回はさらに丁寧に解説していきたい。

シェアする
  • line

別のコラムにもヒントがあるかも・・・

このコラムに興味があったなら、
こんなコラムも

執筆:福永 忠夫

フレイバーズに、ご相談されませんか?