วันนี้มาใส่ Dropdown Menu ใน WordPress Theme กันครับ
บางธีมของ WordPress ไม่ได้ใส่ Suckerfish Dropdown Menu ให้ด้วย บาง theme ก็มี บาง theme ก็ไม่มี หากว่าเราโหลดธีมมาใช้ แต่เกิดไม่มีปลั๊กอินตัวนี้ติดมาด้วย เราสามารถทำเมนูแบบนี้ได้
1. ดาวน์โหลดสคริปต์ jquery.superfish.js
2. อับโหลดไฟล์ jquery.superfish.js ไปไว้ที่ /wp-content/themes/ธีมที่ใช้/scripts/
ถ้าธีมที่เราใช้ยังไม่มีโฟลเดอร์ scripts ให้สร้างโฟลเดอร์เพื่อเก็บไฟล์ jquery.superfish.js ก่อน
3. เปิดไฟล์ header.php ในธีมที่เราใช้ แล้วใส่โค้ดต่อไปนี้ ใส่ไว้ก่อน </head>
<script src=”<?php bloginfo(‘template_url’); ?>/scripts/jquery.superfish.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});</script>
4. ใส่โค้ดต่อไปนี้ ใน <body> หรือ ตำแหน่งที่เราต้องการวางเมนู
<div id=”menu”>
<ul>
<li <?php if (is_home()) { echo ‘class=”current_page_item”‘; } ?>><a href=”<?php echo get_option(‘home’); ?>/” title=”Home”>หน้าแรก</a></li>
<li><a href=”#” title=”Categories”>หมวดหมู่</a>
<ul>
<?php wp_list_categories(‘title_li=’); ?>
</ul>
</li>
<?php wp_list_pages(‘title_li=’); ?>
<li><a href=”<?php bloginfo(‘rss2_url’); ?>” title=”Subscribe”>Subscribe</a></li>
</ul>
</div>
5. เพิ่ม CSS ต่อไปนี้ ในไฟล์ Stylesheet (style.css) ของธีมที่เราใช้
#menu {
float: left; /*จัดไว้ซ้ายมือ*/
/*width: 480px;*/ /*ปรับความกว้างของเมนู*/
height: 26px;
background: #2A2A2A; /*เปลี่ยนสีพื้นหลังตามให้เข้ากับธีมที่เราใช้*/
text-transform: uppercase;
color: #FFFFFF; /*สีตัวอักษร*/
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
margin-top: 1px;
text-align: right;
}
@charset “utf-8″;
.sf-menu,.sf-menu * {
list-style: none;
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
text-align: left;
}
.sf-menu {
line-height: 1.0;
float: right;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 150px;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
background: #535353; /*เปลี่ยนสีพื้นหลังตาม ให้เข้ากับธีมที่เราใช้*/
}
.sf-menu li {
float: left;
position: relative;
background: #2A2A2A; /*เปลี่ยนสีพื้นหลังตามให้เข้ากับธีมที่เราใช้*/
}
.sf-menu a {
display: block;
position: relative;
border-left: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
text-decoration: none;
padding: 6px 10px 8px 10px;
}
* + html .sf-menu a {
padding: 7px 10px 7px 10px;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
left: 0;
top: 26px;
z-index: 99;
}
.sf-menu a,.sf-menu a:visited {
color: #FFFFFF;
}
.sf-menu li li {
background: #2A2A2A; /*เปลี่ยนสีพื้นหลังตาม ให้เข้ากับธีมที่เราใช้*/
border-top: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
border-right: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
border-bottom: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
margin: 0 0 -1px 0;
}
.sf-menu li li li {
left: -270px;
top: -1px;
background: #2A2A2A; /*เปลี่ยนสีพื้นหลังตาม ให้เข้ากับธีมที่เราใช้*/
border-top: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
border-right: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
border-bottom: 1px solid #1A1A1A; /*เปลี่ยนสีเส้น ตามให้เข้ากับธีมที่เราใช้*/
margin: 0 0 -1px 0;
}
.sf-menu a.sf-with-ul {
min-width: 1px;
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em;
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul,ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul,ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
left:10em;
top:0;
}
.sf-menu ul .sf-sub-indicator,.sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0;
}
บรรทัดที่ผมบอกให้เปลี่ยนสีพื้น สีเส้น อันนี้ต้องเปลี่ยนใหม่ครับ เพื่อให้เข้ากับธีมที่เราใช้ นอกนั้นไม่ต้องเปลี่ยนโค้ดอะไร
ที่มา : http://www.krusak.com/blog/wordpress/ทำ-dropdown-menu-ใน-wordpress.html