検索結果をタイトルだけにしてクリックしたら中身を表示するカスタマイズ

Photo by michael schaffler on Unsplash

このブログに、「検索結果をFAQのようにタイトルだけの表示をしておいてクリックすると詳細が表示されるには?」というコメントをいただき、ちょっと面白そうだなぁと思ってやってみました。
やり始めて気がついたのですが、やることはそれほど多くはないんですがテーマによって方法がちがったり、便利なプラグインを使った方がいいなぁということで多少手順が長くなりました。
とはいえ、せっかくできたので長くなるかもしれませんがご紹介しますね。

やりたいことの明確化します!検索結果をFAQみたいに

いただいたコメントはこれです!

※ セブンさんありがとうございます。

WordPressの「検索機能(検索ウィジェット?)」を使って
検索した結果を↓の画像のように表示したいのです。

もしお分かりになりましたら教えていただけますと助かります。

というものです。最初にコメントをいただいたときは今ひとつぴんときていなかったんですが、絵を見せていただき「なるほど~!できたら面白いな」と思いました。

そして作ってみたものがこちらになります。

検索結果が、

このように表示され、 をクリックすると

抜粋が表示されて、これをクリックすれば該当ページにリンクします。

このようにカスタマイズするには?ということについてこれから書きます。

検索結果をカスタマイズするために行ったことの一覧

前提事項として、このカスタマイズはテーマによってテンプレート部分のカスタマイズが異なってしまいます。ということで今回はテーマLightningを使った場合のカスタマイズについて書きます。(※ 他のテーマの場合もこの手順を応用すればできるとは思います)

検索結果をカスタマイズするために行ったことの一覧を書きます。

1.子テーマでない場合は子テーマにする
2.プラグイン Code Snippets を入れます
3.検索結果で使われているテンプレートを親テーマから子テーマにコピーして、名前を変更する
4.検索結果のテンプレートを今回の目的用に修正する
5.Code Snippets に今回のカスタマイズ用CSSを追加する
6.Code Snippets に今回のカスタマイズ用JQueryを追加する

以上です。手順が多いですが順番に行えばいけると思います!

1.子テーマでない場合は子テーマにする

カスタマイズしたいWEBサイトが現在「子テーマ」を使っていない場合は、子テーマにします。

子テーマにするにはという方法がわからない場合は、

WordPressをカスタマイズするときに子テーマを作ってからという方法をいつもとっています。子テーマを作るのはとても簡単なのですが、と...
2年ほど前に「子テーマの作り方」という記事を書いたのですが、その後子テーマの作り方についてのオススメの方法が多少変わりました。 自分自身...

これらのどちらかを参考に行って下さい。

2.プラグイン Code Snippets を入れます

今回はCSSJQueryを追加するのですが、子テーマに書き込む方法よりもCode Snippetsを使っておいた方がなにかと良いのでこのプラグインを入れておきます。

仕事でホームページを制作する際にphpでコードを書いてカスタマイズをすることが多いです。その場合、「子テーマのfunctions.php...

インストールや使い方は上記に書いてあります。

また、今回作成したCode SnippetsのCSSとJQueryのコードはインポートできるようにしましたので後の項を参照して下さい。

3.検索結果で使われているテンプレートを親テーマから子テーマにコピーして、名前を変更する

今回はLightningを使うので、検索結果で使われているテンプレートはindex.phpということがわかっています。他のテーマで行う場合は、以下の方法で検索結果で使われているテンプレートを確認して下さい。

show current templateというプラグインをインストールして有効化しておきます。するとログインしている時に表画面で「そのページを表示するために利用しているテンプレート」がわかるようになります。

このプラグインではこのように(赤矢印)表示中のテンプレート名が表示されます。Lightningの場合、このindex.phpが検索に使われているテンプレートでした。

検索で使われているファイルを親テーマ(この場合はLightning)から子テーマにコピーして、名前をsearch.phpとします。
※ 他テーマの場合、検索で使われているテンプレートがsearch.phpの可能性もありますがその場合は名前はそのままでいいです。

4.検索結果のテンプレートを今回の目的用に修正する

検索結果をカスタマイズするために、子テーマにコピーした検索結果用のテンプレートを修正します。

search.phpを開いて、

この辺をカスタマイズします(Lightningのindex.phpは色々な表示を兼ねているので、<?php else : ?>の後のこのあたり、ということにご注意下さい)。

具体的には元のファイルでは

となっていた部分を、

このようにしました。コードは

こんな感じです。JQueryでクリックしたときに、認識できるようにclassをつけたり、タイトルを表示/非表示にしたかったのでリンクを外したり、閉じているとき用のプラス付きタイトルとマイナス付きタイトルを記述してあります。

今回カスタマイズしたファイルはこちらに置いておきますのでよろしければ参考にして下さい。

search

5.Code Snippets に今回のカスタマイズ用CSSを追加する

Code Snippetsに今回のカスタマイズ用CSSを追加します。

今回追加したのは、

このコードです。結果のタイトルと抜粋部分を四角く囲ったりするのにCSSを指定しました。

Code Snippetsでエクスポートしたファイルはこちらに置いておきます。(zipですので解凍が必要)
search-result-css.code-snippets

6.Code Snippets に今回のカスタマイズ用JQueryを追加する

Code Snippetsに今回のカスタマイズ用JQueryを追加します。

追加したコードはこちらになります。

このコードでは

・ページ読み込み完了時に「マイナス付きタイトル」「詳細」を非表示にする(詳細=抜粋と思って下さい)
・プラス付きタイトルがクリックされたら、マイナス付きタイトルを表示して、抜粋を表示した、プラスつきたいトルを非表示にする
・マイナス付きタイトルがクリックされたら、プラス付きタイトルを表示して、抜粋とマイナス付きタイトルを非表示にする

ということをしています。

Code Snippetsでエクスポートしたファイルはこちらに置いておきます。(zipですので解凍が必要)
search-result-javascript.code-snippets

まとめ:手順は長いのですがやってみるとできると思います!

ということで手順は長いのですが、一つ一つのやることはそれほど長くないのでできるのではないかなと思います。

少し不安でしたので、新しいWEBサイトでこのブログを読みながらカスタマイズしてみたところうまく動きました。
また、書いてなかったのですがCode Snippetsでインポートしたら、一覧からインポートしたファイル2つは活性化しておいて下さいね(自分でも忘れそうだったので、一応)。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。