AMPに対応してみた(2) - M-Blog

AMPに対応してみた(2)

AMPに対応してみた(2)

AMP対応のためにテンプレートを切り替えるプラグリンを作成したのはこちらになります。

システムイベントはOnLoadDocumentObjectです。

if($modx->documentObject['template'] == 5){
    $modx->documentObject['amp'] = $modx->makeUrl($modx->documentObject['id'],'','amp=1', 'full');
    if(is_numeric($_GET['amp']) && $_GET['amp'] === '1'){
        $modx->documentObject['template'] = 7;
    }
}

今回はimgタグをamp-imgタグに置き換えるコードを追加します。これでAMP用のテンプレートに変更するときに一緒に[*content*]フィールド内のタグを置き換えます。documentObjectを利用することでそれぞれ操作することができます。

if($modx->documentObject['template'] == 5){
    $modx->documentObject['amp'] = $modx->makeUrl($modx->documentObject['id'],'','amp=1', 'full');
    if(is_numeric($_GET['amp']) && $_GET['amp'] === '1'){
        $modx->documentObject['template'] = 7;
        //imgタグ
        $modx->documentObject['content'] = preg_replace('/<img src="(.*?)" (.*?)>/', '<amp-img src="[(site_url)]$1" $2 layout="responsive"></amp-img>', $modx->documentObject['content']);
        //Youtube埋め込み
        $pattern = '/<p><iframe.*?youtube.com\/embed\/(.*?)" width="(.*?)" height="(.*?)".*?><\/iframe><\/p>/is';
        $replacement = '<div class="youtube"><amp-youtube layout="responsive" data-videoid="$1" width="$2" height="$3"></amp-youtube></div>';
        $modx->documentObject['content'] = preg_replace($pattern, $replacement, $modx->documentObject['content']);
    }
}

baseタグが使えないので、画像のパスに[(site_url)]を追加する必要があります。

https://mblo.info/blog/cms/amp-evo-cms-2.html?amp=1でも表示されます。


2018年08月06日 / CMS

カテゴリー

アーカイブ

最近の投稿

最近の更新

リンク