本サイトのコンテンツには、プロモーションが含まれている場合があります。2023年12月18日SHAREポストシェアはてブLINEこんな悩みに答えますWordPressのサイト内検索の設置方法が分からない検索ボックスのデザインを変えたいコピペで終わるような簡単なものを教えてほしい!この記事では、以下の画像のような検索フォームを設置することを目指します!もちろん色は変更可能ですし、変更方法についても詳しく解説します。検索結果を出力するsearch.phpについて検索フォームについて記載されているsearchform.phpWordPressの検索フォームのCSSを変更しよう!検索窓の色についてWordPressで検索窓を意図した場所に設置WordPressの検索フォーム設置方法まとめWordPressのサイト内検索の構成サイト内検索は、検索結果についてを子テーマのsearch.phpに、検索窓についてをsearchform.phpに記載しています。外観→テーマファイルエディター→テーマファイル内に二つともあります。この二つのファイルに何が書いてあるかを詳しく見つつ、デザインを変更していきましょう。maipyon使用しているテーマによって名前は異なるかもしれないけど、検索フォームと分かるような名前が付けられているはず!検索結果を出力するsearch.phpについてまずは、search.phpについてみていきます。検索窓にキーワードを打ちこんで、検索した後の画面がどうなるかを表しています。以下はsearch.phpの一部を抜粋したものです。?></article>今回は、特になにも変更する必要はありません。検索結果として出てくる「〇〇」の検索結果〇件の文字を変更できますので、気になる方はここで変更しましょう。検索フォームについて記載されているsearchform.phpここで検索窓のHTMLを記述しています。HTMLというのは、骨組みみたいなものと思っていただければ大丈夫です。</form></div>ちなみにですが、ここの「サイト内検索」の文字を変えることで、検索窓欄に最初に表示され続けている名前を変更することができます。WordPressの検索フォームのCSSを変更しよう!このままでは、まだ骨組みができただけで、不十分です。CSSを使って、デザインを整えていきましょう。以下のコードを、style.cssの一番下側にコピペでOKです。#888;}色を変えたいという方は、説明が書かれている部分を変更していけばできます。検索窓の色について今の状態では、最初に見せた画像の通り、ピンク色になっています。各自のサイトの色に合わせるとおしゃれにできますが、ここでアドバイス。Colorsというサイトに、おしゃれな色がたくさん載っています。下の画像のように、一覧になっています。気に入った色をクリックすると、色のコードが自動でコピーされます。頭に「#」を付け足せば、好みの色に変更可能です!このサイトを使えばおしゃれな色遣いができそうです。検索窓を作成したはいいけど、このままじゃ設置方法がわかりません。設置するには以下のコードを、検索窓を挿入したい場所に書き込めば検索窓を表示できます。?>挿入場所としては、ハンバーガーメニュー内や、サイドバーのどこかに挿入するのがオススメです。WordPressの検索フォーム設置方法まとめ今回は、以下のことについて紹介しました。検索フォームの表示方法サイト内検索は、ユーザが読みたい記事を調べるときに必要な、大切な部分です。今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。:ブログカスタマイズ関連記事SWELLのカスタムHTMLのバナーを中央に配置する方法CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズCSSコピペするだけ!吹き出しデザイン14選【色別サンプル19種】CSSコピペするだけ!ボックスデザイン(囲み枠)25選【色別サンプル62種】チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】プラグインを使わずWordPressにスライダーを作る方法【コピペでOK】この記事を書いた人maipyonWebクリエイターWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。雑記お問い合わせmaipyonWeb系エンジニアのブロガーうさぎ。ガジェットレビュー・暮らしの中で役立ったアイテム・ブログ運営などを思うがままに書いています。「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。