★今日の課題★
WordPressのサイト内に独自の検索窓を実装
検索窓（Wordpress標準）
ワードプレスでは標準で検索窓が用意されており、クリック１つで配置できます。
設定も多少は変更できます。
ＨＴＭＬ記述
HTMLタグを入力することで、簡単な検索窓は作れました。
この検索窓は下記のhtmlタグを入力して作成しています。
<div align="center">
<form action="/?" &="" value="" target="_blank">
AmpiTaサイト内検索（検索ワードを入力してください）<input type="text" name="s">
<input type="submit" value="サイト全体検索">
</form>
</div>冒頭にある『 <div align=”center”> 』と末尾の『</div>』で中央揃えを指示しています。これを無くしても検索窓として機能します。
２行目の『 action=”/?” 』は検索に使うURLの指示です。
ここでは『 / 』しかないので、サイト全体を検索します。実際に動かすと『 https://www.ampita.net/? 』というURLに変換されます。
この『 / 』の部分を、サイトのフォルダ名に変えれば、そのエリア内だけ検索されます。例えば『news』というフォルダを作っておいてそこにコンテンツを集めておけば『 action=” /news?/』という文字列にすることで、newsフォルダ内を検索してくれます。
ワードプレスのブログなどでは年月でフォルダを分ける設定にしている人も多いと思いますので、『 action=”/2021/?” 』とすると、当サイトでは2021年の記事だけを検索対象にすることができます。
窓の幅指定
下の検索窓は、さきほどまでの物に比べて入力欄が小さくなっています。『 style 』という指示文を追記しました。
この検索窓では入力欄の幅を300ピクセルに指定しています。指定方法は input 文の中に『 style=”width:300px;” 』を追記しています。
<div align="center">
<form action="/2021/?" &="" value="" target="_blank">
幅３００ピクセルの検索窓<input type="text" name="s" style="width:300px;">
<input type="submit" value="2021年記事検索">
</form>
</div> 下の場合は、検索窓を50%に指定しています。
こちらは『 style=”width:50%;” 』をinput文に追記しています。
このように、検索窓の幅は絶対値と相対値のいずれかで指定することができます。
<div align="center">
<form action="/2021/?" &="" value="" target="_blank">
幅５０％の検索窓<input type="text" name="s" style="width:50%;">
<input type="submit" value="2021年記事検索">
</form>
</div>Ｓが検索指示
構文『 <form action=”/?” &=”” value=”” target=”_blank”> 』という物がありましたが、『 /? 』の後ろには『 s= 』という文字が自動的に付記されてURLとして渡される設定になっています。
それが input 文からの戻り値です。
input文は『 <input type=”text” name=”s”> 』という記述が最小であり、『 name=”s” 』のエスが明示的指示をしたURLの後ろに付く記述と関係します。
実際にはURLのあとに『 /?s=検索文字列 』という形になり、検索文字列にはユーザーが検索窓に入力した文字が反映されることになります。
<div align="center">
<form action="/2020/?" &="" value="" target="_blank">
AmpiTa記事検索<input type="text" name="s" style="width:75%;" placeholder="2020年の記事">
<input type="submit" value="2020年記事検索">
</form>
</div>薄っすら出る文字
前述の検索窓には入力欄に薄く文字が表示されています。
input文に『 placeholder=”2020年の記事” 』と追記したことで表示されています。
『 placeholder 』は文字として認識されないが、薄っすらと見せるための指示になります。
検索ワードを最初から入力
薄っすら表示される文字は検索ワードとして使われませんが、検索ワードとして使う文字を先に入力しておく指示も出せます。
先ほどの『 placeholder 』を『 value 』に置き換えるだけです。
<div align="center">
<form action="/?" &="" value="" target="_blank">
HDMIスルーを検索ワードとしてAmpiTa記事検索<input type="text" name="s" style="width:66%;" value="HDMIスルー">
<input type="submit" value="HDMIスルーで記事検索">
</form>
</div>Google検索にも使える
この検索HTMLタグはサイト内検索だけでなくGoogle検索にも応用できます。
下記を書き込むだけで検索窓が作れます。２行目の form 文に『 target=”_blank” 』を入れているので検索は新しいウインドウで行われるため、現在のページは残ります。
<div align="center">
<form action="https://www.google.com/search?" &="" value="" target="_blank">
Googleサーチ<input type="text" name="q" style="width:66%;" placeholder="Google検索">
<input type="submit" value="Google Search">
</form>
</div>今回は検索窓の実装について検討してみました。
サイト内検索もGoogle検索も実装は容易である事がわかりました。
まだまだ応用の余地がありそうですので、使いこなせるようになりたいと思います。
最後までお読みいただき、ありがとうございました。
