|WEBWordPressで構築したWebサイトやブログでは、サイト内のニュース記事やブログ記事をユーザーが目的の情報を探しやすいように、検索フォームを設置していくでしょう。WordPressでは、ウィジェットで簡単に検索フォームを設置できるように作られてますが、利用するテーマでもある程度決まったデザインで設置できる場所もだいたい決まっています。WordPressのテーマをオリジナルのデザインにされている方は、Webサイトやブログにあった検索フォームのデザインに、そして設置したい場所も自由にコントロールしたいところです。ここでは、WordPressで独自のデザインの検索フォームを設置する方法をご紹介します。独自の検索フォームの作成WordPressで独自の検索フォームを作るには、以下の2つのファイルを作成する必要があります。searchform.phpsearch.php「searchform.php」は検索フォームの部分のファイルで、「search.php」は検索結果を表示するページのファイルです。この2つに加えて、検索フォームをCSSでデザインしていきます。実際にフォームの作成から、設置するまでの流れを見ていきましょう。サンプルとして、以下のように検索フォームを構築してみました。id="s-btn">検索</button></form>シンプルに、検索窓と検索を実行するボタンとして構築してみました。formのmethod属性はget送信で、action属性にはサイトのURLを設定します。入力部分をinput要素で作り、WordPressで検索プログラムを動かすためname属性には「s」とします。ページ内検索placeholder属性で入力欄のダミーテキストを設定。最後にbutton要素で、検索を実行するボタンを構築します。各要素には、CSSでデザインしやすいようにIDを付けています。続いてはスタイルシートです。CSSでは、作成した検索フォームに対して、サイトに合わせたオリジナルのデザインを作ります。サンプルとして以下のように記述してみました。pointer;}フォームのデザインはサイトに合わせてお好みに。検索ボタンをアイコンにして画像としてもいいですね。その場合はHTMLの方も調整してください。続いて、検索の実行結果を表示するファイルを作成します。ファイル名は「search」とします。?><p>検索キーワードに該当する記事がありませんでした。?>if文でクエリにループできる結果があるかどうかのチェックから始まります。PHPのprintf関数で文字列を出力するプログラムを書いています。これは、検索した結果の状況をわかりやすくするためです。WordPressの関数である「get_search_query()」では、サイト内検索を行ったときのクエリ文字列を取得してきます。検索した文字列の検索結果としての表示をして、さらに「$wp_query->found_posts」でクエリ変数に一致する投稿の数を取得して、何件ヒットしたのかを表示させます。その後、while文で検索した記事分を出力する処理を書きます。投稿一覧で利用しているループ処理になります。while文が終わったら、if文のelseで検索キーワードで該当しなかった場合のテキストの記述をします。最後にendifでif文の終わりとなります。検索フォームの機能を「searchform.php」「search.php」で。デザインを「style.css」で作ったら準備完了です。あとは検索フォームを表示させる部分に、作成したテンプレートを組み込むことができる関数「get_search_form」を使って設置します。サイドバーに設置する場合は「sidebar.php」の表示させる部分に、以下のプログラムを追加します。?>これで、サイトに合わせたオリジナルのデザインで、好きな場所に検索フォームを設置することができます。あとはCSSでどのようなフォームデザインにするかですね。自分のお好みにデザインしてみてください。v3を追加して迷惑メール対策Webサイトの表示速度を速くするためのにしておきたい。JS、CSSの読み込み制御Webサイトの多言語化で使えそうな小技Webサイトのファビコンとホームアイコンの作成と設定方法jQueryでクリックして画像を切り替えるスマホ用メニューを作成するPHPのヒアドキュメントの使い方と注意点PHPでMySQLのテーブルにINSERT文でデータが追加されない時に確認しておきたいことWordPressのタクソノミーのターム情報でアイコン画像などをコントロールPREV:Gmailの作業効率を上げる便利機能!マルチ受信トレイと分割プレビューの使い方NEXT:Webブラウザのデベロッパーツールを使ってWebページの要素単位のスクリーンショットを撮るPROFILEAkira元ボクサー、元トラックドライバーと不思議な経歴を持つ。納豆はご飯と分けて食べるタイプ。