コラム(WEB制作のポイント)
WEB制作のポイント 2017年7月16日
初心者が、WordPressでコーポレートサイトを作る全手順-2
初回の「初心者が、WordPressで企業サイトを作る全手順-1」では、企業サイトの体裁をおおよそ完成させた。
第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。
数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。
「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。
少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリティを組み入れていくことにもチャレンジしてほしい。
- WEBサイトの構成を考える
- コーポレートサイトに適したテーマ(フォーマット)を選ぶ
- WordPressから、コーポレートサイトには不要な機能や表示を削除する
- グローバルナビゲーション(サイトメニュー)の設定
- 最新のお知らせを掲載する
- サイトのTOPページ(HOME)を作る
- 会社案内ページを作る
- 事業内容ページを作る
- お問い合わせページを作る
- 最新のお知らせページを作る(第3回)
- ヘッダー画像を差し替える(第3回)
※上記の手順のうち、グレーになっているものが第1回で作業済みのもの。
※各項目は、全三回の記事のそれぞれの項目にジャンプしています。
最新のお知らせを掲載する
お知らせの最新5件をページの右側(サイドバー)に表示する。
管理画面の[外観]-[ウィジェット]の「副ウィジェットエリア」に「最近の投稿」を設定すればよい。
「最近の投稿」をクリックし、「副ウィジェットエリア」をチェック、「ウィジェットを追加」をクリックする。
続いて「副ウィジェットエリア」に追加された「最近の投稿」のサイト上の表示文字を変更する。
「副ウィジェットエリア」の「タイトル」欄に、表示したい文字を入力すれば変更できる。ここでは「最新のお知らせ」とした。
最新の表示件数を増やしたいのであれば、「表示する投稿数」を希望する件数に変更しておこう。
ここまでの作業で、ページの右サイドバーに「最新のお知らせ」欄が追加された。
サイトのTOPページ(HOME)を作る
ここから固定ページの内容の入力を進めていく。
まずは、サイトTOP(HOME)だ。
現状は、サイトTOPには、投稿ページで入力されている最新の記事が表示される設定になっている。
ページの内容を入力する前に、サイトTOPに固定ページで作った「サイトTOP(HOME)」が表示されるように変更する。
操作は、管理画面の[設定]-[表示設定]の「フロントページの表示」を変更すればよい。
「固定ページ」をチェックし、「フロントページ」から「TOPページ」を選び保存する。
ここまでの作業でサイトのTOP(HOME)には固定ページで作成した「TOPページ」が表示されるようになった。ここで、1点気になることが・・・。それは「TOPページ」と固定ページのタイトルが表示されていることだ。
会社案内や事業内容であればこれでいいが、サイトのTOPに「TOPページ」とは、なんともセンスがない。
これを解消するには、テーマを改造する方法もあるが、ここでは固定ページのタイトルをHTMLのコメント化(コメントアウト)し、表示させなくすることで回避しておく。
操作は、管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。
そして、タイトルをHTMLのコメント記述ルールに従って修正する。HTMLのコメントは、表示したくない文字列を「<!ーー」と「ーー>」で囲めばよい。
今タイトルに入力されている「TOPページ」を「<!ーーTOPページーー>※」と修正し、更新する。
※本来は半角で記述すべき。
サイトのTOPページを確認すると、固定ページのタイトルは表示されなくなった。
次にTOPページの内容を入力していこう。
まずTOPページに何を掲載するかを考える。
無難なところで、
- 事業内容をイメージできるビジュアル画像
- 企業メッセージ
で構成する。
まず、ビジュアル画像を準備する。WordPressの管理画面の中で画像のリサイズや切り出しなどの編集も可能だが、今回は幅600px高さ200pxの画像を事前に準備した。
操作としては、先ほどと同様に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。そして、仮の入力内容を消去後、「メディアを追加」から準備したビジュアル画像を選択する。
「メディアを追加」をクリックすると「メディアを追加」画面がポップアップするので、「ファイルを選択」から表示されるダイアログで準備しておいたビジュアル画像ファイルを選択する。
選択したビジュアル画像を開くと、画像をアップロードの後、以下のような画面になる。
「添付ファイルの表示設定」の中の「サイズ」をフルサイズにして「固定ページに挿入」をクリックすれば、固定ページの入力画面に組み込まれる。
以下が固定ページの入力画面に組み込まれた状態だ。
次にビジュアル画像の下に企業メッセージを掲載する。
ビジュアル画像の下あたりをクリックし、Enterキーを押すとカーソルが表示されるので、メッセージを入力して、更新する。
TOPページを見てみよう。
会社案内ページを作る
次に会社案内のページを制作する。
会社案内に関しては、次の手順で制作する。
- MS-Excelで内容を入力
- MS-Excelのセルをコピー、WordPressの固定ページ入力画面にペースト
この方法を用いると、HTMLを知らなくても表組みで内容の掲載が可能になる。
まず、MS-Excel上で会社案内の内容を入力する。おおよそ以下のような内容だろう。
次に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「会社案内」を編集で開く。
そして、先ほどのMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「会社案内」の編集画面でペーストすれば完了だ。
会社案内ページを見てみよう。
表組みされているので項目名と内容がきれいに面一で揃っている。
画像では見難いが罫線も入っている。
筆者おすすめ、とっつきやすい WordPress 参考書(1)
小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!
筆者おすすめ、とっつきやすい WordPress 参考書(2)
「いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方」
筆者おすすめ、とっつきやすい WordPress 参考書(3)
「Web担当者のためのWordPressがわかる本」