実は今回の記事のタイトル、どこかで見た事があるかもしれません。そう、以前「WordPressプラグイン「WPML」でブログを多言語化する」という記事を書いた事があるのです。この記事で説明しているとおり、私のポートフォリオサイトは「WPML」という、サイトを多言語化するWordPressプラグインを使用して翻訳されています。しかしWPMLは2011年2月に有料化されたため、課金をするか別のプラグインを使うか悩んでいました。

今回採用したのはqTranslateという、無料でサイトを多言語化することができるWordPressプラグインです。以前から知ってはいたものの、ちゃんと試した事がなかったので、今回改めてテストしてみました。すると思っていた以上に使いやすかったので採用することに。簡単に使い方を紹介します。

qTranslateの基本設定

まずはプラグインをダウンロードして、管理ページで有効化します。その後、設定 > Language　から設定していきます。まずは言語の設定。

ページ下部に国旗とともに言語が表示されています。使用する言語を「Enable（有効化）」し、不要な言語は「Disable（無効化）」します。

「Save Changes」ボタンをクリックして保存すると、選択した言語が表示されています。デフォルトにしたい言語のラジオボタンにチェックを入れて保存。

投稿画面に行くと、複数言語でタイトル・記事が書けるようになっていますね。

もちろんカテゴリーやタグの名前も複数言語で指定できます。

設定 > Language > Advanced Settings からURLの設定ができます。下記３つのどれかになります。

1. クエリーモード（http://webcreatorbox.com/?lang=en）
2. サブディレクトリモード（http://webcreatorbox.com/en）※デフォルト
3. サブドメインモード（http://en.webcreatorbox.com/）

私はデフォルトのサブディレクトリモードを使っています。サブドメインモードでは他にドメインの取得・設定が必要になるようです。

テーマのカスタマイズ

日付のフォーマット

プラグインを有効化すると、日付の表示が何やらおかしくなっていました。テーマファイル内で <?php the_time(); ?> ではなく <?php the_date(); ?> を使うと直りました。
それでもおかしい時は 設定 > Language > Languages の言語一覧から「Edit」をクリックし、「Date Format」を変更してください。

言語スイッチャー

好きなところに言語スイッチャーを表示する事ができます。表示方法は text, image, both, dropdown から選べます。

<?php echo qtrans_generateLanguageSelectCode('text'); ?>

つねに全ての言語を表示するのではなく、現在表示している言語以外のもののみを表示する場合は、少しカスタマイズが必要です。このサイトでは以下のコードをfunctions.phpに書いています。

function curPageURL() {
    $pageURL = 'http';
     if ($_SERVER["HTTPS"] == "on") {
        $pageURL .= "s";
    }
     $pageURL .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
          $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
     }
    else {
          $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
     }
return $pageURL;
}

function langlist () {
   if (qtrans_getLanguage() == 'en') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'ja') . '">日本語</a>';
   } elseif (qtrans_getLanguage() == 'ja') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'en') . '">English</a>';
   }
}

テーマファイル内の翻訳

テーマファイルの文字列を翻訳する時は、下記の便利なコードが使えます。文字数が少ないナビゲーションメニューや見出しなどはこれで済みそうですね。

<?php _e("<!--:en-->english<!--:--><!--:ja-->にほんご<!--:-->"); ?>

翻訳する部分がたくさんあったり、言語によって読み込むファイルを変更する時は qtrans_getLanguage() を使います。この例では、言語が英語だった時は「en.css」というCSSファイルを読み込むようにしています。

<?php if (qtrans_getLanguage() == 'en') { // English ver ?>
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/en.css">
<?php } ?>

All in One SEO Plugin

All in One SEO Packを使う時は、画像のコードで適応できました。

Tweetするとタイトルが変

私は記事が更新されるとWordTwitというプラグインで自動Tweetするようにしています。qTranslateのテストを兼ねて記事を更新したある日、こんな風にTweetされていました。

