AFFINGER3にしてからサイドバーはそのままだったので、ちょっといじってみました。
今回の記事で参考になりそうな項目は
・RSS購読ボタンの位置を変更する。
・Amazonアフィリエイトの商品リンクを横並びに表示させる。
ぐらいでしょうか。
基本はウィジェットページでテキストにコード打ち込んで挿入してます。
RSS購読ボタンの位置を変更してみた
RSSボタンがちょっと中途半端な位置にあったので、移動しました。
今回説明するのは、RSSボタンをサイドバーの最上部にもってくる方法です。
他の場所に移動したい場合も参考になると思います。
まず【AFFINGER3】子テーマを使って、トップの記事一覧に広告(Adsense)を入れてみる。設定方法を画像で解説！を参考に、
sidebar.phpのファイルをaffinger3childにコピーします。
真ん中らへんにRSSボタンですの注記がありまして、これがRSSボタンのコードです。
|
1 2 3 4 5 6 |
<?php if ( $GLOBALS["stdata16"] === '' ) { ?> <!-- RSSボタンです --> <div class="rssbox"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> 購読する</a></div> <!-- RSSボタンここまで --> <?php } ?> |
上の範囲がRSSボタンのコードなので、これを選択⇒切り取ります。
※他の場所に挿入したい場合は、このコードを任意の箇所に貼り付ければオッケーです。
次に少し上にいってもらって、上図の位置に先ほど切り取ったRSSボタンのコードを貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="side"> <aside> <?php if ( $GLOBALS["stdata16"] === '' ) { ?> <!-- RSSボタンです --> <div class="rssbox"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> 購読する</a></div> <!-- RSSボタンここまで --> <?php } ?> <?php if ( is_404() ) { ?> <?php } else { ?> <div class="ad"> <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : //アドセンス ?> <?php endif; ?> |
こんな感じになると思います。
RSSボタンの移動はこれで完了です。
Amazonアフィリエイトの商品リンクを横並びに表示させる方法
普通にコードだけ順番に貼り付けていくと縦並びになっちゃうので、そこで頭を悩ませている方が多いかもしれません。
これに関してはカンタンで
|
1 2 3 4 5 6 7 |
<div style="float:left;padding-right:10px;"> アフィリエイト </div> <div style="float:left;padding-right:10px;"> アフィリエイト </div> <div style="clear:both;"></div> |
今回つかったのはこのコード。
横方向に並べ、かつ商品リンクの間を10px空けるように指示してあります。
ちなみに
|
1 2 3 |
<div style="float:left;padding-right:10px;"> アフィリエイト </div> |
このコードを追加すれば、どんどん右側に追加できるのでいくつも横に並べていけます。
ただし、AFFINGER3のサイドバーではサイズオーバーになるので2つまでですね。
コードの10pxの部分の数字を変更すれば、商品リンクの間の広さも自由に変更できます。
これはAmazonに限らずどんなコードでも応用ききますので、様々な場面で使えるコードですね。
なおろぐのサイドバー
このように並べてみました。
SNSの項目については
[STINGER5]サイドメニューにウィジェットでツイートを表示させてみよう！
この記事を参考にできると思います。
そうそう、先日記事にしたカテゴリー整理は一応完了しましたが、案の定Batch Catで一括整理しちゃいました・・・