การแสวงหาเมนูแนวตั้งที่สมบูรณ์แบบ ...

ส่วนที่ 1 ของการกวดวิชานี้ อธิบายขั้นตอนตามกระบวนการขั้นตอนของการสร้างแนวนอนเมนูที่ซ้อนกันหลายระดับสำหรับ ชุดรูปแบบวิทยานิพนธ์ Wordpress . ส่วนที่ 2 จะดำเนินการต่อเพื่อเพิ่มประสิทธิภาพการทำงานนี้ ที่นี่เราจะเพิ่มรุ่น"ความมืด"ของเมนูการนำทางแนวนอนและฉันจะสอนวิธีการสลับไปมาระหว่าง"สดใส"และรุ่น"มืด" ส่วนที่ 2 เป็น superset ของส่วนที่ 1 มันมีทั้งหมดจากส่วนที่ 1 + + เพิ่ม stuff เย็นมากขึ้น

ความคิดหลักที่ฉันต้องการที่จะนำเสนอคือการเพิ่มเมนูแนวตั้ง ชุดรูปแบบวิทยานิพนธ์ (และ Wordpress ทั่วไป) ฉันถูกมองหาที่มีความยืดหยุ่นมาก SEO เมนูแนวตั้งที่เป็นมิตรและหลายเบราว์เซอร์ที่รองรับที่จะช่วยให้การสร้างระดับการทำรังไม่ จำกัด

เว็บมีตันของหน้าเว็บที่เกี่ยวกับเรื่องนี้ แต่เมื่อผมเริ่มที่จะพยายามทุกตัวอย่างเหล่านี้ -- พวกเขาทั้งสองยากจนลงลดลงนอกจากการสนับสนุนเฉพาะในจำนวนที่ จำกัด ระดับหรือ misbehaved ในเกตส์ + Ballmer ของ junksplorer 6 สุดท้ายผมได้กลับไปยังพยายามและความเชื่อถือ ไดรฟ์แบบไดนามิกเมนู เป็นตัวอย่างแนวตั้งของพวกเขาพิสูจน์ให้เห็นว่าเป็นกรณีที่ดีที่เหมาะกับความต้องการที่เข้มงวดของฉัน ฉันมีการปรับเปลี่ยนอย่างมีนัยสำคัญแม้ว่าพวกเขาเพื่อให้แน่ใจว่ามันเหมาะกับรูปแบบวิทยานิพนธ์
การแสวงหาความสมบูรณ์แบบต่อเนื่อง ...

ผมใช้เวลาประมาณ 16 ชั่วโมงค้นหาการประกอบการทดสอบการแก้ไขการขัดและการปรับแต่งเมนูแนวตั้งของ CSS และ. รหัส js และ 3 / 4 ของเวลาที่ถูกใช้ในการทำให้การทำงานใน MSIE 6
Anyways, ฉันมีความสุขกับผลสุดท้าย เมนูนำทางก่อให้เกิดแนวตั้งได้ ทั้งหมดผลประโยชน์เดียวกัน ที่มีเมนูแนวนอน

มีความสามารถในการเพิ่มเมนูแนวตั้งคือสิ่งที่สำคัญมากเกี่ยวกับ 70-80% ของพอร์ทัลบนเว็บ เมนูแนวนอนมี จำกัด "พื้นที่"เพื่อรองรับเลือกเมนูมากมาย แต่เมนูแนวตั้งไม่ได้มีข้อ จำกัด นี้และจะช่วยอย่างกว้างขวาง ดังนั้นที่นี่เราไป

จำนวนขั้นตอนที่จะทำให้มันเกิดขึ้นจะมีคำอธิบายอยู่แล้วใน ส่วนที่ 1 ของการกวดวิชา เพื่อให้นี้จะทำให้หนึ่งบิตที่สั้น แต่มีผลมากขึ้นคุณสมบัติมากมาย

ดังนั้นที่นี่มันจะไป :

