2026年5月20日

WordPressのAMP対応プラグインを設定する方法

プラグイン関連

はじめに

AMP（Accelerated Mobile Pages）はモバイルでの高速表示を実現するGoogleの仕様です。WordPressでは公式「AMP」プラグインを使うことでAMPページを自動生成できます。Standard・Transitional・Readerの3つのモードがあります。

症状・原因

WordPressサイトをAMP対応にしたい
Google Search ConsoleでAMPエラーが出ている
AMP検証エラーを修正したい
AMPとGoogleアナリティクスを連携したい

解決手順

ステップ1：AMPプラグインをインストールする

# 公式AMPプラグインをインストール
wp plugin install amp --activate

# バージョン確認
wp plugin list --search=amp --format=table

ステップ2：AMPモードを選択する

外観 → AMP または AMP → 設定:

3つのモード:
① Standard（推奨）:
  → サイト全体がAMP対応
  → URLはそのまま（?amp不要）
  → ブロックエディターと完全互換

② Transitional:
  → AMPとnon-AMPの両方を提供
  → AMPは example.com/?amp でアクセス
  → 既存デザインを維持しながらAMP対応

③ Reader（旧来方式）:
  → AMPとnon-AMPを完全に分離
  → AMPには専用テンプレートを使用
  → カスタマイズは限定的

→ モードを選択して「次へ」→「完了」

ステップ3：AMP検証エラーを修正する

AMP → 検証済みURL:
→ 各URLのAMP検証結果を確認
→「エラー」「警告」の種類を確認

よくあるエラーと対処法:
❌ amp-img required: <img> → <amp-img> に変換（自動）
❌ style amp-custom 75KB超え: CSSを削減
❌ カスタムJavaScript使用: amp-script タグに置換
❌ サードパーティスクリプト: AMP対応の代替に置換

// 特定ページをAMPから除外
add_filter('amp_skip_post', function(bool $skip, int $post_id): bool {
    // 特定カテゴリーの記事はAMPをスキップ
    if (has_category('members-only', $post_id)) {
        return true;
    }
    return $skip;
}, 10, 2);

// AMP対応でないスクリプトを除外
add_filter('amp_content_sanitizers', function(array $sanitizers): array {
    // カスタムサニタイザーを追加する場合
    return $sanitizers;
});

ステップ4：AMPとアナリティクスを連携する

AMP → 設定 → Analytics:
→「Google Analytics」を選択
→ トラッキングID（UA-XXXXX または G-XXXXX）を入力
→「保存」

または functions.php で直接設定:

// AMP ページに amp-analytics を追加
add_filter('amp_post_template_analytics', function(array $analytics): array {
    $analytics['my-ga4'] = [
        'type'        => 'gtag',
        'attributes'  => [],
        'config_data' => [
            'vars' => [
                'GA4_MEASUREMENT_ID' => 'G-XXXXXXXXXX',
            ],
        ],
    ];
    return $analytics;
});

ステップ5：WP-CLIでAMPを管理する

# AMP検証を実行
wp amp validate --url=https://example.com/

# 複数URLを一括検証
wp amp validate --urls=https://example.com/,https://example.com/blog/

# AMP検証済みURLのステータスを確認
wp post list --post_type=amp_validated_url --format=table

# AMP検証エラーのある投稿を確認
wp amp validate-url $(wp post list --post_type=post --fields=url --format=csv | tail -n +2 | head -5)

# AMP設定を確認
wp option get amp-options --format=json

ステップ6：AMPページのカスタマイズ

// AMP用のカスタムCSSを追加
add_action('amp_post_template_css', function(): void {
    ?>
    .amp-header { background: #0073aa; color: white; }
    .amp-content { font-size: 18px; line-height: 1.8; }
    <?php
});

// AMPかどうかを判定して条件分岐
function myplugin_is_amp(): bool {
    return function_exists('amp_is_request') && amp_is_request();
}

add_action('wp_footer', function(): void {
    if (myplugin_is_amp()) {
        return;  // AMPページでは実行しない
    }
    // 通常ページのみで実行する処理
    echo '<script>/* non-AMP script */</script>';
});

注意事項

AMPは独自のHTML仕様のため、カスタムJavaScriptや一部のCSSは使用できません
Standardモードに移行する際は既存のAMP URLがリダイレクトされるか確認してください
AMP検証エラーはGoogle Search ConsoleのAMPレポートでも確認できます

まとめ

WordPressのAMP対応は公式AMPプラグインをインストールしてモードを選択するだけで基本設定が完了します。wp amp validate で検証エラーを確認し、amp_skip_post フィルターで除外ページを制御できます。

Post Views: 8