Webクリエイターボックス：<!–:ja–>Twitter 人気のつぶやき 1/14～1/20 2012<!–:–> tinyurl.com/7x6rbje

なんかタグが見えてる…

__() というのが翻訳文字列の取得コードとの事なので、プラグインファイル wordtwit.php の887行目の

$message = str_replace( '[title]', $my_post->post_title, $message );

を

$message = str_replace( '[title]', __($my_post->post_title), $message );

に変更すると直りました。

WordTwitだけでなく、多くのTwitter自動配信系プラグインは同様のコードを使っていると思うので、試してみてください。

qTranslateはカスタマイズが非常に楽チンで気に入っています。ただ、やはり自分で使って試してみるのが一番。WPMLは有料ですが、30日以内であれば払い戻しもしてもらえるようなので、比較してみるのもいいでしょう。

翻訳…大変だろうけどがんばるぞー！

参考サイト: What is the qTranslate lang switch code?

動画撮ってみました

個人的に、他の人が作っていく過程を見るのが好きなので撮ってみました。ベジェ曲線での描き方など、参考になるかもしれません。一部撮り忘れたところもありますが気にしないでください。

まずは準備

ラフ画の取り込み

ラフ画は別レイヤーにフリーハンドで描く事も多いのですが、今回は紙に描いたものを使いました。通常スキャナーなどで取り込みます。私はスキャナーを持っていないので「WebデザイナーにおすすめのiPhoneアプリ21」でも紹介したJotNot Scannerを使っています。

「下書き」レイヤーを新規作成し、そこに下書きを置きます。レイヤーは一番上にもってきます。画像の透明度を50%、乗算（Muliply）に設定。下書きレイヤーはロックして、その下のレイヤーに描き込んでいきます。

カラーパレット

よく使う色は端っこにパレット作っておくと、スポイトツールで簡単に抽出できるので便利です。

Illustratorで描いていく

それでは実際に描いていきます。私はMacを使っているので、ショートカットはMacのものですが、Windowsの場合はコマンドキーをコントロールキーに変えると同様に使える…はずです。

1. 全体をザックリトレース

細かいズレなどは後で修正するので、ザクザクトレースしていきます。ベジェ曲線に慣れていないとなかなか難しいのがIllustratorですが、練習あるのみです！

ワンピース部分。服はひとつなぎでトレースするよりも、腕と胴体部分で分けた方が後で修正やグラデーションかけるときに楽になります。

足のところ。このラフ画は大雑把すぎるのであまり参考にならないかもしれませんｗ もう少し細かい所まで描き込んでからIllustratorに取り込んだほうがいいです。

前髪。ここも服の部分と同様、後ろ髪・前髪でパーツに分けたほうが色付けやすくなります。

2. 順序の変更・細かい部分の修正

トレースした時は、服の上に足がある等オブジェクトの順序を無視してすすめていたので、ここで正しい順序に並び替え。オブジェクトを選択して右クリック→「アレンジ」で変更できる他、コマンド＋ [ と、コマンド＋ ] も使えます。その後、一度下書きレイヤーを非表示にして歪んでいる所や違和感のあるところを、ダイレクト選択ツールを使って修正していきます。

3. 目

おめめを描いていきます。この段階でアイカラー・白目・黒目・光の、７つのオブジェクトが重なっています。

まつ毛わっさー。一本のまつ毛を描き、それをオプションキーを押しながら移動させるとコピーして移動できます。少しずつ角度を変えて植毛していきます。

4. 眉・口・鼻

顔の他のパーツを描いていきます。

5. 目を反転

逆の目は、さきほど描いた目をコピーして使います。まず完成した目を選択。次にリフレクトツールで顔の真ん中らへんにポイントを置きます。オプション＋シフトを押しながら右にドラッグすると反転してコピーできます。

6. ほっぺた

ほっぺたはピンク〜透明の円形グラデーションで描きます。グラデーションパレットはこんな感じ。

7. 髪

