WordPress サイドバー 追従 プラグインなし

スクロールすると、サイドバーに設置された広告などのコンテンツが追従してくるページをよく見かけます。
やはり、固定されているコンテンツより常にビュー上にあるコンテンツの方が
クリック率はよくなるので、設置しているブログは多いです。

今回は、これをプラグインなしで設置する方法を説明しいます。
プラグインでも簡単に設置できるので、今回の方法が難しく感じる方はプラグインで実現してください。

XXXXXX（プラグインの記事を追加次第リンクを追加します）

今回は、PHP、CSS（少し）とJavaScript（jQuery）を利用します。
以下のサイトを参考に、賢威6.1用にアレンジしています。
ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法 | TechMemo

JavaScript（jQuery）で追従コードを追加

JavaScriptを使用して、追従用のコードを追加します。
プログラムを追加しますが、ボリュームが多いため別ファイルでアップロードします。
賢威用のファイルをリンクしていますので、ダウンロードして利用してください。

賢威用JavaScriptファイルをダウンロードする

ファイル内のコードは以下のとおりです。

(function() {
	$(function() {
		var fix = $('#side-ad'), //固定したいコンテンツ
		side = $('#sidebar'), //サイドバーのID
		main = $('#main-and-sub'), //固定する要素を収める範囲
		sideTop = side.offset().top;
		fixTop = fix.offset().top,
		mainTop = main.offset().top,
		w = $(window);

		var adjust = function() {
			fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop;
			var fixHeight = fix.outerHeight(true),
			mainHeight = main.outerHeight(),
			winTop = w.scrollTop();
			if(winTop + fixHeight > mainTop + mainHeight) {
				fix.css({
					position: 'absolute',
					top: mainHeight - fixHeight
				});
			} else if(winTop >= fixTop) {
				fix.css({
					position: 'fixed',
					top: 0
				});
			} else {
				fix.css('position', 'static');
			}
		}
		w.on('scroll', adjust);
	});
})(jQuery);

JavaScriptをアップロードする

ダウンロードしたファイルを、解凍してください。
解凍すると、「side-scroll.js」ファイルができあがります。

このファイルを、サーバーの賢威JavaScriptフォルダへ入れます。
当サイトだと、「/wp-content/themes/keni61_wp_cool_131113/js」です。
テーマフォルダの中に賢威フォルダがあり、その中に「js」フォルダがあります。

画像のように、FFFTPなどでファイルをアップロードしてください。

PHP、CSSの編集

次に、PHPとCSSを追加します。
ここからは、それほど難しくありません。

フッターにJavaScriptの呼び出しを追加

まずは、フッターに先ほど追加したJavaScriptの呼び出しと、「jQuery」の呼び出しを追加します。

「外観 > テーマ編集」から「footer.php」を開きます。
そこに以下のコードを追加します、追加部分はソーシャルボタンのJavaScript下でOKです。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/socialButton.js" charset="utf-8"></script>
<!--▼▼▼追加部分-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/side-scroll.js" charset="utf-8"></script>
<!--▲▲▲追加部分-->

3行目が「jQuery」を利用するためのGoogleAjax呼び出し部（おまじない）、
4行目が先ほどアップロードしたJavaScriptファイルの呼び出し部です。

ウィジェット呼び出し用のショートコードを追加

ウィジェットから追随用サイドバーコンテンツを追加するにあたり、
レスポンシブデザインにも対応させる必要があります。

レスポンシブデザインの場合、表示は1カラムのようになり
サイドバーの追随は不要なので、その場合は固定表示にします。

その時、ウィジェットにPHPを追加したいのですが、
PHP追加用のプラグインである「Exec-PHP」は利用しません。
セキュリティホールを作っているようなものだからです、詳しくは以下をご覧ください。
Exec-PHP使いは要注意！メリット＜デメリット | アンドウェブ

そこで、ショートコードを追加してウィジェットに設定します。
「外観 > テーマ編集」から「functions.php」を開きます。
1番下に以下のコードを追加します。

// ▼▼▼テキストウィジェットでのショートコード使用可
add_filter('widget_text', 'do_shortcode');
// ▲▲▲テキストウィジェットでのショートコード使用可

// ▼▼▼サイドバー追随のショートコード
function sidebar_scroll($atts, $content = null) {
	$ret_cd = "";
	if (the_keni('mobile_layout') == "y") {
		if (wp_is_mobile()) {
			$ret_cd = "<div class=\"al-c\">" . $content . "</div>";
		} else {
			$ret_cd = "<div id=\"side-ad\" class=\"al-c\">" . $content . "</div>";
		}
	} else {
			$ret_cd = "<div id=\"side-ad\" class=\"al-c\">" . $content . "</div>";
	}
	
	return $ret_cd;
}
add_shortcode('ss', 'sidebar_scroll');
// ▲▲▲サイドバー追随のショートコード

これで、サイドバー追随用のショートコードが完成しました。
「[ss][/ss]」で囲むことで、ショートコードを呼び出せます。

CSSにサイドバーの相対位置指定を追加

次に、CSSにサイドバーの相対位置指定を追加します。
難しそうに聞こえますが、追加は3行だけです。

「外観 > テーマ編集」から「design.css」を開きます。
サイドバーのスタイルが集まっている部分があるので、以下のスタイルを追加します。
わからない場合は、1番下に追加してもOKです。

#sidebar{
	position: relative;
}

これで準備は完了です。

ウィジェットでサイドバーの追従コンテンツを追加

最後に、追従させるサイドバーのコンテンツを追加します。
「外観 > ウィジェット」から「サイドバー」に追加します。

先ほど追加したショートコードを利用して、コンテンツを囲みます。

[ss]
<a href="http://www.dicetower.net/keni-rev/" title="賢威レビュー" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/keni-banner.jpg" alt="賢威レビュー" width="270" height="270" class="alignnone size-full" /></a>
[/ss]

2行目が実際に表示するコンテンツとなります。
これにより、通常の表示では追従。レスポンシブデザインでのスマホ表示は固定となります。
また、レスポンシブデザインを無効にした場合も追従するようになっています。

実際に出力されるHTML

通常表示では、HTMLは以下のように出力されます。

<div id="side-ad" class="al-c">
<a href="http://www.dicetower.net/keni-rev/" title="賢威レビュー" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/keni-banner.jpg" alt="賢威レビュー" width="270" height="270" class="alignnone size-full" /></a>
</div>

レスポンシブデザインが有効時のスマホでは、HTMLは以下のように出力されます。
追従用の「id」が消え、中央表示の「class」のみが出力されます。

<div class="al-c">
<a href="http://www.dicetower.net/keni-rev/" title="賢威レビュー" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/keni-banner.jpg" alt="賢威レビュー" width="270" height="270" class="alignnone size-full" /></a>
</div>

以上で追加は完了です。
フッター手前でしっかり止まるので、フッターが長いブログでぜひ試してみてください。