Labrid WP では、Contact Form 7 というフォームプラグインを使っています。
このプラグインは Akismet のスパムフィルター機能を利用できます。

Akismet は、Wordpress に標準装備されている強力なスパムフィルタープラグインです。
まずはこれを有効にします。
※Akismet を有効にするには、WordPress.com で取得できる API キーが必要です。WordPress.com のアカウントをまだ持っていなければ WordPress.com で取得することができます。

次に、Contact Form 7 のフォーム作成画面（ツール＞Contact Form 7）で、フォームの「名前」「メールアドレス」「URL」の入力項目に、それぞれ以下の Akismet オプションを追記します。

• 名前→ akismet:author
  例: [text* your-name akismet:author]
• メールアドレス→ akismet:author_email
  例: [email* your-email akismet:author_email]
• URL→ akismet:author_url
  例: [text your-url akismet:author_url]

※初期入力オプションを設定してある場合、そのオプションより前に上記 Akismetオプションを記述しないと、フォームタグが有効に認識されずそのまま出力されてしまうので注意。

設定が終わったら、このオプションが正常に働いているかテストします。
名前欄に『viagra-test-123』（必ず Akismet にスパムとして補足される名前）と入力して送信すると・・・

このようなメッセージが出て、送信できませんでした。

これでメールフォームのスパム対策完了です。
今後は問合せフォームからのメールの内容を見て、本当にスパムかどうか、削除してよいかどうかと悩まずに済む事でしょう

WordPressには、Wordpress本体のインストールURLと異なる公開URLを設定できる機能があるので、これを利用しています。

制作時

1. 公開予定のURLの下にサブディレクトリを作成し、そこにWordpressをインストール。
   例：公開予定 → http://labrid.jp/
   WordpressインストールURL → http://labrid.jp/wp/
2. WordPressの設定から検索エンジンをブロックする。
   設定＞プライバシー設定から、『検索エンジンはブロックするが通常の訪問者の閲覧は許可する』にチェックして『変更を保存』。
3. WordPress全体をパスワードでブロックし、非公開にする。
   ※Angsuman’s Authenticated WordPress Plugin というプラグインを使って、ログインユーザー以外は全コンテンツを見られない（ログイン画面に飛ばされる）ようにする。（このプラグインは最新版のWordpressで正常動作しないのでコードを一部書き換える必要あり）
   ※ベーシック認証をかけると、記事投稿時に画像等をアップロードできなくなるので×

1. で検索エンジンを拒否しているので、一般ユーザーがアクセスしてくる事はほとんどありませんが、万が一アクセスがあった場合を想定し、3. のプラグインで全コンテンツをパスワードブロックします。
制作者、校正担当者には、Wordpressのユーザー登録画面からユーザーとして登録し、ログインしてもらう事で、全コンテンツを閲覧できます。

公開時

1. WordPressの設定から検索エンジンの巡回を許可する。
   設定＞プライバシー設定から、『このブログを、検索エンジン とアーカイブサイトを含め、誰でも閲覧できるようにする』にチェックして『変更を保存』。
2. Wordpresのインストールディレクトリ（例：http://labrid.jp/wp）のindex.phpをダウンロードし、以下の通りに変更後、公開ディレクトリ（例：http://labrid.jp）にアップロードする。
   変更前：

   /** Loads the WordPress Environment and Template */
   require('./wp-blog-header.php');

   変更後：

   /** Loads the WordPress Environment and Template */
   require('./wp/wp-blog-header.php');

3. WordPressの設定からアドレスを公開予定URLに変更する。
   設定＞一般設定＞ブログのアドレス(URL)を、初期状態（例：http://labrid.jp/wp）から公開予定URL（例：http://labrid.jp）に変更する。
4. プラグイン一覧画面から Angsuman’s Authenticated WordPress Plugin を停止する。

これで公開完了です。

WordPress本体がインストールされているのはサブディレクトリですが、Wordpressの生成する全コンテンツのURLは、3. で設定した上位ディレクトリをルートディレクトリとして生成されます。

校正環境として別サーバーで稼動させていたWordpressを移行したり、DNSのドメイン変更を行う手間と必要なスケジュールを考えると、遥かに簡素化できました。
公開サーバーでのテストも兼ねているので、サーバー仕様の違いによるトラブルは皆無。
お客様側の最終確認工程も削減できました。

