WordPress (ワードプレス) でサイトを作成したとき、ページナビゲーションのメニューの位置を変えたいと思ったことはありませんか。ブログ機能がメインであるなら、ページは「Home」や「About」に限られるかもしれません。しかし、ページの数がある程度以上のときには、これらページへのリンクをどこに置くかというのは結構重要だと思います。

このページメニューの位置は簡単に移動させることができます。やり方を知ってしまえば、「お気に入りのテンプレートが見つかったけど、ページメニューの位置が変えられればなぁ・・・」といったときに役立ちます。また、ページメニューを移動させることでページのデザインをコントロールする幅も広がると思います。ページメニューを置くパターンとしては2つあります。ひとつには、デフォルトのデザイン等で見られるように、サイドバー内に位置しメニューアイテムが縦に並ぶ、というものです。もうひとつは、ページのトップにページメニューがあり、メニューアイテムが横方向に並ぶというタイプです。

ページメニューの移動

ここでは、ページトップにあるページメニューをサイドバーに移動させる例で説明してみます。

1) まずワードプレスの管理画面の「Design」セクションで「Theme Editor」を選びます。それぞれのテンプレートは複数のファイルからできているので、その中から「Header (header.php)」を選び画面に表示させます。このファイルの中から、「wp_list_pages」という記述を探します。記述のパターンはいろいろとあって、例としては、以下のようなものがあります。

  ? <?php wp_list_pages(‘title_li=’); ?>
  ? <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>
  ? <?php wp_list_pages(‘sort_column=id&depth=1&title_li=’); ?>

このように、テンプレートによって ( ) の中の記述が若干異なりますが、ページメニューの移動に際しては気にする必要はありません。この点についは後述します。

ページトップからページメニューを取り去るには、「<?php wp_list_pages(‘title_li=’); ?>」という一行を消してしまいます。同時に、メモ帳などにこの一行をコピーしておきます。 この一行が、<li>・</li>やといったタグの中に位置している場合は、これらも一緒に消してしまいましょう。ファイルに変更を加えたら、ファイルを更新しておきます。

2) 次に、ワードプレスの管理画面からサイドバーのファイルを選びます。1つのサイドバーしかない場合はたいてい「Sidebar (sidebar.php)」というファイルですが、複数ある場合にはテンプレート作者によって「Sidebar1」・「Sidebar2」・「Sidebar-right」といった名前が使い分けられています。まずは、ページメニューを設置したい場所を探しましょう。ワードプレスのPHPファイルに慣れていないうちは、ファイル内のテキストがさっぱり分からないという印象を受けてしまうかもしれませんが、落ち着いてみてみると実際のページに反映されている文字列を見つけることができると思います。例えば、<h2>Archive</h2>や<h2>Blogroll</h2>、<h2>Meta</h2>といったものです。(この<h2>というタグはサイドバーの見出しをつけるときによく使われます。ちなみに、こうしたものを「アーカイブ」「リンク」「メタ」といった日本語に書き換えてしまってもOKです。

話がややそれてしまった感じがするかもしれませんが、ここが一番大事なところです。ページメニューをサイドバー内に移動させるためにはサイドバーの他のセクションがどのように書かれているかを確認することが大切です。たとえば、以下のような記述パターンがあったとします。

<li><h2>Archives</h2>
 <ul>
 <?php …

あなたのサイトに「サイトマップ」のページはありますか? ユーザーがサイトの構成を知りたいときや目当ての情報に素早くアクセスしたいときなどに、サイトマップは非常に役立ちます。

ワードプレスで作ったHPにサイトマップを加えるときに便利なのが「Dagon Design Sitemap Generator」というプラグインです。これは、「Google XML Sitemaps」に代表されるXMLのサイトマップファイルを生成するプラグインとは異なり、サイトのユーザーが実際に利用するサイトマップを作成する際に利用します。簡単に色分けをするなら、XMLのサイトマップがSEO(サーチエンジン最適化)対策のためのもので、ページ内のサイトマップはサイトのユーザビィリティを高めるもの、と言えるでしょう。

1) 「Dagon Design Sitemap Generator」を所定の位置にアップロードしてから、WordPress(ワードプレス)のコントロール画面から各種の設定を行います。言語の選択(日本語にも対応)・アイテムの順序・表示の有無など、サイトマップの表示の仕方をいろいろと設定できるようになっています。

