HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ウィジェットのタイトルをカスタマイズするには

ウィジェットのタイトルをカスタマイズするにはどうしたら?
使っているテーマのサイドバーのウィジェットのタイトルがプレーンの状態。

あまりにも見栄えしないのでこれをカスタマイズしたいと思ったわけ。
でも sidebar.php とかにもないし、どこだろう?って探した結果。

灯台下暗し。 function.php で定義できちゃうんですね?(笑)
※サイドバー全体の設定は sidebar.php でカスタマイズ可能。

逆にいじってるテーマの場合も function.php で定義しちゃいます。

これを追加しちゃう。いじってるテーマの場合は、ここを探す。
if ( function_exists('register_sidebar') )
  register_sidebar(array(
  'before_widget' => '<div class="widget">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widget_title">',
  'after_title' => '</h2>',
  ));

見てわかるように、ボディ部分の前後、タイトル部分の前後にタグとかを設定できる仕組み。

あとは style.css にでもクラスを定義してあげたりとかすればいいわけ。
簡単でした(笑)


※覚え書き(美容テーマのウィジェットタイトル)
function.php
if (function_exists('register_sidebar')) {

    register_sidebar(array(
        'name' => 'サイド1',
        'before_widget' => '',
        'after_widget' => '<div>&nbsp;</div>',
        'before_title' => '<div class="wiget_title_bar"><div class="wiget_title">',
        'after_title' => '</div><div class="wiget_title_tail"></div><br clear="all"><div style="clear:both;"></div></div>'
    ));

style.css
/* --- wiget title style --- */
.wiget_title_bar{
border-top:5px solid #79C172;
}
.wiget_title{
padding:0 10px;
background-color:#79C172;
color:#fff;
float:left;
}
.wiget_title_tail{
	width: 0px;
	height: 0px;
	border-top: 0.7em solid #79C172;
	border-right: 0.7em solid transparent;
	border-bottom: 0.7em solid transparent;
	border-left: 0.7em solid #79C172;
float:left;
}

こんな感じになる。
2017y03m17d_155756441



スポンサーリンク

スポンサーリンク

カテゴリー