ここからはグラデーションカラーを使っていきます。準備段階で作っておいたパレットにグラデーションを加えておくといいでしょう。髪は左上から光が当たっているイメージで、明るい色が左上になるようにします。

髪にローライトとハイライトを入れていきます。ここも下絵段階でどこに色を加えるかを描いておくと楽です。ダメな例で申し訳ないです…。

8. 残りの部分にグラデーション

髪以外のパーツも、どこに光があたって、どこが暗くなるかを考えながらグラデーションを入れていきます

9. シワとか影とか

服や靴に暗めの色で影を入れます。

完成！

ラフ画から、こんな感じで出来上がりました。

さらに影やテキスト、背景をプラスしたものがこちら。

チュートリアル記事はずっと書きたかったのですが、Adobe製品がすべて英語版なので「スクリーンショットが日本語じゃないとわかりずらいよなあ…」と思い書けずにいました。今回のチュートリアルはほぼペンツールのみの使用だったのでなんとかなりましたかねｗ また、Illustratorの基本操作については「これからIllustratorを始めてみようという人のための基本操作とかいろいろ」が参考になります！

本業がイラストレーターというわけではなく、イラストを描くこともほとんどないのであまり参考にならないかもしれませんが…。今年はもっとお絵かきの勉強したいです。アドバイスなどあればお聞かせください！

冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。

基本的なFacebookページの作り方

まずはFacebookページを新規作成します。こちらの「Facebookページを活用」ページの右上、「Facebookページを作成」をクリック。

カテゴリーを選びます。Facebookページ名を入力し、規約に同意したら「スタート」！

はい完成！楽チンですね。「ようこそ」と表示されているところの「画像をアップロード」からFacebookページ用画像を追加できます。

画像を追加したら右上の「Facebookページを編集」をクリック。

「基本データ」からFacebookページの基本情報を入力しましょう。「基本設定」「権限の管理」も必要があれば変更。これで基本的な設定は完了です。

「ウェルカムページ」の作成

「ウェルカムページ」は、Facebookページへ初めて訪れたユーザーに表示されるランディングページです。設定によりウォールをランディングページとして表示させることもできますが、このFacebookページが何についてのものなのかを説明できるので、ウェルカムページを作成しておいた方が効果的です。

「Facebookページを自由にカスタマイズする方法」で紹介した時との一番の変更点は、iframe（インラインフレーム）を使うことになった点です。表示されるウェルカムページの部分はユーザーが自分で用意したサーバーにファイルをアップロードすることになります。iframeになった事でより自由にFacebookページをカスタマイズする事ができるでしょう。

ただし、注意しなければいけないのが、そのiframeで表示するページは2011年10月1日からSSL必須となりました。つまり https:// で始まるURLに対応したセキュアなページでなければなりません。そのためSSLが利用できるサーバーが必要です。レンタルサーバーによっては最初から共有SSLが使用できるところもあるので、まず今使っているサーバーで使えるかどうかを確認しておきましょう。

それではSSLが利用できることを前提に手順を紹介します。大きく分けて3ステップあります。

1. iframeの中身を作成

画像一枚でも、HTML/CSSを使った簡単なランディングページでも、PHP等プログラミングを使った本格的アプリでも何でもOK！ただし、いくつか注意点あり。

<div id="fb-root"></div>

追記：大事なことなのに書き忘れていたので追記。HTMLの </body> の直前に <div id="fb-root"></div> を記述します。これ自体なくても表示されるし、動作もするのですが、記述するのがルールです。おまじないだと思って書いておきましょう。HTMLファイルの最後はこんな感じになります。

    <div id="fb-root"></div>
</boby>
</html>

リンクターゲット

iframeなので、ターゲットを指定しないとiframe内に表示されてしまいます。すべての a タグに target="_blank" を追加して別タブで表示するのを忘れないようにしましょう。JavaScriptですべてのリンクのターゲットを _blank にすることもできます。便利ですね。以下のコードを <head>〜</head> 内に記述してください。

