FlatPress.info

検索結果画面での表示機能の増強計画を完了しました。

Flatpress の検索機能については、デフォルトではタイトルが検索され、詳細検索についてはタイトルを空白にしておき、[検索]押して詳細入力画面を出す手順となります。このあたりをカスタマイズして、デフォルトで記事内容検索としておくのもよいと思います。

ところで、検索結果の画面(search_result.tpl)は、search.php が検索した結果として、タイトルのみが表示されます。これではジャーナル（日誌）として利用している場合には、この検索自体はあまり意味を持たず、またクリックして内容違いであった場合はいちいちブラウザの画面で検索結果画面に戻ることが必要で、これはとても面倒です。

そこで今般、「マウスオーバーで検索詳細を表示」する機能改造を計画しました。この機能は Flatpress の深い部分（例えば、bbcode 記法を html に変換）が含まれているので、完成するまでにかなりの時間を要しました。また、プラグインとして増強することも難しい感じで、今般は search.php と search_result.tpl の両方の入れ替えが必要となりました。下に検索動作サンプルのアニメーションgif画面をお示しします。このように検索内容が簡単に見えてきますので、それはそれは便利になったと思っています。

また、デフォルトでの検索窓の動作はタイトルサーチになっています。その場合ですと、内容抽出に至りませんから、以下のような注意メッセージが出力されます。ちなみに、検索機能についてはもう少しどうにか強化できるといいのですが。

変更手順

この機能増強をする手順は次の通りです。

1. / 直下にある search.php を保存しておく（例えば、search.php.ORGに複製しておく）。
2. /fp-interface/sharedtpls/search_results.tpl 保存しておく（例えば、search_results.tpl.ORGに複製しておく）。

本サイトのsearch-adv.zip (クリックでダウンロード)と search_results-adv.zip-adv.zip (クリックでダウンロード)をそれぞれダウンロードして解凍し、上記のプログラムおよびテンプレートを入れ替える。

以上で冒頭で説明している高次な機能が利用できるようになります。

＜補足＞

1. テンプレートの方は、マウスオーバーで追加されてくる html コードを入れ込んでいるだけなので、１行しか改変点はありません。
2. search.php のプログラムについては、どのあたりが改変されたのかを参考のために、diff として掲載しておきます。考え方としては、search.php 内での検索結果を処理するルーチン部分において、有効検索されたコンテンツをマウスオーバーの状態のみ表示されるような css の組み合わせと一緒に smarty の変数に収容しておくことにしました。

 diff search.php.ORG search.php 
161a162,169
>
>
>           if ($e['content']) {
>             search_adv($e['content']);
>           } else {
>             search_adv("<div id=\"search_msg\">フルテキストサーチに切替えてください。</div>");
>           }
>
226a235,292
>
>
> function search_adv($search_cont) {
>   global $smarty;
>
> $contS = <<<_EOT_
> <style>
> div.starting_point {
>   position: absolute;
>   display: inline;
> }
> div.opener > div.longtext {
>   display: none;
> }
> div.opener:hover > div.longtext {
>   position: absolute;
>   display: block;
>   top: 0px;
>   left: 20px;
>   color :#fff;
>   background: rgba(0,0,0,0.2);
>   padding: 10px;
>   font-size: 12px;
>   line-height: 1.5;
>   width:460px;
> }
>
> div.opener:hover pre {
>   background: rgba(0,0,0,0.2);
>   white-space: -moz-pre-wrap; /* Mozilla */
>   white-space: -pre-wrap;     /* Opera 4-6 */
>   white-space: -o-pre-wrap;   /* Opera 7 */
>   white-space: pre-wrap;      /* CSS3 */
>   word-wrap: break-word;      /* IE 5.5+ */
> }
>
> div#search_msg {
>   text-align: center;
>  color: red;
> }
>
> </style>
> <div class="starting_point">
> <div class="opener">
> _EOT_;
>
>                 /* Add content display */
>                $contM = "<div class=\"longtext\">";
>                $contM .= "<p class=\"pre\">";
>                $contM .= BBCode($search_cont);  /* convert souce to html */
>                $contM .= "</p>";
>                $contE = "</div></div></div>";
>
>                 $smarty->assign('discriS', $contS);
>                 $smarty->assign('discriM', $contM);
>                 $smarty->assign('discriE', $conteE);
>
> }