賢威のサイドバーをカスタマイズする

公開日: 2014年02月04日
最終更新日: 2014年07月08日

サイドバー

今回は、inosh blogに使用しているテーマ「賢威」のサイドバーをカスタマイズしていく様子をご紹介します。カテゴリー横に表示される投稿数(記事数)をaタグの中に入れてspanタグを挿入したり、見出しやliリストのカスタマイズなど。

もくじ

はじめに

今回は、賢威のサイドバーをカスタマイズしたいと思います。

現在のサイドバーはこのような状態↓
賢威のサイドバー

それでは、カスタマイズスタートです。

カテゴリー横の投稿数(記事数)をaタグの中に入れてspanタグを挿入

WordPressの標準機能である「ウィジェット」を使用してサイドバーにカテゴリーを表示させた場合、記事の投稿数を表示させることが出来ますよね。

サイドバーのカテゴリーに投稿数を表示

しかし、デフォルトのままだと、ここをCSSで装飾することは出来ません。

吐き出されるHTMLコードは、以下のようになっています。

カテゴリー部分のHTMLコード(デフォルト)

<div class="contents widget-conts widget_categories">
<h3>カテゴリー</h3>
<ul>

<li class="cat-item cat-item-3"><a href="http://inosh.jp/category/wordpress/" title="WordPressに関するカテゴリーです。WordPress、php、プラグインなどの記事を投稿しています。当ブログ内で最も記事投稿が多いカテゴリーになっています。">WordPress</a> (7)
<ul class='children'>
<li class="cat-item cat-item-2"><a href="http://inosh.jp/category/wordpress/inoshblog-customize/" title="inosh blogのカスタマイズ日誌です。賢威6.1コーポレート版をインストールしたところから、カスタマイズしていく様子を記録していきます。">inosh blogのカスタマイズ日誌</a> (7)</li>
</ul>
</li>

<li class="cat-item cat-item-4"><a href="http://inosh.jp/category/html-css/" title="HTMLとスタイルシート(CSS)に関するカテゴリーです。HTML・CSSに関する記事を投稿しています。">HTML・CSS</a> (4)</li>
<li class="cat-item cat-item-9"><a href="http://inosh.jp/category/web-design/" title="Webデザインに関するカテゴリーです。Webデザインに関する記事を投稿しています。">Webデザイン</a> (3)</li>

</ul>
</div>

そのため、投稿数部分にspanタグを挿入してクラス名を振るとともに、aタグの中に入れてしまいたいと思います。また、カギカッコも不要です。

投稿数の部分だけにピックアップすると、以下のような形にカスタマイズしようと思っています。

投稿数部分のHTMLコード(デフォルト)

<a href="http://●●●" title="▲▲▲">カテゴリー名</a> (投稿数)

下矢印

投稿数部分のHTMLコード(spanタグ挿入)

<a href="http://●●●" title="▲▲▲">カテゴリー名<span class="▼▼▼">投稿数</span></a>

上記のように、投稿数をaタグの中に入れてさらにspanタグを挿入・クラス名を振るためには、テーマ内のfunctions.phpの最下部に以下のコードを追加します。(クラス名の「count」は任意の文字列でOK)

functions.php

add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
  $output = preg_replace('/<\/a>\s*\((\d+)\)/',' <span class="count">$1</span></a>',$output);
  return $output;
}

これを挿入すると、吐き出されるカテゴリー部分のHTMLコードは以下のようになります。

カテゴリー部分のHTMLコード(カスタマイズ後)

<div class="contents widget-conts widget_categories">
<h3>カテゴリー</h3>
<ul>

<li class="cat-item cat-item-3"><a href="http://inosh.jp/category/wordpress/" title="WordPressに関するカテゴリーです。WordPress、php、プラグインなどの記事を投稿しています。当ブログ内で最も記事投稿が多いカテゴリーになっています。">WordPress <span class="count">7</span></a>
<ul class='children'>
<li class="cat-item cat-item-2"><a href="http://inosh.jp/category/wordpress/inoshblog-customize/" title="inosh blogのカスタマイズ日誌です。賢威6.1コーポレート版をインストールしたところから、カスタマイズしていく様子を記録していきます。">inosh blogのカスタマイズ日誌 <span class="count">7</span></a></li>
</ul>
</li>