<script type="text/javascript">
window.onload = function() {
     for (var i = 0; i < document.links.length; i++) {
          var ele = document.links[i];
          if (ele.href.match(/^http/)) {
               ele.target = "_blank";
          }
     }
}
</script>

iframeのサイズ

規定のサイズは幅520px、高さ800pxです。このサイズを超えるとスクロールバーが表示されます。幅はCSSで body の幅を指定すればOK。

body{width: 520px}

問題は高さです。もちろん800pxをこえても表示はされますが、スクロールバーが嫌っていう人もいますよね。そんなときはJavaScriptでおまじない。以下のコードを <div id="fb-root"></div> の後、</body> の前に入力します。「YOUR_APP_ID」を任意のものに変更。「YOUR_APP_ID」については下で出てくるのでしばらくお待ちくださいまし。

追記（2012/1/10/15:30）：コードを最新のものに変更しました。

<div id="fb-root"></div>

<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  FB.init({
    appId  : 'YOUR_APP_ID',
    oauth  : true,
  });

  FB.Canvas.setAutoGrow();

  function growSize() {
    var height = Number(
      document.getElementById('myContent').style.height.split('px')[0])
      + 100;
    document.getElementById('myContent').style.height = height + 'px';
  }
</script>

</boby>

以上の点に注意してiframeページが完成したらサーバーにアップロードします。これでiframeの中身が完成！

2. アプリ登録

Facebookページのコンテンツはアプリとして登録します。

まずは「Facebook開発者」ページへ行き、「アプリ」をクリック。

「新しいアプリケーションを作成」をクリックするとポップアップウィンドウが表示されます。コンテンツ（タブ）の名前を入力して規約に同意したら「続行」。「App Namespace」はとりあえず空欄でOK。

恒例の読みにくすぎるセキュリティチェックが終わったら「送信」。

とりあえずアプリ完成。先ほどでてきた「App ID」はコレのことです。

コンテンツの横に表示されるアイコンを設定しましょう。ファイル形式はJPG, GIF, PNG。ファイルの上限は5MB。サイズは16x16ピクセルです。それより大きなものはリサイズされます。ロゴも登録できますが、どこに表示されるのか…？サイズは75x75です。

ページ下部にある「ページタブ」をクリック。ページタブ名、iframeで表示するURLを「Secure Page Tab URL」に記入して「変更を保存」で完成！

3. FacebookページにIFrameタブを追加

アプリを作っただけではFacebookページに反映されません。Facebookページで見れるように設定します。

ブラウザから以下のアドレスを開きます。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_IDを 2. でも登場したApp IDに、YOUR_URLを「Secure Page Tab URL」で記入したiframeのURLに書き換えてGo！

するとこのように表示されるので、ページタブを追加したいFacebookページ名を選択して「ページタブを追加」。

Facebookページに戻ると、タブが追加されています！うまく表示されているか確認しましょう。時々反映されるまでに時間がかかる事があります。（この例を作っている時は20分くらいかかりました…）「あれ？表示されない？！」という時は慌てず紅茶でも飲んで反映されるのを待ちましょう。

デフォルトではFacebookページを開くとウォールが表示されるようになっています。ウォールではなくウェルカムページを表示させたいので、Facebookページを編集 ＞ 権限の管理 にある「デフォルトで表示するタブ」のセレクトボックスから、最初に表示させるコンテンツを選択します。

うまく設定できましたか？え？前よりハードルが高くなってる？はい、私もそう思います。なんかややこしいですよね…。「アプリを作成」という単語だけでびびっちゃいますね…。もっとわかりやすい作り方になるよう願っています。まあそしたら私はまた記事を書く事になるんですけどね。

今回記事に合わせて新たにウェルカムページを作りなおしたので、ぜひぜひご覧ください！お気に召したらぜひ「いいね」！

参考サイト：

• Page Tab Tutorial
• Platform Updates: Operation Developer Love

