続・MovableType 5でスペースのみを入力して検索すると「エラーが発生しました。」となる件

このエントリーをはてなブックマークに追加

続・MovableType 5でスペースのみを入力して検索すると「エラーが発生しました。」となる件

先日の続きというかその後どうしたかです。そもそも、スペースだけ入力して検索するのかと言うこともありますが、全くないとは言えないですし、吐き出されたエラーページには元のページ、または、トップページに戻るリンク等もないので、表示されないようにしておいた方がいいのかなと思います。それで最終的にどうしたかの記録です。

masakystさんから初めに教えてもらった方法は、MovableTypeのSearch.pmファイルを直接編集する方法でした。

そして、その後にjQueryを使ってスペースを消すという方法も教えてもらいました。初めのMovableTypeのファイルを直接編集する方法は、MTのバージョンアップなどの時に、その都度、ファイルの変更が必要になるなど管理が大変なので、結局、あとから教えてもらったjQueryを使った方法を採用することにしました。

まず、jQueryを使う準備から...。jQueryを使うためにはjQueryを読み込む必要がありますが、どこから読み込むのか?!方法は大きく3つあります。

  1. jQueryのサイトからダウンロードしてFTPソフト等でサーバーにアップする。
  2. jQueryのスクリプトをMTのインデックス・テンプレートで管理する。この方法は結果的に1番目の方法と同じです。
  3. CDN(Content delivery Network)上のファイルを使う。

とりあえず、今回はCDNを利用することにしました。CDNは本家jQueryのほか、Google、Microsoftなどが準備していてくれます。
こちらにURLがあります→CDN Hosted jQuery
今回は本家jQueryのCDNを利用しました。

外部JavaScriptを読み込むのと同じ要領でCDNからjQueryファイルを読み込みます。<head>内に下記のソースを追加します。デフォルトのテーマを使っているなら、「ヘッダー」と言うテンプレート・モジュールに追加します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

次に下記のスクリプトを検索窓のあるページに埋め込みます。

<script type="text/javascript">
$('form').submit(function(){
 var s = $('#search');
 s.val(s.val().replace(/^\s+|\s+$/g, ""));
 return true;
 });
</script>

HTMLを書き出した時に、</body>の直前になるようにテンプレートに追加します。デフォルトのテンプレートのままであれば、「フッター」というテンプレートモジュールに追加します。後はBlogを再構築して完了です。