ブログのトップページの上からも検索できるようにしました

最近だんだんとブログ記事が増えてきたので、

ブログのトップページの上の部分からも、キーワード検索ができるようにしました。

 

2012-11-16 22.50.20.jpg

 

いま「ラーメン」と検索すると、上の画面のように表示されます。

 

いままで検索結果は「キーワードを含むブログ記事の内容全部」だったため、

たくさんヒットすると、かなりスクロールしないと見られない長い結果でした。

見ている端末によってはメモリもたくさん使っていたと思います。

 

今回の変更後は、ブログ記事のタイトルと、記事の概要を最初の100文字だけ表示、

「続きを読む」をクリックした場合に記事のページを開くようにしました。

 

 

ここからはブログを管理しているMovable Typeの変更点の説明になります。

 

ブログ側のインデックステンプレート「メインページ」の「alpha-inner」の次に、

検索のウィジェットを表示するように1行追加しました。

 


                        <div id="alpha-inner">

                          <$mt:Include widget="検索"$>


 

これで、検索窓がブログのトップページの上の部分に表示されるようになりました。

 

次に、検索結果で概要を表示するためのテンプレートを作成しました。

テンプレートモジュール「ブログ記事の概要」を複製して「ブログ記事の概要2」とします。

その「EntryBody」の中身を以下のように変更します。

 


<mt:If tag="EntryBody">
        <div class="asset-body">
          <$MTEntryExcerpt$><br />
          <href="<$mt:EntryPermalink>#more" rel="bookmark">&gt;&gt;&nbsp;続きを読む</a>
        </div>
</mt:If>


 

これが記事ひとつ分の概要になります。

 

次に、システムテンプレート「検索結果」で使用している「ブログ記事の概要」を、

先ほど作成した「ブログ記事の概要2」に変更します。

 

 

  <$mt:Include module="ブログ記事の概要2" hide_counts="1"$>

 

これで、検索結果として、記事全文ではなく、記事の概要が表示されるようになります。

 

ここまでで、ブログのトップページに検索窓が追加され、検索結果はブログの概要の一覧、

見たいブログ記事の「続きを読む」をクリックすれば記事のページが開くようになりました。

 

自分の備忘録としてもブログを書いているので、この検索は自分でも使う予定です。

コメントを残す

メールアドレスが公開されることはありません。