動画で検索フォーム作成の流れを見る

※随時更新

「検索」メニューを開いて最初に表示される画面(タブ)において、「検索対象の投稿タイプ」がターゲットとする投稿タイプにチェックが入っていることを確認します。
そして、2つ目の「検索項目の作成」タブにて、各検索項目をつくっていきます。動画の例では、左下の「項目を作成」ボタンを4回クリックして4行分の設定項目を作成しています。
初期状態で「条件」には「投稿年月」が設定されていますが、絞り込みの条件とするカテゴリー一覧の【親カテゴリー】を選択します。すると、その子カテゴリー一覧がチェックボックスとして出力されます。
「形式」は初期状態で「ドロップダウン」が選択されていますので「チェックボックス」に切り替えます。
保存してプレビュータブで確認するとチェックボックスに切り替わっていることが確認できます。
「見出し」欄には、検索項目のタイトルを記述します。HTMLタグも記述できます。
(※動画の例では、見出しの文言が検索条件と一致していませんが、ご容赦ください)
左端の青い矢印をクリックすると詳細項目が表示されます。「前に挿入するHTML/CSS」「後に挿入するHTML/CSS」にdivタグなどを挿入すると、その検索項目の行全体を囲むことができます。
これにより、のちにCSSでデザインしやすくなります。
検索 > デザインにて、検索フォームに適用するCSSを記述し、検索フォームのデザインを作り込みます。例では、チェックボックスの縦の並びを揃える記述を行なっています。
なお、CSSにお詳しくない方には無償でCSSの記述を代行させていただいております(複雑な内容の場合は、有償対応とさせていただく場合もございます)。
'絞り込み検索'プラグイン for WordPress FE Advanced Search

絞り込み検索プラグイン for WordPress
FE Advanced Search

¥59,800

  • インストール数無制限
  • 技術サポート無料
  • アップデート永久無料

「こんな検索できる?」「PHPやCSS詳しくないのだけど…」など、わからないことやご不安がありましたらお気軽にご相談ください。