Cara Membuat Menu Navigasi di AMP Wordpress - imsahadi.com Cara Membuat Menu Navigasi di AMP Wordpress
Skip to content Skip to sidebar Skip to footer

Cara Membuat Menu Navigasi di AMP Wordpress

Cara Membuat Menu Navigasi di AMP Wordpress. Tutorial ini merupakan lanjutan saya yang pernah membahas tuntas tentang menggunakan AMP. Ini juga merupakan pengalaman saya yang dapat saya bagikan diblog ini. Mudah-mudahan memang bisa membantu kamu semua. 

Cara Membuat Menu Navigasi di AMP Wordpress

Banyak dari pengguna yang masih bingung ketika ingin menambahkan fitur di situs AMP mereka. Karena keterbatasan dari plugin ini membuat banyak pengguna tidak bisa banyak melakukan apa-apa. Mulai dari menambahkan Javascript atau Widget keren ke halaman AMP.


Saya sendiri juga sempat kebingungan ketika pertama kali menginstal plugin AMP Wordpress. Masalahnya, saya sendiri tidak mengetahui secara pasti tentang bagaimana melakukan konfigurasi. 

Hingga akhirnya, singkat cerita saya menemukan banyak tutorial.  Namun, ini sedikit berbeda ketika saya memiliki keinginan untuk menambahkan menu navigasi di AMP Wordpress. Kebetulan, template Wordpress yang saya gunakan memang tidak kompatibel dengan AMP.

Sehingga, saya harus bersusah payah untuk menerapkan AMP di Wordpress. Pilihan yang bisa saya lakukan adalah dalam mode pembaca (Reader). Meski tersedia beberapa opsi dan template AMP lainnya, saya sendiri lebih suka dengan pengaturan sederhana.

Akhirnya saya berpikir untuk menambahkan menu di template bawaan plugin AMP tersebut. Ternyata, itu tidak sesulit yang saya bayangkan. Kita bisa membuat tampilan blog kita cukup keren. Karena pada opsi Reader ini, kita tidak ada tambahan menu di header. Yang tersedia hanyalah mode untuk membaca saja.

Sebagai pemilik blog yang sudah siap dengan tampilan AMP, kita perlu kreatif dalam mengoptimasi blog kita. Termasuk menambahkan fitur lainnya yang tidak ada pada blog AMP kita sendiri. Pada intinya, kita perlu melakukan pekerjaan sendiri ketika ingin membuat tampilan AMP situs kita benar-benar rapih. 

Melalui postingan ini, saya akan mencoba untuk berbagi tips mengenai cara membuat menu navigasi di AMP Wordpress. Sebenarnya, kita hanya cukup menambahkan sedikit kode ke template AMP yang kita gunakan. Tapi kalau template kita memang sudah dirancang kompatibel dengan plugin AMP, tentunya kita bisa mengerjakan semuanya dengan mudah.

Namun bagi yang belum memiliki tema yang valid AMP seperti saya, ini menjadi pekerjaan tambahan. Tampilan AMP memang bisa memberikan banyak keuntungan bagi blog kita sendiri. Salah satunya adalah kecepatan loading dan pengalaman pengguna yang telah ditingkatkan.

Banyak sekali para blogger telah beralih untuk membuat situs web mereka valid dengan tampilan AMP. Akan tetapi, ada juga sebagian pengguna yang masih ragu untuk menjadikan blog mereka cepat dengan didukung plugin AMP. Mungkin karena ada yang berpikir ribet atau memang karena keterbatasan yang akan didapati.

Sekarang buat kamu yang sudah menggunakan AMP, kamu bisa menjadikan tutorial ini sebagai tambahan dalam memahami tentang AMP. Ini bukan untuk AMP versi Ahmed Kaludi ya, tapi ini adalah AMP versi Automatic.

Sebagai bagian dalam menambahkan fitur, kamu bisa melakukannya secara manual. Cara membuat menu navigasi di AMP Wordpress kalau kamu ingin tahu, kamu bisa menyimak tips ini dengan teliti. Ini merupakan tutorial sederhana yang dapat saya share untuk membantu kamu agar bisa mengoptimasi tampilan AMP blog kamu.

