Bagaimana Menyiapkan Dukungan AMP Untuk WordPress

() translation by (you can also view the original English article)

Dalam tutorial ini kita akan melangkah luar-dalam menghasilkan versi AMP yang valid dari tulisan di situs WordPress Anda. Untuk itu, kita akan menggunakan plugin AMP dari Automattic.

Jika mau Anda bisa menggunakan plugin alternative sebagai gantinya, namun karena kita hanya memiliki ruang untuk satu plugin dalam tutorial ini, kita akan fokus ke plugin yang dibuat oleh tim WordPress itu sendiri.

Catatan: artikel ini mengasumsikan Anda telah terbiasa untuk membuat halaman AMP yang valid, jadi fokusnya hanya pada detail spesifik untuk menggunakan WordPress dan AMP bersama-sama. Jika Anda masih baru dengan AMP, periksa:

Artikel ini juga mengasumsikan Anda telah terbiasa menjalankan situs WordPress self-hosted. Jika belum, artikel berikut akan sangat bermanfaat:

Plugin AMP dari Automattic

Plugin ini, yang diberi nama AMP, mengotomatiskan pembuatan post tunggal AMP yang valid. Untuk setiap postingan yang anda buat, versi kedua juga akan tersedia dengan /amp/ yang ditambahkan ke permalink. Jika Anda tidak menggunakan fungsi penulisan ulang permalink WordPress di situs Anda ?Amp=1 akan ditambahkan ke URL sebagai gantinya.

Sebagai contoh, ini post WordPress biasa:

Perhatikan bahwa di sini saya memiliki ekstensi AMP Validator yang terpasang di Chrome yang mendeteksi ada versi AMP dari halaman ini yang tersedia dan menampilkan ikon tautan biru kecil:

AMP Validator extension — Ekstensi AMP Validator

Jika saya mengeklik ikon tautan biru dari ekstensi tersebut, itu membawa kita ke versi AMP dari post:

Menggunakan plugin ini dalam keadaan standard sebatas "plug and play". Instal, aktifkan, dan Anda siap untuk menjalankannya. Tidak ada pilihan konfigurasi yang berarti untuk mempersiapkannya.

Saat ini plugin ini hanya bekerja pada satu postingan saja—tidak mempengaruhi halaman, custom post types atau arsip. Halaman plugin di repositori WordPress menyatakan bahwa dukungan untuk hal ini sedang dalam pengembangan.

Gunakan Bersamaan Dengan SEO Yoast dari Glue

Jika Anda menggunakan plugin SEO Yoast untuk posting reguler Anda, ada sebuah plugin tambahan yang diberi nama "Glue for Yoast SEO & AMP" yang tersedia untuk menampilkan metadata bergaya Yoast ke dalam posting AMP Anda. Misalnya, plugin menambahkan tag meta berikut ke post demo yang digambarkan sebelumnya:

Untuk menggunakan plugin ini pertama Anda harus menginstal plugin Yoast SEO. Plugin Glue kemudian akan menambahkan bagian baru dengan label AMP ke menu admin plugin SEO.

Media dan Elemen AMP Kustom

Salah satu bagian terpenting untuk membuat halaman AMP yang valid adalah menggunakan elemen kustom yang dibutuhkan untuk penempatan media, seperti misalnya amp-img sebagai ganti dari img. Namun saat membuat posting di WordPress, Anda biasanya bekerja di editor WYSIWYG TinyMCE dan tidak secara langsung mengontrol markup yang digunakan untuk penyisipan media.

Dengan plugin Automattic AMP yang terpasang, Anda tidak perlu khawatir tentang hal ini karena secara otomatis akan memfilter konten Anda dan membuat konversi berikut ke elemen AMP kustom:

img → amp-img or amp-anim
video → amp-video
audio =→ amp-audio
iframe → amp-iframe
YouTube oEmbed → amp-youtube
Instagram eEmbed → amp-instagram
Twitter oEmbed → amp-twitter
Vine oEmbed → amp-vine

Catatan: Jika Anda menggunakan Flash di situs Anda, ini tidak didukung. Jenis media lainnya dapat digunakan di post AMP asalkan ditambahkan dengan salah satu item dari daftar di atas.

Tentang WordPress oEmbeds

Shortcode dan Plugin

Pertimbangan lain saat menggunakan plugin AutomPOM AMP di posting WordPress Anda adalah bagaimana shortcode dan plugin akan berperilaku.

Output Header dan Footer

Plugin Automattic mencegah posting AMP menggunakan fungsi wp_header() dan wp_footer() dari theme yang sering disadap oleh plugin untuk menampilkan JavaScript, CSS, dan HTML. Jika plugin yang Anda gunakan bergantung pada salah satu fungsi ini, tidak akan berjalan.

