「ブログWordPress を使ってみよう」のページでも若干の説明をしていますが、ブログソフトのWordPressはブログの作成運営のみに便利なだけではなく、普通のホームページを構築する際にも大変役に立ちます。

まず、ここでの「ブログ」と「ホームページ」の区別を簡単にしておきます。「ブログ」は、日記サイトに代表されるように毎日の更新ページがページのコンテンツそのものというサイトです。「ブログ」にも管理人の紹介ページなどといった日々更新されないページもありますが、こうしたものはメインコンテンツではないのが普通でしょう。一方で、「ホームページ」は、コンテンツ・目的別に異なるページが用意されている、いわゆる普通のホームページです。

ただ最近では、こうした区別があいまいになってきているかもしれません。というのも、「ホームページ」であっても日々更新されるセクションを設けていることがよくあるからです。

「ブログ」と「ホームページ」両者の良いところを取り入れた「ハイブリッドなサイト」の利点はなんでしょうか。まず、目的別のページを複数持つことで、重要なコンテンツが他の記事の中に埋もれてしまうのを回避できます。同時に、更新がしやすいセクションも設置することで、より頻繁な更新が容易になりページに訪れてくれる人によりアピールすることができます。

近年ではCMS－コンテンツマネジメントシステムとして、管理のしやすいサイトがスタンダードになってきています。前置きが長くなりましたが、WordPressは「ブログ」を作成はもちろん、「ホームページ」や「ハイブリッドなサイト」も簡単に実現できてしまうパワフルなツールです。WordPressを利用したサイト作成のコツはなんでしょうか。

1) ページデザインの選択

まず、作成するページのスタイルを選択します。(ブログではない)ページを追加していく可能性を考えると、メニューバーがページのトップに並列されるものより、サイドバーに縦に並ぶスタイルが良いかもしれません。多くのテンプレートが無料でダウンロードできます。なお、メニューバーの位置やバックグランドイメージなどは比較的簡単に変更できるので、いろいろとカスタマイズしていくのも楽しいものです。テンプレートについては「WordPressのテンプレートのダウンロード」、カスタマイズについては、「WordPressテンプレートのカスタマイズ(1)」・「WordPressテンプレートのカスタマイズ(2)」などをご覧ください。

2) WordPressの基本設定

WordPressの管理画面の表示設定セクションでフロントページの設定をします。ブログセクションではなく、ページを最初に表示をさせるためには、デフォルトの「最新の投稿(Your latest posts)」ではなく「固定ページ(A static page)」にチェックを入れます。それから、どの固定ページをフロントページに持ってくるかをドロップダウンメニューから選択します。(もちろん、ページを前もって作成しておかないと選択肢は表示されません。) 固定ページをフロントページに持ってくるだけで、「ホームページ」という雰囲気になります。

ついでにパーマリンクの設定もしておきましょう。パーマリンクの設定をすることで、ブログ記事のアドレスがどのように表示されるかをコントロールできます。デフォルトでは「http://yoursite.com/?p=123」という形式です。ほかにも「http://yoursite.com/2009/09/09/sample-post/」という日付と記事タイトルを併記するパターンなどがあります。個人的なお薦めは、カスタム欄に「/%postname%/」を書き込むものです。この設定では「http://yoursite.com/postname」という表示になり、固定ページの表示パターンと同じになります。なお、「postname」に記事のキーワード等を入れることでSEO的に有利になるという利点もあります。

3) Pluginの導入

プラグインを導入することで、「ホームページ」の作成が断然簡単になります。「PageMash」を使うと、メニューバーにあるページリンクの並び替えが簡単にできます。「Navigation List Plugin NAVT」では、一歩進んで、ページメニューを分割して表示したりやブログをカテゴリー別に表示させたりできます。「DD Sitemap Generator」でサイトマップを作成するのはユーザビリティーを向上させるだけでなくサイトを「ホームページ」らしくするのに一役買うかもしれません。「…

ある程度の規模のサイトを持ったときに役立つのが、通常「Breadcrumb(パンくず)」と呼ばれるページナビゲーションのプラグインです。WordPressのBreadcrumbプラグインはいくつかありますが、ここでは「Breadcrumb Nav XT」をご紹介します。

Breadcrumbは、ユーザーが現在見ているページがサイトのどこに位置しているのかを画面に示すもので、ユーザーがページ内を移動したりする際のユーザビリティーを高めるものです。サーチエンジン経由できたユーザーは、トップページからではなく直接特定のページにアクセスすることが多いので、そのページがサイトのどこに位置しているのかという情報は結構重要だったりします。当サイトはそれほど大規模なものではありませんが、この記事のタイトル下に示されているようにBreadcrumbを導入しています。

「Breadcrumb Nav XT」などをWordPressに導入する際に注意が必要なのは、他の多くのプラグインがただ管理画面から操作を行うだけなのに対して、何行かのコード(code)をBreadcrumbを挿入したい箇所に付け加える必要があるという点です。
Page Template (page.php)やSingle Post (single.php)に行き、それぞれのページタイトルの下などにコードをコピー&ペーストします。コピー&ペーストする際にコードをDIVタグで囲んでやって、そのタグに対してスタイルシート・CSSファイルでデザインを加えるとサイトにマッチしたBreadcrumbが簡単にできます。(左上サンプルはプラグイン作者HPからの転載・加工。イメージはクリックで拡大します。) 例えば、CSSファイルに以下のようなものを付け加えます。

 .breadcrumb {font-size: 10px; color: #A2A2A2;}
 .breadcrumb a {color: #7C7C7C;}

「Breadcrumb Nav XT」は、作者のページで丁寧な説明がされているので、ほかのBreadcrumbプラグインよりもお薦めできます。なお、いろいろとカスタマイズできるオプションがあるのも魅力です。なお、ほかのBreadcrumbでお薦めできるのは、「Yoast Breadcrumbs」です。WordPressの管理画面から設定するというスタイルは使いやすいですし、作者ページでの解説も分かりやすくできています。

「Breadcrumb Nav XT」のダウンロードページには、このページから、あるいは、WordPressの
Pluginのページや管理画面でのプラグインページで「Breadcrumb Nav XT」と検索することでアクセスできます。…