2026年6月26日

WordPressのView Transition API（CSS）を使う方法

テーマ・デザイン

はじめに

Webページ間でのスムーズな遷移は、ユーザー体験を向上させる上で非常に重要です。View Transition APIを使用することで、CSSだけでページの内容を変更しながら遷移効果を提供することができます。この記事では、WordPressサイトでView Transition APIを活用するための具体的な手順を紹介します。

症状・背景

このテーマが必要になる主な場面:

ページ間の切り替えがカクつく場合
より洗練されたユーザー体験を提供したい場合
Webページの移動時にアニメーション効果を持たせたい場合
CSSだけでスムーズな遷移を作成したい場合

手順・設定方法

ステップ1: View Transition APIを有効にする

# WordPressテーマのfunctions.phpファイルに次のコードを追加します。
add_action('wp_enqueue_scripts', 'enqueue_view_transition');
function enqueue_view_transition() {
    wp_enqueue_script( 'view-transition-js', get_template_directory_uri() . '/js/view-transition.js', array(), null, true );
}

ステップ2: View Transition APIを使用するCSSを追加

# テーマのスタイルシートに以下のコードを追加します。
.post-container {
  view-transition-name: post;
}

.entry-header,
.entry-footer {
  transition: opacity 1s, transform 0.5s;
}

ステップ3: JavaScriptファイルを作成し、View Transition APIを使用

# テーマのjsディレクトリにview-transition.jsという名前のJavaScriptファイルを追加します。
document.addEventListener('DOMContentLoaded', function() {
    const viewTransitionSupported = 'onviewtransitionstart' in document;
  
    if (viewTransitionSupported) {
        console.log("View Transition API is supported");
    } else {
        console.warn("View Transition API is not supported. Falling back to standard transitions.");
    }
});

ステップ4: テストとトラブルシュート

# View Transitionの動作を確認します。
function check_view_transition() {
    const element = document.querySelector('.post-container');
  
    if ('view-transition-name' in element.style) {
        console.log("View transition name is supported");
    } else {
        console.warn('View transition name property not supported.');
    }
}

check_view_transition();

注意事項

View Transition APIは一部のブラウザでしかサポートされていません。対応する最新版のChromeとEdgeでのみ動作します。
適切なテストを実施し、ページ遷移が意図した通りに機能することを確認してください。
JavaScriptファイル内でView Transition APIが利用可能かどうかをチェックして、APIが利用できない場合の対処法（例：アニメーション効果なし）を用意するべきです。
ページ間の遷移が複雑な場合や大量のコンテンツがある場合には、パフォーマンスに影響を与える可能性がありますので、適切な最適化が必要です。

まとめ

1. View Transition API利用: View Transition APIを使用してページ遷移を滑らかにする。

2. CSS設定: 各要素に対してview-transition-nameプロパティを設定する。

3. JavaScript確認: JavaScriptでView Transition APIがサポートされているかどうかを確認し、対応するコードを実装する。

4. ブラウザチェック: 対象のブラウザでAPIが動作することをテストする。

5. パフォーマンス最適化: View Transition APIを使用した場合でもサイト全体のパフォーマンスを保つための最適化を行う。

Post Views: 2