はぴすぷ

【STINGER5】サイドバーにプロフィール追加【WordPress】

      2015/09/22

ブログなら大抵ついているプロフィール欄なんですが、WordPressはついてないんですね(´・ω・｀)

いや、選んだテーマのSTINGER5にないだけかもしれませんが、あった方が個人ブログって感じがするので追加することにしました。

テーマ選定の時に参考にさせてもらったガジェニューさんが、まさにいい感じの記事を書いていてくれていました。
【STINGER5カスタマイズ】サイドバーにプロフィール設置

関連記事の要素をコピってきて文字を置き換えてる感じですね。

やりたいことはほぼ同じなので似たような感じで実装します。

今回はAdSense枠とRSS枠の間に差し込むので、サイドバーから、対象の場所を探します。以下の場所ですね。

サイドバー (sidebar.php)

  <div class="ad">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : //アドセンス ?>
    <?php endif; ?>
  </div>
<?php } ?>

  <!-- ここに追加 -->

  <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>

 

ここに以下を追記します。

<!-- プロフィール -->
<div id="side-profile">
  <h4 class="menu_underh2"> プロフィール</h4>
  <dl class="clearfix">
    <dt><img src="画像のURL" ></dt>
    <dd>
      <h5>名前</h5>
      <p>内容</p>
    </dd>
  </dl>
  <p>連絡先：<a href="mailto:アドレス">アドレス</a></p>
</div>

今後スタイル変えるつもりなので、idをside-profileにしています。

新着記事のグループのidもkanrenになってて、同じスタイルが当たってるようですが、idはユニークなものなので、classに置き換えたい。

けど影響範囲でかそうなので一旦は放置。

なので、#kanrenに当ってるスタイルが適用されないので、#kanrenから一部コピーして#side-profile用に好きにいじります。

スタイルシート (style.css)

/* プロフィール */
#side-profile dl {
	margin-bottom: 10px;
}
#side-profile dt {
	float: left;
	width: 100px;
}
#side-profile dt img {
	width: 100px;
}
#side-profile dd {
	padding-left: 110px;
}
#side-profile dd h5 {
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}
#side-profile p {
	font-size: 13px;
	color: #666;
	line-height: 18px;
}

 

これでこんな感じになります。

SS_0316

これでだいぶ個人ブログっぽくなった気がする！

ヘッダーとサイドバーをもっといじくって個性出していきたいな(o・ω・o)

 - STINGER, WordPress