<li class="cat-item cat-item-4"><a href="http://inosh.jp/category/html-css/" title="HTMLとスタイルシート(CSS)に関するカテゴリーです。HTML・CSSに関する記事を投稿しています。">HTML・CSS <span class="count">4</span></a></li>
<li class="cat-item cat-item-9"><a href="http://inosh.jp/category/web-design/" title="Webデザインに関するカテゴリーです。Webデザインに関する記事を投稿しています。">Webデザイン <span class="count">3</span></a></li>

</ul>
</div>

投稿数部分がaタグに包括され、またspanタグも挿入されました。
これで、投稿数部分もCSSで自由に装飾できますし、リンクのアンカーテキストに投稿数部分が含まれます。

投稿数がアンカーテキストに含まれる

それでは、実際に装飾していきます。

サイドバーのスタイル定義

サイドバーのスタイルは、mystyle.cssに以下のように記述しました。

見出し~liタグまで段階的に記述していこうと思ったのですが、諸事情で一括して記述しますw少し長いです^^;

mystyle.css

/*************************************
	■サイドバー全体
*************************************/
.col2 #sidebar {
    margin-top:10px;
}

.sub-column .contents {
    padding:0;
    margin-bottom:2em;
}

.sub-column .contents h3 {
    font-size:18px;
    margin:0;
    padding:4px 4px 3px 26px;
    border:none;
    border-bottom:2px solid #222;
}

.sub-column .widget-conts ul {
    border-bottom:1px solid #fff;
}

/* ▼liリスト */
.sub-column .widget_recent_entries ul li,
.sub-column .widget_categories ul li {
    padding:0;
    background:none;
}

/* ▼liリストのaタグ */
.sub-column .widget_recent_entries ul li a,
.sub-column .widget_categories ul li a {
    display:block;
    text-decoration:none;
    padding:12px 10px 12px 26px;
    border-top:1px solid #fff;
    border-bottom:1px solid #ddd; 
}

/* ▼liリストのaタグのマウスオーバー */
.sub-column .widget_recent_entries ul li a:hover,
.sub-column .widget_categories ul li a:hover {
    color:#e41858;
    text-decoration:none;
    background-color:#f8f8f8;
}

/* ▼サイドバーのタイムラグ一括 */
.sub-column .widget_recent_entries ul li a,
.sub-column .widget_categories ul li a,
.sub-column .widget_categories ul li a span{
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;
}


/*************************************
	■サイドバー個別
*************************************/
/* ▼検索フォーム */
.widget_text h3 {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/search_h3.png) left center no-repeat;
    background-size:18px 18px;
}

.sub-column form {
    text-align:center;
    padding-top:1.5em;
    border-top:1px solid #fff;
}

.sub-column #cse-search-box input[type="text"]  {
    font-size:14px;
    height:22px;
    margin-right:0;
}

.sub-column #cse-search-box input[type="submit"]  {
    color:#fff;
    display:inline-block;
    overflow:hidden;
    position:relative;
    padding:5px 8px;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/arrow_wh_s.png) right bottom no-repeat #f44888;
    background-size:7px 7px;
    box-shadow:inset 0px 0px 1px rgba(255,255,255,1);
    border:1px solid #e41858;
}

.sub-column #cse-search-box input[type="submit"]:hover {
    color:#fff;
    text-decoration:none;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/arrow_wh_s.png) right bottom no-repeat #ff68a8;
    background-size:7px 7px;
}

.sub-column #cse-search-box input[type="submit"]:active {
    background-color:#ff88c8 !important;
}

.sub-column #cse-search-box input[type="submit"]:focus {
    background-color:#f44888 !important;
}

/* ▼最近の投稿 */
.widget_recent_entries h3{
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/entry_h3.png) left center no-repeat;
    background-size:18px 18px;
}

.sub-column .widget_recent_entries ul li a{
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/entry_bg.png) 8px 15px no-repeat;
    background-size:13px 13px;
}

/* ▼カテゴリー */
.widget_categories h3{
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/category_h3.png) left center no-repeat;
    background-size:17px 17px;
}