Tutorial membuat menu navigasi di AMP ini saya bagi menjadi dua bagian, kamu bisa menggunakan mana yang sekiranya dapat kamu terapkan di blog AMP kamu. Nantinya kamu juga dapat menambahkan atau mengkustomisasi sendiri dari kode yang ada.

Berikut Cara Membuat Menu Navigasi di AMP Wordpress (Reader)

Menu Navigasi Pertama

1. Tutorial ini dilakukan melalui cPanel. Silahkan login terlebih dulu ke cPanel hosting kamu.

2. Kemudian buka File Manager dari cPanel. Pilih publick_html > wp-content > plugins > amp > templates.

3. Dari template tersebut, pilih atau edit file html-start.php dan biasanya akan terbuka jendela baru. Tambahkan kode berikut sebelum atau diatas </head>.

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

4. Selanjutnya, edit file header-bar.php. hapus kode <header id="top" class="amp-wp-header"> sapai penutup </header>. Lalu ganti dengan kode berikut.


Penjelasan:

  • Pada URL LOGO Blog, kamu bisa mengganti dengan url logo dari blog kamu sendiri.
  • Pada width="130" height="35, kamu bisa mengatur ukuran logo yang akan ditampilkan.
  • Pada URL MENU, kamu bisa menyesuaikan URL menu serta namanya.

5. Setiap kali mengedit atau menambahkan kode, jangan lupa klik Save.

6. Cek blog kamu pada tampilan AMP melalui perangkat smartphone untuk melihat hasilnya.

Menu Navigasi Kedua

1. Silahkan login terlebih dulu ke cPanel hosting kamu.

2. Buka File Manager dari cPanel. Pilih publick_html > wp-content > themes > themes default yang kamu gunakan.

3. Dari template tersebut, pilih dan edit file functions.php. Tambahkan kode berikut diakhir atau paling bawah.



4. Jangan lupa Save untuk menyimpan perubahan.

5 Selanjutnya, masuk ke Dashboard Wordpress > Appearance > Menus. Silahkan pilih Create a New Menu. Pada kolom Menu Name, tuliskan atau isi dengan nama AMP Sidebar Menu. Jangan lupa untuk menambahkan kategori yang diperlukan seperti halnya menu yang ada di blog kamu.

6. Pada Menu Settings, pilih hanya AMP Sidebar Menu. Lalu klik Save Menu untuk menyimpan.

7. Berikutnya, buka File Manager dari cPanel. Pilih publick_html > wp-content > plugins > amp > templates. Edit file header-bar.php hingga terbuka jendela baru. Tambahkan saja kode berikut sebelum kode </header>.



Penjelasan:

  • Pada URL LOGO BLOG, tambahkan url dari logo blog kamu

8. Untuk mempercantik tampilannya, kamu dapat menambahkan kode CSS berikut pada Style.php di paling akhir.


9. Jangan lupa simpan perubahan yang telah kamu buat tersebut.

Kamu sudah berhasil memahami dengan baik dan menerapkan semua tutorial tentang cara membuat menu navigasi di AMP Wordpress. Segera cek blog kamu dari smartphone dan dengan tampilan AMP untuk melihat hasilnya. Atau, kamu bisa membuka salah satu postingan yang ada.

Contohnya: 

https://www.domain.com/2021/04/cara-menambahkan-menu-navigasi-di-amp-di-wordpress.html/amp

Sebagai tutorial tambahan, kamu juga dapat menyimak video berikut. Semua langkah diatas telah dirangkum dan kamu bisa memahaminya dengan ketelitian kamu sendiri.



Itulah tutorial saya yang membahas tentang cara membuat menu navigasi di AMP Wordpress. Semoga bisa membantu kalian semua yang ingin mengoptimasi tampilan AMP pada mode 'Reader'.

2 comments for "Cara Membuat Menu Navigasi di AMP Wordpress"

  1. Mas klo menambah search bar gmn? Ada tutorialnya?

    ReplyDelete
    Replies
    1. Dear...Admin
      Mengenai menambahkan fitur search sepertinya belum sempat kami bahas

      Delete