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

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


初心者が、WordPressで企業サイトを作る全手順-2

初回の「初心者が、WordPressで企業サイトを作る全手順-1」では、企業サイトの体裁をおおよそ完成させた。

第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。

数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。

「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。

少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリティを組み入れていくことにもチャレンジしてほしい。

最新のお知らせを掲載する

お知らせの最新5件をページの右側(サイドバー)に表示する。
管理画面の[外観]-[ウィジェット]の「副ウィジェットエリア」に「最近の投稿」を設定すればよい。
「最近の投稿」をクリックし、「副ウィジェットエリア」をチェック、「ウィジェットを追加」をクリックする。

最新のお知らせ1 ウィジェット追加

続いて「副ウィジェットエリア」に追加された「最近の投稿」のサイト上の表示文字を変更する。
「副ウィジェットエリア」の「タイトル」欄に、表示したい文字を入力すれば変更できる。ここでは「最新のお知らせ」とした。
最新の表示件数を増やしたいのであれば、「表示する投稿数」を希望する件数に変更しておこう。

最新のお知らせ2 ウィジェット編集

ここまでの作業で、ページの右サイドバーに「最新のお知らせ」欄が追加された。

最新のお知らせ3 TOPページ

サイトのTOPページ(HOME)を作る

ここから固定ページの内容の入力を進めていく。
まずは、サイトTOP(HOME)だ。

現状は、サイトTOPには、投稿ページで入力されている最新の記事が表示される設定になっている。
ページの内容を入力する前に、サイトTOPに固定ページで作った「サイトTOP(HOME)」が表示されるように変更する。
操作は、管理画面の[設定]-[表示設定]の「フロントページの表示」を変更すればよい。
「固定ページ」をチェックし、「フロントページ」から「TOPページ」を選び保存する。

TOPページ TOPを固定ページに設定

ここまでの作業でサイトのTOP(HOME)には固定ページで作成した「TOPページ」が表示されるようになった。ここで、1点気になることが・・・。それは「TOPページ」と固定ページのタイトルが表示されていることだ。
会社案内や事業内容であればこれでいいが、サイトのTOPに「TOPページ」とは、なんともセンスがない。

TOPページ タイトル不恰好

これを解消するには、テーマを改造する方法もあるが、ここでは固定ページのタイトルをHTMLのコメント化(コメントアウト)し、表示させなくすることで回避しておく。
操作は、管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。
そして、タイトルをHTMLのコメント記述ルールに従って修正する。HTMLのコメントは、表示したくない文字列を「<!ーー」と「ーー>」で囲めばよい。
今タイトルに入力されている「TOPページ」を「<!ーーTOPページーー>※」と修正し、更新する。

※本来は半角で記述すべき。

TOPページ タイトルコメント化

サイトのTOPページを確認すると、固定ページのタイトルは表示されなくなった。

HOME

次にTOPページの内容を入力していこう。
まずTOPページに何を掲載するかを考える。
無難なところで、

  • 事業内容をイメージできるビジュアル画像
  • 企業メッセージ
で構成する。

まず、ビジュアル画像を準備する。WordPressの管理画面の中で画像のリサイズや切り出しなどの編集も可能だが、今回は幅600px高さ200pxの画像を事前に準備した。
操作としては、先ほどと同様に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。そして、仮の入力内容を消去後、「メディアを追加」から準備したビジュアル画像を選択する。

TOPページの内容を入力

「メディアを追加」をクリックすると「メディアを追加」画面がポップアップするので、「ファイルを選択」から表示されるダイアログで準備しておいたビジュアル画像ファイルを選択する。

TOPページ

選択したビジュアル画像を開くと、画像をアップロードの後、以下のような画面になる。
「添付ファイルの表示設定」の中の「サイズ」をフルサイズにして「固定ページに挿入」をクリックすれば、固定ページの入力画面に組み込まれる。

TOPページ メディアを追加

以下が固定ページの入力画面に組み込まれた状態だ。

TOPページ ファイル選択

次にビジュアル画像の下に企業メッセージを掲載する。
ビジュアル画像の下あたりをクリックし、Enterキーを押すとカーソルが表示されるので、メッセージを入力して、更新する。

TOPページ ファイル挿入

TOPページを見てみよう。

TOPページ 挿入後

会社案内ページを作る

次に会社案内のページを制作する。
会社案内に関しては、次の手順で制作する。

  • MS-Excelで内容を入力
  • MS-Excelのセルをコピー、WordPressの固定ページ入力画面にペースト
この方法を用いると、HTMLを知らなくても表組みで内容の掲載が可能になる。

まず、MS-Excel上で会社案内の内容を入力する。おおよそ以下のような内容だろう。

会社案内ページ Excel

次に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「会社案内」を編集で開く。
そして、先ほどのMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「会社案内」の編集画面でペーストすれば完了だ。

会社案内ページ ペースト

会社案内ページを見てみよう。
表組みされているので項目名と内容がきれいに面一で揃っている。
画像では見難いが罫線も入っている。

会社案内ページ

事業内容ページを作る

手順は、会社案内ページと同じだ。
管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「事業内容」を編集で開く。
そして、会社案内と同様にMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「事業内容」の編集画面でペーストする。
事業案内では、サブタイトルを太文字にしたい。サブタイトルをマウスで選択して反転し、「太文字] 化ボタンをクリックすれば可能だ。

Excelコピー

事業内容ページを見てみよう。

事業内容ページ

お問い合わせページを作る

お問い合せページは、本当であればフォームを準備したいところだが、その紹介だけで一つ記事が書けるボリュームになるため、今回は問合せ先の掲載に留める。
ちなみに、WordPressには、問合せフォームを設置するためのプラグインがいくつか存在する。
興味があれば以下のキーワードを検索してほしい。

「WordPress Contact Form 7」
「WordPress MW WP Form」
「WordPress 問合せフォーム プラグイン」

お問い合せページの制作は、事業内容ページと同じだ。

お問い合わせページ Excel

WordPressがあれば、初心者でも十分に企業サイトを構築できる

ここまでの作業で、一通りのコンテンツは揃った。HTMLやCSSについて知識がなくても、ここまで作り込むことができる。

「管理画面」と聞くと業務システムっぽく聞こえるので、テクニカルなことを学びながら進めなければいけないと感じられるかもしれないが、WordPressの管理画面は非常に使いやすく作られている。

「恐れるより馴れろ」である。ぜひとにかく触れていただきたい。トライ&エラーを繰り返しているうちに要領が得られるものだ。

「できそうかも」と感じたなら、それはきっと、はじめる時だ。

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

WordPressを活用したCMS、堅牢なシステムの構築なら

WEBシステムが誕生する以前、汎用機と呼ばれた大型コンピュータの大規模システム開発を経験してきたシステムエンジニアが約30年の経験をもとに御社のWEBアプリケーションを設計、構築。当社のシステム構築は、WordPressを活用したCMSにとどまりません。

WEBサイトの課題抽出、到達すべき目標、方法の設定、目標に達するためのコンテンツ企画、目指すべきコンバージョン率、件数の設定、目標達成までのサポート:お電話 06-4790-7270

とりあえずフレイバーズに聞いてみる

良いクライアントに恵まれていることも、フレイバーズの強み

上場企業をはじめとして、業界で確固たるポジションにあるクライアントに恵まれ、日々良い刺激をいただいています。

WEBサイト構築実績をチェックする

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

ビジネスを伸長させるための、次のWEB戦略、WEB運用についてご提案します。

メニューを閉じる