{"id":4414,"date":"2023-06-26T12:20:42","date_gmt":"2023-06-26T05:20:42","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4414"},"modified":"2023-06-26T12:40:47","modified_gmt":"2023-06-26T05:40:47","slug":"cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress\/","title":{"rendered":"Cara Menambahkan Menu Navigasi Kustom di Tema WordPress"},"content":{"rendered":"\n<p>Apakah Anda ingin menambahkan menu navigasi khusus di tema WordPress Anda?<\/p>\n\n\n\n<p>Semua tema telah menetapkan lokasi tempat Anda dapat menampilkan menu navigasi. Namun, secara default, Anda tidak dapat menambahkan menu di mana pun kecuali lokasi yang telah ditentukan sebelumnya.<\/p>\n\n\n\n<p>Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan menu navigasi khusus ke area mana pun dari tema WordPress Anda.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress\/#Mengapa_Menambahkan_Menu_Navigasi_Kustom_di_Tema_WordPress\" >Mengapa Menambahkan Menu Navigasi Kustom di Tema WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress\/#Buat_Menu_Navigasi_Kustom_di_WordPress_Menggunakan_Kode_Lanjutan\" >Buat Menu Navigasi Kustom di WordPress Menggunakan Kode (Lanjutan)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress\/#Memasukkan_menu_navigasi_khusus_menggunakan_plugin_WPCode_WordPress\" >Memasukkan menu navigasi khusus menggunakan plugin WPCode WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/cara-menambahkan-menu-navigasi-kustom-di-tema-wordpress\/#Menambahkan_menu_navigasi_khusus_ke_tema_WordPress_Anda\" >Menambahkan menu navigasi khusus ke tema WordPress Anda<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mengapa_Menambahkan_Menu_Navigasi_Kustom_di_Tema_WordPress\"><\/span>Mengapa Menambahkan Menu Navigasi Kustom di Tema WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Menu navigasi adalah daftar tautan yang menunjuk ke area penting situs web Anda. Mereka memudahkan pengunjung untuk menemukan konten yang menarik, yang dapat meningkatkan tampilan halaman dan mengurangi rasio pentalan di WordPress.<\/p>\n\n\n\n<p>Lokasi pasti menu Anda akan bervariasi berdasarkan tema WordPress Anda. Sebagian besar tema memiliki beberapa opsi, sehingga Anda dapat membuat menu berbeda dan menampilkannya di lokasi berbeda.<\/p>\n\n\n\n<p>Untuk melihat di mana Anda dapat menampilkan menu di tema WordPress Anda saat ini, cukup buka <strong>Appearance \u00bb Menus<\/strong> lalu lihat bagian \u2018Display location.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Buat_Menu_Navigasi_Kustom_di_WordPress_Menggunakan_Kode_Lanjutan\"><\/span>Buat Menu Navigasi Kustom di WordPress Menggunakan Kode (Lanjutan)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Anda dapat menambahkan menu navigasi khusus menggunakan kode. Anda akan sering menemukan panduan dengan instruksi untuk menambahkan cuplikan kode khusus ke file <strong>functions.php<\/strong> tema Anda.<\/p>\n\n\n\n<p>Namun, kami tidak merekomendasikan metode ini karena kesalahan kecil dalam kode Anda dapat menyebabkan sejumlah kesalahan umum WordPress, atau bahkan merusak situs Anda sepenuhnya. Anda juga akan kehilangan kode khusus saat memperbarui tema WordPress Anda.<\/p>\n\n\n\n<p>Itu sebabnya kami merekomendasikan menggunakan <strong>WPCode<\/strong>. Ini adalah cara termudah dan teraman untuk menambahkan kode khusus di WordPress tanpa harus mengedit file inti WordPress apa pun.<\/p>\n\n\n\n<p>Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin <strong>WPCode <\/strong>gratis di situs web Anda. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.<\/p>\n\n\n\n<p>Setelah aktivasi, buka <strong>Code Snippets \u00bb<\/strong>&nbsp;<strong>Add Snippet<\/strong> di dashboard WordPress Anda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1024x533.png\" alt=\"wpcode add snippet \" class=\"wp-image-4423\" width=\"512\" height=\"267\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1024x533.png 1024w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-300x156.png 300w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-768x400.png 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image.png 1213w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n\n\n\n<p>Di sini, Anda akan melihat semua cuplikan siap pakai yang dapat Anda tambahkan ke situs Anda.<\/p>\n\n\n\n<p>Kami ingin membuat cuplikan kami sendiri, jadi arahkan mouse Anda ke <strong>\u2018Add Your Custom Code&#8217;<\/strong>,, lalu klik  <strong>\u2018Use snippet.\u2019<\/strong><\/p>\n\n\n\n<p>Untuk memulai, masukkan judul untuk cuplikan kode khusus. Ini bisa berupa apa saja yang membantu Anda mengidentifikasi cuplikan di dasbor WordPress Anda.<\/p>\n\n\n\n<p>Setelah itu, buka dropdown &#8216;Code Type&#8217; dan pilih &#8216;PHP Snippet.&#8217;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1-1024x441.png\" alt=\"wpcode create custom snippet \" class=\"wp-image-4426\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1-1024x441.png 1024w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1-300x129.png 300w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1-768x331.png 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-1.png 1243w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Setelah Anda selesai melakukannya, cukup rekatkan cuplikan berikut ke dalam editor kode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\nfungsi wpb_custom_new_menu() {\n    register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));\n}\nadd_action( 'init', 'wpb_custom_new_menu' );\n<\/code><\/pre>\n\n\n\n<p><br>Ini akan menambahkan lokasi menu baru ke tema Anda, yang disebut <strong>&#8216;My Custom Menu&#8217;<\/strong>. Untuk menggunakan nama yang berbeda, cukup sesuaikan potongan kode.<\/p>\n\n\n\n<p>Jika Anda ingin menambahkan lebih dari satu menu navigasi khusus ke tema Anda, cukup tambahkan baris tambahan ke cuplikan kode. Misalnya, di sini kami menambahkan dua lokasi menu baru ke tema kami, yang disebut <strong>My Custom Menu<\/strong> dan<strong> Extra Menu<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\n\nfunction wpb_custom_new_menu() {\n  register_nav_menus(\n    array(\n      'my-custom-menu' =&gt; __( 'My Custom Menu' ),\n      'extra-menu' =&gt; __( 'Extra Menu' )\n    )\n  );\n}\nadd_action( 'init', 'wpb_custom_new_menu' );<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Setelah itu, scroll ke bawah. Jika belum dipilih, pilih metode<strong> \u2018Auto Insert\u2019<\/strong> sehingga WPCode menambahkan cuplikan di seluruh situs Anda.<\/p>\n\n\n\n<p>Setelah itu, buka dropdown<strong> &#8216;Location&#8217; <\/strong>dan <strong>klik &#8216;Run Everywhere.&#8217;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2-1024x353.png\" alt=\"wpcode penyimpanan\" class=\"wp-image-4433\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2-1024x353.png 1024w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2-300x104.png 300w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2-768x265.png 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-2.png 1191w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Kemudian, Anda siap untuk menggulir ke bagian atas layar dan mengklik switch <strong>&#8216;Inactive&#8217; <\/strong>sehingga berubah menjadi <strong>&#8216;Active&#8217;<\/strong>.<\/p>\n\n\n\n<p>Terakhir, lanjutkan dan klik <strong>&#8216;Save Snippet&#8217; <\/strong>untuk mengaktifkan cuplikan ini.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Memasukkan_menu_navigasi_khusus_menggunakan_plugin_WPCode_WordPress\"><\/span>Memasukkan menu navigasi khusus menggunakan plugin WPCode WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah itu, pergi ke <strong>Appearance \u00bb Menus<\/strong> dan lihat area<strong> &#8216;Display location&#8217;.<\/strong><\/p>\n\n\n\n<p>Anda sekarang akan melihat opsi<strong> \u2018My Custom Menu\u2019<\/strong> yang baru.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3-1024x509.png\" alt=\"wpcode custom menu \" class=\"wp-image-4436\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3-1024x509.png 1024w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3-300x149.png 300w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3-768x382.png 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-3.png 1394w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Menambahkan_menu_navigasi_khusus_ke_tema_WordPress_Anda\"><\/span>Menambahkan menu navigasi khusus ke tema WordPress Anda<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebagian besar situs web menampilkan menu navigasi langsung di bawah bagian tajuk. Ini berarti menu adalah salah satu hal pertama yang dilihat pengunjung, bersama dengan logo atau judul situs.<\/p>\n\n\n\n<p>Namun, Anda dapat menampilkan menu navigasi khusus di mana pun Anda mau dengan menambahkan beberapa kode ke file template tema.<\/p>\n\n\n\n<p>Di dasbor WordPress Anda, buka <strong>Appearance \u00bb Theme File Editor<\/strong>.<\/p>\n\n\n\n<p>Di menu sebelah kanan, pilih template tempat Anda ingin menambahkan menu. Misalnya, jika Anda ingin menampilkan menu navigasi khusus di header situs web Anda, biasanya Anda akan memilih file<strong> header.php<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4-1024x481.png\" alt=\"\" class=\"wp-image-4442\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4-1024x481.png 1024w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4-300x141.png 300w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4-768x361.png 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4-520x245.png 520w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2023\/06\/image-4.png 1407w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><br>Untuk bantuan menemukan file template yang tepat, silakan lihat panduan kami tentang cara menemukan file mana yang akan diedit di tema WordPress Anda.<\/p>\n\n\n\n<p>Setelah memilih file, Anda perlu menambahkan fungsi wp_nav_menu dan menentukan nama menu kustom Anda. Misalnya, dalam cuplikan kode berikut, kami menambahkan Menu Kustom Saya ke tajuk tema:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">wp_nav_menu( array( 'theme_location'=&gt;'my-custom-menu', 'container_class'=&gt;'custom-menu-class' ) );<\/code><\/pre>\n\n\n\n<p>Setelah menambahkan kode, klik tombol<strong> &#8216;Update File&#8217;<\/strong> untuk menyimpan perubahan Anda.<\/p>\n\n\n\n<p>Sekarang jika Anda mengunjungi situs Anda, Anda akan melihat menu kustom beraksi.<\/p>\n\n\n\n<p>Secara default, menu Anda akan muncul sebagai daftar berpoin polos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Referensi: <\/p>\n\n\n\n<p><a href=\"https:\/\/www.wpbeginner.com\/wp-themes\/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes\/\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/www.wpbeginner.com\/wp-themes\/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apakah Anda ingin menambahkan menu navigasi khusus di tema WordPress Anda? Semua tema telah menetapkan lokasi tempat Anda dapat menampilkan menu navigasi. Namun, secara default, Anda tidak dapat menambahkan menu di mana pun kecuali&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2423,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4414"}],"version-history":[{"count":10,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4414\/revisions"}],"predecessor-version":[{"id":4448,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4414\/revisions\/4448"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/2423"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}