「Media Queriesってなんぞや？」という方は「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」を読んでおさらいおさらい！

WordPressのテーマを変更してスマートフォンに対応させる

1. スマートフォン用テーマフォルダを作成

まずは /wp-content/themes/ 内にスマートフォン用テーマを作成します。テーマの作成方法は主に３つのやり方があります。

スタティックHTMLから作成

オリジナルテーマを作る要領で、HTML／CSSで静的ページを作成しておき、その後WordPressの機能をつけていくやり方です。確実に思い通りのサイト設計にするにはこの方法がいいかもしれませんが、一番時間がかかるやり方でもあります。元テーマと大きくデザイン・構成が変わる場合や、テーマ作成に慣れていない場合はこの方法でやるといいかも。

子テーマを作る

元の親テーマファイルを読み込み、必要であればテーマファイルを用意し、上書きする方法です。必須ファイルは style.css のみ。

/*
Theme Name: wcb2-mobile
Template: wcb2
*/

@import url('../wcb2/style.css');

style.css 上部にテーマの名前と親テーマのディレクトリ名（両方必須）を記述し、 @import で親テーマのCSSを読み込みます。子テーマについて詳しい説明はWordPress Codexをご覧ください。

簡単にできるのですが、結局親テーマを読みこんで上書きするので、読み込むファイル自体は増えますね。

元のテーマフォルダをコピー

今回やった方法はこちら。元のテーマフォルダをコピーし、テーマ名を変更してカスタマイズする方法です。Webクリエイターボックスの場合、元のテーマフォルダ名が「wcb2」、スマートフォン用テーマは「wcb2-mobile」と名づけ、その中で不要なファイル・コードをガツガツ捨てていきました。Web版とスマートフォン版で同じ画像を使うなら、テーマファイルやCSSファイルに記述する画像ファイルのパスを変えるだけなので簡単です。

2. プラグインでテーマを切り替える

スマートフォン用のテーマが完成したら、プラグインでユーザーエージェントを判定し、スマートフォンだった場合はテーマを切り替えます。様々なプラグインがありますが、今回使用したのはWPtap Mobile Detectorというプラグイン。スマートフォンといってもiPhoneやiPad、Androidなど、機種によってテーマを選択することができます。

ドロップダウンメニューからスマートフォン用テーマを選択するだけ。確認するとちゃんと切り替わっています。簡単ですね！

CSS Media Queriesとの比較

スマートフォン用テーマを適応させる前と後ではどのように変化があったのかを簡単に検証してみました。

表示速度

表示速度のテストはWebWaitというサービスを使用しました。5回計測したうちの平均値を出してくれます（計測回数は変更可能）。このまま使うとWeb版の速度しか測れないので、Safariを立ち上げ、「開発」メニューの「ユーザーエージェント」を「iPhone」に設定して計測。同じWi-fi環境の元、キャッシュはクリアしてテストしています。

まずは CSS Media Queriesで対応したバージョン。5.06秒。

続いてスマートフォン用テーマを適用させたバージョン。2.57秒。

約2秒早くなりました。3G回線だとさらに遅くなりそうです。

ファイルサイズ

表示ファイルサイズはSafariのデベロッパーツールにある「Network」から確認。

CSS Media Queriesで対応したバージョン。1.11MB。

スマートフォン用テーマを適用させたバージョン。95.48KB。

ちなみにテーマフォルダ自体のサイズは元テーマが1.2MB、スマートフォン用テーマが323KBです。

製作時間

日頃から常に制作にかかった時間を計っているので、こちらも公開。
CSS Media Queriesを使った場合の制作時間は約1時間40分。対してスマートフォン用テーマの制作時間は約4時間。
ただし今回はプラグインの選定・テストの時間も含めているので、次回からはもう少し早くできそうです。

どちらも制作時間だけでなく設計を考える時間も必要ですし、サイトによって大きく変わると思います。が、やはりCSS Media Queriesの方はいじるファイルがCSSのみですむので、CSS Media Queriesで対応させたほうが制作時間は短くてすみそう。