.sub-column .widget_categories ul li a {
    display:block;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/category_bg.png) 8px center no-repeat;
    background-size:13px 13px;
}

.sub-column .widget_categories ul li a span {
    color:#fff;
    text-align:center;
    padding:2px 8px;
    float:right;
    background:#222;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}

.sub-column .widget_categories ul li a:hover span {
    background:#e41858;
}

/* ▼子カテゴリー */
.sub-column .widget_categories ul li li {
    padding:0;
    border-bottom:none;
    background:none;
}

.sub-column .widget_categories ul li li a {
    padding-left:40px;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/category_bg_child.png) 12px center no-repeat;
    background-size:22px 11px;
}

.sub-column .widget_categories li ul {
    border-bottom:none;
}

細かい説明は省略しますが、この記述によりサイドバーは以下のようになりました。

カスタマイズ後のサイドバー

functions.phpへの記述でカテゴリー横の投稿数にspanタグを挿入することで、このように投稿数部分も装飾することが可能になります。

7/8追記 – 色々と変更しました

サイドバーの「最近の投稿」にアイキャッチ画像を表示、カテゴリーリストの背景(リスト画像)を消去、リンクのテキスト色の変更、TwitterのタイムラインやFacebookのいいねボックスの表示、などなどの変更を加えました。

また、Wordpressの標準機能の「ウィジェット」などを使わず、全てのコードをsidebar.phpに直接記述するような形としました。

デフォルトのsidebar.phpのバックアップを取った後に、中身を全て削除して以下のように記述しました。

sidebar.php

<dl id="sidebar" class="sub-column">
<dd id="sidebar-in">

<div id="recent-posts-2" class="contents widget-conts widget_recent_entries">
<h3>最近の投稿</h3>
<ul>
<?php $myposts = get_posts('posts_per_page=8'); foreach($myposts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(50,50) ); ?><span class="post_time"><?php the_time('y.m.d') ?></span><br /><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>

<div id="categories-2" class="contents widget-conts widget_categories">
<h3>カテゴリー</h3>
<ul class="category">
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
</div>

<div id="text-3" class="contents widget-conts widget_text">
<h3>Twitter</h3>
<div class="textwidget"><a class="twitter-timeline"  href="https://twitter.com/inosh_man"  data-widget-id="465832445212766208">@inosh_man からのツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div id="text-4" class="contents widget-conts widget_text">
<h3>Facebook</h3>
<div class="textwidget"><div class="fb-like-box" data-href="https://www.facebook.com/inosh.jp" data-width="300" data-height="220" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div></div>
</div>

</dd>
</dl>

これだけだと、トップページで不具合が出たりするので、index.phpを以下のように修正(ハイライト部分のコードの消去)しました。

index.php(デフォルト)

<!--△メインコンテンツ-->

<?php if ((!is_front_page() and the_keni('view_sub') == "y") or (is_front_page() and the_keni('view_top_sub') == "y")) : ?>
<!--▽サブコンテンツ-->
<?php include (TEMPLATEPATH . "/sub-contents.php"); ?>
<!--△サブコンテンツ-->
<?php endif ?>
</div>
<!--△メイン&サブ-->

<?php if ((!is_front_page() and the_keni('view_side') == "y") or (is_front_page() and the_keni('view_top_side') == "y")) : ?>
<!--▼サイドバー-->
<?php include (TEMPLATEPATH . "/sidebar.php"); ?>
<!--▲サイドバー-->
<?php endif ?>

</div>
<!--/main-in-->

下矢印

index.php(修正後)

<!--△メインコンテンツ-->

</div>
<!--△メイン&サブ-->

<!--▼サイドバー-->
<?php include (TEMPLATEPATH . "/sidebar.php"); ?>
<!--▲サイドバー-->

</div>
<!--/main-in-->

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

この記事へ2件のコメント

  1. 匿名
    2014年11月19日 9:36

    ちょうどカテゴリーの投稿数をspanで囲む方法を探していまいました。良い記事をありがとうございます。

    • inosh
      2014年11月19日 13:49

      コメントいただき、ありがとうございます。
      参考になりましたようで幸いです!

コメントを残す

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