Agar plugin menghasilkan code kustom yang dikombinasikan dengan plugin AMP, ia harus menggunakan tindakan dan filter khusus yang menggantikan fungsi theme WP normal. Misalnya, Anda tidak dapat menambahkan tag meta ke bagian <head> seperti biasanya, dengan menggunakan wp_head untuk mengeluarkan code melalui fungsi wp_header(), namun Anda dapat menggunakan filter amp_post_template_metadata.

Plugin Glue Yoast menggunakan tindakan dan filter khusus, yang memungkinkannya menampilkan data SEO dan CSS kustom di halaman AMP tanpa melanggar validasi.

Shortcode

Jika Anda menggunakan plugin yang bergantung pada shortcode, Anda harus memastikan kode yang mereka hasilkan adalah:

Valid AMP, e.g. Tanpa inline JS atau CSS
dan / atau
Markup dari daftar, di bagian sebelumnya, bahwa plugin AMP secara otomatis mengkonversi ke elemen kustom yang diperlukan.

Untuk memeriksanya, buka post yang Anda tahu menggunakan shortcode—perihal masalah diatas—dan gunakan plugin AMP Validator di Chrome / Chromium untuk melihat apakah post melewati validasi.

Javascript Kustom

Hal lain yang perlu diingat saat menggunakan plugin di situs ber-AMP adalah bahwa JavaScript tidak diizinkan, jadi plugin yang bergantung pada JavaScript tidak akan bekerja sama sekali. Misalnya, jika Anda menggunakan plugin untuk menggerakkan slider gambar berbasis JavaScript, itu tidak akan berfungsi.

Analytics

Jika Anda menggunakan analytic yang bergantung pada snippet JavaScript, pengecualian AMP terhadap JS kustom berarti Anda harus mengganti snippet dengan elemen amp-analytics di laman AMP Anda.

Ini berarti Anda terbatas pada layanan analytics Google yang didukung oleh AMP, namun kabar baiknya adalah ada beberapa vendor dalam daftar.

Anda bisa menggunakan plugin untuk menghasilkan kode-analisis-ramah AMP, atau Anda dapat menambahkan kode tracking secara manual.

Untuk penyertaan melalui plugin, plugin Glue Yoast memiliki bagian di mana Anda dapat menambahkan kode Google Analytics, dan akan mengubah kodenya menjadi format "ramah" AMP untuk Anda. Untuk menemukannya, masuklah ke bagian AMP di menu SEO untuk plugin Yoast, lalu ke tab Analytics:

Jika Anda tidak dapat menemukan plugin untuk mengintegrasikan layanan analisis yang Anda inginkan, Anda perlu memasukkan kode secara manual. Plugin AMP Automattic menawarkan filter yang dapat Anda gunakan untuk melakukannya.

Kode kustom untuk mengintegrasikan analisis Anda sendiri harus ditambahkan ke file "functions.php" dari theme kustom atau child theme, atau ke plugin khusus yang Anda buat sendiri.

Menyesuaikan Tampilannya

Ada beberapa cara berbeda yang bisa Anda berikan pada halaman AMP Anda sedikit gaya dan branding Anda sendiri.

Customizer Bawaan

Plugin AMP Automattic memiliki halaman bawaan di customizer dengan tiga pengaturan tampilan yang dapat Anda ubah. Untuk mengaksesnya masuk ke Appearance> AMP di menu admin:

Setelah berada di area kustomisasi Anda tidak akan melihat opsi desain AMP sampai Anda mengklik Design di kolom kiri. Dari sini Anda dapat memilih warna header, latar belakang header & warna link, dan Anda dapat memilih antara skema warna terang atau gelap.

Customizer Glue

Pilihan penyesuai bawaannya terbatas, jadi jika Anda ingin mencoba dengan beberapa pengaturan tambahan, plugin Yoast's Glue memiliki bonus tambahan dari beberapa kontrol desain, yang ditemukan dengan membuka SEO > AMP dan kemudian ke tab Desain.

Yoasts Glue plugin has the added bonus of some design controls — Plugin Glue Yoast dan Kontrol Desainnya

Modifikasi Kode

Jika customizer berbasis GUI yang tersedia tidak memadai, Anda mungkin ingin mulai menggali beberapa kode sehingga Anda dapat menggunakan markup CSS atau template Anda sendiri. Untuk melakukan ini, Anda bisa:

Buat theme kustom, (atau child theme), dan tambahkan kode ke file "function.php"
Buat plugin kustom

Jika Anda belum terbiasa melakukan salah satu hal di atas, hal terbaik mungkin tetap dengan pilihan penyesuaian GUI yang tersedia.

Timpa File "style.php" AMP Plugin

Semua CSS yang mengendalikan presentasi halaman AMP di plugin Automattic dapat ditemukan di subfolder "templates" dalam file "style.php". Anda sebaiknya tidak langsung mengedit kode dalam file ini karena Anda akan kehilangan semua perubahan saat pembaruan plugin. Namun Anda bisa menimpa file ini dengan file milik Anda sendiri.

