学習の記録　自作プラグイン～PHPの罠

どうも！おはようからおやすみまでWeb製作のお勉強をがんばっています、一児のパパです👶

今回は教材を参考にしながら簡単な自作プラグインを作成しましたのでご紹介いたします！

作成したプラグインは、自分のサイト内の投稿ページ検索を行った場合に、キーワードで入力すると、そのワードの載ってる投稿から検索ワードをハイライトで教えてくれるというものです。

プラグイン名はSearch Highlighter（サーチ・ハイライター）です！

このように検索ワードに「インドネシア、モール」と入力すると・・・

「インドネシア、モール」の載ってる投稿が抜粋され、検索ワードが黄色くマークアップされます。

参考にさせていただいた書籍はこちら、毎度おなじみ、最近の私の学習パートナー「ビジネスサイトを作って学ぶWordpressの教科書」から！

まずはこちらに掲載してある「サイト内検索を動作させる」というページを参考に、サイト内で検索できる機能を実装していきます。

サイト内検索を動作させる

まずはサイト内で投稿ページを検索できる検索窓を作ります。

最初に検索結果のページを作るので、search.phpというファイルを作ります。

テキストエディタでsearch.phpを作成して、以下のように記述します。

▼search.php
<?php get_header(); ?>
              <div class="page-inner">
                <div class="page-main" id="pg-search">
                  <form class="search-form" role="search" method="get" action="<?php echo esc_url( home_url() ); ?>">
                    <div class="search-box">
                      <input type="text" name="s" class="search-input" placeholder="キーワードを入力してください"value="<?php the_search_query(); ?>" /> 
                      <button type="submit" class="button button-submit">検索</button>
                    </div>
                  </form>
                  <div class="searchResult-wrapper">
                    <?php if ( get_search_query() ): ?>
                    <div class="searchResult-head">
                      <h3 class="title">「<?php the_search_query(); ?>」の検索結果</h3>
                      <div class="total">全<?php echo $wp_query->found_posts; ?>件</div>
                    </div>
                    <?php endif; ?>
                    <ul class="searchResultLlist">
                    <?php 
					  if ( have_posts() && get_search_query() ) :
                      while ( have_posts() ) : the_post();
                    ?>
                      <li class="searchResultLlist-item">
                        <a href="<?php the_permalink(); ?>">
                          <div class="item-wrapper">
                            <div class="image">
                    <?php 
                    $image = get_the_post_thumbnail( $post->ID,'search' );
                    if ( $image ):
                      echo $image;
                    else:
                      echo '<img src="'. get_template_directory_uri(). '/assets/images/img-noImage.png" />';
                    endif;
                    ?>
                             
                            </div>
                            <dl>
                              <dt><?php the_title(); ?></dt>
                              <dd class="description"><?php echo get_the_excerpt(); ?></dd>
                            </dl>
                          </div>
                        </a>
                      </li>
                    <?php endwhile; ?>
                    </ul>
                  <div class="page-innner">
	               <?php wp_pagenavi(); ?>
                   </div>
                    </div>
                    <?php elseif( ! get_search_query() ): ?>
                      <p>検索ワードが入力されていません</p>
                    <?php else: ?>
                      <p>該当する記事は見つかりませんでした。</p>
                    <?php endif; ?>
                  </div>
                </div>
              
   <?php get_footer(); ?>

それぞれのソースコードの意味も少し解説↓
the_search_query()　→　検索ワードを出力します。

get_search_query()　→　検索された文字列を取得するWordpressの関数です。

$wp_query->found_posts　→　検索で取得できた記事数を表しています。

if ( have_posts() && get_search_query() ) 　→　検索結果と検索キーワードがともに存在するかチェックしています。

get_the_post_thumbnail( )　→　投稿やページの編集画面で設定できるアイキャッチ画像を取得する関数です。

これで検索窓は表示されました。

次にheader.phpをいじります。

header.phpの記述を修正する

search.phpを作成したことで、検索フォームは表示されましたが、キーワードの検索ができないので、header.phpを修正していきます。

WordPressで検索機能を利用する場合、inputタグのname属性値に「S」を指定しなければなりません。検索部分のコードは次のようになります。

▼header.php
 <form class="search-form" role="search" method="get" action="<?php echo esc_url( home_url() ); ?>" >
            <div class="search-box">
              <input type="text" class="search-input" name="s" placeholder="キーワードを入力してください" />
              <button type="submit" class="button-submit"></button>
            </div>

