このブログに、「検索結果をFAQのようにタイトルだけの表示をしておいてクリックすると詳細が表示されるには？」というコメントをいただき、ちょっと面白そうだなぁと思ってやってみました。
やり始めて気がついたのですが、やることはそれほど多くはないんですがテーマによって方法がちがったり、便利なプラグインを使った方がいいなぁということで多少手順が長くなりました。
とはいえ、せっかくできたので長くなるかもしれませんがご紹介しますね。
やりたいことの明確化します！検索結果をFAQみたいに
いただいたコメントはこれです！
※ セブンさんありがとうございます。
WordPressの「検索機能（検索ウィジェット？）」を使って
検索した結果を↓の画像のように表示したいのです。
もしお分かりになりましたら教えていただけますと助かります。
というものです。最初にコメントをいただいたときは今ひとつぴんときていなかったんですが、絵を見せていただき「なるほど～！できたら面白いな」と思いました。
そして作ってみたものがこちらになります。
検索結果が、
このように表示され、＋ をクリックすると
抜粋が表示されて、これをクリックすれば該当ページにリンクします。
このようにカスタマイズするには？ということについてこれから書きます。
検索結果をカスタマイズするために行ったことの一覧
前提事項として、このカスタマイズはテーマによってテンプレート部分のカスタマイズが異なってしまいます。ということで今回はテーマLightningを使った場合のカスタマイズについて書きます。（※ 他のテーマの場合もこの手順を応用すればできるとは思います）
検索結果をカスタマイズするために行ったことの一覧を書きます。
１．子テーマでない場合は子テーマにする
２．プラグイン Code Snippets を入れます
３．検索結果で使われているテンプレートを親テーマから子テーマにコピーして、名前を変更する
４．検索結果のテンプレートを今回の目的用に修正する
５．Code Snippets に今回のカスタマイズ用CSSを追加する
６．Code Snippets に今回のカスタマイズ用JQueryを追加する
以上です。手順が多いですが順番に行えばいけると思います！
１．子テーマでない場合は子テーマにする
カスタマイズしたいWEBサイトが現在「子テーマ」を使っていない場合は、子テーマにします。
子テーマにするにはという方法がわからない場合は、
これらのどちらかを参考に行って下さい。
２．プラグイン Code Snippets を入れます
今回はCSSとJQueryを追加するのですが、子テーマに書き込む方法よりもCode Snippetsを使っておいた方がなにかと良いのでこのプラグインを入れておきます。
インストールや使い方は上記に書いてあります。
また、今回作成したCode SnippetsのCSSとJQueryのコードはインポートできるようにしましたので後の項を参照して下さい。
３．検索結果で使われているテンプレートを親テーマから子テーマにコピーして、名前を変更する
今回はLightningを使うので、検索結果で使われているテンプレートはindex.phpということがわかっています。他のテーマで行う場合は、以下の方法で検索結果で使われているテンプレートを確認して下さい。
show current templateというプラグインをインストールして有効化しておきます。するとログインしている時に表画面で「そのページを表示するために利用しているテンプレート」がわかるようになります。
このプラグインではこのように（赤矢印）表示中のテンプレート名が表示されます。Lightningの場合、このindex.phpが検索に使われているテンプレートでした。
検索で使われているファイルを親テーマ（この場合はLightning）から子テーマにコピーして、名前をsearch.phpとします。
※ 他テーマの場合、検索で使われているテンプレートがsearch.phpの可能性もありますがその場合は名前はそのままでいいです。
４．検索結果のテンプレートを今回の目的用に修正する
検索結果をカスタマイズするために、子テーマにコピーした検索結果用のテンプレートを修正します。
search.phpを開いて、
この辺をカスタマイズします（Lightningのindex.phpは色々な表示を兼ねているので、<?php else : ?>の後のこのあたり、ということにご注意下さい）。
具体的には元のファイルでは
となっていた部分を、
このようにしました。コードは
<?php
// lilghtning module_loop_post.php をコピーして不要な部分を削除
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="media-body">
<h2 class="pmsearch"><span class="search-plus">＋<?php the_title(); ?></span><span class="search-minus">－<?php the_title(); ?></span></h2>
<div class="search-link">
<a href="<?php the_permalink(); ?>" class="media-body_excerpt "><?php the_excerpt(); ?></a></div>
</div>
</div>
こんな感じです。JQueryでクリックしたときに、認識できるようにclassをつけたり、タイトルを表示/非表示にしたかったのでリンクを外したり、閉じているとき用のプラス付きタイトルとマイナス付きタイトルを記述してあります。
今回カスタマイズしたファイルはこちらに置いておきますのでよろしければ参考にして下さい。
５．Code Snippets に今回のカスタマイズ用CSSを追加する
Code Snippetsに今回のカスタマイズ用CSSを追加します。
今回追加したのは、
add_action( 'wp_head', function () { ?>
<style>
/* write your CSS code here */
.search-link {
margin-bottom:10px;
font-size:16px;
background-color: #ffffff;
padding: 14px 15px 10px;
border: 1px solid #e9e9e9;
}
.pmsearch {
font-size:18px;
background-color: #f5f5f5;
padding: 14px 15px 10px;
border: 1px solid #e9e9e9;
margin-bottom: 5px;
}
</style>
<?php } );
このコードです。結果のタイトルと抜粋部分を四角く囲ったりするのにCSSを指定しました。
Code Snippetsでエクスポートしたファイルはこちらに置いておきます。（zipですので解凍が必要）
search-result-css.code-snippets
６．Code Snippets に今回のカスタマイズ用JQueryを追加する
Code Snippetsに今回のカスタマイズ用JQueryを追加します。
追加したコードはこちらになります。
add_action( 'wp_head', function () { ?>
<script>
/* write your JavaScript code here */
jQuery(function($){
$(function(){
/* 詳細とマイナス付きタイトルを非表示に */
$(document).ready(function() {
$('.search-link').css('display','none');
$('.search-minus').css('display','none');
});
/* プラスがクリックされたら詳細を表示、マイナス付きタイトルを表示 */
$('.search-plus').on('click', function() {
$(this).parent().next('.search-link').show();
$(this).next('.search-minus').css('display','block');
$(this).css('display','none');
});
/* マイナスがクリックされたら詳細を非表示、プラス付きタイトルを表示 */
$('.search-minus').on('click', function() {
$(this).parent().next('.search-link').hide();
$(this).prev('.search-plus').css('display','block');
$(this).css('display','none');
});
});
});
</script>
<?php } );
このコードでは
・ページ読み込み完了時に「マイナス付きタイトル」「詳細」を非表示にする（詳細＝抜粋と思って下さい）
・プラス付きタイトルがクリックされたら、マイナス付きタイトルを表示して、抜粋を表示した、プラスつきたいトルを非表示にする
・マイナス付きタイトルがクリックされたら、プラス付きタイトルを表示して、抜粋とマイナス付きタイトルを非表示にする
ということをしています。
Code Snippetsでエクスポートしたファイルはこちらに置いておきます。（zipですので解凍が必要）
search-result-javascript.code-snippets
まとめ：手順は長いのですがやってみるとできると思います！
ということで手順は長いのですが、一つ一つのやることはそれほど長くないのでできるのではないかなと思います。
少し不安でしたので、新しいWEBサイトでこのブログを読みながらカスタマイズしてみたところうまく動きました。
また、書いてなかったのですがCode Snippetsでインポートしたら、一覧からインポートしたファイル2つは活性化しておいて下さいね（自分でも忘れそうだったので、一応）。
コメント