■footerのスクリプト記述のバックアップ（minify化前）
■トップページのスライドショースクリプト
<?php if (!isset($_SESSION['visited1'])){
//all-css script lazyload for first-access
echo 'var link = document.createElement("link");'.
'link.setAttribute("rel", "stylesheet");'.
'link.setAttribute("type", "text/css");'.
'link.setAttribute("href", "' . get_stylesheet_uri() . '?202405100965");'.
'document.head.appendChild(link);'.
'var script = document.createElement("script");'.
'script.src = "'.get_template_directory_uri().'/js/script2.js?202405100972";'.
'document.head.appendChild(script);';
$_SESSION['visited1'] = 1;
}else{
$visited1 = $_SESSION['visited1'];
$visited1++;
}
?>
初回アクセスの場合のみ発動。
3秒後またはユーザーアクションにて、動的にCSSとSCRIPTが読み込まれる仕組み。
ファーストビューに必要ないCSSとSCRIPTを後から読み込む。
2回目以降のアクセスの場合はhead内で読み込ませているので、2回目以降のアクセスの場合は記述を消している。
■トップページのスライドショースクリプト
<?php if(is_front_page()) : ?>
//for slider lazyimage(toppage only)
var lazySlidePics = [].slice.call(document.querySelectorAll(".lazy-slide"));
if ("IntersectionObserver" in window){
var lazySlidePicObserver = new IntersectionObserver(function(entries, observer){
entries.forEach(function(entry){
if (entry.isIntersecting){
var lazySlidePic = entry.target;
if (lazySlidePic.dataset.hasOwnProperty('src')){
lazySlidePic.src = lazySlidePic.dataset.src;
lazySlidePic.dataset.src = '';
delete lazySlidePic.dataset.src;
}
//for picture
for (var source in lazySlidePic.parentNode.children) {
var picSource = lazySlidePic.parentNode.children[source];
if (typeof picSource.tagName === "string" && picSource.tagName === "SOURCE") {
picSource.srcset = picSource.dataset.srcset;
picSource.dataset.srcset = '';
delete picSource.dataset.srcset;
}}
//script(div data-script)
if (lazySlidePic.dataset.hasOwnProperty('script')){
lazySlidePic.script = lazySlidePic.dataset.script;
var itemScript = document.createElement('script');
itemScript.src = lazySlidePic.script;
document.getElementsByTagName('head')[0].appendChild(itemScript);
}
lazySlidePic.classList.remove("lazy-slide");
lazySlidePicObserver.unobserve(lazySlidePic);
}});}
,{
root:null,
rootMargin:'0px',
threshold:0
});
lazySlidePics.forEach(function(lazySlidePic){
lazySlidePicObserver.observe(lazySlidePic);
});}
<?php endif; ?>
「.lazy-slide」のクラスで発動。
一枚目のスライド画像を表示している間、3秒後またはユーザーアクションにてスライドショーの2枚目以降の画像が読み込まれる仕組み。
■ページトップに戻るボタンのスクリプト
//page-top btn effect
var targetElems = [].slice.call(document.querySelectorAll(".page-top-target"));
if ("IntersectionObserver" in window){
var targetElemObserver = new IntersectionObserver(function(entries, observer){
entries.forEach(function(entry){
var pageTop = document.querySelector('#page-top');
if (entry.isIntersecting){
pageTop.classList.remove("active");
}else{
pageTop.classList.add("active");
}
});}
,{
root:null,
rootMargin:'200px 0px 0px 0px',
threshold:0
});
targetElems.forEach(function(pageTop){
targetElemObserver.observe(pageTop);
});}
遅延ロードと一緒でIntersectionObserverを使用した仕組み。
■投稿ページの目次関連のスクリプト
<?php if(is_single()) : ?>
//mokuji open toggle
var details=document.querySelectorAll('#toc');details.forEach(function(element){var summary=element.querySelector('.toc-btn');var content=element.querySelector('.toc-menu');summary.addEventListener('click',function(e){e.preventDefault();if(element.open){var openDetails=content.animate({opacity:[1,0],height:[content.offsetHeight+'px',0]},{duration:360,easing:'ease-out'});openDetails.onfinish=function(){element.removeAttribute('open')}}else{element.setAttribute('open','true');var openDetails=content.animate({opacity:[0,1],height:[0,content.offsetHeight+'px']},{duration:360,easing:'ease-out'})}})})
<?php endif; ?>
■スムーズスクロールのスクリプト
//smooth scroll
var move_time=500;var end_time=move_time/1000*60;var easing=function easing(e,a,g,f){if((e/=f/2)<1){return g/2*e*e+a}return -g/2*(--e*(e-2)-1)+a};function pageScroll(f){var e=window.pageXOffset,c=window.pageYOffset,b=f-c,d=1;(function a(){window.scrollTo(e,easing(d,c,b,end_time));d++;if(d<=end_time){window.requestAnimationFrame(a)}})()}function getElm(b){var a=decodeURI(b);return document.querySelector(a+',a[name="'+a.substr(1)+'"]')}function getPos(a){;var b=a.getBoundingClientRect();if(window.matchMedia("(max-width:880px)").matches){var j=96;}else if(window.matchMedia("(min-width:881px)").matches){var j=136;}return b.top+window.pageYOffset-j;}var entryPageLinks=document.querySelectorAll('a[href^="#"]');if(entryPageLinks.length){for(var i=0;entryPageLinks.length>i;i++){entryPageLinks[i].addEventListener("click",function(c){var a=c.target.hash;if(a!=""&&a!="#"){var b=getElm(a);if(b){c.preventDefault?c.preventDefault():c.returnValue=false;pageScroll(getPos(b));return false}}})}}
モバイル時j=96、PC時j=136を変えると目次の目標の高さが変えられる
■遅延ロード（要素ごと遅延ロードさせる）
<?php if(is_page()) : ?>
//lazyelems
var i=[].slice.call(document.querySelectorAll(".lazy-elem"));if("IntersectionObserver"in window){var n=new IntersectionObserver(function(e,t){e.forEach(function(e){if(e.isIntersecting){var t=e.target;delete t.dataset.src,t.classList.add("active-elem"),t.classList.remove("lazy-elem"),n.unobserve(t)}})},{root:null,rootMargin:"100px 0px 100px 0px",threshold:0});i.forEach(function(e){n.observe(e)})}
<?php endif; ?>
■全てのaタグにtransitionを後付けするスクリプト
window.setTimeout(function() {
var add_transition = document.querySelectorAll('a');
for (i = 0; i < add_transition.length; i++) {
add_transition[i].classList.add('tran-on')
}}, 10);
transition使用時のchromeのバグを防ぐ目的で使用。
※発火を少しずらして、リロード時などに動きがないようにする。
■遅延ロードスクリプト
<script>
(function(window,document){
function main(){
//ここに遅延ロードさせるスクリプトを記述する。
}
//遅延読込み
var lazyLoad = false;
function onLazyLoad(){
//初回のアクセスじゃない時
if(lazyLoad === false){
//複数呼び出し回避 + イベント解除
lazyLoad = true;
'scroll mousemove mousedown touchstart keydown'.split(' ').forEach(function (eventName) {
window.removeEventListener(eventName, function (e) {
onLazyLoad();
});});
main();}}
//初回の時
'scroll mousemove mousedown touchstart keydown'.split(' ').forEach(function (eventName) {
window.addEventListener(eventName, function (e) {
onLazyLoad();
});});
window.addEventListener('load', function() {
//ドキュメント途中までスクロールしている場合は即実行（更新時 or ページ内リンク）
if(window.pageYOffset){onLazyLoad();}
//1回目のアクセスかどうか
if(sessionStorage.getItem('acs') === null) {
//1回目の場合はWebStorageを設定
sessionStorage.setItem('acs', 'on');
//1回目のアクセスの場合
//何もアクションがないときは指定秒数後に読み込み開始（ミリ秒）
window.setTimeout(onLazyLoad,3000)
} else {
//2回目以降のアクセスの場合
//指定秒数を待たずに即実行
onLazyLoad();
}
});
})(window, document);
</script>
PageSpeed Insights対策。
初回アクセス時は3秒後またはユーザーアクションによってスクリプトを遅延ロードさせてる。
2回目以降のアクセス時やページ途中でのリロードの場合は即スクリプト発動。
Menu
