{"id":2992,"date":"2018-05-16T13:31:40","date_gmt":"2018-05-16T06:31:40","guid":{"rendered":"http:\/\/binus.ac.id\/knowledge\/?p=2992"},"modified":"2018-05-29T12:29:22","modified_gmt":"2018-05-29T05:29:22","slug":"wordpress-nav-menu-sebagai-pengatur-posisi-post-pada-layout","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/knowledge\/2018\/05\/wordpress-nav-menu-sebagai-pengatur-posisi-post-pada-layout\/","title":{"rendered":"WordPress Nav Menu sebagai pengatur posisi post pada layout"},"content":{"rendered":"

Selain fungsi utamanya sebagai navigasi<\/em> pada WordPress, wp-nav-menu<\/a> dapat juga berfungsi sebagai pengatur posisi layout<\/em> dari sebuah post, custom post,<\/em> atau custom link<\/em> yang membutuhkan hierarki atau urutan dalam penempatannya. Sebagai contoh pada tulisan ini akan menggunakan bagian layout dengan tipe our team <\/em>seperti pada halaman people<\/em> pada website English Department BINUS University.<\/a><\/p>\n

\"\"<\/p>\n

Dibandingkan dengan menampilkan post menggunakan WordPress loop<\/em> biasa dimana urutan post hanya bisa diatur menggunakan order <\/em>pada saat membuat query<\/em>, wp-nav-menu lebih memudahkan user untuk mengatur posisi layout lebih fleksibel. <\/em>User hanya perlu menekan, tarik dan melepaskan (drag and drop<\/em>) panel menu yang dipilih pada menu Appearance -> Menus<\/em> di dashboard admin WordPress. Urutan post menggunakan wp-nav-menu bersifat bebas sesuai dengan keinginan user. Berikut ini merupakan tampilan halaman dashboard<\/em> admin untuk pengaturan menu pada halaman people<\/em> BINUS English :<\/p>\n

\"\"<\/p>\n

Disamping keuntungan diatas terdapat juga kekurangan menggunakan wp-nav-menu yaitu diperlukan plugin<\/em> tambahan pada saat migrasi website agar nav menu yang sudah di-setting<\/em> dapat ikut berpindah tanpa harus mengatur ulang kembali.<\/p>\n

Untuk menggunakan wp-nav-menu sebagai pengatur posisi post pada layout langkah-langkahnya adalah sebagai berikut:<\/p>\n

    \n
  1. Tampilkan menu pada halaman yang akan digunakan, pada contoh ini adalah halaman archive organisasi dengan menambahkan script berikut :\n<\/p>\n

    \"\"<\/p>\n<\/li>\n

  2. Register menus<\/em> pada functions.php<\/em> theme anda dengan cara menambahkan script<\/em> berikut :\n<\/p>\n

    \"\"<\/p>\n<\/li>\n

  3. Langkah berikutnya adalah menggunakan variabel pada poin kedua diatas pada post loop, dengan cara sebagai berikut :\n<\/p>\n

    \"\"<\/p>\n<\/li>\n

  4. Pilih post list atau custom link pada sebelah kiri ke dalam area Menu Structure <\/em>sesuai dengan kebutuhan\n<\/p>\n

    \"\"<\/p>\n

    Buat menu pada halaman dashboard admin WordPress dengan langkah sebagai berikut :<\/p>\n

      \n
    1. Login ke halaman admin WordPress anda<\/li>\n
    2. Pilih menu Appearance -> Menus<\/li>\n
    3. Buat menu baru dengan menekan link create a new menu<\/em><\/em><\/em>\n

      <\/P>\"\"<\/p>\n

      <\/P><\/li>\n

    4. Setelah membuat menu baru, akan muncul screen berikut lalu pilih checkbox lokasi menu sesuai dengan nama menu yang telah kita buat seperti berikut, pada contoh ini adalah menu Organization (checkbox<\/em> paling bawah)\n

      <\/P>\"\"<\/p>\n

      <\/P><\/li>\n

    5. Save Menu<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      – – –<\/p>\n

      Featured Image by Unsplash.com (Ilija Boshkov)<\/p>\n","protected":false},"excerpt":{"rendered":"

      Selain fungsi utamanya sebagai navigasi pada WordPress, wp-nav-menu dapat juga berfungsi sebagai pengatur posisi layout dari sebuah post, custom post, atau custom link yang membutuhkan hierarki atau urutan dalam penempatannya. Sebagai contoh pada tulisan ini akan menggunakan bagian layout dengan tipe our team seperti pada halaman people pada website English Department BINUS University. Dibandingkan dengan […]<\/p>\n","protected":false},"author":34,"featured_media":3098,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83],"tags":[143,79],"class_list":["post-2992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-nav-menu","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/2992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/comments?post=2992"}],"version-history":[{"count":41,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/2992\/revisions"}],"predecessor-version":[{"id":3128,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/posts\/2992\/revisions\/3128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media\/3098"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/media?parent=2992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/categories?post=2992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/knowledge\/wp-json\/wp\/v2\/tags?post=2992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}