WordPress 検索フォームをショートコードで挿入する

Last Updated:2015年08月22日| | コメントを残す

WordPress 検索フォームをショートコードで挿入するadd_shortcodeを介してショートコードの関数を作ってくれればされます。

function wpbsearchform( $form ) {

$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<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>
</form>';

return $form;
}

add_shortcode('wpbsearch', 'wpbsearchform');

// Source: http://www.wpbeginner.com

上記の関数を関数ファイルに追加するようにします。 そして次のショーのコードを好きなところに追加して下さい。

{wpbsearch}

*上記の{...}は[...]に置き換えてください。

上記のショートコード関数でclass要素は、現在使用しているテーマに応じて適宜追加いただいてもされて、または既存のCSSスタイルを新たに追加する検索フォームに適用もできます。

注:add_shortcode

add_shortcodeの詳細については、こちらを参照してください。

参考までに、次のようなadd_shortcode関数を関数ファイルに追加すると、{high}...{/high}を使用して希望のフレーズを蛍光ペンにハイライトできます({...}も同様に[...]に変更します。 )。

add_shortcode('high', 'highlighter_span_shortcode');
function highlighter_span_shortcode($atts, $content = null) {
extract(shortcode_atts(array('color' => '', 'bg' => 'yellow', 'size' => '', 'top' => '', 'right' => '', 'bottom' => '', 'left' => ''), $atts));
$return = '<span style="';
if (!empty($color)) $return .= 'color:'.$color.';';
if (!empty($bg)) $return .= 'background-color:' .$bg.';';
if (!empty($size)) $return .= 'font-size:'.$size.';';
if (!empty($left)) $return .= 'padding-left:'.$left.';';
if (!empty($right)) $return .= 'padding-right:'.$right.';';
if (!empty($top)) $return .= 'padding-top:'.$top.';';
if (!empty($bottom)) $return .= 'padding-bottom:'.$bottom.';';
$return .= '">';
return $return . $content . '</span>';
}

このショートコード関数とwpbsearchformショートコードの関数を見てみるとadd_shortcode関数を使用する基本的な方法を理解することができるようになります。


コメントを残す

コメント