AMP WordPress 対応メモ | Lang-Lang-Lang

AMP プラグインを使っても最低限の機能しかないので、動きのあるデザインにするとあとから機能を追加することになります。

h2ごとに置く場合は、オリジナルテーマのウィジットを使って配置。任意の場所に置く場合は、直接コードに書くか、フックを使う。

AMP 判定

PHP

// functions.php で読み込み

add_action( 'wp', function () {
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		// AMP で実行させる命令
	}
} );

CSS

/* スマホ・タブレット */
.amp-mode-touch {
   font-size: 1rem;
}

/* PC */
.amp-mode-mouse {
   font-size: 1.5rem;
}

ハンバーガーメニュー

パーツテンプレート

SNSシェアボタン

AMP キャッシュアップデート

URL コピー

amp で iframe (インラインフレーム)を読み込むようにする。

<amp-iframe class="copy-btn" sandbox="allow-scripts" width="187" height="28" title="URL COPY" frameborder="0" layout="responsive" src="<?php echo get_stylesheet_directory_uri();?>/amp/copy.html#<?php the_title_attribute();?><?php echo " - "; ?><?php the_permalink(); ?>"></amp-iframe>

URLコピーのJavaScriptを記述したcopy.html を作成 ampディレクトリなどに入れておく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
<title>記事タイトルと URL をコピー</title>
<style>
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}
button {
    font-family: 'Noto Sans JP', sans-serif;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    color: #616161;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 100vh;
    justify-content: center;
    letter-spacing: .25px;
    width: 100vw;
}
button:active, button:focus {
    outline: 0;
}
button svg {
    fill: #757575;
    margin-right: 8px;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:500&display=swap&text=%E8%A8%98%E4%BA%8B%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%A8URL%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%99%E3%82%8B%E3%81%97%E3%81%BE%E3%81%9F%E3%80%82" rel="stylesheet">
</head>
<body> <button id="button" type="button" title="コピー"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" role="presentation"> <path fill="none" d="M0 0h24v24H0V0z"/> <path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/> </svg>記事タイトルと URL をコピーする</button> <input id="input" hidden/>
<script>
const but = document.getElementById('button'),
    inp = document.getElementById('input'),
    tex = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="presentation">' + '<path fill="none" d="M0 0h24v24H0V0z"/>' + '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>' + '</svg>' + 'コピーしました。';
but.onclick = function () {
    inp.value = window.decodeURIComponent(window.location.hash.substr(1));
    inp.hidden = false;
    inp.select();
    inp.focus();
    document.execCommand('copy');
    inp.hidden = true;
    inp.value = '';
    but.innerHTML = tex;
    but.style.background = '#f5f5f5';
};
</script>
</body>

サーバーサイドの設定も必要

この設定をしておかないとiframe読み込めません。

自ドメイン以外からiframeを読み込めるようにする。キャッシュは google.co.jp

nginxの場合はnginx.conf または conf.d/xxx.conf に追記

add_header X-Frame-Options "ALLOW-FROM https://google.co.jp";

ボタンタップでアクション

a
button

on 属性をつけることで、さまざまなアクションを設定することができる

toggleClass
hide
show
toggleVisibility
scrollTo
focus

複数指定したい場合は、カンマで句切るか属性を並列する。

<button on="tap:my-lb.open" on="tap:sidebar1.close">test</button>

<button on="tap:my-lb.open,sidebar1.close">test</button>

背景レイヤーを固定する

モーダルウィンドウとして目次を表示しても、背景の文章はスクロールできてしまいます。

トグルボタンをしたときに、bodyにクラスを追加してタッチ操作を無効にしておきます。

body.fbdn-scrl {
    touch-action: none;
}

/*または本文開始位置*/

.amp-wp-article.fbdn-scrl {
    touch-action: none;
}

amp-bind で使うクラス名は、どこかで呼び出しておかないとAMP化したときに消えてしまうので注意。display:noneで表示しないようにしておく。

<div class="クラス クラス"></div>

スムーズスクロール

a, button 以外で使う場合は tabindexとroleの指定が必要。

<a on="tap:ID名.scrollTo">クリックで移動</a>

WordPress

# AMP # メモ

AMP Adsense