2) 次にワードプレスのページを新規作成し、本文を書き入れる欄に以下の一行をコピー&ペーストします。

 <!-- ddsitemapgen -->

この一行だけでサイトマップのページが作成され、ブログをアップする毎にサイトマップも自動アップデートされていきます。

3) なお、CSSを通してサイトマップのデザインをいろいろと変えることができます。このプラグインには2つのDIVタグが仕込まれており、これらをワードプレスのCSSファイルに加えることでデザインをコントロールできます。「.ddsg-wrapper」がサイトマップ全体のデザイン、「.ddsg-pagenav」がページナビゲーションのデザインに関わります。たとえば以下のようなものを付け加えます。

.ddsg-wrapper {color:#363636; font-size: 12px; line-height: 1.6em; font-family: Verdana, Tahoma, Arial, sans-serif;}

CSSファイルにあまり詳しい人でなくても、｛｝の中の書き方はいろいろなサイトで紹介されているので簡単に調べられると思います。

上記3つのポイントを押さえれば「Dagon Design Sitemap Generato」を使いこなすことができます。詳細は、プラグイン…

WordPressをサーバにインストールし、アドレスに最初にアクセスした時に見るのは、白のバックグラウンドに青のヘッダーというデフォルトのテンプレートです。(* ちなみに、ワードプレスの本サイトではテンプレートという呼び方ではなく、テーマ[Theme]と表記されます。) このデフォルトのデザインをそのまま使いたい人はあまりいないと思いますが、一方で、自分だけのデザインにカスタマイズするのは「難しくて手間もかかりそう」と思われる方もおられるかもしれません。(左イメージは当サイトをデフォルトデザインで表示したものです。)

実際には、ワードプレスをカスタマイズするのは、コツを知ってしまえば難しいものではありません。特に、このエントリーでご紹介するページトップのイメージの入れ替えは、HTMLやCSSの知識がなくても簡単にできるため、どなたにもお薦めできます。

ここでは、テンプレートを1から作成してWordPressのサイトに投稿するというような上級者向けではなく、初・中級者がテンプレートに少し手を加えてオリジナルなサイトを作るという点をメインにしています。「WordPressのテンプレートのダウンロード」という記事では、無料テンプレートがダウンロードできるお薦めのサイトを紹介しています。また、テンプレートの選び方についても触れていますのでご覧ください。

ページトップのイメージの取替え

1) お気に入りのテンプレートを探します。(イメージはどうせ置き換えてしまうので) ページトップのイメージ・デザインにとらわれることなく、全体の構成、サイドバーの位置・数などに注目すると比較的簡単に候補を絞れると思います。なお、WordPressではテンプレートの交換が簡単にできるので、1つに絞る必要はありません。

2) テンプレート (たいていはZIPファイル) をダウンロードしたら、サーバのWordPressの所定の位置にファイルをアップ・解凍(展開) します。たとえば、「/public_html/wp-content/themes」というような場所です。アップが完了したら、ワードプレスの管理画面からテンプレート(Theme)を新しいものに変更しておきます。同時に、自分のコンピュータにテンプレートのZIPファイルを解凍*することをお薦めします。(*解凍ソフトにはLhasaのようなものがあり、他にも無料のものが多数あります。)

3) 自分のコンピューターに解凍したファイルを覗いてみて、ページトップのイメージを探しましょう。多くのテンプレートは「img」「images」というようなフォルダにイメージを収納しているので簡単に見つかるでしょう。イメージが見つかったら、「950×150ピクセル」のようなサイズを確認します。また、このイメージの名前も確認しておきましょう。

4) オリジナルのイメージを用意します。イメージのサイズを変更するのは、テンプレートのつくりによっては若干手間がかかることがあるので、ここでは同サイズのイメージに置き換えるという方法をとります。PhotoshopやFireworksといったグラフィックソフトがあればベストですが、他にも画像の編集ができる無料のソフトもありますのでこうしたものを使うのも手です。やり方が全くわからない場合は、デジカメの写真などを「950×150ピクセルのサイズに切り取って」というように誰かに頼めば簡単にやってくれるでしょう。

