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

カテゴリー

アーカイブ

最近の投稿

最近の更新

リンク