ここで問題が。ナビゲーションを分割したい場合はどうするのでしょう？
たいていのホームページでは、ナビゲーションは複数の箇所に分割表示します。
ノーマルな WordPress ではページ用のナビゲーションを分割表示できません。
※テンプレートに直にソースを記述する事で対応できますが、管理画面から管理できないのでCMSとは言えなくなってしまいます。

これを解決してくれるのが “NAVT (WordPress Navigation Tool)” プラグインです。
とても高機能なナビゲーションカスタマイズプラグインで、ページ系コンテンツに限らず、Wordpress の全てのナビゲーションを自在にカスタマイズする事ができます。

今回は、LabridWP のヘッダーナビゲーションを、以下の仕様でカスタマイズする例を紹介します。
（追記：プルダウンメニューはNAVTでは設定できません。これは別途Multi-level Navigation Plugin for WordPressというプラグインを導入して実現しています。）

◎フッターに新しいナビゲーションを作成
◎ヘッダーナビから『リンク』をフッターナビに移動
◎フッターナビに『ホームへ戻る』を追加
◎『お問い合わせ』はヘッダーとフッターの両方に表示

NAVT プラグインの導入と使い方

1. プラグインをインストール。
   管理画面のプラグイン＞新規追加で「NAVT」で検索し「インストール」をクリック。
2. ツール＞NAVT リストでNAVTの管理画面を表示。
   

   管理メニュー

3. 管理画面は整然と整理されていてわかりやすい。
   各パネルのタイトルバーの『？』をクリックするとヘルプが表示される。
   親切なことに、これも日本語化されている。
   

   NAVT管理画面

4. まず一番左上の『ナビゲーション・グループ』に、新しいナビゲーショングループ名を入力して『作成』をクリック。
   ※テンプレートに挿入するタグに使用する名前なので半角英字で。
   今回は、ヘッダー用に headnavi。フッタ用に footnavi を作成。
5. 新しくできたグループパネルの左上にあるギアアイコンをクリックすると、グループ用の設定画面が現れる。
   どのコンテンツでナビゲーションを表示するか、ナビゲーションのHTMLタグに設定するIDやCLASSなど、必要十分な設定が可能。
   

   新規グループの属性変更

6. 『基本情報』パネルに、現在のWordpressのナビゲーション項目が表示されている。
   カスタムしたい項目をクリックすると『未設定』枠の中に項目が現れる。
   カスタムする全項目を『未設定』枠に入れてしまうと便利。
   

   カスタマイズ元となる項目情報

7. 『未設定』枠の項目を、(4)で作成した新しいナビゲーショングループのパネルにドラッグ＆ドロップして、カスタマイズ用グループに項目をセットアップしていく。
   順番の入れ替えもドラッグで調整可能。
   項目の親子関係は、項目右下の左右ボタンで調整可能。
   

   セット完了状態のカスタムナビ

   項目名クリックで、項目の表示名、形式、CLASS、rel=”nofollow” の設定パネルが出現。

   

   HOMEの設定変更も可能

8. 全てセットし終わったらグループパネルの右上の鍵アイコンをクリックしてロックしよう。
   パネルが閉じて鍵アイコンがロック状態に変わる。
   グループの数が増えてもスムーズにドラッグ＆ドロップでき、ミスを防ぐ事ができる。
   

   グループをロック

これで新しいナビゲーショングループのセットアップが完了です。

テンプレートの編集

しかし、このままでは公開側は何も変化しません。
次に、これを表示できるよう、テンプレートに表示用タグを追加します。

NAVT 表示用のタグは、以下の通りです。

<?php
if( function_exists('navt_getlist') ) {
navt_getlist('new_navigation_groop_name');
}
?>

従って、今回の例でのカスタマイズは以下の通り行いました。

header.php

元のナビゲーション表示用タグを削除し、以下のソースを追加

<?php
if( function_exists('navt_getlist') ) {
navt_getlist('headnavi');
}
?>

footer.php

以下のソースを追加

<?php
if( function_exists('navt_getlist') ) {
navt_getlist('footnavi');
}
?>

