⚡ Cara Membuat Tombol Back to Top Valid AMP di WordPress

Format AMP tidak mengizinkan penambahan kode JavaScript ke halaman AMP, kecuali file JavaScript yang telah disediakan oleh pihak AMP Project. Kode JavaScript yang biasa digunakan untuk tombol Back to Top di halaman non-AMP tidak akan berfungsi di halaman yang valid AMP. Oleh karena itu, untuk membuat tombol Back to Top valid AMP, harus menggunakan JavaScript yang telah disediakan oleh pihak AMP Project.

Berikut ini adalah langkah-langkah cara membuat tombol Back to Top untuk halaman format AMP mode standard, transitional, dan reader di WordPress, dan pastikan Anda menggunakan functions.php di dalam child theme.

Tombol Back to Top untuk AMP Mode Standard atau Transitional

1. Menambahkan Kode yang Dibutuhkan

Tambahkan kode AMP Position Observer, AMP Animation, AMP Boilerplate, dan CSS untuk tombol Back to Top ke dalam elemen <head>. 

add_action( 'wp_head', 'amp_back_to_top', 100 );
function amp_back_to_top() {
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
?>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
  .scrollToTop, .scrollToTop:visited {
    line-height: 0;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    border: none;
    outline: none;
    background: rgba(255,0,0,.5);
    z-index: 9999;
    bottom: 1em;
    right: 1em;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    }
  .scrollToTop:hover {
    background: rgba(255,0,0,1);
    }
  .target {
    position: relative;
    }
  .target-anchor {
    position: absolute;
    top: -50px;
    left: 0;
    }
  button#scrollToTopButton {
    transform:rotate(180deg);
    padding: 0;
    }
  .icon-arrow svg {
    fill: #fff;
    font-size: 20px;
    }
</style>
<?php
}}

2. Membuat Target untuk Tombol Back to Top

Tambahkan kode untuk membuat target tombol Back to Top dan tempatkan tepat di bawah tag <body>

add_action( 'wp_body_open', 'amp_back_to_top_target', 1 );
function amp_back_to_top_target() {
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
?>
<span class="target"><a class="target-anchor" id="top"></a><amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer></span>
<?php
}}

3. Membuat tombol Back to Top

Tambahkan kode untuk membuat tombol Back to Top dan kode untuk menampilkan dan menyembunyikan tombol Back to Top di dalam elemen <footer>.

add_action( 'wp_footer', 'amp_back_to_top_button' );
function amp_back_to_top_button() {
if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
?>
<button id="scrollToTopButton" on="tap:top.scrollTo(duration=500)" class="scrollToTop icon-arrow"><svg viewBox="0 0 330 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><path d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" fill-rule="nonzero"></path></svg></button>
<amp-animation id="showAnim" layout="nodisplay"><script type="application/json">{"duration":"200ms","fill":"both","iterations":"1","direction":"alternate","animations":[{"selector":"#scrollToTopButton","keyframes":[{"opacity":"1","visibility":"visible"}]}]}</script></amp-animation>
<amp-animation id="hideAnim" layout="nodisplay"><script type="application/json">{"duration":"200ms","fill":"both","iterations":"1","direction":"alternate","animations":[{"selector":"#scrollToTopButton","keyframes":[{"opacity":"0","visibility":"hidden" }]}]}</script></amp-animation>
<?php
}}

Tinggalkan komentar