워드프레스의 AMP 플러그인을 업데이트 할때마다 삽입한 코드가 다 사라져서 매번 삽입할 위치와 코드를 백업해두기로 했다.
주의!
아래의 코드들은 이 블로그와 나의 구글 계정의 코드들이다.
자신의 블로그에 삽입할 때는 자신의 구글 계정과 블로그에 맞는 코드로 변경을 해서 사용해야만 한다.
amp에 대한 설명은 AMP에 애드센스, 애널리틱스 삽입하기 (워드프레스 플러그인)을 참고하길 바란다.
(플러그인 편집기에서) amp/templates/html-start.php
<head> 아래 줄에 아래 코드를 삽입
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”>
위 코드의 아래 줄에 아래 코드를 삽입
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-5461307273732595">
</amp-auto-ads>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "G-T4XXYZPFER",
"config" : {
"G-T4XXYZPFER": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
amp/templates/style.php
맨 밑에 아래 코드를 삽입 (특성, 썸네일 이미지를 표시하지 않는 코드)
.amp-wp-article-featured-image {
display: none;
}
또는 위 코드 말고 아래의 코드를 맨 밑에 삽입 (특성, 썸네일 이미지를 가운데로 정렬시키는 코드)
.amp-wp-article-featured-image {
text-align: center;
}
amp/templates/single.php
<?php $this->load_parts( [ ‘featured-image’ ] ); ?>
<div class=”amp-wp-article-content”>
<?php echo $this->get( ‘post_amp_content’ ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
위 코드의(위와 아래에 한개씩 두개의 광고 배치)
위 줄에 아래 코드를 삽입
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-5461307273732595"
data-ad-slot="6486582496"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
아래 줄에 아래 코드를 삽입
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-5461307273732595"
data-ad-slot="2126387857"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
