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 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

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

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

    WordPress

    WordPress投稿画面からTwitterの好きなツイートを簡単に埋め込むことができるやり方

    WordPressの投稿画面でTwitterのツイートを簡単に埋め込む…

  3. WordPress

    WordPressのheader.php内でよく使いそうな関数などをまとめてみた

    WordPressで自作のテーマを作成する時にheader.phpでよ…

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

    WordPress

    WordPressで現在のページのタグ名を出力するにはsingle_tag_titleを使う

    先日「WordPressで現在のページのカテゴリー名を出力するにはsi…

  5. WordPressの自動バックグラウンド更新

    WordPress

    WordPressで複数のウィジェットを表示させるやり方

    WordPressのウィジェットってとても便利ですよね。ドラッグ&ドロ…

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

    WordPress

    the_tagsを使ってWordPressの投稿タグを表示させたり表示形式を替えたりしてみる

    WordPressで各記事につけた投稿タグを表示させたい場合にはthe…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP