Buat custom menu di word press

798 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
798
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Buat custom menu di word press

  1. 1. Buat Custom Menu di WordPressSeringkalisebuah web/blog mempunyaianekaragam niche dankategori yangberanekaragam.Beberapa theme kurangnyamandilihatsusunan menu baik di menu utamamaupunmenu sidebar.Berikut tutorial Cara Buat Custom Menu di WordPressuntuktampilan di sidebar.1. Support ThemeTheme yang kamugunakanharus support untuk custom menu, sekiranyatidak support biasanyasidebar masihbisa di custom.2. Appearance – MenusPilih di menu Dashboard – Appearance – Menus- kliktanda +- isikannama Menu, misal: Kategori 1- klikCREATE MENU,makaakantampilpemberitahuan ” The kategori 1 menu has been successfully created ”3. MemilihKategoriatau Page/Halaman- centangikategoriatauhalaman yang ingin di tampilkan di sidebar- klikadd to menu
  2. 2. 4. Custom LinkMenu iniuntukmenambahkan Link tertentu- isikan URL danTabel/Judul- klik Add Menu, otomatistampil di custom menu.5. MengaturletakKategori- geseratau drag menu ygsdhjadiseperticontohgambarcontoh:kategori “Google” di drag kebawahkategori “SEO”, sehingga Google menjadi subkategoridariSEO- bilasudahklikSAVE MENU6. Mengatur Widget sidebar- masukke Appearance – Widgets- drag menu “Custom Menu” ke sidebar- Pilih Menu “Kategori 1″ yang tadisudahkamubuat.- IsikanTitle misal: KategoriGue- KlikSAVE
  3. 3. Inilahcontoh custom menu wordpress di sidebar yang sudahjadi.Selesai.SemogaBermanfaat tutorial Cara Buat Custom Menu di WordPress Sidebar.
  4. 4. Membuat Menu HorisontalBerikutadalahcarasederhanauntukmembuat menu horisontal.Sebaiknyadaftarmenunyajanganterlalubanyakdanusahakansesuaikandenganlebar theme yangandagunakankarenabiasanyajikaterlalubanyakdaftar menu yangandatampilkanbisamenyebabkanbeberapamasalahtataletak.<div id="navmenu"><ul> <li><a href="<?php echo get_settings(home); ?>">HOME</a></li> <li><a href="wordpress/recipes/">RECIPES</a></li> <li><a href="wordpress/travel/">TRAVEL</a></li> <li><a href="http://www.wordpress.org">WORDPRESS</a></li></ul></div>Seperti yang Andalihat, disertakanjuga tag PHPuntuk “HOME” danbeberapakategori, serta linkkeWordPress. Daftar menu iniakanterlihatsepertiini, dalambentuk yang paling sederhana: HOME RECIPES TRAVEL WORDPRESSAndajugabisagunakan<?phpwp_list_pages(‘title_li=&depth=0&sort_column=menu_order’);?>untukmenampilkandaftarkategorisecaraotomatisdari blog anda.<div id="navmenu"><ul><li><a href="<?php echo get_settings(home); ?>">HOME</a></li><?phpwp_list_pages(title_li=&depth=0&sort_column=menu_order); ?><li><a href="http://www.wordpress.org">WORDPRESS</a></li></ul></div>Menu inibiasanyaditempatkan di bawah header.Di WordPress v1.5, buka file header.phpdalamfolder Theme WordPress yang andagunakan. Paste kode di bagianbawah file setelah headerDIVdankemudiansimpan file tersebut.Di WordPress v1.2, buka fileindex.phpdancariakhirdaribagianheaderdantempatkankodetersebut di sana.Tambahkan CSSTanpa CSS, list ygkitabuattadisecara default akantampilvertikal. Melaluistylesheet CSS,kitaperlumenambahkanreferensiuntuknavmenudanlangkahpertamaadalahmenghapus bulletdanmenetapkan margin dan padding kenoluntukseluruhdaftar.#navmenuul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }Setelah CSS ituandatambahkanke theme anda, simpandanlihat di browserandabahwatidakadalagi bullet.Sekarang, kitaperlumenambahkanteknik yang akanmenetapkandaftar menu inimenjadigarishorizontal.#navmenuul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }#navmenu li {display: inline; }Karenainiadalah link, kitaharusmemperbaikitampilandari link. Ada banyakhal yangdapatAndalakukanuntukdaftar menu ini, tetapiuntuksekarang,marikitatambahkanbeberaparuangkedaftar link sehinggamasing-masing menu
  5. 5. tidakkelihatanrapatdanmenghapus link default yang memilikigarisbawahserta link yangberubahketika mouse bergerak di atasnya.#navmenuul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }#navmenu li {display: inline; padding: 5px 20px 5px 20px}#navmenu a {text-decoration:none; color: blue; }#navmenu a:hover {color: purple; }Beberapatambahan agar tampilannyadapat di ubah-ubah:#navmenuul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }#navmenu li {display: inline; }#navmenuul li a {text-decoration:none; margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink;}#navmenuul li a:hover {color: purple; background: yellow; }jikaandamelakukannyadenganbaik, makatampilannyaakansepertiberikut:HOMERECIPESTRAVELWORDPRESSJikatanpa CSSSalah satu yang harusdicatatbahwasemuahal di atasakanmempunyaitampilanberbeda di browserjikatanpa CSS, yang terjadiadalahdaftarmasihakandiformatsecaravertikal, bukan horizontal.Olehkarenaitu, untukmembuatnya portable untukbeberapa browser, salahsatu yangbisaandagunakanmisalnya:<p>Archives:<?phpwp_get_archives(format=custom&show_post_count=1&type=yearly&after=;); ?>Categories:<?php echo str_replace(<br />,;,wp_list_categories(style=&show_count=1&echo=0));?></p>Nah menuinitentusajadapatandaubahtampilannya.GunakanimajinasiAndadandesainandasendiriuntukgantiwarna, atauapapun yang Andainginkan.

×