SANGOのウィジェットに画像を追加する!ウィジェットのカスタマイズ方法!

見出し ウィジェット

この記事では、下記のことができるようになります。

できるようになること

  • ウィジェットに画像を追加できます。
  • ウィジェットのデザインを変更できます。

after

見出し ウィジェット

注意
この記事ではstyle.cssと親テーマのfunction.phpを修正します。

特にfunction.phpの修正は失敗するとページが真っ白になる可能性があります。

必ずバックアップを取得するようにお願い致します。

また、今回の修正は親テーマへの修正となるため、SANGO自体のバージョンアップの際に上書きされる可能性のあるものです。

1. 親テーマSANGOのfunction.phpを修正

まずは、ウィジェットに画像を追加するために、ウィジェット生成のhtmlに追記します。

親テーマSANGOのfunction.phpで「サイドバー/ウィジェットの登録」を検索します。

そして、register_sidebar内の下記の部分を書き換えます。

変更前
'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h4 class="widgettitle dfont has-fa-before">',
 'after_title' => '</h4>',
変更後
'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<div class="widgetimg"></div><h4 class="widgettitle dfont has-fa-before">',
 'after_title' => '</h4>',

親テーマSANGOのfunction.phpに対して、<div class="widgetimg"></div>こちらを追加します。

そうすることで、ウィジェット作成時にHTMLを追加して出力してくれるようになります。

2. style.cssに追加する

ここからは、子テーマで対応していきましょう。

まずは、FontAwesomeを消します。

style.css
.sidebar .my_popular_posts .widgettitle:before {
	content: "";
}

.sidebar .widget_archive .widgettitle:before {
    content: "";
}

.sidebar .widget_recent_entries .widgettitle:before {
	content: "";
}

.sidebar .widget_tag_cloud .widgettitle:before {
    content: "";
}

.sidebar .widget_categories .widgettitle:before {
    content: "";
}

content: "";でcontentの中身を空に上書きすることで、FontAwesomeのアイコンがすべて消えます。

続いて、画像の追加です。

style.css
.sidebar .my_popular_posts .widgetimg { //人気記事
	background-image:url("../../uploads/YYYY/MM/ファイル名.png"); //画像のパス
	width:60px;
	height:60px;
	float:left;
	background-size:cover;
}

.sidebar .widget_recent_entries .widgetimg { //最近の記事
	background-image:url("../../uploads/YYYY/MM/ファイル名.png"); //画像のパス
	width:60px;
	height:60px;
	float:left;
	background-size:cover;
}

.sidebar .widget_categories .widgetimg { //カテゴリー
	background-image:url("../../uploads/YYYY/MM/ファイル名.png"); //画像のパス
	width:60px;
	height:60px;
	float:left;
	background-size:cover;
}

.sidebar .widget_tag_cloud .widgetimg { //タグ
	background-image:url("../../uploads/YYYY/MM/ファイル名.png"); //画像のパス
	width:60px;
	height:60px;
	float:left;
	background-size:cover;
}

人気記事等のウィジェットにはそれぞれCSSクラスが付与されています。

それぞれに対して、ファイルのパスを追加してあげることで、表示可能です。

注意として、ファイルのパスは、絶対パスになっています。

下記のメディアライブラリから、upload/ 以降の部分を取得して書き換えてください。

見出し ウィジェット

下記修正もウィジェットに対して入れています。

style.css
.widget {
	border-radius: 5px; // ウィジェットの角を丸くする
}

.widgettitle {
	background: #eaedf2 !important; //ウィジェットタイトルは覚えておきたいのでCSSで背景色を消す
	border-bottom: 3px dotted #c0c0c0; // 点線を追加してみる
}

3. まとめ

CSSを修正したらキャッシュを削除するか、「Ctrl + F5」でスーパーリロードをしてください。

今回の修正は、親テーマを修正するものであるため、親テーマのアップデートによって消える可能性があります。

その際は、再度この記事を見ながら適用してみてください。