【WordPressインクルードタグ】get_search_form():「searchform.php」を使用して検索フォームを表示または取得

公開日: : 最終更新日:2016/03/24 インクルードタグ, テンプレートタグ

概要

検索フォームを表示、または文字列として取得する。
テーマにテンプレートファイル「searchform.php」があれば、それを読み込み、なければWordPress に組み込みの検索フォームを読み込む。

書式

<?php get_search_form( echo ); ?>

パラメーター

echo
表示するかどうか

  • true / フォームを表示(初期値)
  • false / フォームを表示せず、文字列として返す

使用例

初期設定での使用

「searchform.php」を読み込む

<?php get_search_form(); ?>

WordPressのデフォルトの検索フォーム

自分で「searchform.php」を作成するときは、WordPressのデフォルトの検索フォームをカスタマイズすると便利。CSSでデザインを整えます。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
 <div>
  <label class="screen-reader-text" for="s">検索:</label>
  <input type="text" value="" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="検索" />
 </div>
</form>
yaji_w200h50

表示例

img_search_default

WordPressのデフォルトの検索フォームをCSSでカスタマイズしてみる

「searchform.php」をわざわざ作らなくても、WordPressのデフォルトの検索フォームをCSSで整えてあげるだけで、ずいぶん見栄えが変わる。例えば下記のように書くと、

label{
 display:none; /*「検索:」テキストを非表示*/
 }
form {
    position: relative;
}
form input {
    height: 33px;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}
#searchsubmit{
 position:absolute;
 padding:0 10px 0 10px;
 margin-left:-10px;
 background:#808080;
 color:#fff;
 cursor:pointer;
 border:none;
 }
#searchsubmit:hover{
 background:#5ead00;
 }
input#s{
 border:solid 1px #808080;
 padding:2px 5px 2px 5px;
 width:25%;
 }
yaji_w200h50

表示例

img_search_arrange

関連



関連記事

wordpress

【WordPressテンプレートタグ】get_the_post_thumbnail():アイキャッチ画像を取得

概要 アイキャッチ画像のimgタグを取得する。 書式 <?php get_the_post_t...

記事を読む

wordpress

【WordPressテンプレートタグ】comment_author_email():コメント投稿者のメールアドレスをリンクなしで表示

概要 コメント投稿者のメールアドレスをリンクなしで表示する。 管理画面「設定」>「ディスカッション」...

記事を読む

wordpress

【WordPressテンプレートタグ】get_page_link():固定ページのパーマリンクを取得

概要 固定ページのパーマリンクを取得する。固定ページIDを渡せばそのページのURLを取得でき、引数を...

記事を読む

wordpress

【WordPressテンプレートタグ】the_category():カテゴリー名とリンクを表示

概要 記事が属するカテゴリー名とリンクを表示する 書式 <?php the_category(...

記事を読む

wordpress

【WordPressテンプレートタグ】the_permalink():記事のパーマリンクのURLを表示

概要 投稿や固定ページなど記事詳細ページへのURLを表示する 書式 <?php the_per...

記事を読む

wordpress

【WordPressテンプレートタグ】previous_post_link():前の投稿ページへのリンクを表示

概要 表示している記事より公開日が1つ前(古い)の記事へのリンクを表示する。 書式 <?php...

記事を読む

wordpress

【WordPressテンプレートタグ】get_post_thumbnail_id():アイキャッチ画像のIDを取得

概要 アイキャッチ画像のIDを取得する。 書式 <?php get_post_thumbnai...

記事を読む

wordpress

【WordPressテンプレートタグ】the_author_posts_link():作成者別アーカイブへのリンクを表示

概要 投稿の作成者別アーカイブへのリンクを表示する。 「ユーザー」>「あなたのプロフィール」>「ブロ...

記事を読む

wordpress

【WordPressテンプレートタグ】single_cat_title():カテゴリーアーカイブのタイトルを表示または取得

概要 カテゴリーアーカイブページでのカテゴリータイトルを表示または取得する。 書式 <?php...

記事を読む

wordpress

【WordPressテンプレートタグ】the_meta():記事のカスタムフィールドの値をリスト形式で表示

概要 現在の記事のカスタムフィールドに記載した値をリスト形式で表示する。 書式 <?php t...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方 受付でお祝いの言葉を述べ、祝儀袋をふ

結婚祝い

お祝い品選びと費用 お祝い品の選び方 新居を構える二人には、生活実用品

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