超ゼツ簡単です。
ついにiOS/iPadOSのSafariにも対応したとのことなので、やってみました。(ただ、バグっててまだ使えないみたい？)
WordPressでView Transition APIを活用するには、テーマやプラグインの編集が必要です。
基本的な考え方として、WordPressのテンプレートファイルやJavaScriptに手を加え、サイト全体にアニメーションを適用します。
1. 前提準備
子テーマにheader.phpがない場合は、親テーマからそっくりそのまま子テーマにコピーします。
それらにView Transition APIに必要な要素を追記するという形で編集していきます。
2. JavaScriptの実装
まず、 functions.php に追記します。(追記範囲に気をつけてください。)
もともとあれば追記し、なければ新規で作成します。最終的なファイルの中身は以下のようになります。
<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く
function enqueue_view_transition_scripts() {
wp_enqueue_script(
'view-transition-script',
get_stylesheet_directory_uri() . '/js/view-transition.js',
array(),
null,
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_view_transition_scripts');次に、子テーマの中に js/view-transition.js を新しく作成してください。
document.addEventListener('DOMContentLoaded', () => {
const links = document.querySelectorAll('a[href]');
links.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const url = link.href;
document.startViewTransition(() => {
window.location.href = url;
});
});
});
});3. CSSでトランジションのカスタマイズ
テーマのstyle.cssに以下のようなアニメーションを追加します。
これはほとんどの場合、追記です。なければ新規で作成してください。
@view-transition {
navigation: auto;
}
body {
view-transition-name: page;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.05);
}
}
body[view-transition-start] {
animation: fadeOut 0.5s ease-in-out; /* fadeOutの部分には、 */
}
body[view-transition-end] {
animation: fadeIn 0.5s ease-in-out;
}なお、この部分でどのようにアニメーションするかを決めています。
この部分を、ChatGPTに入れて自分の理想のアニメーションを作成してください。(華美なものは見づらいかも？)
4. header.phpの編集
親テーマからコピーしてきたheader.phpのHTMLの構造に view-transition-name を追加します。
<body <?php body_class(); ?> view-transition-name="page">もともとbodyのところになにか書いてあれば、半角スペースで区切って以下のように挿入してください。
(これはCocoonの例)
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage" view-transition-name="page">5. 注意点と改善案
- キャッシュ系プラグインがJavaScriptをブロックする可能性があるため、適切な除外設定を行う。
- スクロール位置の保持が必要であれば、
scroll-behavior: smooth;を追加。 - モバイル環境でアニメーションが過度にならないよう、
@mediaクエリで制御する。 - ナビゲーションメニューやモーダルとの連携も考慮する。
これで、WordPressにView Transition APIを導入し、カスタムトランジションを適用できました。
お疲れ様でした。
コメントを残す