WordPressの絞り込み検索機能を自作してみた　－その２－

わだっつです。

前回の記事では、WordPressで絞り込み検索機能を実装しましたが、今回は作成した検索フォームのデザインをカスタマイズしてみました。

前回の記事は↓こちら

具体的には、カテゴリー選択のプルダウンとタグ選択のプルダウンを 2カラム（50:50形式） に配置し、検索プラグイン「VK Filter Search」の無料版と同等のデザインにしています。

使用するアプリ・サイト

検索フォームの作成の際は、以下のアプリおよびサイトを使用しています。

サクラエディタ（テキストエディター）

ファイルのダウンロード・アップロード（ファイルマネージャー・FTPソフト）

検索フォームの新規作成

早速検索フォームを作成していきます。ファイル名は、「refine_searchform_2column.php」とします。（ファイル名は任意です。分かりやすい名前をご自身で決めてください。）

サクラエディタなどのテキストエディターを開いて、以下のコードを埋め込みます。

<form method="get" action="<?php bloginfo('url'); ?>">
    <div class="search-box">
        <div class="input-group">
            <input name="s" id="s" type="text" value="<?php the_search_query(); ?>" />
        </div>
        
        <!-- 2カラムのラッパー -->
        <div class="search-select-wrapper">
            <div class="input-group select-half">
                <?php
                    $args = array(
                        'show_option_all' => 'カテゴリーを選択',
                        'hide_empty' => 0,
                        'orderby' => 'id',
                        'hide_empty' => 1,
                    );
                    wp_dropdown_categories($args);
                ?>
            </div>
            <div class="input-group select-half">
                <?php 
                    $tags = get_tags(); 
                    if ( $tags ) : 
                ?>
                    <select name="tag">
                        <option value="">タグ選択</option>
                        <?php foreach ($tags as $tag): ?>
                            <option value="<?php echo esc_html( $tag->slug); ?>">
                                <?php echo esc_html( $tag->name ); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                <?php endif; ?>
            </div>
        </div>

        <button class="search-button"><i class="fas fa-search"></i>&nbsp;検索</button>
    </div>
</form>

コードを埋め込んだら、「refine_searchform_2column.php」として保存します。（ファイル名については、拡張子が「.php」であれば何でもよいです。）

「functions.php」「style.css」の編集

続いて、「functions.php」に2カラム形式の検索フォームを呼び出すショートコードを、「style.css」に2カラムのスタイルシートをそれぞれ追記します。

編集の際、必ず事前にバックアップを取っておくようにしましょう。

バックアップの手順は、以下のページの「「functions.php」「style.css」のバックアップ」をご覧ください。

「functions.php」をカスタマイズ

編集内容は、自作した検索フォームを任意の場所へ呼び出せるようショートコードを埋め込んでいきます。

「functions.php」を開いたら、以下のコードを追記して保存します。

// 絞り込み検索（２カラム：refine_searchform_2column）のショートコード
function shortcode_refine_searchform_2column () {
	ob_start();
	get_template_part('refine_searchform_2column');
	return ob_get_clean();
}
add_shortcode('refine_searchform_2column', 'shortcode_refine_searchform_2column');

ソースコードの内容は、funtion名とテンプレート名が違うだけで、処理の中身は全く同じです。

ショートコードに追加する際、「add_shortcode('refine_searchform_2column');」の部分の「refine_searchform_2column」を使用します。

「style.css」をカスタマイズ

「functions.php」をカスタマイズしたら、次に「style.css」を編集します。

「style.css」を開いたら、以下のコードを追記して保存します。

.search-box-2column {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

/* 検索ボックスとカテゴリー・タブ一覧プルダウン */
.input-group-2column input,
.input-group-2column select {
    width: 100%;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
	margin-bottom: 15px; /* プルダウン同士の間隔 */
}

/* 検索ボタン（ボタン色はサイトカラー） */
.search-button {
	margin-top: 20px; /* プルダウンとの間隔を広げる */
    background-color: #007461;
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease;
}

/* 検索ボタン（カーソルを合わせた際のボタン色を指定）*/
.search-button:hover {
    background-color: #00aa94;
}

/* 2カラムレイアウト */
.search-select-wrapper {
    display: flex;
    gap: 20px; /* 隙間を追加 */
}

/* 各セレクトボックスを50%に */
.select-half {
    width: 50%;
}

/* スマホ（幅768px以下）で1列に変更 */
@media screen and (max-width: 768px) {
    .search-select-wrapper {
        flex-direction: column; /* 縦並び */
        gap: 20px; /* スマホ時の間隔 */
    }
    .select-half {
        width: 100%; /* フル幅で表示 */
    }
}

ファイルのアップロード

検索フォームの作成・「functions.php」のカスタマイズ、「style.css」の編集が終わったら、ファイルをサーバーへアップロードします。

エックスサーバーの「ファイルマネージャー」にログインします。

ログインしたら、アップロードしたいドメイン名のフォルダから「swell_child」配下までアクセスして、「refine_searchform_2column.php」「style.css」「functions.php」の３ファイルをアップロードします。

検索フォームを表示

アップロードしたら、ショートコードを使って検索フォームを任意の場所へ表示させます。

例として、記事本文に埋め込む方法と記事下部に表示させる方法を紹介します。

記事本文に埋め込む

まずは記事本文に埋め込む方法から。ここでは、サンプル投稿の「Hello world!」を使ってやってみようと思います。

ダッシュボード画面から「投稿」⇒「投稿一覧」の順に選択。

画面左上「＋」⇒「カスタムHTML」の順に選択

「HTML を入力」欄に、作成した検索フォームのショートコードを入力します。入力後、画面右上「保存」の順にクリック。

保存したら、投稿を見てみましょう。以下の通りになるはずです。

記事下部に表示

続いて、記事下部に表示させる方法です。

ダッシュボード画面から「外観」⇒「ウィジェット」の順に選択。

ウィジェット画面から「カスタムHTML」⇒「記事下部」⇒「ウィジェットを追加」の順に選択

タイトルには任意のタイトルを、「内容に」検索フォームのショートコードを入力。入力したら、「保存」をクリックします。

記事下部は以下の通りに表示されます。

以上が検索フォームのカスタマイズ方法およびサイトへの表示方法です。これで「VK Search Filter」の無料版と同等の検索フォームが作成できるはずです。

今回は以上です。ここまで読んでいただきありがとうございました。