Jika Anda membuat theme kustom atau child theme Anda sendiri, buatlah folder di dalamnya bernama "amp" dan di sana tambahkan CSS Anda ke file bernama "style.php". Plugin AMP secara otomatis akan menemukan file ini dan menggunakannya.

Jika Anda membuat plugin sendiri, Anda dapat menggunakan file PHP yang Anda inginkan untuk menyimpan CSS kustom Anda, lalu tentukan file tersebut dengan menggunakan filter amp_post_template_file yang digabungkan dengan cek kondisional untuk 'style' === $type.

Untuk rincian tentang cara melakukan ini, periksa dokumentasi Automattic di GitHub.

Menambahkan CSS

Jika Anda hanya perlu menambahkan sedikit kode kustom ke CSS yang ada di plugin, Anda dapat menggunakan tindakan amp_post_template_css. Untuk rincian lebih lanjut tentang bagaimana hal ini dilakukan, ditambah beberapa contoh, lihat bagian yang relevan dalam dokumentasi Automattic.

Dalam kasus menambahkan CSS, Anda juga memiliki opsi untuk menambahkan beberapa kode kustom melalui plugin Yoast's Glue, di area teks berlabel "Ekstra CSS" di bagian bawah tab Desain.

Catatan: Jika Anda menambahkan, atau menimpa CSS dari plugin AMP, pastikan Anda tidak menyertakan tag <style> apapun karena akan mengganggu tag <style amp-custom> yang penting dan telah ada di template plugin.

Template Kustom

Jika Anda mau, Anda dapat membuat markup khusus untuk halaman AMP Anda. Secara default plugin menggunakan file "single.php" dari folder "templates" nya, (yang pada gilirannya menggunakan file lain dari folder itu), namun Anda bisa membuatnya menggunakan file template yang Anda buat sendiri dengan menggunakan filter amp_post_template_file.

Ada serangkaian persyaratan yang harus dipenuhi agar template khusus menghasilkan markup AMP yang valid, jadi pastikan untuk mengikuti semua petunjuk yang ada dalam dokumentasi.

Ini juga merupakan ide bagus untuk melihat secara menyeluruh melalui folder "templates" plugin AMP untuk melihat bagaimana file-file itu diatur. Mulailah dengan file "single.php" dan lihat bagaimana menggabungkan file template lainnya dari sana.

Modifikasi Template Yang Telah Ada

Jika Anda tidak ingin membuat template sendiri untuk halaman AMP Anda, namun Anda hanya ingin memodifikasi aspek-aspek tertentu, ada berbagai tindakan dan filter yang siap dibuat agar Anda dapat melakukannya. Itu memungkinkan Anda melakukan hal-hal seperti menyesuaikan logo halaman, memodifikasi tampilan informasi penulis, menambahkan konten ke footer dan sebagainya.

Seperti biasa, baca lebih lanjut tentang opsi ini dan lihat contoh modifikasi di dokumen.

Menyatukan Semuanya

Mari kita rekap poin utama yang telah kita bahas:

Cara termudah untuk mendapatkan dukungan AMP di WordPress adalah dengan menggunakan plugin AMP dari Automatic.
Ini menghasilkan versi AMP dari posting Anda, namun tidak untuk konten lainnya (belum).
Versi AMP dicapai dengan menambahkan /amp/ atau /?amp=1 ke akhir URL post Anda.
Tambahkan metadata Yoast ke post Anda dengan menggunakan plugin Glue.
Elemen img, video, audio, iframe dan oEmbeds untuk YouTube, Instagram, Twitter dan Vine semuanya akan dikonversi secara otomatis menjadi elemen kustom AMP oleh plugin Automattic.
Periksa plugin dan shortcode yang Anda gunakan untuk memastikannya tidak bergantung pada custom JavaScript atau inline CSS, dan mereka menghasilkan kode yang dapat dikonversi ke markup AMP yang valid.
Tambahkan analytics dari vendor yang didukung melalui plugin atau melalui kode kustom Anda sendiri.
Lakukan kustomisasi berbasis GUI pada tampilan halaman AMP Anda dengan menggunakan penyesuai yang ada di plugin AMP Automattic.
Untuk penyesuaian berbasis GUI tambahan, gunakan tab Desain yang tersedia di Plugin Glue Yoast.
Untuk penyesuaian kode berbasis kode AMP Anda yang lebih canggih, CSS dan / atau markup buat theme atau plugin khusus.
Tambahkan CSS khusus dengan menimpa template "style.php" plugin atau menambahkannya menggunakan tindakan dan filter yang sesuai.
Tambahkan markup kustom dengan menimpa template "single.php" plugin atau memodifikasi bagian-bagian tertentu dengan menggunakan actions dan filter yang sesuai.

Saya harap semua hal di atas telah membantu Anda mendapatkan mengerti tentang bagaimana cara mendekatkan AMP di situs WordPress, dan juga bagaimana Anda bisa menyesuaikan post ber-AMP Anda.

Terima kasih telah membaca!