投稿者: axia

当サイトを作るうえでかなりの部分を『妻と僕。』さんのサイトを参考にさせてもらった。

なかでも感心したのは

レスポンシブ対応！幅が比率指定のサイドバーを下端で追従させる方法－WordPress（Twenty Seventeen）

であった。

当サイトの記事ページをスクロールするとサイドバーがいっしょについてくると思うが、その機能を実現させる方法が簡潔にまとまっている。

いたく感心した私は、

これ、他のページにも使えない？

とよからぬことを思い、ちょっと試してみた。（よせばいいのに…）

どうやって、この機能を実現しているか細かいところまでは読み取れない私は、それでも無い知恵をしぼってコードを眺めていた。

下記コードをコピーして、header.phpのheadタグ内にある＜?php wp_head(); ?＞の下へ貼り付けます。

ふむ。

<?php if ( is_single() ) : ?>
<script>
jQuery(window).on( "load scroll resize" , function(){
	//画面幅の取得とサイドバー有無の境界幅を入力
	var w = window.innerWidth /*スクロールバー込みの画面幅*/ 
	var x = 768; /*サイドバー有無の境界幅*/
	//サイドバーがある場合に適用
	if (w >= x) {
		//各要素の高さを取得 
		var windowH = jQuery(window).height(); /*表示画面の高さ*/ 
		var pageH = jQuery('#page').height(); /*表示ページの高さ*/ 
		var headerH = jQuery('#masthead').outerHeight( true ); /*ヘッダーの高さ*/ 
		var mainH = jQuery('#primary').outerHeight( true ); /*記事の高さ*/ 
		var sideH = jQuery('#secondary-child').outerHeight( true ); /*サイドバーの高さ*/ 
		var footerH = jQuery('#colophon').outerHeight( true ); /*フッターの高さ*/ 
		var paddingH = jQuery('#content').outerHeight( true ) - jQuery('#content').height(); /*余白の高さ*/ 
		//サイドバーの固定と解除条件を計算 
		var viewSide = headerH + paddingH + sideH ; /*ページトップからサイドバー下端までの高さ*/ 
		var fixedSide = viewSide - windowH ; /*サイドバーを固定するスクロール高さ*/ 
		var scrollBottom = pageH - windowH - footerH ; /*フッターが画面に表示されるスクロール高さ*/ 
		//スクロール値を取得 
		var scrollTop = jQuery(this).scrollTop();
		//記事がサイドバーより長い場合に適用
		if( mainH > sideH ) {
			//サイドバー下端までスクロールしたらサイドバー下端で追従
			if( scrollTop > fixedSide ) {
				jQuery('#secondary-child').addClass('fixed-side'); /*サイドバー固定のクラス付与*/ 
				//サイドバー固定時のサイドバー幅を計算
				var secondaryW = jQuery( "#wrap" ).width() - jQuery( "#primary" ).outerWidth( true );
				jQuery( "#secondary-child" ).css('width', ''); /*サイドバー幅リセット*/
				jQuery( "#secondary-child" ).css( "width" , secondaryW ); /*計算したサイドバー幅を付与*/
			}else{
				//条件から外れたら固定クラスを削除し幅をリセット
				jQuery('#secondary-child').removeClass('fixed-side'); /*サイドバー固定のクラス削除*/
				jQuery( "#secondary-child" ).css('width', ''); /*サイドバー幅リセット*/
			}
			//フッターまでスクロールしたらサイドバー下端をフッター上端に連結
			if( scrollTop > scrollBottom){
				jQuery('#secondary-child').removeClass('fixed-side');
				jQuery('#secondary-child').addClass('bottom-side');
			}else{
				//条件から外れたらクラスを削除
				jQuery('#secondary-child').removeClass('bottom-side');
			}
		}
	} else {
		//サイドバーがない場合に適用
		jQuery( "#secondary-child" ).css('width', ''); /*サイドバー幅リセット*/
	}
});
</script>
<?php endif; ?>

もちろん、このロジックは追えない。
だが、先頭の php if ( is_single() ) から察するに、これは「これから表示するコンテンツが single なら、script 以下のコードを実行せよ」ということをやっているのだろうと推論した。いや、そうに違いない。女の感だ。

ならば、例えば、アーカイブページでこの機能を実現したいならば、

php if ( is_single() || is_archive() )

というズルをすればなんとかなるのではと考えた。

果たして…

この状態から

スクロールすると…

ごくり…

動いたっーーー！！

が､なぜか文字が縦………。

秋葉ちゃん

ぷ

axia

ｺﾉﾔﾛ

どこを直していいかわからないので妻僕。さんに聞きにいく（詳細はそちらのコメント欄参照）。

「今のままでは、サイドバーの幅 = 0 になっているので、 archive.php にも手を入れ、id を付与しなさい」

というようなことを言われる。

すると…

おおー、できました。

さすが、本家。

ついでに is_search() も効かせるようにしました。

AXIA