5) 作成したイメージをサーバのFTPアップローダでアップします。例えば、「/public_html/wp-content/themes/[テンプレートの名前]/[画像フォルダの名前]」というような位置にアップします。既存のトップイメージに上書きをするので、作成したオリジナルのものの名前が、2)で確認したイメージの名前と同じである必要があります。「バイナリ」モードでアップし、「ファイルを上書きしますか」と聞かれるので「はい」と答えると完了です。(左イメージはBluehostのFTPアップローダー。)

6) サイトのアドレスにアクセスしてみましょう。トップのイメージが古いままの場合、ブラウザのリロードを押せば新しいイメージが現れるはずです。

イメージのサイズを変えずにそれをオリジナルのものに置き換えてしまうという方法は、簡単で失敗の可能性もありません。しかも、ページ全体の印象もがらっと変えることができるのでお薦めです。これを応用すれば、ページトップのイメージだけではなく、バックグラウンド全体の画像も置き換えられます。要は、お使いのテンプレートが使用しているイメージはすべて置き換えが可能です。HTMLやCSSの知識なしでOKなので、気軽にイメージ入れ替えによるカスタマイズをしてみましょう。…

イメージをブログ記事内にアップロードするときに便利なのがFlexible Uploadというプラグインです。このようなプラグインを使うと、WordPressのコントロール画面からテキストを入力するようにイメージをアップできます。もちろん、サーバのFTPアップローダーを使ってイメージをアップロードすることができますが、別のブラウザのページを開いての作業・イメージへのパスを指定する等の手間がかかります。(といっても大したことはないかもしれませんが…)

Flexible Uploadでは、イメージのサイズ・位置・名前などをポップアップウィンドウから簡単に指定できます。(左のイメージは、ポップアップウィンドウの例です。) 加えて、Flexible Uploadの素晴らしいのは、他のプラグインとリンクさせることで、イメージの表示の仕方もコントロールできるという点です。例えば、Lightbox2などとリンクさせることができます。(他にも、Greybox・Thickbox・HighslideJS・LightWindowなど。) Flexible Upload管理画面から、リンクするプラグインを選んで、そのプラグインをWordPressにアップするだけでセットアップが完了です。

[ *2010年10月追記： このプラグインは、WordPressの最新のバージョン3.0ではうまく動作しないようです。最新の(あるいはそれに近い)バージョンのWordPressではイメージのアップロード機能もしっかりしているので、このプラグインを使う意味はなくなっているともいえます。]

[ *このエントリーはLightbox 2の記事と対になっています。合わせてご覧ください。]

「Flexible Upload」のダウンロードページには、このページから、あるいは、
WordPressのPluginのページで「Flexible Upload」と検索することでアクセスできます。…

写真をブログ記事内にサムネイル表示させる時に便利なのがこのLightbox2というプラグインです。サムネイルがクリックされると、モニター画面が暗転し拡大イメージが中央に表示されます。写真のみのブラウザページが開かれるよりも、スマートな表示の仕方だと思います。WordPressの管理画面からは、写真が拡大されたときの枠の色をホワイト、ブラック、グレー、ダークグレーの中から選べます。左のイメージ (WordPressプラグインのLightboxページ) をクリックすると、Lightbox2で表示されます(色はブラック)。

[ *このエントリーはFlexible uploadの記事と対になっています。合わせてご覧ください。]

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

WordPress (ワードプレス) のブログのエントリーを月別やカテゴリー別などのアーカイブモードで見たときに、記事内のリンクが機能していなかったりパラグラフ間のスペースが消えてしまっていたりして「あれっ」と思ったことはありませんか。ブログの記事を単独で見たときには思った通りに表示されるのに、複数の記事を一覧させると自分が打ち込んだHTML情報がそのまま反映されないという問題です。

初めてこれに気がついたときは、当時使っていたワードプレスのテンプレートの機能なのかと思っていました。実際のところ、これはワードプレス自体の機能で、いわゆるアーカイブモードで複数記事を見る際にはHTMLマークアップが反映されないのが普通です。パラグラフ間の空白がなくなることで文字ばっかりの印象になってしまったり、リンクが効かないというのを避けたい場合には、プラグインを利用することでこれに対応することが可能です。