อาคารมิตร SEO, แนวตั้ง, หลายเมนูลำดับชั้นที่ซ้อนกันสำหรับ Wordpress และ ชุดรูปแบบวิทยานิพนธ์ . ทีละขั้นตอน
(... สิ่งที่คุณไม่เคยคิดว่าเป็นไปได้ ... )

การติดตั้ง ปลั๊กอิน exec PHP และเปิดใช้งานมัน เราจะต้องเพราะผมจะใช้ PHP ภายในเครื่องมือข้อความที่จะปล่อยโค้ด HTML เมนูแนวตั้ง'
ทำขั้นตอนที่ 1 -- 6 จาก 1 เป็นส่วนหนึ่งของการกวดวิชา . โดยทั่วไปคุณจำเป็นต้องติดตั้งและเปิดใช้งานใช้ปลั๊กอิน NAVT + สายตาของคุณสร้างเมนู ตรวจสอบให้แน่ใจชื่อกลุ่มของคุณเมนูคือ'menu1' ชื่อนี้เป็น hardcoded ใน custom_functions.php
คลิกที่'เกียร์'ไอคอนสำหรับ'menu1'ของคุณกลุ่มเพื่อแก้ไขคุณสมบัติของ :
ทำตามขั้นตอนที่ 7.1 -7.3 ของส่วนที่ 1 การกวดวิชาในการตั้งค่า"ตัวเลือก","แสดง"และ"CSS"การตั้งค่าแท็บ
ตอนนี้คลิกที่"Theme"แท็บของกล่องโต้ตอบนี้ เราจะเขียนทับจำนวนการตั้งค่าที่มี (ถ้าคุณได้รับดังต่อไปนี้ขั้นตอนที่ 1) นี้ ok -- คุณจะไม่สูญเสียอะไร -- แต่การเปลี่ยนแปลงเหล่านี้มีความจำเป็นเพราะผมเคยเปลี่ยนรหัสบางอย่างจากขั้นตอนที่ 1
นี่คือวิธีการโต้ตอบนี้จะต้องมีการกรอกข้อมูลใน :
1. ภายในของ"Theme XPath :"พื้นที่ใส่รหัส (มันคำสั่งที่จะเปลี่ยนแท็กกับชั้นเรียนเหล่านี้ใด ๆ ) นี้ :
  .jquerycssmenu, .jqueryslidemenu
2. การตั้งค่า"การกระทำ"ที่"แทนที่ด้วย"
3. ภายในของ"การเพิ่มแท็กก่อนที่จะนำทางกลุ่ม"พื้นที่ป้อนรหัสนี้ :
  <div class='jquerycssmenu' style='margin-top:5px;'>
4. ภายในของ"การเพิ่มแท็กหลังจากที่กลุ่มนำทาง"พื้นที่ป้อนรหัสนี้ :
  <br style='clear: left' /></div>
