行き着く先はあんこ

WordPressのAMPプラグインを使って特定の記事のみAMPを無効にする

2017.2.9

AMP熱も冷め始めたこの頃、特定の記事のみをAMP表示ではなく通常のページで表示したいということがありました。今回はプラグイン(Automattic製)を使ってAMPに対応していて、任意に特定の記事のAMPを無効にする方法をまとめておきます。

スポンサーリンク

AMPを無効にする

AMPは定められた基準をクリアしてGoogleにクロールしてもらい初めて検索結果にAMPとして表示されます。つまり、1ヶ所でもエラーがあればAMP表示されることはありません。このハックを使って意図的にAMP表示を無効化することはできます。

しかしこの方法だと、Search Consoleにエラーが出ます。なによりAMPエンドポイント「/amp」が付いたページURL(AMPのURL)にアクセスすると何事もなくAMPのページにアクセスできてしまいます。そのためあえてエラーを出してAMPを無効化する方法は非常に現実的ではありません。

amp_skip_post

AMPプラグインには「amp_skip_post」というフィルターフックが用意されています。まずは簡単な使い方を。

// 「quiz」タグの記事ではAMP表示しない
add_filter( 'amp_skip_post', 'skip_disable_amp_posts', 10, 3 );
function skip_disable_amp_posts ( $skip, $post_id, $post ) {
    if ( has_tag( 'quiz', get_post( $post_id ) ) ){
        $skip = true;
    }
    return $skip;
}

上記のコードは「quiz」タグを持った記事のAMPを無効にしてくれます。また「/amp」のURLにアクセスしても自動で元記事にリダイレクトしてくれます。

このフックを利用して任意の記事のAMPを無効にします。

任意の記事でAMP無効化

AMPを無効化するコード全体です。functions.phpに追加。

// 特定の記事でAMP表示しない
add_filter( 'amp_skip_post', 'skip_disable_amp_posts', 10, 3 );
function skip_disable_amp_posts( $skip, $post_id, $post ) {
    $amp_meta = get_post_meta( $post_id, '_disable_amp', true);
    if ( 'disable' === $amp_meta ) {
        $skip = true;
    }
    return $skip;
}

// AMPプラグインが有効なとき、投稿画面にAMP無効の項目を追加
add_action( 'add_meta_boxes', 'myplg_meta_box_init' );
function myplg_meta_box_init() {
    include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
    if ( is_plugin_active('amp/amp.php') ) {
        add_meta_box( 'disable_amp', 'AMP', 'my_disable_amp_box', 'post', 'side', 'default' );   
    }
}
function my_disable_amp_box( $post, $box ) {
    $amp_meta = get_post_meta( $post->ID, '_disable_amp', true );
    $status = ( $amp_meta === 'disable' ) ? ' checked="checked"' : '';
    echo '<form action="" method="POST"><label for="disable_amp_checkbox"><input id="disable_amp_checkbox" type="checkbox" name="disable_amp" value="disable"' . $status . '/>AMPを無効にする</label>';
    wp_nonce_field( 'disable_amp_action', 'disable_amp_nonce' );
    echo '</form>';
}

// カスタムフィールドで管理
add_action( 'save_post', 'save_disable_amp_meta' );
function save_disable_amp_meta( $post_id ) {
    // 自動保存を無視
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    // セキュリティ関係
    if ( ! isset( $_POST['disable_amp_nonce'] ) || ! check_admin_referer( 'disable_amp_action', 'disable_amp_nonce' ) ) {
        return;
    }
    // カスタムフィールドの更新
    if ( isset($_POST['disable_amp']) ) {
        update_post_meta( $post_id, '_disable_amp', $_POST['disable_amp'] );
    } else {
        $amp_meta = get_post_meta( $post_id, '_disable_amp', false );
        if ( ! empty( $amp_meta ) ) {
            update_post_meta( $post_id, '_disable_amp', '' );
        }
    }
}

使い方

WordPressのAMPを無効化する項目

コードを追加すると記事編集画面に「AMP」の項目が追加されます。この項目にチェックを入れたページはAMPが無効化されます。デフォルトはAMPが有効(チェックなし)です。

説明

コード全体の流れはこんな感じです。

  • 記事の投稿、更新時にAMPのチェックを確認
  • チェックされていればカスタムフィールドに値を保存
  • カスタムフィールドにキー「_disable_amp」があり、値が「disable」のときamp_skip_postフックで無効化

さいごに

AMPも浸透してメリット、デメリットが明確になってきました。その中でAMP対応はしたいけど、特定のページだけAMPを無効化したい、ということもあるかと思います。今回の内容はそんなときに役立ちます。

このように臨機応変に動けるのもしっかり設計されているAMPプラグインのおかげです。さすがAutomattic製。

参考記事

更新内容:
2017年2月9日
管理画面で生じるnonceエラーの修正

スポンサーリンク

スポンサーリンク

コメント

  1. げんちゃん

    2017.07.18 22:39

    こんばんは、AMP化したのですが、色々なことで躓いており、その中の1つにAMPを適用、非適用する方法というものがありました。

    この記事のお陰で、1つ悩みが解決です!

    素晴らしい情報、ありがとうございましたm(_ _)m

コメントを残す