あとは、適宜スタイルシートを編集してカスタマイズ完了です。
Wordpress を CMSとして運用するならば、必須のプラグインと言えるでしょう。

理由は「気持ち悪いから」

今日ふと、robots.txt に sitemap.xml の存在を明示させようと思いつき、実行しました。
複数の sitemap を複数行の Sitemap: URL の形式で記述しました。
この記述内容を Google ウェブマスターツールの「運用ツール＞robots.txt を解析」でテストしてみたところ、Labrid – http://labrid.jp/ の sitemap.xml しか認識しません。

実際のところ、Labrid WP の sitemap.xml もクロールされ、ウェブマスターツールでも認識されているので問題はないのですが、なんとなく気持ち悪いので、この機会に2つの sitemap.xml を統合することにしました。
A型丸出しです。

統合手順

WordPress の sitemap.xml は、プラグイン「Google XML Sitemaps」で自動出力しています。
これを WP の上位ディレクトリ （http://labrid.jp/）に出力するよう、プラグインの設定を変更します。

1. 管理画面の「設定＞XML-Sitemap」からプラグインの設定ページに移動
2. Additional Pages でサイトマップに追加するページを指定。
   今回は、http://labrid.jp/index.html を追加。（Priority等の設定は適当に）
3. Location of your sitemap file でサイトマップの出力先を変更。
   Custom location を選択し、出力先を指定するボックスのうち、Absolute or relative path…を「xxxxx/wp/sitemap.xml」から「xxxxx/sitemap.xml」に変更、Complete URL…を「http://labrid.jp/wp/sitemap.xml」から「http://labrid.jp/sitemap.xml」に変更。
4. その他の設定を適宜見直した後、一番下の [Update options] をクリック
5. 一番上の Status 内の rebuild the sitemap をクリックし、sitemap.xml をマニュアル出力。エラーが出ていないことを確認。

この作業後、http://labrid.jp/sitemap.xml を確認したところ、Labrid WP のコンテンツが反映されている事が確認できました。
さらに、これを robots.txt に反映（Sitemap: http://labrid.jp/sitemap.xml）させ、Google ウェブマスターツールでテストしたところ、「有効なサイトマップが検出されました」。

無事完了しました。

まとめ

実質同一のサイトを2つのサイトとして検索エンジンに認識させるような行為、単一の扉ページしかないサイトをひとつのサイトとして認識させる行為は、検索エンジンからペナルティを受ける可能性が高いです。
そのペナルティを未然に防ぐ、という事が主な狙いでした。

Labrid としても、WP を独立サイトとして labrid.jp のサブディレクトリで運営していくよりも、サイト名＝ドメイン名となっており、比較的、検索エンジンへのアピール度の高いドメイン運用状態になっている（と思われる） labrid.jp として、全コンテンツを認識してもらう方が価値が高いと考えました。

これを機に、今まで放置していたSEOも、しっかり対策していきたいと思います！

せっかくの Google Maps、カテゴリ一覧にもちょっと一工夫欲しいですよね。
「仙台のちょっといいとこ」では、StreetView も表示させているので、デフォルトのカテゴリ一覧に本文も表示させる仕様では、重いことこの上なしです。

LabridWP では、Google Maps 投稿・表示に Google Maps Anywhere プラグインを使っています。
※GoogleMaps系プラグインではイチオシ。簡単投稿が便利すぎです。

このプラグインでは、投稿時に [Lat_long] という緯度経度登録用のカスタムキーにボタン一発で登録する機能がありますので、このカスタムキーを利用します。

Google Maps 投稿画面?Lat_Long カスタムキー

投稿時には、このカスタムキーを登録するだけで、カテゴリ一覧には小さな地図画像、詳細ページには、Google Maps が表示されるように調整します。

以下に、「仙台のちょっといいとこ」用のカスタマイズ内容を紹介します。
プラグインが出力するソースの緯度経度値をカスタムキーに差し替えただけの簡単カスタムです。

○カテゴリ一覧テンプレート（category-XX.php）

<a href="<?php the_permalink() ?>" rel="bookmark"><img src="http://maps.google.com/staticmap?markers=<?php echo c2c_get_custom('Lat_Long'); ?>,red&amp;zoom=15&amp;size=200x150&amp;key=（Google Maps API Key）&amp;hl=ja" /></a>

地図画像表示用URLに指定するパラメータのうち、緯度経度を表示する [markers=] にカスタムキー [Lat_Long] を読み込みます。
あとは [size=] [zoom=] にデザインに見合った数値（固定値）を、key には登録した Google Maps API Key を入れます。

これでミニ地図（画像）表示の設定は完了です。

○詳細ページテンプレート（single.php）
いつもどおり、if で「該当カテゴリのエントリーのみ」という設定を作成し、その中に テンプレートを記述します。
今回は、単純に カスタムキーから GoogleMaps を表示させるだけなので、汎用テンプレートをコピーし、その本文表示部分の直前に以下のソースを記述しました。

<div class="googlemaps" style="width:520px;height:250px;"><a href="http://maps.google.com/maps?f=q&amp;hl=ja&amp;geocode=&amp;q=<?php echo c2c_get_custom('Lat_Long'); ?>&amp;ie=UTF8&amp;ll=<?php echo c2c_get_custom('Lat_Long'); ?>&amp;t=h&amp;z=16&amp;maptype=G_NORMAL_MAP" title="<?php echo c2c_get_custom('Lat_Long'); ?>"><img src="http://maps.google.com/staticmap?markers=<?php echo c2c_get_custom('Lat_Long'); ?>,red&amp;zoom=16&amp;size=520x250&amp;key=（Google Maps API Key）&amp;hl=ja" alt="<?php echo c2c_get_custom('Lat_Long'); ?>" title="<?php echo c2c_get_custom('Lat_Long'); ?>" /></a></div>

サイズ、ズームは固定値です。
（今回は、投稿の手間をできるだけ減らしたいという目的もあったので、固定値で良しとしました。）

サイズはレイアウトの統一のためにも固定値でOKなのですが、ズーム値は状況によっては変更したい場合もあるでしょう。
その場合には、[map_zoom] といったカスタムキーを作り、ズーム値を登録しておき、上記コードの [z=16 / zoom=16] の部分を [z=<?php echo c2c_get_custom('Lat_Long'); ?>] とすればいいでしょう。

※本当は、StreetView も同様にカスタムキーから表示させたかったのですが、StreetView の表示には位置情報の他に方角・俯角の設定も必要なのでカスタムキーからの表示は現実的ではないと判断しました。
（これらをそれぞれカスタムキーで登録するくらいならプラグインの投稿機能に頼る方がずっと手軽）

理想は、StreetView を投稿すると、StreetView の位置情報を元に、自動でその登録地点の GoogleMaps を同サイズで表示、カテゴリ一覧にはミニ地図表示、という仕様です。
さらに StreetView と GoogleMaps を連動させられたら、モアベターです。

StreetView と GoogleMaps は本当にすごいコンテンツだと思います。
これを利用した、もっと面白くもっと手軽に有効に使える方法を模索中です。

jQueryでちょっと小粋なアニメエフェクトを追加するテクニックが紹介されています。

流行の lightbox（Labrid WP でも使っている、画像をクリックすると周囲が暗くなり画像だけが画面中央にハイライト拡大表示されるエフェクト）もいいですが、猫も杓子も・・・的なところがあります。
こういったエフェクトをオリジナルに付け加えられる技術はぜひ持っておきたいところです。

jQuery 関連情報

• jQuery 1.3.2 日本語リファレンス
• jQueryサンプル集 | DesignWalker
• All About：タグ「jQuery」の記事一覧

ホームページを簡単にキャプチャ（Flash 対応）できる Firefox プラグイン「FireShot」を導入！

先日、「PICNICイイ！」と紹介したばかりですが、やはりWeb上のサービスだけに重い。
あと、Flashがキャプチャできないのが痛い。
今時のちょっと凝ったホームページは、たいていトップにFlashを使っているので。

そこで、Flashもキャプチャできる別のツールを探していたところ、この FireShot を発見。

特徴は、とにかく非常に高機能。
各種設定もかゆいところに手が届く仕様。
いろいろ設定を工夫して、ボタンを押すと、Cool Design に投稿するのにちょうどいいサイズ・形式で保存できるようにしました。便利！

