WordPress

テーマに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
ウィジェットの名前です。これを指定するとここに表示されます。
ウィジェット name
id
サイドバーのidです。ウィジェットを表示させる時に表示させたいidを指定します。
befor_widget
ウィジェットの前に入れるテキストです。ここでは<div>を指定してあります。
after_widget
ウィジェットの後に入れるテキストです。上記のbefor_widgetで<div>を指定してるのでここでは</div>を指定します、これで各ウィジェットはdivで括られるようになります。
befor_title
各ウィジェットのタイトル前に入れるテキストです。ここでは<h3>を指定してます。
after_title
各ウィジェットのタイトル後に入れるテキストです。ここでは</h3>を指定しているので各ウィジェットのタイトルは<h3>で括られます。

これ以外にもまだパラメータはあるのでもっと知りたい場合は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' );

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

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

無事、ラベルの「検索」を削減することができました。ウィジェットは便利なんですけど一つ一つ細かい調整を施したい場合はちょっとめんどくさい部分があります。ですが最初に一回調整しておけば後々管理も楽になるかと思うのでやっておいて損はないかと思います。

WordPressの抜粋を表示させるthe_excerpt()の使い方やそのカスタマイズなど色々前のページ

WordPressのシングルページで前後の記事リンクを条件判定で出力するやり方次のページ

関連記事

  1. WordPressでパンくずリストを設置

    WordPress

    WordPressでパンくずリストをプラグインなしで設置する簡単なやり方

    WordPressでパンくずリストをWebサイトに設置したいといった時…

  2. WordPressのログイン時のツールバー

    WordPress

    WordPressをサーバーにインストールした後にやっておきたい手順リスト

    WordPressをサーバーにインストールした後にやっておきたい手順リ…

  3. WordPress

    指定した親ページの子ページを取得してみる

    前回、「WordPressで指定した固定ページを読み込む方法」を書いた…

  4. WordPress

    WordPressで指定した固定ページを読み込む方法

    WordPressで例えばトップページに自分の指定した固定ページを読み…

  5. WordPressのログイン時のツールバー

    WordPress

    WordPressで記事タイトルの文字数制限をするやり方

    WordPressで記事タイトルの文字数制限をするやり方をメモしときま…

コメント

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

  1. この記事へのトラックバックはありません。

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP