検索フォーム

検索フォームのカスタマイズ　その2　ワードプレス

2014年11月9日

Categories | ブログ（WordPress)

検索フォーム(検索窓)のカスタマイズをしました。

過去に色々と取り組んでましたが、そもそも当ブログテーマ内に「searchform.php」が

存在しなかったのが良くなかったみたいで、作成してテーマフォルダに追加し、

スタイルシートでカスタムしました。備忘録です。

searchform.php

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div class="info"><label class="screen-reader-text" for="s"></label>
        <input type="text" value="" name="s" id="s" />
        <input type="image" src="×××/images/btn.gif" id="searchsubmit" value="Search" />
    </div>
</form>

×××は画像ファイルをアップロードしたURL。

style.css

/* 検索フォーム */
#info { float:right;
	line-height:33px;
	margin-top: 5px;
}

#s{/* 検索文字列入力欄 */
  width:190px;
  height:14px;
}
#searchsubmit{/* 検索ボタン */
  	position: relative;
	top: 6px;
	left: -26px;
	height:20px;
}

過去にカスタマイズした時、wp_includesフォルダー内の「general-template.php」を、

WPがアップデートごとにいじってたが、これからはその必要がなくなった。

Comment(0) | Trackback(0)

TAGS: ワードプレス / カスタマイズ / 検索フォーム | 2014年11月9日 |

ワードプレスをバージョンアップしたらエラーしてしまった

2013年8月9日

Categories | ブログ（WordPress)

ワードプレスを3.5.1からWordPress 3.6にバージョンアップしてみたんですぅ。

したら　あれ？　検索フォームがへんになってる・・・

どこがヘンだと申しますと

以前カスタマイズした時はこんな感じだったんです。

ウェジェット検索フォームのカスタマイズ

じゃどうするよ？

カスタマイズした時いじったファイル

wp_includesフォルダー内に格納されてる ” general-template.php ”

バックアップしていたから上書きアップロードさせました。

したらこうなってしまった。

ヘッダーに意味不明なエラーが

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘wp_heartbeat_settings’ was given in /virtual/●●●●/●●●●/blog/wp-includes/plugin.php on line 173

検索フォームとカレンダーもタテ幅がちじこまってしまった。

ん・・・困った。しかもかっこ悪いし。　どう修復して良いかさっぱり分からん。

なんちゃら知恵袋の活躍中のチエリアンに回答のリクエストしてみても、

一向に回答されない。自力で修復するしかないな。

取りあえず、WordPress 3.6の”general-template.php”を上書きさせ、

エラー表示させないだけでもしておこう。

それに検索フォームがへんくなってることなんて、

言わなきゃ誰も気付かないだろうし。

修復につづく

Comment(0) | Trackback(1)

TAGS: ワードプレス / 検索フォーム / エラー | 2013年8月9日 |

ウェジェット検索フォームのカスタマイズ

2013年5月30日

Categories | ブログ（WordPress)

サイドバー等に設置する検索フォーム（検索ボックス）をカスタマイズしました。

ワードプレスの検索フォームをカスタムしたい方の為に

分かりやすくレクチャーしますね。

当方は設置する場所をヘッダー内にしましたが、ウェジェットでサイドバーに

表示させたい場合は、これからの作業は必要ありません。

・ヘッダー内に検索フォームを表示させるには

テーマフォルダー内の「header.php」を開き、表示させたいところに

<?php get_search_form(); ?>　

を記述します。ただそれだけです。そうするとデフォルトのボックスが現れます。

表示位置はdiv等で囲み、その指定は「style.css」に書き込みましょう。

当方仕様は右側に検索ボックスを表示でこうです。

style.css　には

#info { float:right;
 line-height:33px;
 margin-right:24px;
 }

header.php には

<h2>HCZ BLOG</h2>
<div id="info"><?php get_search_form(); ?></div>

と記述しました。

これからが本題です。

・検索フォームをカスタム

いじるファイルは2つ。

style.css：テーマのフォルダー内に格納されている。

general-template.php：wp_includesフォルダー内に格納。

style.css　に追記する内容

#searchform label {display:none}
#s{/* 検索文字列入力欄 */
 width:160px;
 height:14px;
 }
 #searchsubmit{/* 検索ボタン */
 position: relative;
 top: 6px;
 left: -26px;
 height:20px;
 }

解説：「#searchform label {display:none}」は、「検索:」文字を表示させない指定。#searchsubmit{/* 検索ボタン */　のposition: relative;　は、検索文字列入力欄の上にボタンを表示させる指定。ボタン表示位置はtop・leftで好み位置に調整してください。

general-template.php　１６2行目の内容を変更

変更前

<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
 <input type="text" value="' . get_search_query() . '" name="s" id="s" /><
 <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
 </div>

変更後

<div><label for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="Search" />
<input type="image" src="https://www.hcz.jp/blog/wp-includes/images/btn.gif" id="searchsubmit" value="Search" />
 </div>

解説：「placeholder=”Search”」は、検索文字列入力欄に「Search」と表示させる。「input type=”image”」は検索ボタンを画像（虫眼鏡）に置き換える指定で、「src=”https://www.hcz.jp/blog/wp-includes/images/btn.gif“」は画像がある場所。画像はどこのフォルダーにおいても大丈夫だが、相対パスでの記述だと表示されないことがあるので、念のために絶対パスで記述するべし。

数ヵ月後エラーがでてしまった・・・に、つづく

Comment(0) | Trackback(1)

TAGS: WP / ワードプレス / カスタマイズ / ウェジェット / 検索フォーム | 2013年5月30日 |