当プラグインは、利用者の皆様が自由にカスタマイズできるように、専用のテンプレートなどの指定や同梱はありません。

そのため、検索フォームやソートボタンを作成して設置しただけでは、デザイン的にサイトにマッチせず、また検索結果ページに表示したい内容が表示されない、ということもありえます。

以下では、当プラグインの設定の他に、利用者様にご用意いただくテンプレートやデザイン等について説明します。

検索結果を表示するテンプレート

当プラグインは検索条件に合致する記事をデータベースから取得するのみで、そこから先の実際にコンテンツを表示する部分は、ご使用中のテーマに同梱される検索結果表示用のテンプレート search.php が担います。

大抵の既存テーマには search.php 含まれていますが、もし存在しない場合は archive.php などの記事一覧表示用のテンプレートを複製して search.php に名称変更してご使用ください。そのsearch.php内の記事を表示するループ部分…if(have_posts()から始まりendifで終わるセクション…で、該当記事が表示されます。

WordPressは検索が実行され、 is_search が true になると、まずテーマ内の search.php というテンプレートを探して検索結果を表示しようとします。FEASのどの検索フォームから検索が実行された場合でも検索結果は search.php を通ります。もし search.php が存在しない場合は、下記の優先順位で別のテンプレートがフォールバックとして使用されます(WordPressのテンプレート階層のルール)。

search.php > index.php

index.phpはすべてのテンプレートの最後の受け皿になるテンプレートであり、検索結果専用にカスタマイズするのは好ましくありません。従いまして、上記に従いsearch.phpを用意しカスタマイズしていただくのが望ましいです。

テーマによっては search.php のなかでさらに get_template_part() により別のテンプレートを読み込んでいる場合もあります。その場合はカスタマイズするテンプレートは search.php だけでなく、読み込んだ先のテンプレートも触る必要があります。

アイキャッチ画像を表示したり、記事に登録したカスタムフィールドの値を表示、あるいはコンテンツをテーブル(表組み)形式で表示するなど、目的に応じてカスタマイズします。

アイキャッチ画像を表示する(執筆予定)

カスタムフィールドの値を表示する

WordPress標準の方法

<?php echo post_custom( 'カスタムフィールド名' ); ?>

Smart Custom Fieldの場合

単一選択形式で登録した値(ドロップダウン、ラジオボタン、テキストなど)
<?php
$value = scf::get( 'カスタムフィールド名' );
echo esc_html( $value );
?>
複数選択形式(チェックボックス)で登録した値
<?php
$values = SCF::get( 'カスタムフィールド名' );
foreach ( $values as $v) {
     echo esc_html( $v );
}
?>

Custom Field Suiteの場合(執筆予定)

テーブル(表組み)形式で表示する(執筆予定)

詳細ページに遷移せずに外部URLにリンクする(執筆予定)

お問い合わせフォームに参照元ページの情報を渡す(執筆予定)

 

検索フォームのデザイン(CSS)

検索フォームのデザインはCSSでおこないます。

FEASには 検索 > デザイン にCSSを記述する欄がありますのでこちらに記述していただくか、あるいはご使用中のテーマに同梱されているstyle.cssに追記、もしくはテーマのカスタマイザーに「追記CSS」などの箇所がある場合もあります。いずれに記述していただいても構いません。

検索フォームに付与されたid/classに合わせてCSSを記述する

サイト上に表示された検索フォームのHTMLソースコードをご確認いただくと、以下のように詳細にid/classが各検索パーツに付与されています。これらをターゲットにCSSを記述することである程度自由に検索フォームをデザインできます。なお、HTML/CSSに詳しくない方には無償でデザイン代行を行っておりますのでお気軽にご相談ください。

  • ※以下の解説記事を追って用意します
    • デザインパターン1
    • デザインパターン2
    • デザインパターン3

(執筆中)

jQueryで検索フォームを開閉式にする

jQueryを併用すると、検索フォームをアコーディオン開閉式にできます。初期状態では基本項目のみ表示し、「さらに詳しく検索」ボタンをクリックすると追加部分が表示されるなど、カスタマイズができます。

  • ※以下の解説記事を追って用意します
    • 検索設定画面の対応
    • フッター部などにjQuery記述
    • CSS追記

(執筆中)

CSSフレームワークを使用する

(執筆中)

ソートボタンのデザイン(CSS)

ソートボタンのデザインもCSSでおこないます。

  • ※以下の解説記事を追って用意します
    • デザインパターン1
    • デザインパターン2
    • デザインパターン3

(執筆中)

サポートをプロに依頼する

テーマ/テンプレートやPHP、CSSなどに詳しくない方は、WordPressに詳しいWebデザイナーや制作会社様にテンプレートの部分的なカスタマイズを依頼するのも良いかもしれません。「クラウドワークス」「ランサーズ」といったクラウドソーシング(お仕事マッチングサイト)は、WordPressのカスタマイズを引き受けてくれる制作者が多く登録されていますので、作業を引き受けてくれる方を募集してみることをおすすめします。

サポートを当社に依頼する

当プラグインは技術サポートが回数無制限で無料(プラグイン価格にサポート料込み)を特長のひとつとしていますので、テンプレートのカスタマイズや検索フォームのデザインなどお気軽にご依頼ください。検索のカスタマイズの範囲のことでしたら無償でサポートいたします。ご購入いただきました利用者様のサイトで無事に絞り込み検索が稼働するまでしっかりとサポートさせていただきますので、ご安心ください。