当サイトを作るうえでかなりの部分を『妻と僕。』さんのサイトを参考にさせてもらった。
なかでも感心したのは
レスポンシブ対応！幅が比率指定のサイドバーを下端で追従させる方法－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() )
というズルをすればなんとかなるのではと考えた。
果たして…
この状態から
スクロールすると…
ごくり…
動いたっーーー！！
が､なぜか文字が縦………。
どこを直していいかわからないので妻僕。さんに聞きにいく（詳細はそちらのコメント欄参照）。
「今のままでは、サイドバーの幅 = 0 になっているので、 archive.php にも手を入れ、id を付与しなさい」
というようなことを言われる。
すると…
おおー、できました。
さすが、本家。
ついでに is_search() も効かせるようにしました。
AXIA
