世界の名画をパブリックドメインでダウンロードできるサイトのご紹介
hiro
magmag
WordPressに初回アクセス時のみローディング画面を表示させる方法の自分用メモ
hiro
記事内に商品プロモーションを含む場合があります
WordPressに初回アクセス１回限りローディング画面を表示させる機能を実装しました。（プラグインを使わず）
以下はあくまで自分のためのメモです。あってるかどうか不確実なので、後から追記修正する可能性大です。
以下のサイト様を参考とさせていただきました。ありがとうございますm(__)m
- JavaScriptの.sessionStorageで初回アクセス時にローディングアニメーション(DUB DESiGN様)
- sessionStorageを使って初回だけ読み込まれるローディング画面をJavaScriptで実装してみる（備忘録）（freefuntimes様）
HTMLを挿入する
WordPressのフックを使ってコードを入れました。
add_action( 'wp_body_open', function() {
?>
<div id="loadingLogo" class="loading-anime-wrap">
<div class="bl_loadingCircle"></div>
<p class="bl_loadingText">loading...</p>
</div>
<?php
});JavaScriptを記述する
JSをコピペさせていただきました。
const keyName = 'loadingviewed';
const keyValue = true;
if (!sessionStorage.getItem(keyName)) {
sessionStorage.setItem(keyName, keyValue);
// 初回閲覧時
window.onload = function() {
var popup = document.getElementById('firstTimeModal');
if(!popup) return;
popup.classList.add('is-show'); // モーダルにis-showのclassを付与
}
const loadinglogo = document.getElementById("loadingLogo"); //
window.addEventListener('DOMContentLoaded', () => { //ロード完了後イベント開始
loadinglogo.className = "show";
setTimeout(function(){ loadinglogo.className = loadinglogo.className.replace("show", ""); }, 3500); // 3.5秒後非表示
});
} else {
// 2回目以降の処理内容
}ローディング用CSSを記述する
ロゴ画像よりも、アニメーションがいいかなと思ったのでこうしましたが、結構間違ってるかもと思っています。精査しなくては。
/* ローディング画面実装用CSS */
#loadingLogo {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: white;
z-index: 10000;
display: none;
}
#loadingLogo.show {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadein-keyframes 1s ease 2.5s 1 forwards;
}
#loadingLogo .bl_loadingCircle {
width: 30px;
height: 30px;
border: 1px solid #999;
border-top: 1px solid #f2f2f2;
border-radius: 50%;
animation: loading 3s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.bl_loadingText {
color: #999;
font-size: 12px;
text-align: center;
margin-top: 10px;
}以上です。最初うまくいかなくて時間がかかりました〜。根本的にコードを理解する必要があるので、ちょっとしか進みませんが、
子供の宿題の丸つけをしつつ、JSの勉強の本やネットを見る努力をしています（牛歩の歩み）。
でも、カスタマイズがうまく行った時って、とっても嬉しいですね！
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。