どうも、Show-Go.Works 廣井翔伍です。
今回の記事は、広島県作業療法士会のホームページ改修に関して新たに付け加えた機能の一つ目、「サイト内検索」の経過になります。今回は、wordpressデフォルトの検索
なぜ「サイト内」検索を実装するのか
先日から、広島県作業療法士会HPの大規模改修を行なわせていただいてます。
いろいろと「何がどこにあるのかわからない」のです。
使い勝手の悪さに対応するために必要と思います。
現状確認
改善のための現状確認です。
2023年11月2日時点の現在のサイトのスクリーンショットを撮影してきました。
はい、ひどいです。ごめんなさい。
いいところを一つ言っておけば、ご覧のように、情報の一覧性はあります。
でもこれって、あくまで、PCの話。そもそも、文字ばっかりで、欲しい情報にアクセスするには、欲しい情報のリンクを探してクリックする必要があります。
ということで、アクセシビリティを手早く確保したい、だから「サイト内検索」
現状、アクセシビリティが大きな改善点としてあるWebサイト構造になってしまっています。今回はそれを解決するために、「サイト内検索」を導入します。
ですから、理由としては
県士会HPにアクセスできる方は、各種検索エンジンでキーワード検索をすることには慣れているはず
各個別ページの改修よりも手軽に、ホームページのアクセシビリティを確保できる
という2点から、今回、アクセシビリティを手早く底上げできる技術として「サイト内検索」を導入することに決めました。
作業前に想定したこと
現在HPの右下のエリアは、特に機能性を保有していません。また、スマートフォンで閲覧する場合には、右利きユーザーがが多い想定にはなりますが、タップしやすいエリアになると思われます。
そこで、右下の余白部分を活用しましょう。
この部分に、虫眼鏡アイコンを設置します。
これをタップすることで、キーワード検索機能が利用できるようにします。何らかの検索エンジンをAPIで呼び出してきて、県士会のフレームの中で表示できると、良いですね。
広島県作業療法士会のHP内にある情報までたどり着くためには、手がかりになるキーワードで検索をすれば良いわけです。
事前作業
検索対象となるコンテンツ状況の確認
サーバーの公開ページの中に、過去の資料などがいろいろと存在している状態でしたので、クローラーがそれらを現在も有効である、と認識してしまうと、ユーザーが本当に検索したい情報に対するノイズが増えてしまう状況になるので
１ 情報で活用されないであろうものについてはサーバーの中から削除する
２ 基本的に新しい情報が求められることが多いはず
という２つの作業が必要と考えました。
１に関しては、昨日早速作業をしていただき、おおまかに対応が完了しています。今後も必要に応じて、関係各位にご確認をいただきながら進めます。
今回は、主に、２について、サイト内検索の初期設定で対応できるはず、と考えてその機能の中で対応をしていきます。
サイト内検索の技術的選定
サイト内検索エンジンの実装について調べました。
長くなりそうだったので、調査内容を別記事にまとめて公開させていただきます。
実際に行った作業
画面下にフローして表示するように仕込みます。
とおもったのですが、ひとまず、第一段階ヘッダーに入れます。
ヘッダー部分に入力して、動くかどうかを確かめます。
ソースコード作成
chatGPTに、要件伝えて、書いてもらいました。
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search" value="<?php echo get_search_query(); ?>" name="s" title="Search" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
テーマファイルエディター機能から、上記のコードを挿入してみます。
すると、格好はとても悪いですが、ちゃんと右上に、検索窓が出現しました。
検索機能をテストしてみます。
「日本作業療法士会」と入力して、エンターキーを押してみます。
すると画面が遷移して、検索結果が表示されます
ところが、空白のページが呼び出されてしまいました。
WordPressの検索機能の有効化
これは、検索機能がきちんと機能していないため、と思われます。ここで、Wordpressデフォルトの検索機能が有効化されていないのでは、ということに気がつきます。
ということで、また、ChatGTP先生に質問して入力。
//検索機能の有効化
function enable_search() {
add_theme_support('html5', array('search-form'));
}
add_action('after_setup_theme', 'enable_search');テーマファイルエディターから、function.phpに上記を追加して保存。
再度検索フォームの実験
右上のフォームに「日本作業療法士会」と入力して検索。エンター。
空白。
問題山積
こりゃ多分、フォームのPHP呼び出しが間違ってるぞ？と思ったけれど、そもそも、検索結果を出力するページが存在しないからではないか？と思い至る。
そうすると、検索結果を表示するためのテンプレートページを作成することが必要になると思われる。ローカルでファイルを作成して、リモートにアップロードするための仕組みが必要になりますね。
実際、フォームに渡したあとのURLを確認すると、
https://hiroshima-ota.jp/?s=日本作業療法士会だったので、このHTMLを用いて表示するページが存在していないのが原因では？ということに思い至る。
サーバーとの通信もうまくいかず
とりあえず、サーバ管理者の方に連絡をとって、直接FTP等にてファイルをアップロードする必要性があるので、そちらも並行して進めることにします。
一旦フォームを削除
機能実装ができないで中途半端なので、一旦フォームのデータを削除します。
とりあえず、コメントアウトして見た目は、元通りへ。
ここまでのまとめ
サイト内検索を実現するために、wordpressでなんとかしようと思ったら、ひとまずなんともなりませんでした。
ということで、続きます。
コメントを残す