今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加してみましたのでそちらのやり方をメモしていきたいと思います。なぜ、プロフィールを追加したのかは一番下にでも書いておきますので興味があれば。
プロフィールを追加するにあたってsidebar.phpのファイルを編集します。子テーマ側のにコピーして作成しておくのがいいと思います。
【STINGER5カスタマイズ】プロフィールをサイドバーに入れる
サイドバーに関してはデフォルトは上からAdSenseの広告枠・RSS・検索BOX・NEW POST・・・のような形になっているかと思います。今回は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> 購読する</a> </div>
<!-- RSSボタンここまで -->ちょうどRSSボタンの上の部分にコードを書けばいいだけですね。ということでコードとにらめっこをしながら今回は下記のようなコードを入れてみました。
<h4 class="menu_underh2">このブログを書いている人</h4> <div id="kanren"><div> <dl class="clearfix"> <dt><img src="ここに画像のURL" ></dt> <dd><h5> ここに名前</h5> <p>ここは簡単なコメント<br><a href="固定ページへのリンク" >→プロフィール</a></p></dd> </dl> </div></div>
特に難しいことは有りませんね。今回は、新着記事と同じ形式の見せ方をしたかったので下記のことを考えてコードを書いています。
- サイドバーのタイトルにはh4の「"menu_underh2"」のクラスを設定
- 名前の部分は記事名と同じ「h5」を設定
- 抜粋文の部分は<p>で囲んであげる
- imgに関してはaside部分は別途設定をしてある模様だったのでそのまま
そうするとこのような形の見た目になります。asideでサイドバー自体を定義していてくれているみたいだったので結構簡単にできますね。
上と下で合わせてみてもらうと分かりますが、しっかりと「NEW POST」の部分と同じ見た目になっているかと思います。一安心です。
大本のコードを見ているとちょうど抜粋文に当たる部分には「smanone」というスマホだけ非表示のclassがあたっています。これは、スマホで見た時に「タイトル」と「抜粋」が来ると間延びしてしまうために非表示にしているようでしたが、今回は文字数が不変でボリュームの調整ができるので削除しています。
プロフィールを入れた理由
何回か書いているかもしれませんが、今後の世の中を考えると個人がメディア化、ブランド化していかないとこのコモディティ化する世の中じゃ仕事がなくなる、色々辛い事になりそうという個人的な考えがあるので
- 読者への安心感が増す
- 個人のブランド力強化
という意味で今回はプロフィール欄の追加と、サイト・筆者紹介ページをざっくし作りました。
あんまし、深く考えてないよって人に関しても、個人のパーソルな部分を晒すことによってファンが付く可能性もあるのであったほうが良い要素かなと。顔が見えない人が書いているよりも、顔が見える人が書いていたほうが信頼感・安心感があるでしょ。
てな感じで。
