読み込み中に表示されるローディング画像について
<div class="loading">
<div><img width="75" height="26" class="loading-logo" src="./images/logo-dark.png" alt="Nixe - Demo 2" /></div>
</div>
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.loading-logo {
opacity: 0;
animation: logo_fade 2s 0.5s forwards;
width: 175px;
}
@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}
ブロックテーマの場合に上記HTMLを記述する場所が見つからないとかどこに書くと良いのか？になります。
答えは、function.phpに追加で記述して、bodyの最初に記述するようにします。
/**
* bodyタグ開始に挿入
*/
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<div class="loading">
<div><img width="75" height="26" class="loading-logo" src="http://test.beabo.net/wp-content/uploads/2024/10/och_logo.png" alt="大分センチュリーホテルのホームページへようこそ" /></div>
</div>
<!-- ここまで -->
<?php
});
こうする事で、記事のHTMLを読み込んでページを作成する時間にローディング画面が表示されることにより、待ち時間を感覚的に短くする事が期待できます。
基本的な手法なので、ローディング画面の画像やCSSでのアニメーションを採用するとかするとサイトのブランディングがより進むと思います。
animation: fadeOut の部分が時間の設定になるぅ
