WordPressでオリジナル検索機能を実装する方法

プログラミング

プログラミングスクールの学習に関する不満は、受講者が求めている学習の難易度とスクール側が提供している内容がマッチしないことで起こりやすいです。

  1. 難易度は合っているか(わかりやすい → 内容が簡単過ぎないか)
  2. 受講の形式(講義、動画、模写、テキスト)は合っているか
  3. 受講料は、適切か(安いけど質は問題ない?)

不満が出やすい上記の点をしっかり考えて選択してみてください。選べないという方はお気軽にお問い合わせください。アドバイスくらいはできます。

WordPressで自作の検索機能をつけたい。

今回は、このような疑問に答えていきます。

僕が運営しているこのWordPressのブログ内にオリジナルの検索機能を作ったので、どのように実装したのかご紹介します。

プラグインもあるようですが、僕の場合はオリジナルで実装したので参考にしてみてください。

▼この記事で理解できる点は以下のような感じになります。

  1. WordPressを検索機能を追加していく手順
  2. WordPressにテーブルの追加する方法
  3. テンプレートをカスタマイズする方法

WordPressをカスタマイズして検索機能を作りたいと考えている方は最後までご覧になってみてください。

本記事の信頼度

  • エンジニア歴10年以上
  • プログラミングスクール運営側の経験あり
  • WebデザインからWeb業界へ転職
  • 現在はフリーランスエンジニアとして企業に常駐(在宅勤務)



目次

  1. WordPressにオリジナル検索機能を実装する上で注意した点
    • シンプルなデザインとレイアウトにすること
    • 操作性の良いフォームにすること
    • スマートフォンでも使える
  2. WordPressで検索機能を実装する難易度は?
    • WordPressカスタマイズに必要な技術
    • WordPressのテンプレートの理解とは
    • PHPの基本
  3. WordPressにオリジナルの検索機能を実装する手順
    • テーブルの追加と読み込みの設定をする
    • 検索フォームを作成
    • 固定ページ用のテンプレートを作成
    • 検索結果の処理を作成
  4. WordPressでオリジナル検索機能を実装する方法まとめ

WordPressにオリジナル検索機能を実装する上で注意した点

実装上の注意

WordPressにオリジナル検索機能を実装する上で注意した点がいくつかあります。いくつか目標というかゴールを決めました。

以下のような目標を持って検索機能を実装しはじめました。

  • シンプルなデザインとレイアウトにすること
  • 操作性の良いフォームにすること
  • スマートフォンでも使える

シンプルなデザインとレイアウトにすること

検索フォームにはフラットデザインを採用しました。検索結果の方で画像を使っているため、そちらに注目してもらうためとかでしょうか。

操作性の良いフォームにすること

チェックボックスはボタンのような感じにすることで、チェックしやすくなっていると思います。ポチポチしやすいようにしました。

キーワード検索には、サジェスト機能を追加してプログラミングスクール名を途中まで入力すると、候補が表示されるようにしています。

スマートフォンでも使える

スマートフォンのレイアウトも最低限整えました。最初ガタガタになっていたので、これはと思いしかたなく修正した感じです(´・ω・`)ショボーン

WordPressで検索機能を実装する難易度は?

検索機能を実装する難易度

▼今回作った検索機能は以下のページで見られるので、使ってみてください。

プログラミングスクール検索機能

上のようなWordPressで検索機能を実装する場合に、どのくらいのスキルがあれば可能なのか簡単に紹介していきます。

WordPressカスタマイズに必要な技術

僕がどのくらいのレベルか簡単に紹介しておきます。

  • 業務でJava,Ruby,PHP,Pythonなどで検索のアプリを開発している
  • WordPressに関していうと、業務での実装は経験がない
  • WordPressはブログを書く程度のレベル

WordPressに関しては、それほど詳しくないので実装も独自で調べてなんとなくこんな感じでできそうという状況で作りはじめました。

公開するまで、1週間程度かかりました。(普段はフルタイムで業務委託しているので、業後3時間 × 1週間くらいでしょうか)

今回の機能でいうと、以下のみで実装可能です。少しだけJavaScriptも使っていますが、なくても気にならない程度です。

  • WordPressのテンプレートの理解
  • PHPの基本

WordPressのテンプレートの理解とは

WordPressの場合、「投稿」の機能と「固定ページ」の機能があります。そこで記事を書くとテンプレート(WordPressのテーマ機能)で優先順位があり、高いものから使われていくということになります。

一般的なテーマではpage.phpが固定ページのテンプレートとして使われることが多いと思いますが、page.phpに手を入れてしまうと、すべての固定ページに影響がでるため、それより優先度の高いpage-{slug}.phpを利用します。

▼例えば固定ページの場合、以下の優先順位でテーマが呼ばれます。

  • カスタムテンプレートファイル
  • page-{slug}.php
  • page-{id}.php
  • page.php

優先度の高いテンプレートを作る理由は…

優先度の高いテンプレートを作ると、その固定ページではpage.phpではなくpage-{slug}.phpが適用されるようになります。

そうすることで、レイアウトを変更することができます。ブログのレイアウトと検索のレイアウトを変更したかったので優先度の高いテンプレートを作りました。

ブログのテンプレートは2カラム。検索の方は1カラム

※投稿のレイアウトを例にしましたが、プロフィールなどの固定ページも同じレイアウトになっています。

ブログの2カラムテンプレート

検索の方は、右のプロフィールを表示しているカラムを削除し1カラムにして、広く使っています。

1カラムのテンプレート

PHPの基本

PHPのレベルとしては、検索フォームから受け取った値を処理してテーブルの検索ができるレベルが必要です。

今回の検索機能では、テーブルを2つ追加しただけなので、SQLも複雑にはならないのでSELECTの基本がわかっていれば実装可能です。

WordPressにオリジナルの検索機能を実装する手順

検索機能を実装する手順

順番に実装した手順を紹介していきます。

テーブルの追加と読み込みの設定をする

WordPerssを構築した時に、自動でデータベースが作成され、WordPressで使われるテーブルが追加されていると思います。

契約しているサーバーなどで接続方法などは割愛しますが、phpmyadminなどのツールで接続してテーブルを追加します。
※バックアップなど忘れずに。

▼wp-content/db.phpに追加したテーブルの情報を追加して、アクセスできるように設定します。例えば、carsというテーブルを追加しています。(phpmyadminでは、wp_carsみたいになる。)

public $tables = array(
    'posts',
    'comments',
    'links',
    'options',
    'postmeta',
    'terms',
    'term_taxonomy',
    'term_relationships',
    'termmeta',
    'commentmeta',
    // ここにテーブル名を追加
    // 例
    'cars'
);

追加してテーブルを取得できているか確認

page.phpあたりに書いてみる。事前にphpmyadminでデータ登録し、以下のようにSELECTしてみて取得できていたらOKです。
※SQLインジェクションなど対策はしてください。

// テーブルを取得するためのオブジェクト
global $wpdb;
// SELECT
$car_list = $wpdb->get_results("SELECT * FROM $wpdb->cars")

検索フォームを作成

例えば、以下のようにテーマ配下に適当なphpファイルを作ってフォームを作成します。

// {ご自分のテーマ}/cars.php
<form action="<?php echo home_url( '/{固定ページ名}' ); ?>" method="get">
  <input type="text" name="keyword">
</form>

固定ページ用のテンプレートを作成

固定ページ名が/carsだとすると、page-cars.phpという名前のpage用テンプレートを作成。

上記で作成したcars.phpをインポートします。

// page-cars.php

<?php get_template_part( 'cars' ); ?>

検索結果の処理を作成

固定ページcarsが公開されているのであれば、検索フォームが表示されているはず。(固定ページには何も書いていなくても、テンプレートの方に書いてあるため)

上でフォームの送信先を{固定ページ名}にしていましたが、以下のような感じにして、actionを設定すると自分自身に送信することになります。

<?php echo home_url( '/cars' ); ?>

検索フォームを受け取るには、function.phpに処理を書きます。

// function.php

function get_cars() {
  global $wpdb;

  // このあたりでいろいろ処理する
  // バリデーションとか対策
  // キーワードを受け取ってテーブルを検索するSQL作る
  // 検索結果を整形する処理を書くとか

  // 全件SELECTしてみる
  $car_list = $wpdb->get_results("SELECT * FROM $wpdb->cars")

  // 取得データを返す
  return $car_list;
}

あとは、テンプレートから呼んで上げるだけです。関数呼んでechoするとテーブルで取得した内容が表示されるはず。

あとは、いろいろと表示内容を整えてあげるだけです。

// page-cars.php

<?php get_template_part( 'cars' ); ?>
// ここに追加
// 検索結果を表示
<?php echo get_cars(); ?>

WordPressでオリジナル検索機能を実装する方法まとめ

まとめ

今回は、WordPressにオリジナルの検索機能を実装してみました。

記事の検索する関数などは、WordPress側で準備されているので簡単に実装できると思いますが、独自(オリジナル)の検索機能を作るには一手間必要です。

今回実装でCSSには触れていませんが、ここに少し時間使いました。一番時間がかかったのは、データの登録です。(登録に4日くらい)プログラミングスクールのサイトを見てポチポチしていました(泣)

しばらくPHPは業務で書いていないので、調べながら書いてみましたがRailsやPythonの方に慣れたせいかPHPやだなー思いました(笑)

もっとこうした方がいいよとか、おすすめのプラグインなどがあったら教えてくれると助かります。また実装した検索の使い勝手なども教えてくれるとうれしいです。

当サイトで申込の多いプログラミングスクール

TechAcademyの無料体験
マンツーマンでオリジナルアプリの作成ができるテックアカデミーは人気が高いプログラミングスクール。
Webエンジニア輩出実績トップクラスの【ポテパンキャンプ】
転職に強く本気でエンジニア転職を目指す人におすすめ。難易度が高いため身につくスキルも高く企業からの評価も高いのが特徴。
CodeCamp無料体験
講師を選択できるのが特徴のコードキャンプ。チャットでの質問ができないと言われていますが、オプションでチャットサポートを選択できるのがあまり知られていない。講師の評判が高いため質問しながらどんどん進みたい人向け。