5. คลิกที่ [Save / Close]
ตอนนี้ไปที่แผง Wordpress admin -- ลักษณะ> -- วิดเจ็ต>
ลาก"ข้อความ"เครื่องมือ (จากพื้นที่ขนาดใหญ่"เครื่องมือที่มีอยู่") เป็น"Sidebar 1"พื้นที่ที่อยู่ด้านขวา เราจะเพิ่มรหัสลงในเครื่องมือข้อความที่จะช่วยให้เราเป็นตัวเป็นตนเมนูแนวตั้ง
หมายเหตุ : ผมเข้าใจว่าคุณมี"Sidebar 1"ในการดำรงอยู่ ตัวเลือกวิทยานิพนธ์ช่วยให้คุณสามารถปิด -- แต่เพื่อประโยชน์ของการกวดวิชานี้ให้ทำให้มันเป็น
เมื่อคุณลากและวางเครื่องมือนี้ -- มันจะเปิดเช่นดอกไม้ (ผมรู้สึกโรแมนติกในขณะนี้ที่ต่อสู้ MSIE มีมากกว่า)
ใน"ชื่อ"พื้นที่ป้อน"World's เมนูแนวตั้งที่ดีที่สุด"... ดีรู้สึกอิสระที่จะใช้ความคิดสร้างสรรค์ของคุณ -- ข้อความที่จะไปข้างต้นของคุณเมนูแนวตั้งเกิดใหม่
ในพื้นที่ขนาดใหญ่สำหรับข้อความ -- ใส่โค้ด PHP นี้ :
<?php if (function_exists('navt_getlist')) $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"'); else $menu_html = ""; $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html); echo $menu_html; ?>
กดปุ่ม [Save] คลิกที่ลิงค์"ปิด"
ดาวน์โหลดการปรับปรุงชุดของแฟ้มที่นี่ .
เก็บนี้รวมถึง :
- รุ่นปรับปรุงของ"สดใส"โค้ดเมนูแนวนอน
- รุ่น"เข้ม"ของเมนูในแนวนอน
- รหัสเมนูแนวตั้ง
- รุ่นปรับปรุงของ custom_functions.php
ตอนนี้คุณต้องเปิดเครื่องรูดเก็บนี้และอัปโหลดไปลงในไดเรกทอรี'ที่กำหนดเอง'ของ ชุดรูปแบบวิทยานิพนธ์ .
หมายเหตุ : หากคุณได้กระทำการปรับแต่งใด ๆ ภายใน custom_functions.php -- ที่คุณจะต้องผสานพวกเขา ถ้าไม่ได้ -- รู้สึกฟรีเพื่อแทนที่ด้วยรุ่นของฉัน
! Voila ตอนนี้คุณอาจโหลดเว็บไซต์ของคุณและดูที่เดียวกัน"สดใส"เมนูแนวนอน + Neato เมนูแนวตั้งในแถบด้านข้างซ้าย
งานโบนัส : ให้เปลี่ยน"สดใส"เมนูแนวนอนลงที่"มืด"โทนสี
1. ภายในแฟ้ม custom_functions.php :
  แทนที่รหัสนี้ :
  echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
  ด้วยโค้ดนี้ :
  //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
  โดยทั่วไปเราจะแสดงความคิดเห็นออกหนึ่งบรรทัดและ uncommenting อื่น ๆ หนึ่ง
2. ตอนนี้ไปที่ Wordpress Admin -> Tools -> Lists NAVT และคลิกที่ดังกล่าวข้างต้น"เกียร์"ไอคอนเพื่อแก้ไขคุณสมบัติของ'menu1'ของคุณกลุ่ม
3. คลิกที่"รูปแบบแท็บ"
4. ภายในของ"การเพิ่มแท็กก่อนที่จะนำทางกลุ่ม"พื้นที่ป้อนรหัสนี้ :
  <div class='jqueryslidemenu' style='margin-top:5px;'>
5. วันนี้ -- โหลดหน้าเว็บของคุณ -- และเมนูนำทางหลักของคุณแนวนอน"อย่างน่าอัศจรรย์"กลายเป็นสีดำ, สิ่งที่ต้องการที่ :
  
  ชุดรูปแบบวิทยานิพนธ์ -- หลายเมนู CSS ที่ซ้อนกัน -- จานสีเข้ม
  จานสีสีเข้มอาจจะเหมาะสำหรับเว็บไซต์บางกว่าสีอ่อนที่หนึ่ง ดังนั้นตอนนี้คุณมีอิสระในการเลือกในชีวิตของคุณ
6. ที่จะได้รับกลับไปที่"สดใส"โทนสี -- เพียงแค่ยกเลิกการขั้นตอนข้างต้น"โบนัส"
สรุป :
ฉันรัก ชุดรูปแบบวิทยานิพนธ์ ฉันรัก Wordpress และฉันรักความจริงที่ว่าเรามีวิธีที่จะเพิ่มเมนูนำทางที่ดีเพื่อพอร์ทัลของเรา