結論

以前から「[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである」という記事にあるとおり、Media Queriesの使用はまだまだ議論の余地がある部分だと思います。なので一概には言えない気もしますが、とりあえず今回思ったことまとめ…。

テーマを変えた方がよさそうなサイト

• 非表示させるコンテンツがたくさんある
• HTMLの構成自体が大きく変わる

CSS Media Queriesで対応できそうなサイト

• 表示させるコンテンツはあまり変わらない
• 元サイトのコンテンツ量が少ない
• 制作時間があまりない

CSSの display: none; などを使って大幅にコンテンツの表示・非表示を変える場合、HTMLの構成自体が大きく変わる場合は、今回のように別テーマを作って切り替えた方がいいように思います。逆に表示させるコンテンツ自体はほとんど変わらないという時はCSS Media Queriesで十分対応できるでしょう。そのサイト、コンテンツによりますね。最初から対応させるデバイス、対応方法も頭に入れて設計していくように心がけましょう。

検索フォームの設置方法

まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。

<?php get_search_form(); ?>

で、何がひっかかるかというとその検索フォームのカスタマイズ方法。なにせビルトインの検索フォームを出力しているので、カスタマイズするためのファイルが見つからないわけです。見つからないなら作ってしまえ！ということで、 searchform.php を作成しましょう！テーマフォルダ内に searchform.php がある場合、上記 get_search_form(); は、このファイルを読み込みます。ビルトインの検索フォームは以下のようになっています。とりあえずコピペして自分好みにカスタマイズしましょう！

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

searchform.php を作成する方法の他、 functions.php 内に下記のようにコードを書けば同じように検索フォームを出力することができます。

function my_search_form( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';

    return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

詳しくはWordPress Codexにも書いてあるので参考にしてみてください。

カテゴリー別絞り込み検索

先週Webクリエイターボックスのリデザインをした際付け加えたかった機能のうちのひとつがこの絞り込み検索。カテゴリー別の絞り込み検索はWordPressのタグが用意されているので、簡単に実装することができます。

<?php wp_dropdown_categories(); ?>

だけでとりあえず実装完了！簡単ですね。

お好みでカッコ内にオプションを付け加えます。オプションの種類や初期値はWordPress Codexをご覧ください。

例えば最初に選択しておきたいカテゴリーIDを5、カテゴリー名順に表示、カテゴリーIDが10のものを除外して表示したい場合は以下のコードになります。

<?php wp_dropdown_categories('selected=5&orderby=name&exclude=10'); ?>

タグ別絞り込み検索

タグの場合はカテゴリー別絞り込み検索のようなWordPressタグがないので、地味にコードを書いていきます。「WordPressでカテゴリー＆タグを絞り込み検索をする」という記事が大変参考になりました！ありがとうございます！

コードはその記事にもあるように foreach を使って <option> にタグを表示します。

<?php $tags = get_tags(); if ( $tags ) : ?>
      <select name='tag' id='tag'>
          <option value="" selected="selected">タグ選択</option>
          <?php foreach ( $tags as $tag ): ?>
          <option value="<?php echo esc_html( $tag->slug);  ?>"><?php echo esc_html( $tag->name ); ?></option>
          <?php endforeach; ?>
      </select>
<?php endif; ?>

カスタムフィールド別絞り込み検索

WP Custom Fields Searchというプラグインを使えば、上記カテゴリー別・タグ別絞り込み検索に加え、カスタムフィールド別にも検索する事が可能です。「値段」「色」「サイズ」など、カスタムフィールドを使って投稿記事により細かな設定をしているサイトにはいいかもしれません。

日本語化するには「WP Custom Fields Searchの日本語版配布」から日本語 .mo ファイルをダウンロードし、フォルダ内に保存します。

有効化したら管理画面からこんな感じでポンポン追加できます。値が数値の場合、「〜以上」「〜未満」の値を指定することもできます。うーん便利。

テーマファイルに挿入する場合は

<?php if(function_exists('wp_custom_fields_search'))
     wp_custom_fields_search(); ?>

を、投稿記事やページ内に挿入する時は下記ショートコードを記述します。

[wp-custom-fields-search]

検索内容と検索結果件数を表示する

検索結果ページを index.php などの記事一覧ページとは違う仕様やデザインにしたいときは、別に search.php というファイルを作成しましょう。これが検索結果ページとなります。

検索結果に検索したワードや検索結果件数を表示するには、検索結果ページに以下のように記述します。表示方法を変更する場合は echo の部分を書き換えてください。

<?php if (have_posts()) :  ?>
<?php
      $allsearch =& new WP_Query("s=$s&showposts=-1");
      $key = wp_specialchars($s, 1);
      $count = $allsearch->post_count;
      echo '<h1>&#8216;'.$key.'&#8217; で検索した結果：'.$count.' 件</h1>';
?>
<?php while (have_posts()) : the_post(); ?>
コンテンツ
<?php endwhile; endif; ?>

投稿記事のみ表示する

デフォルトでは検索結果にページも含みます。ページを除外し、投稿記事のみを検索対象とする場合は、 functions.php に以下を記述。

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

Webクリエイターボックスの仕様では…

現在Webクリエイターボックスで実際に使用中のコードです。

index.php

Webクリエイターボックスでは検索結果を search.php を使わず、is_search（もし検索結果ページなら、という条件分岐タグ） を使って index.php 内に検索結果を表示しています。検索ワードと検索結果件数を表示。

<?php if (have_posts()) :  ?>
<?php if( is_search()){ // もし検索結果ページなら
          $allsearch =& new WP_Query("s=$s&showposts=-1");
          $key = wp_specialchars($s, 1);
          $count = $allsearch->post_count;
          echo '<h1>&#8216;'.$key.'&#8217; で検索した結果：'.$count.' 件</h1>';
     } ?>
<?php while (have_posts()) : the_post(); ?>
コンテンツ
<?php endwhile; endif; ?>

sidebar.php

絞り込み検索のコードをここに書いています。

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="site-search">
     <div>
          <label>キーワード</label>
          <input name="s" id="s" type="text">
     </div>

     <div>
          <label>カテゴリー</label>
          <?php wp_dropdown_categories('orderby=name&show_option_none=すべてのカテゴリー'); ?>
     </div>

     <div>
          <label>タグ</label>
          <?php $tags = get_tags(); if ( $tags ) : ?>
               <select name='tag' id='tag'>
               <option value="" selected="selected">すべてのタグ</option>
               <?php foreach ( $tags as $tag ): ?>
                    <option value="<?php echo esc_html( $tag->slug);  ?>"><?php echo esc_html( $tag->name ); ?></option>
               <?php endforeach; ?>
               </select>
          <?php endif; ?>
     </div>
     <input id="submit" type="submit" value="検索する">
</form>

ちなみにセレクトボックスの装飾はjQueryのjQuery SelectBox pluginというプラグインを使っています。ダウンロードはこちらから。以下のコードをJavaScriptファイルに入力し、CSSをカスタマイズで完成！

$(function () {
    $("select").selectbox();
});

functions.php

投稿記事のみ検索対象にしています。

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

全角スペースで検索ワードを区切る

これはちょっと質問なのですが…。現在Webクリエイターボックスでは全角スペースで検索語句を区切る事ができません… :’( いろいろやってみたのですが、解決策が分かる方…助けてくださいです…。

• WordPress 3.2.1 英語版使用
• WP Multibyte Patch 1.5 使用
• 同テーマ・同プラグインでWordPress日本語版を使うと問題なし

追記：以下を functions.php に追加で直りましたー！ありがとうございます！！！

if(isset($_GET['s'])) $_GET['s']=mb_convert_kana($_GET['s'],'s','UTF-8');

他にもおすすめの機能やプラグインがあれば教えてください！