Web Design

コピペでOK!wordpressに設置するシンプルな検索ボックス


こんにちは。mayukouです。
最近は、wordpressのカスタマイズにはまり、
新しいテーマを作りたくてウズウズしている今日この頃です。

さて、今回はwordpressのテンプレートに欠かせない、
検索ボックスの設置方法をご紹介します。
今回は、2カラムを前提で、サイドバーに設置する方法です。

スポンサードリンク

サンプル

51-searchbox-ex

 

1.ウィジェットに検索ボックスを加えます

52-widget

2.searchform.phpファイルを作成し、FTPサーバーにアップします。

デフォルトの場合、下記のようなコードとなりますが、
webdesignrecipe参考)

これを下記のように書き変えます。

ポイントは、dlタグを追加していることと、
ボタンが input ではなく button タグになっていることです。
後はデフォルトと同じです。

3.cssを設定します

(mororeco参考)

以上となります。

検索アイコンは
search
これをご使用ください。

最後に

いかがでしたか?wordpressに欠かせない、

検索フォームのCSSをご紹介しました。
ぜひ参考になられてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  2. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン

    近頃、調子に乗ってwordpressにいろいろプラグインを入れてパワー…

  3. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  4. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  5. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  6. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    macbook “12 goldが届きました。使用感、メリット・デメ…
  2. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える
  3. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海…
  4. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス
  5. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
PAGE TOP