テーマにWordPressのウィジェットを対応させ検索フォームをカスタマイズする

ホーム
WordPress
テーマにWordPressのウィジェットを対応させ検索フォームをカスタマイズする

2011.12.8

テーマにWordPressのウィジェットを対応させ検索フォームをカスタマイズする

WordPressにはウィジェットという便利な機能があります。これを使用すれば管理画面でサイドバーやフッターのメニューを管理することができるのでとても便利です。追加したい機能はドラッグ&ドロップで各配置場所に並べるだけなので管理という意味では視覚的にもわかりやすいかと思います。ただ、デメリットとしては見栄えをよくするといった自分の好きなデザインに調整するために少しめんどくさいカスタマイズをしなきゃいけないことです。試しに検索フォームのウィジェットを置いたらちょっと?みたいな感じだったので今回はこれをカスタマイズしてみようかと思います。

[ads_center]

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

なにはともあれテーマでウィジェットを使えないと元も子もないのでまずはテーマでウィジェットを使用できるようにします。以下のコードをfunctions.phpに追加します。

<?php
     $args = array(
          'name' => __('Side Widget'),
          'id' => 'side-widget',
          'before_widget' => '<div>',
          'after_widget' => '</div>',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     );
     register_sidebar( $args );
?>

これでウィジェットが対応するようになります。ここではいくつかパラメータを指定してあります。各パラメータは以下になります。

name

ウィジェットの名前です。これを指定するとここに表示されます。

id

サイドバーのidです。ウィジェットを表示させる時に表示させたいidを指定します。

befor_widget

ウィジェットの前に入れるテキストです。ここでは<div>を指定してあります。

after_widget

ウィジェットの後に入れるテキストです。上記のbefor_widgetで<div>を指定してるのでここでは</div>を指定します、これで各ウィジェットはdivで括られるようになります。

befor_title

各ウィジェットのタイトル前に入れるテキストです。ここでは<h3>を指定してます。

after_title

各ウィジェットのタイトル後に入れるテキストです。ここでは</h3>を指定しているので各ウィジェットのタイトルは<h3>で括られます。

これ以外にもまだパラメータはあるのでもっと知りたい場合はCodexが参考になります。

関数リファレンス/register sidebar – WordPress Codex 日本語版

そしてウィジェットを表示させたい場所に以下のコードを追加します。ここではサイドバーに記述してみます。

<?php dynamic_sidebar( 'side-widget' ); ?>

これで管理画面から好きなウィジェットをドラッグ&ドロップで配置することができます。

検索フォームを入れてみる

試しに「検索」をウィジェットに追加してみます。表示するとこんな感じになりました。

検索っていう文字がいらないかなと思ったのでこれを消してみようかと思います。ウィジェットを使わないで直接記述すれば済むことなのですが、せっかくウィジェットがあるしいつでも簡単に配置なんかも変えれるっていうのも魅力的なのでコアファイル側をカスタマイズしようかと思います。ただしコアファイルを直接編集するとアップデート時にまた修正する必要がでる可能性があるため、アクションフックを使って変更させます。この検索フォームのコードは wp-includes/general-template.php 内のget_search_formに記述されています。WordPress 3.2.1では150行目にありました。見てみると以下のように設定されています。

function get_search_form($echo = true) {
     do_action( 'get_search_form' );

     $search_form_template = locate_template('searchform.php');
     if ( '' != $search_form_template ) {
          require($search_form_template);
          return;
     }

     $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>';

     if ( $echo )
          echo apply_filters('get_search_form', $form);
     else
          return apply_filters('get_search_form', $form);
}

この中の$formという変数にフォームを出力するタグが格納されているのでこれを変更すればよさそうです。とりあえずlabelがいらないのでこれとついでにdivも削減してみます。以下のコードをfunctions.phpに追加します。

function my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </form>';
    return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

これでブラウザで確認してみるとこんな感じになりました。