高機能さにびっくりしているけど、実はこれはフリー版で、さらに有料のプロ版も用意されているという。
思わず、どんだけーとか口にしちゃうレベル。スゴイ。

TPO で PICNIC と FireShot を使い分けていこうと思うけど、いつのまにか FireShot だけ使ってることになってそうです。

うまく解説してくれているサイトを探していたら、あのカスタムフィールド拡張プラグインを配布されているかたつむりくんのWWWに再会してしまうこの奇遇。
・・・いつもお世話になっておりますwww
でもあちらはほぼ1年前のエントリーという・・・

• キャプチャした画像にコメントを書き込めるFirefoxアドオン – FireShot

カスタムフィールドとは、投稿記事に情報（メタデータ）を付加できる機能です。

• WordPress Codex 日本語版：カスタムフィールドの使い方

これを使うと、例えば、本文とは別に投稿記事に「タイトル」「URL」「評価」「コメント」「キャプチャ画像」を登録して、投稿者がレイアウトを毎回調整することなく、定型のレイアウト（テンプレート）を利用して投稿することができるようになります。

この例の投稿機能の拡張を、カスタムフィールドを使って実装する方法を説明します。

何も手を入れていない状態だと、投稿画面のカスタムフィールド登録部分はこんな状態。

カスタムフィールド（初期状態）

この状態では、何をどうすればいいか見当もつきませんね。

そこで、このカスタムフィールドを拡張するプラグインを導入します。

• Custom Field GUI Utility 1.1.0 – WordPress 2.7 でカスタムフィールドを便利に使うプラグイン：かたつむりくんのWWW

詳しい使い方は↑を参照していただくとして、これを導入すると、「投稿のみ」「ページのみ」「共通」のカスタムフィールド登録コーナーを自由に設定することができます。

• [WP]wordpressアクセス解析プラグインメモ

そこまでするか！ってくらい詳細にアクセス解析結果を報告してくれるプラグイン。
スパムや検索エンジンのアクセスまでしっかり報告してくれるのはこの紹介の中ではWassUpだけです。
しっかりしすぎてるだけにデータベースを結構食いますが、保存容量等は設定で変えれる。

どうやら本当に詳細です。
が、なんといっても公開して数日のこのサイトのこと。
プラグインを導入して数時間、自分のアクセスを除外したら、残ったログはSPIDER のみ。
「Too few records to print chart…：レコードが少なすぎて、チャートを表示できません。」
・・・しばらく様子を見ます。

フォームの制作は、いろいろと面倒なのですが、その面倒なもろもろをバックグラウンドで全てプラグインがやってくれます。

管理者は、HTMLタグなど意識することなく、Contact Form 7 の設定画面で、項目を設定。
自動でできあがった専用タグを、ソースエディタ部分にコピペしていくだけ。

といっても、WEB制作の中身をあまり知らない方にとっては、十分に面倒かもしれませんが

フォームからの送信先は複数指定可能。
自分と送信してくれた方に、同時送信したい、という要望にも応えられます。

ここで設定したフォームは、通常の投稿記事やPageにも簡単に埋め込み可能。
この機能も、問い合わせを多くもらいたい場合には非常に便利。

ただし、エラー出力／送信完了は、ページ遷移をせず、AJAXで同一画面上に出力されるので、「問い合わせ完了画面を Google Analytics の目標対象ページにしたい」といった場合は不便です。
エラー＆未入力項目の指摘は、このAJAX方式は非常にわかりやすくていいんですけどね。

• WP-DBManager

日本語版もありますが、英語版で十分。

バックアップ作業は、忙しいとついさぼりがちになってしまいますが、これで自動化させておけば安心ですね。

余談ですが、このサーバーでは契約上、DBは１個のみなので、他のプログラムでも共用しています。
それらのデータも一緒にバックアップしてくれるので、一石二鳥です。

Google XML Sitemap generator

を導入しました。

CMS やブログのように、日々ページが増えていくようなサイトで、sitemap.xml を活用するには、自動生成機能は必須、というわけで、このプラグインは必須ですね。

導入はカンタン。上記リンクから落として、FTPでプラグインフォルダにアップしてもいいし、管理画面の「プラグイン」＞「新規追加」から検索して、直接インストール（FTP情報を登録している場合）してもいいでしょう。

