Google AMP alias Akselerasi halaman seluler Implementasi HTML ke situs web sangat penting karena manfaat SEO-nya. Laman HTML siap AMP di hasil penelusuran seluler dimuat jauh lebih cepat daripada laman biasa. Internet sudah dipenuhi dengan artikel dan tutorial tentang AMP: Proyek halaman seluler yang dipercepat. AMP dikembangkan untuk situs web berbasis HTML tetapi jika Anda user WordPress maka jangan sedih karena sudah ada sejumlah plugin AMP yang tersedia di direktori plugin WordPress. Pengembang yang berbeda telah mengembangkan plugin AMP untuk WordPress untuk mengaktifkan halaman WordPress siap AMP. Untuk mengaktifkan tema AMP untuk WordPress Bog cukup instal plugin AMP: Toolbox atau plugin AMP.
Plugin AMP membuat halaman sederhana atau dasar untuk WordPress Anda dan menghapus semua fitur tema mewah Anda termasuk Google Adsense. Jadi hari ini dalam tutorial ini kita akan bagaimana menyesuaikan halaman AMP untuk mengaktifkan fungsionalitas Google Adsense.
Catatan: Jika Anda tidak ingin dipusingkan dengan pengkodean dan hanya membutuhkan plugin yang dapat mengaktifkan fitur Google AdSense, notifikasi, dan tema lainnya di blog WordPress Anda yang siap AMP, silakan lihat artikel ini:
Cara Mengatur WordPress untuk AMP: Accelerated Mobile Pages menggunakan Plugin yang disebut AMP Toolbox bersama Google Adsense dan Analytics
Di tautan yang diberikan di atas, kita telah membahas plugin amp gratis yang disebut plugin AMP Toolbox WordPress yang memungkinkan penyesuaian satu sentuhan untuk tema AMP Anda.
Langkah-langkah untuk menyesuaikan tema AMP WordPress untuk mengaktifkan Google Adsense dan Google Analytics
Sebelum Memulai tutorial ini di sini adalah ringkasan dari apa yang akan kita ubah di sini:
- Kustomisasi warna latar belakang header halaman AMP
- Mengubah atau Mengganti logo WordPress dengan logo Anda
- Menambahkan file template PHP customiPHP ke folder anak amp
- Menyesuaikan tajuk situs
- Tambahkan footer ke tema AMP
- Menghapus spasi footer dari tema AMP
- Menata Footer dari tema AMP
- Menambahkan kode AdSense ke Halaman Seluler yang Dipercepat
- Menambahkan kode Google Analytic ke halaman AMP WordPress
Sekarang kita akan memulai tutorialnya. Silakan gunakan tema anak untuk tema utama Anda. Anda menerapkan tutorial ini langsung ke tema utama Anda, tetapi pastikan ketika Anda memperbarui tema, buat cadangan folder amp Anda yang akan kita buat dan sesuaikan dalam tutorial ini. Jika Anda menggunakan tema anak maka tidak ada masalah karena pembaruan Anda ke tema utama tidak akan memengaruhi folder tema anak.
Langkah 1: Instal plugin AMP di WordPress dan buat folder bernama amp di folder tema Anda.
Langkah 2: Sekarang salin file style.php dari folder plugin amp ke folder tema utama atau tema anak Anda. Anda akan menemukan file ini di bawah folder plugins->amp->templates.
Langkah3: Buka functions.php dari tema anak Anda dan rekatkan kode ini di akhir. Saya meminta untuk menempelkan kode ini di bagian akhir karena Anda dapat dengan mudah mengingat di mana Anda telah menempelkan kode tersebut.
add_filter( ‘amp_post_template_file’, ‘amp_set_cutome_style_path’, 10, 3 ); // Mengatur fungsi stylesheet kustom amp_set_cutome_style_path( $file, $type, $post ) { if ( ‘style’ === $type ) { $file = dirname( __FILE__ ). ‘/amp/style.php’; } kembalikan $file; }
Untuk menyesuaikan warna latar belakang header halaman AMP Anda
Langkah 4. Buka folder amp tema anak-> style.php -> temukan properti ‘nav.title-bar’ dan ubah warna latar belakang header. Simpan itu.
Langkah 5. Untuk menyesuaikan ikon WordPress default dengan logo Anda, di folder gambar tema anak Anda yang akan Anda temukan di pengelola file hosting Cpanel di bawah WordPress->Wpcontent->tema->pilih folder tema Anda dan buat ‘gambar’ folder di bawahnya. Sekarang unggah ikon atau gambar logo Anda ke folder itu. Kemudian, salin filter ini dan tempel di file functions.php tema anak Anda.
add_filter( ‘amp_post_template_data’, ‘xyz_amp_set_custom_site_icon_url’ ); //Mengubah fungsi ikon situs xyz_amp_set_custom_site_icon_url( $data ) { $data[ ‘site_icon_url’ ] = get_stylesheet_directory_uri().’/images/YOUR_FILE_NAME.jpg’; kembalikan $data; }
Langkah 6: Menambahkan file template PHP khusus ke folder ‘amp’ anak.
Buat file baru bernama ”my-single.php” dan tambahkan ke folder ‘amp’ tema anak, lalu buka plugins->amp->templates-> single.PHP, salin seluruh kode dari single.php dan paste di “my-single.php” yang Anda buat. Kemudian, salin filter ini ke file functions.php Anda dari tema anak Anda.
add_filter( ‘amp_post_template_file’, ‘set_my_amp_custom_template’, 10, 3 ); //Menyetel template kustom untuk fungsi halaman amp set_my_amp_custom_template( $file, $type, $post ) { if ( ‘single’ === $type ) { $file = dirname( __FILE__ ). ‘/amp/my-single.php’; } kembalikan $file; }
Jika Anda menggunakan Amp 0.2 dan diperbarui ke Amp 0.3 maka ganti baris berikut
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <?php $this->load_parts( array( ‘style’ ) ); ?>
dengan baris kode ini dari file AMP 0.3 single.php di folder plugin
<style amp-custom> <?php $this->load_parts( array( ‘style’ ) ); ?> <?php do_action( ‘amp_post_template_css’, $ini ); ?> </gaya>
Langkah 7: Sesuaikan header situs dengan nama atau logo situs Anda Buka ”my-single.php” -> cari <nav> </nav> di antara tag tesis tepat di bawah tag <body>, Anda akan melihat kode ini di antaranya tag.
<?php echo esc_html( $this->get( ‘nama_blog’ ) ); ?>
Ganti kode dengan potongan kode ini:
<?php if($this->get( ‘blog_name’ ) ) : ?> <amp-img src=”<?php echo get_stylesheet_directory_uri().’/images/YOUR_IMAGE_FILE_NAME.png ‘;?>” alt=”ANDA NAMA SITUS” width=”187″ height=”60″ ></amp-img> <?php else: ?> <?php echo esc_html( $this->get( ‘blog_name’ ) ); ?> <?php endif;?>
Langkah 8 : Menambahkan Footer
Rekatkan potongan kode ini di antara tag <nav> </nav> di amp->my-single.php dan gunakan sebagai footer, lakukan perubahan sesuai kebutuhan Anda.
<footer > <div> <a href=”<?php echo esc_url( $this->get( ‘home_url’ ) ); ?>”> <?php if($this->get( ‘blog_name’ ) ) : ?> <amp-img src=”<?php echo get_stylesheet_directory_uri().’/images/YOUR_IMAGE_NAME.png”;?>” alt=”YOUR_SITE_NAME” width=”187″ height=”60″ ></amp-img > <?php else: ?> <?php echo esc_html( $this->get( ‘blog_name’ ) ); ?> <?php endif;?> </a> </div> </footer>
Tempelkan kode ini tepat di atas baris kode PHP ini di my-single.php.
<?php do_action( ‘amp_post_template_footer’, $ini ); ?>
Langkah 9: Menghapus footer Whitespace dari tema amp
Buka folder tema anak Anda -> amp -> style.php, setelah pembukaan badan temukan “padding-bottom” hapus atau beri komentar seperti ini
/*padding-bottom:100px; */
Langkah 10: Styling Footer.
Buka ->tema anak -> amp -> style.php. Cari tahu /*Titbar */ atau Footer dan tambahkan perubahan berikut. Untuk mengubah warna, ubah nilai latar belakang.
/* FOOTER */ footer.title-bar { background: #33363b /*#0a89c0*/ ; bantalan: 0 16px; margin-atas:20px; align-item: baseline; tampilan: blok; } footer.title-bar div { tinggi baris: 50px; bantalan:10px; warna: #ff; } footer.title-bar a { warna: #fff; dekorasi teks: tidak ada; } /* FOOTER AKHIR*/
Menambahkan AdSense ke tema AMP
Cukup salin dan tempel inti tepat di bawah tag <div class=”content”> di my-single.php dari folder tema ‘amp’ Anda
<!–SLOT IKLAN ADSENSE–> <div id=”ad1″> <amp-ad width=336 height=280 type=”adsense” data-ad-client=”ca-pub-XXXXXXXXXXXXXXXXX” data-ad- slot=”XXXXXXX”> </amp-ad> </div><div ></div> <!–SLOT IKLAN ADSENSE–>
Dan untuk menampilkan iklan AdSense di atas footer dan di bawah konten, cukup salin kode yang sama dan tempel tepat di bawah baris kode ini
<?php echo $this->get( ‘post_amp_content’ ); // konten amphtml; tidak ada kss?>
Itu juga berarti tepat di atas tag </div> penutup untuk konten.
Dan ganti XXXXXX dan ca-pub-XXXXXXXXXXXXXXXXXX
Menambahkan kode Google Analytic ke halaman AMP WordPress.
Untuk menyiapkan halaman AMP Anda dengan Analytic, cukup salin filter di bawah dan tempel di file functions.php Anda di folder tema anak Anda.
add_action( ‘amp_post_template_head’, ‘amp_add_google_analytics’ ); // Menambahkan skrip Google Analytic ke tag kepala fungsi halaman Amp amp_add_google_analytics( $amp_template ) { ?> <script async custom-unsurt=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp- analytics-0.1.js”></script> <?php }
Setelah menambahkan di atas kode menyalin kode di bawah ini dan paste di my-single.php berkas langsung di bawah <body>.
<amp-analytics type=”googleanalytics” id=”googleanalytics”> <script type=”application/json”> { “vars”: { “account”: “UA-XXXXXXXXX-2” }, “triggers”: { ” track pageview”: { “on”: “visible”, “request”: “pageview” }, “track anchor clicks”: { “on”: “click”, “selector”: “a”, “request”: ” event”, “vars”: { “eventId”: “42”, “eventLabel”: “mengklik tautan” } }, “trackEvent”: { “selector”: “#event-test”, “on”: ” click”, “request”: “event”, “vars”: { “eventCategory”: “ui-components”, “eventAction”: “click” } } } } </script> </amp-analytics>
Ganti XXXXXXXXX-2 ini dengan ID kode Analytics Anda.
Saya tidak perlu melakukan semua pengeditan manual di atas, Anda cukup menggunakan plugin bernama AMP Toolbox Plugin untuk menambahkan dan menyesuaikan tema AMP. Plugin AMP ini tidak hanya menambahkan halaman amp ke WordPress tetapi juga memungkinkan Anda untuk menambahkan kode Google Analytics dan Goole Adsense dengan menggunakan dashboard Admin WordPress. Untuk informasi lebih lanjut tentang plugin ini, Anda dapat melihat Artikel kita:
Cara Menambahkan Halaman Seluler yang Dipercepat ke WordPress Menggunakan Plugin AMP Toolbox