「Advanced Excerpt」を使えば、通常なら無視されてしまうHTML情報をアーカイブモードでも反映するように設定できます。
このプラグインをダウンロード・所定の位置にアップロードすると、ワードプレスの管理画面からどのHTML情報を保持させるのかを簡単にコントロールできます。左上のイメージ (クリックで拡大) のように、アーカイブモードでの記事の抜粋の長さを決めHTMLマークアップにチェックを入れるだけというように非常に簡単です。

「Advanced Excerpt」のダウンロードページには、このページから、あるいは、
WordPressのPluginのページで「Advanced Excerpt」と検索することでアクセスできます。…

ある程度の規模のサイトを持ったときに役立つのが、通常「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」と検索することでアクセスできます。…

ワードプレスを使ったサイトのSEO (Search Engine Optimization) 対策をするなら、「All in One SEO Pack」とともに、この「Google XML Sitemaps」を合わせて使用するのがお薦めです。サイトマップについては、たとえばAll About のこの記事をご覧ください。簡単にいえば、検索エンジンのクローラーに対応するものでアクセスアップには欠かせないものです。All Aboutの記事にある通り、通常は自分でXMLファイルを作成しアップロードする手間が必要です。

「Google XML Sitemaps」は、XMLのサイトマップを自動生成してくれるというもので、GoogleはもちろんMSNやYAHOOといった主要サーチエンジンに対応しています。このサイトマップは、新たなページを付け加えたり既存のページを書き換えたりするごとにアップデートされ、サーチエンジンにそれが自動的に通知されるという優れものです。 左上のイメージ (クリックで拡大) のように、WordPressの管理画面から各種設定が簡単にできます。設定の意味がいまいち分からないという人は、何も変更を加えずにデフォルトのままで問題ありません。

いったん導入してしまえば、ほったらかしでも常にXMLのサイトマップを更新してくれるこのプラグインはWordpressのプラグインセクションで常に人気上位です。「Google XML Sitemaps」のダウンロードページには、このページから、あるいは、WordPressのPluginのページや管理画面でのプラグインページで「Google XML Sitemaps」と検索することでアクセスできます。…

ワードプレスを使ったサイトのSEO (Search Engine Optimization) 対策をするなら、「All in One SEO Pack」というプラグインの導入が効果的かもしれません。

メタタグやサーチエンジンのためのキーワード、ページタイトル (ブラウザの最上段に示されるタイトル) などの設定がWordPressの管理画面から簡単に出来ます。いったん設定すれば、ブログの記事ごとに毎度メタタグ等を書くという手間が省ける利点がある一方で、記事ごとにキーワード等を付け加えることも可能になっています。SEO対策というのは、その効果がどれほどかはっきりしないものではありますが、メタタグ・キーワード等の管理が簡単に出来るという点のみでも使用する価値があると思います。(プラグイン作者は「20%の手間で80%の効果」という表現をしています。) (左のイメージはクリックで拡大。)

「All in One SEO Pack」はWordpressのプラグインセクションで常に人気上位にランクされてます。なお、WordPressのプラグインセクションではこの他にも多くのSEO対策のプラグインがありますので「SEO」のキーワードで検索してみるのも良いでしょう。

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

WordPressで、ブログに加えて静的なページ(いわゆる普通のページ)を複数作ったときに非常に役立つのが、「PageMash」というプラグインです。「PageMash」を使うと、WordPressの管理画面からドラッグ&ドロップするだけで、メニューバーに並ぶページの順序を簡単に変えることができます。(左のPageMash管理画面イメージはクリックで拡大。)

ブログをメインする人なら、ブログページに加えて「Home」や「About」といったページだけで済みますが、他のブログ記事に中に埋もれてしまうのを避けたい情報があるときや、常時掲載しておきたい情報がある場合には、普通のページを付け加えていくのが便利です。WordPressを使って普通のサイトを構築する際や、ページの数が多いブログページには必須のプラグインだと思います。

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

なお、ページメニューやブログカテゴリーを分割して表示するなど、サイトメニューをもっとカスタマイズしたい方は「WordPress Navigation List Plugin NAVT」の記事をご覧ください。…