インストール後、有効化したら、「設定」＞「XML – Sitemap」の画面で、「Build」で、sitemap.xml が生成されます。

※風の噂では、一度、FTPでカラの sitemap.xml をアップして権限を666に設定する必要が〜・・とありましたが、Labrid WP ではそういった操作は必要なく、ただ「Build」するだけでいけました。「Rebuild」も試しましたが無問題です。

sitemap.xml の生成が完了したら、これを Google / Yahoo! のインデックス登録サービスに登録しなければ意味がありません。

• Google ウェブマスターツール
• Yahoo! サイトエクスプローラー

※巷の情報では、米Yahoo! – yahoo.com のYahoo! Site Explorer に登録するように書かれているところがほとんどでしたが、日Yahoo! – yahoo.co.jp のインデックスに登録されたかった私は、日版の方に登録しました。
YST は共通だと思うのですが、念のため。

管理画面にある Application ID は日版で取得したのを入れましたが・・
これでいいのでしょうか？？
yahoo.com のIDも持っているので、素直でそちらで登録すべきだったかもしれません。

追記：
今、Google ウェブマスターツールを確認したところ、robots.txt が取得できないとエラーを吐いていたので、管理画面の「Add sitemap URL to the virtual robots.txt file.」のチェックを外しました。

TinyMCE Advanced

を導入してみました。

他のTinyMCE系プラグインは、導入がいろいろと面倒なのですが、これはプラグインフォルダにアップして有効化するだけ。
あとは設定から、各種機能のボタンをドラッグ＆ドロップで追加・削除・並べ替えするだけと、とてもお手軽です。

デフォルトでは、使わないボタン無駄に並んでいて、微妙な存在だったリッチエディタが、このプラグインの導入で生まれ変わりました。
自分が必要なボタンだけを残して、あとは削除できるので、エディタ画面がすっきり。
デフォルトではなかったテーブル挿入機能もあります。

顧客向けにカスタマイズする時も、顧客に使わせたくない機能を予め削除しておく事ができるので、機能強化という意味以外でも使う価値のあるプラグインです。

ただ、一番の目的が、独自に設定したクラスをリッチエディタに取込むことだったのに、この機能を有効にすると、エディタ画面全体が中央揃えになってしまう。。

おそらく、テーマのスタイルシートにおかしな設定があるんでしょうね。

徐々に見直しつつ、使い勝手をよくしていきます。

このプラグインを使うには、メール投稿専用のメールアドレスを新しく作る必要あり。
このメールアドレスに届いたメールが、自動で WordPress に投稿されるようなるので、メールアドレスが周囲に漏れないよう厳重な注意が必要。

メールアドレスを作成後、管理画面の「設定」の「投稿設定」から、投稿用メールアドレスのPOP3メールサーバーの設定を行い、新たに追加された「メール投稿」から、投稿用メールアドレス、読み込み間隔、投稿テンプレートを設定。

Ktai Style?の導入によって、絵文字の表示にも対応。（PC では iモード絵文字のみ対応）

メール投稿では、日本語の取り扱いの関係上、国産プラグイン以外選択肢はないなか、すばらしいプラグインを開発していただいた開発者さんに感謝。

絵文字対応の対象に Willcom まで入れていただいているところにさらにグッときました。

WordPress は、デフォルトではカテゴリーの順番を思い通りに並べることができません。
これを、自在に並べ替えることができるようにするプラグインです。

これを導入すると、管理画面の「投稿」に「My Category Order」が現れます。
これを開き、並んでいるカテゴリーをドラッグ＆ドロップで並び替えると、カテゴリーの順番を変更できます。?

注意するのは、ウィジェットの「カテゴリー」には、この変更が反映されないので、「カテゴリー」ウィジェットは削除し、代わりに「My Category Order」ウィジェットを挿入すること。
ウィジェットを使わない場合は、カテゴリーを呼び出すタグ部分を
wp_list_categories('orderby=order')
のようすると、変更が反映されたカテゴリーメニューを表示できます。

カテゴリーの順番を変更する必要がある場合は（ほとんどの場合、そうだと思いますが）、必須のプラグインでしょう。