賢威(WordPress)サイドバーのテキストウィジェットにIDを振る

公開日: 2014年06月11日
最終更新日: 2014年07月07日

IDを振る

賢威などのWordpressテーマで、サイドバーのテキストウィジェットに個別のIDを指定する方法。基本的には賢威の場合でのやり方として進めていきますが、他のテーマでも応用できると思います。私自身あまり理解していないので、解説というよりは忘備録的記事。

はじめに

現在、inosh blogのサイドバーに設置しているサイト内検索の見出しには、以下のように背景を設定しています。

サイト内検索の背景の画像

そして、最近TwitterのタイムラインやFacebookのLike BOXなどを設置してみたのですが、サイト内検索と同じ虫眼鏡の背景が表示されてしまいました。

サイドバーの各見出しの背景の画像

あれ?と思って確認してみたところ、CSSに以下のように記述していたんですね。

mystyle.css

.widget_text h3 {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/search_h3.png) left center no-repeat;
}

クラス名「.widget_text」は、全てのテキストウィジェットに振られていました。

なので、「最近の投稿」や「カテゴリー」には設定されていませんが、Wordpress管理画面の「外観 > ウィジェット > テキスト」を追加した場合、全ての見出しに虫眼鏡が表示されるようになってしまっていたわけです。

そしてTwitterタイムラインやLike Boxには個別に違う背景画像を設定しようとソースを確認したのですが、どのテキストウィジェットも個別のIDやクラスが振られていないことに気付きました。

ということで、それぞれ個別にCSSを適用させることが出来るようにするため、functions.phpにちょっとコードを追記することで、Wordpress側で自動的にIDやクラス名を振ってくれるようにしました。

functions.phpにid=”%1$s”を追記する

賢威のfunctions.phpの場合だと、以下の部分に「id=”%1$s”」を追加します。

functions.php

function keni_widgets_init() {
	register_sidebar( array(
		'name' => __( 'サイドバー' ),
		'id' => 'sidebar',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

下矢印

functions.php

function keni_widgets_init() {
	register_sidebar( array(
		'name' => __( 'サイドバー' ),
		'id' => 'sidebar',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

こうすることで、テキストウィジェット部分の吐き出されるコードが以下のように変わるはずです。

<div class="contents widget-conts widget_text"><h3>サイト内検索</h3>

下矢印

<div id="text-2" class="contents widget-conts widget_text"><h3>サイト内検索</h3>

text-2というIDが付けられました。

Twitterのタイムライン部分のテキストウィジェットや、Like Box部分のテキストウィジェットにも、text-3やtext-4といったIDが振られましたので、これでそれぞれ個別にスタイルを適用させることが可能になります。

ちなみに私が使用しているテーマは賢威6.1のコーポレート版なので、バージョンが異なれば同じ賢威でも少し違う部分もあるかもしれません。

賢威以外の他テーマの場合も、functions.phpの中を「register_sidebar」などで検索し、「before_widget」と書かれた部分のイコールのdivの中に「id=”%1$s”」を記述することで、Wordpressが勝手にIDを振ってくれるはずです。

この記事は忘備録的要素が強く、またfunctions.phpという大事なファイルを編集する作業なので、もしもご参考いただく際は必ずバックアップを取った上でやる&自己責任にてよろしくお願い致します…。。。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む