表示、動作を確認する

検索窓に試しに「モール」と検索してみます。

すると、無事にモールが表示されている投稿が検索結果に表示されました！
では次に自分でオリジナルのプラグインを作成して上記のように検索ワードに黄色いハイライトでマークアップされるようにしたいと思います。

プラグイン「Search Highlighter」を作成する

まずは自分のワードプレスファイルを開き、ディレクトリを作成します。「wp-content」>「plugins」内に、「Search Highlighter」というファイルを作ります。

次に「Search Highlighter」ファイルの配下に、「Search Highlighter.php」というファイルを作成し、下記の画像のように追記します。

<?php
/*
Plugin Name: Search Highlighter
Plugin URI: https://pacificmall.local
Description: Highlight searched words when you search
Version: 1.0
Author: PACIFIC MALL DEVELOPMENT
Author URI: https://pacificmall.local
*/

WordPressの管理画面を確認します。

「プラグイン」>「インストール済みプラグイン」を確認し、先ほど作成したプラグインが認識されていることを確認します。

次に検索ワードをハイライトするように機能を実装します。

Search Highlighter.phpに次のように追記します。

<?php
/*
Plugin Name: Search Highlighter
Plugin URI: https://pacificmall.local
Description: Highlight searched words when you search
Version: 1.0
Author: PACIFIC MALL DEVELOPMENT
Author URI: https://pacificmall.local
*/
class SearchHighlighter {
    public function __construct() {
        add_filter( 'the_title', array( $this, 'highlight_keywords' ) );
        add_filter( 'get_the_excerpt', array( $this, 'highlight_keywords' ) );
    }
    public function highlight_keywords( $text ) {
        if ( is_search() ) {
            $keys = explode( ' ', get_search_query() );
            foreach ( $keys as $key ) {
                $text = str_replace( $key, '<span style="background:#ffff00">'.$key.'</span>', $text );
            } 
        }
        return $text;
    }
}
$SearchHighlighter = new SearchHighlighter();

その後、作成したプラグイン「Search Highlighter」を有効化します。

最後にプラグインの動作確認です。

実際に作った検索窓から試しに「インドネシア　モール」と検索をかけてみます。

検索したワードが二つともハイライトされていたら完成です！

次に僕がつまづいた失敗例についてお話します。

WordPressのコードミスに気を付けろ

「Search Highlighter」のプラグインの作成時、コードを記述して動作確認をしようとしたときにそれは起きました。

画面消失・・・

重大なエラー、なんでしょうね？コードをくまなくチェックしてみても誤字や脱字は見当たらない・・

んー・・・・

さっぱりわからん！

なんでだー

プラグインを停止してみたら復旧しましたので、プラグインのコードに間違いがあると思うんだけど・・

一字ずつ丁寧に見直してみましたが間違いが発見できませんでした。

詰んだ？

ま、まて、まだ慌てる時間じゃない・・・

よし、こうなったら全部消してもう一度最初からやり直すんだ・・

ダメですた＼(^o^)／ｵﾜﾀ

こうして考えるのをやめ、時は過ぎていきました・・・

そしてある夜、

 if ( is_search( ) ) {
            $keys = explode( ' ', get_search_query() );

この部分、 if ( is_search( ) )の（　）の部分、まさか・・・

スペース入れない？

本では確かにスペースが入っているように見えました。しかし他のコードに間違いが見当たらない以上ここはもしや・・と思い半角、全角スペースなしで記述してみました。

 if ( is_search() ) {
            $keys = explode( ' ', get_search_query() );

すると・・・

できました＼(^o^)／

これかよ！！！！

どうしようもない些細なミスですが、無事にできたのでホッとしました。

このように気づきにくいスペルミスでもWordpressは動かなくなります。

今回は少し勉強になりました。

普通によくありえることですので、初学者の皆さんも十分に注意してくださいね😓

普通にこんなことに３日くらい費やすことにもなりかねませんから（笑）

とにかく画面が真っ白になったり何かエラーが起きた時はそれの直前のコードにミスがあることがほとんどですので慌てずじっくり見直してみて細かいところまでチェックしてみてくださいね。

まぁ原因が解明できた時は気持ちが良いものです。勉強のうちは気長にこなしていきましょう(;´∀｀)

今回は以上になります。最後まで読んでいただきありがとうございました。またお会いしましょう！

では！