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. Last Updated Shortcode

    WordPress

    最後に更新された日付時間をショートコードで表示できるWordPressプラグイン「Last Upda…

    WordPressの記事内に最後に更新した日付時間を表示できるWord…

  3. WordPress

    ブログ投稿を更新したら自動でツイートしてくれるWordPressプラグイン「WordTwit」を使っ…

    なんというか、毎回些細なこととはいえブログを更新する度に手動でツイート…

  4. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

  5. WordPress

    Google XML SitemapsプラグインでWordPressにサイトマップ作成

    WordPressにはロボット向けのXMLサイトマップを自動生成してく…

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

    WordPress

    WordPressの投稿画面タイトル欄に文字をペーストすると下にズレるのを直すやり方

    かなりどうでもいい内容なんですが、ちょっと個人的に気になってたので備忘…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP