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

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

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

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

関連記事

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

    WordPress

    WordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方

    WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分…

  2. WordPress

    WordPressのクイックドラフト機能を使ってみた

    そういえば、WordPress 3.8になってから新しくなったクイック…

  3. WordPress

    WordPressのシングルページで前後の投稿やページ分割のリンクを出力

    WordPressのシングルページで記事の最後に「前の投稿」や「次の投…

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

    WordPress

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

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

  5. WordPressアップデートでアイコンが表示されない時の対処方法

    WordPress

    WordPress 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

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

コメント

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

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

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP