ゼロから始めるWordPress自作テーマ #14「検索フォームをつくろう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第１４回は「検索フォームをつくろう」です。
今回は、ヘッダーに検索フォームを追加して記事の検索ができるようにします。
完成形
今回の完成形です。ヘッダーに検索フォームを追加して、記事の検索結果を表示できるようにします。
今回の記事の完成形のコードは、以下から取得できます。
検索フォームをつくる
検索フォームは、searchform.php というファイル名で作成します。
<form method="get" id="searchform" class="search_container" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="s" placeholder="キーワード検索"/>
<input type="submit" value=""></input>
</form>そして、この検索フォームをヘッダー部分に表示させます。get_search_form 関数で先ほどの searchform.php の内容を読み込むことができます。また、検索アイコンを表示するために fontawesome を読み込ませます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 中略 -->
<!-- 検索アイコン表示のためにFontAwesomeを読み込み -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body>
<header>
<!-- 中略 -->
<!-- 検索フォームの表示 -->
<?php get_search_form(); ?>
</header>これでヘッダー部分に検索フォームが表示されるようになりました。cssは、前回の記事と同じ要領で整えています。
検索結果の表示ページをつくる
次に検索結果を表示させるためのページを用意します。検索結果表示ページは search.php というファイル名で用意します。
- 検索にヒットしなかったときに「記事がありませんでした」と伝える
- 検索にヒットしたときに、検索ワードと結果の記事を表示する
<?php get_header(); ?>
<main class="main-top">
<div class="content-area">
<!-- 検索にヒットしたときの処理 -->
<?php if (have_posts()): ?>
<!-- タイトル表示 -->
<?php if (isset($_GET['s']) && empty($_GET['s'])) : ?>
<h2 class="top-header">検索キーワード未入力</h2>
<?php else: ?>
<h2 class="top-header">
<?php echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; ?>
</h2>
<?php endif; ?>
<!-- 検索にヒットした投稿を表示 -->
<div class="new-post-container">
<?php while(have_posts()): the_post(); ?>
<!-- 投稿を表示 -->
<?php endwhile; ?>
</div>
<!-- ページネーション -->
<div class="post-pagenation">
</div>
<!-- 検索にヒットしなかったときの処理 -->
<?php else: ?>
<h2 class="top-header" style="margin:150px">記事が見つかりませんでした</h2>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>以下のような結果になります。
まとめ
今回は、検索フォームを追加しました。
WordPressでは、とても簡単に検索フォームをつくることができます。プラグインを使用して検索フォームをつくることもできますが、自分でコードを書く場合もとても少ない手数で実装できます。