การสื่อสารและอินเทอร์เน็ต 

แถบนำทางโดยใช้ CSS การสร้างเมนูแบบกำหนดเองใน WordPress ฟังก์ชั่น wp_nav_menu

ลงทะเบียนและแสดงเมนูแบบกำหนดเองที่สร้างขึ้นในแผงควบคุม: ลักษณะที่ปรากฏ > เมนู

การลงทะเบียนเมนู

Add_action("after_setup_theme", function())( register_nav_menus(array("main_menu" => __("เมนูหลัก", "crea"), "foot_menu" => __("เมนูส่วนท้าย", "crea"),) ) ; ));

ตัวเลือกที่สองในการลงทะเบียนเมนู (ไม่รู้ว่าถูกต้องแค่ไหนจึงควรใช้ตัวเลือกแรกดีกว่า)

ถ้า (function_exists("register_nav_menu")) ( register_nav_menus(array("main_menu" => __("เมนูหลัก", "crea"), "foot_menu" => __("เมนูส่วนท้าย", "crea"),)) ; )

การแสดงเมนู

ตัวเลือกเมนูที่สอง

รายละเอียดเพิ่มเติมเกี่ยวกับการลงทะเบียนและการแสดงเมนูในเทมเพลต

การใช้งาน

wp_nav_menu(array("theme_location" => "" // (string) ตำแหน่งของเมนูในเทมเพลต (ระบุคีย์ที่เมนูลงทะเบียนในฟังก์ชัน "menu" => "", // (string ) ชื่อของเมนูที่แสดง (ระบุไว้ในแผงผู้ดูแลระบบเมื่อสร้างเมนู โดยจะมีลำดับความสำคัญเหนือตำแหน่งที่ระบุ theme_location - หากระบุ พารามิเตอร์ theme_location จะถูกละเว้น) "container" => "div", // (string) Wrapper เมนู มีการระบุแท็กคอนเทนเนอร์ (โดยค่าเริ่มต้นในแท็ก div) "container_class" " => "", // (สตริง) คลาสของคอนเทนเนอร์ (แท็ก div) "container_id" => "", // (string ) id ของคอนเทนเนอร์ (แท็ก div) "menu_class" => "menu", // (string) คลาสของเมนูเอง (แท็ก ul) "menu_id" => "", // (string) id ของเมนูเอง (ul tag) "echo" => true, // (boolean) แสดงหรือส่งคืนสำหรับการประมวลผล "fallback_cb" = > "wp_page_menu", // (string) ฟังก์ชั่น (สำรอง) ที่จะใช้หากไม่มีเมนู (สามารถ ไม่ได้รับ) "before" => "", // (string) ข้อความก่อนหน้า แต่ละลิงก์ "หลัง" => "", // (สตริง) ข้อความหลังแต่ละลิงก์ "link_before" => "", // (string) ข้อความก่อนจุดยึด (ข้อความ) ของลิงก์ "link_after" => "", // (string) ข้อความหลังจุดยึด (ข้อความ) ของลิงก์ "items_wrap " => "", "ความลึก" => 0, // (จำนวนเต็ม) ความลึกของการซ้อน (0 - ไม่ จำกัด , 2 - เมนูสองระดับ) "walker" => "" // (วัตถุ) คลาสที่รวบรวมเมนู ค่าเริ่มต้น: ใหม่ Walker_Nav_Menu));

อาร์กิวเมนต์พารามิเตอร์ $args

theme_location (สตริง)
ID ของตำแหน่งเมนูในเทมเพลต ตัวระบุที่ระบุเมื่อลงทะเบียนเมนูโดยใช้ฟังก์ชัน register_nav_menu()
ค่าเริ่มต้น: ""

เมนู(สตริง)
เมนูที่ต้องแสดง Match: id, slug หรือชื่อเมนู
ค่าเริ่มต้น: ""

คอนเทนเนอร์ (สตริง)
วิธีพันแท็ก ul ยอมรับได้: div หรือ nav
หากคุณไม่จำเป็นต้องห่อด้วยสิ่งใดเลย ให้เขียนว่า false: container => false
ค่าเริ่มต้น: div

คอนเทนเนอร์_คลาส (สตริง)
ค่าของแอตทริบิวต์คลาสของคอนเทนเนอร์เมนู
ค่าเริ่มต้น: เมนู-(เมนูกระสุน)-คอนเทนเนอร์

container_id(สตริง)
ค่าของแอตทริบิวต์ id ของคอนเทนเนอร์เมนู
ค่าเริ่มต้น: ""

เมนู_คลาส (สตริง)
ค่าของแอตทริบิวต์คลาสของแท็ก ul
ค่าเริ่มต้น: เมนู

menu_id(สตริง)
ค่าของแอตทริบิวต์ id ของแท็ก ul
ค่าเริ่มต้น: เมนูทาก

เสียงสะท้อน (บูลีน)
พิมพ์ไปที่หน้าจอ (จริง) หรือส่งคืนเพื่อประมวลผล (เท็จ)
ค่าเริ่มต้น: จริง

fallback_cb (สตริง)
ฟังก์ชันสำหรับประมวลผลเอาต์พุตหากไม่พบเมนู
ส่ง $args ทั้งหมดไปยังฟังก์ชันที่ระบุที่นี่
ตั้งค่าสตริงว่างเป็น " หรือ '__return_empty_string' เพื่อไม่ให้แสดงอะไรเลยหากไม่มีเมนู
ค่าเริ่มต้น: wp_page_menu

ก่อน (สตริง)
ข้อความก่อนแท็ก บนเมนู
ค่าเริ่มต้น: ""

หลังจาก (สตริง)
ข้อความหลังแต่ละแท็กในเมนู
ค่าเริ่มต้น: ""

link_before (สตริง)
ข้อความที่อยู่หน้าจุดยึดของแต่ละลิงก์ในเมนู
ค่าเริ่มต้น: ""

link_after (สตริง)
ข้อความหลังจุดยึดของแต่ละลิงก์ในเมนู
ค่าเริ่มต้น: ""

items_wrap (สตริง)
ฉันจำเป็นต้องรวมองค์ประกอบไว้ในแท็ก ul หรือไม่ หากจำเป็น ให้ระบุเทมเพลต wrapper
ค่าเริ่มต้น: ""

ความลึก(จำนวน)
จำนวนลิงก์ที่ซ้อนกันที่จะแสดง 0 - ทุกระดับ

วอล์คเกอร์ (วัตถุ)
คลาสที่จะใช้ในการสร้างเมนู คุณต้องระบุออบเจ็กต์ ไม่ใช่สตริง เช่น new My_Menu_Walker() ค่าเริ่มต้น: Walker_Nav_Menu() ดูวิธีใช้ด้านล่าง...
ค่าเริ่มต้น: Walker_Nav_Menu

item_spacing (สตริง)
ว่าจะเว้นบรรทัดใหม่ในโค้ดเมนู HTML หรือไม่ อาจเป็น: เก็บรักษาหรือทิ้ง
ค่าเริ่มต้น: "เก็บรักษา"

ตัวอย่าง

แสดงเมนูเฉพาะในกรณีที่มีอยู่

ตามค่าเริ่มต้น หากไม่มีเมนู หน้าเว็บไซต์จะแสดงแทน แต่หากคุณต้องการแสดงเมนูเฉพาะเมื่อสร้างขึ้นในแผงผู้ดูแลระบบ ให้ระบุพารามิเตอร์ fallback_cb เป็น "__return_empty_string" :

Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));

เราขอเชิญชวนให้คุณทำความคุ้นเคยกับเทคนิคใหม่ในการสร้างเมนูแบบตอบสนอง (ปรับเปลี่ยนได้) โดยไม่ต้องใช้ Javascript ใช้มาร์กอัป HTML5 ที่สะอาดและมีความหมาย เมนูสามารถจัดชิดซ้าย กึ่งกลาง หรือขวาได้ เมนูนี้จะเปิดโฮเวอร์ ซึ่งสะดวกกว่าสำหรับผู้ใช้ นอกจากนี้ยังมีตัวบ่งชี้ที่แสดงรายการเมนู "กำลังทำงาน/เธรด" ใช้งานได้กับเบราว์เซอร์มือถือและเดสก์ท็อปทั้งหมด รวมถึง Internet Explorer!

เป้า

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

เคล็ดลับนี้จะมีประโยชน์มากขึ้นสำหรับการนำทางที่มีลิงก์จำนวนมาก เช่น ในภาพหน้าจอด้านล่าง คุณสามารถย่อปุ่มทั้งหมดให้กลายเป็นเมนูแบบเลื่อนลงที่สวยงามได้

มาร์กอัปนำทาง HTML

นี่คือมาร์กอัปสำหรับการนำทาง แท็กนี้จำเป็นในการสร้างเมนูแบบเลื่อนลงที่มีคุณสมบัติ CSS ตำแหน่งที่แน่นอน เราจะอธิบายเรื่องนี้ในบทเรียนในภายหลัง คลาส .current ชี้ไปที่ลิงก์เมนูที่ใช้งานอยู่/ปัจจุบัน

  • ผลงาน
  • ภาพประกอบ
  • การออกแบบเว็บไซต์
  • สื่อสิ่งพิมพ์
  • การออกแบบกราฟิก

CSS สำหรับการนำทาง (มุมมองเดสก์ท็อป) ค่อนข้างพื้นฐาน ดังนั้นเราจะไม่ลงรายละเอียดมากเกินไปที่นี่ โปรดทราบว่าเราได้ระบุ display:inline-block แทน float:left ใน NAV ขององค์ประกอบ

  • - ซึ่งจะทำให้ปุ่มเมนูจัดชิดซ้าย กึ่งกลาง หรือขวาโดยระบุการจัดแนวข้อความ
      องค์ประกอบ.

      /* nav */ .nav ( ตำแหน่ง: สัมพันธ์; ระยะขอบ: 20px 0; ) .nav ul ( ระยะขอบ: 0; การขยาย: 0; ) .nav li ( ระยะขอบ: 0 5px 10px 0; การขยาย: 0; สไตล์รายการ: none; display: inline-block; ) .nav a ( การขยาย: 3px 12px; การตกแต่งข้อความ: none; color: #999; line-height: 100%; ) .nav a:hover ( color: #000; ) nav .current a ( พื้นหลัง: #999; สี: #fff; รัศมีเส้นขอบ: 5px; )

      การจัดตำแหน่งตรงกลางและด้านขวา

      ตามที่กล่าวไว้ข้างต้น คุณสามารถเปลี่ยนการจัดตำแหน่งปุ่มได้โดยใช้ "การจัดตำแหน่งข้อความ"

      /* right nav */ .nav.right ul ( text-align: right; ) /* center nav */ .nav.center ul ( text-align: center; )

      รองรับอินเตอร์เน็ตเอ็กซ์พลอเรอร์

      แท็ก HTML5 และการสืบค้นสื่อไม่ได้รับการสนับสนุนโดย Internet Explorer 8 และเวอร์ชันที่เก่ากว่า รวม CSS3-mediaqueries.js (หรือ response.js) และ html5shim.js เพื่อให้การสนับสนุนทางเลือก หากคุณไม่ต้องการเพิ่ม html5shim.js ให้แทนที่แท็กด้วยแท็ก

      นี่คือจุดเริ่มต้นของความสนุก - ทำให้เมนูตอบสนองต่อคำสั่งสื่อ! ที่ 600px เราตั้งค่าองค์ประกอบ nav ให้อยู่ในตำแหน่งที่สัมพันธ์กันเพื่อให้เราสามารถวางได้

        รายการเมนูด้านบนพร้อมตำแหน่งที่แน่นอน เราได้ซ่อนองค์ประกอบทั้งหมดไว้
      • ระบุ display:none แต่ออกจาก .current
      • แสดงเป็นบล็อก จากนั้นเมื่อโฮเวอร์ NAV เราก็ตั้งค่าทุกอย่าง
      • to display:block (ซึ่งจะให้ผลลัพธ์ของรายการแบบเลื่อนลง) เราได้เพิ่มไอคอนกราฟิกให้กับองค์ประกอบ check.current เพื่อระบุว่าองค์ประกอบนั้นทำงานอยู่ หากต้องการจัดตำแหน่งเมนูให้อยู่กึ่งกลางและขวา ให้ใช้คุณสมบัติการวางตำแหน่งด้านซ้ายและขวา
          รายการ.

          หน้าจอ @media และ (ความกว้างสูงสุด: 600px) ( .nav ( ตำแหน่ง: สัมพันธ์; ความสูงขั้นต่ำ: 40px; ) .nav ul ( ความกว้าง: 180px; การขยาย: 5px 0; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0 ; เส้นขอบ: ทึบ 1px #aaa; พื้นหลัง: #fff url(images/icon-menu.png) ไม่ซ้ำ 10px 11px; รัศมีเส้นขอบ: 0 1px 2px rgba(0,0,0,. 3); .navli ( แสดง: ไม่มี; /* ซ่อนทั้งหมด

        • รายการ */ ระยะขอบ: 0; ) .nav .current ( display: block; /* แสดงเฉพาะกระแสเท่านั้น
        • รายการ */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( พื้นหลัง: none; color: #666; ) /* บน nav hover */ nav ul:hover ( ภาพพื้นหลัง: none; ) .nav ul:hover li ( จอแสดงผล: block; ระยะขอบ: 0 0 5px; ) .nav ul:hover .current ( พื้นหลัง: url(images/icon-check.png) ไม่ทำซ้ำ 10px 7px; ) /* right nav */ .nav.right ul ( ซ้าย: auto; ขวา: 0; ) /* center nav */ .nav.center ul ( ซ้าย: 50%; ขอบซ้าย: - 90px;

          การแปลงสูง!

          ในบทความบล็อกก่อนหน้านี้ ฉันเขียนเกี่ยวกับนวัตกรรมที่น่าสนใจของ WordPress เวอร์ชันล่าสุด ซึ่งเป็นกลไกพิเศษสำหรับการสร้างและจัดการ . ตอนนี้ผู้ใช้ทั่วไปสามารถสร้างเมนูที่มีความซับซ้อนแตกต่างกันได้สะดวกและง่ายขึ้นมากซึ่งอาจประกอบด้วยหน้าหรือหมวดหมู่บล็อกไม่เพียง แต่ยังมีลิงก์ไปยัง URL ใด ๆ อีกด้วย ในการแสดงเมนูในเทมเพลตจะใช้ฟังก์ชันพิเศษ wp_nav_menu - ฉันจะเล่าให้คุณฟังวันนี้

          หากไม่มีส่วนเมนูในผู้ดูแลระบบ WordPress คุณสามารถเปิดใช้งานได้โดยเพิ่มโค้ดพิเศษลงในไฟล์ function.php

          อันดับแรกคือชื่อเมนูที่เราสร้างขึ้น นี่คือการใช้ฟังก์ชันในกรณีทั่วไปที่ไม่มีวิดเจ็ต คุณจะต้องทำงานกับฟังก์ชันเหล่านี้แตกต่างออกไปเล็กน้อย อย่างไรก็ตาม ฟังก์ชัน wp_nav_menu สามารถส่งออกได้โดยไม่มีอาร์กิวเมนต์ ซึ่งเป็นผลมาจากสถานการณ์ที่แตกต่างกันจะถูก "ตรวจสอบ" - ขั้นแรกให้จับคู่ตามชื่อเมนู หากมีการระบุรายการเมนูอย่างน้อยหนึ่งรายการ มิฉะนั้น เมนูที่ไม่ว่างเปล่า ก็จะปรากฏขึ้น ฯลฯ . ฉันขอแนะนำให้คุณใช้โค้ดด้านบนและอย่าคิดว่าฟังก์ชันใดที่ปราศจากข้อโต้แย้งควรแสดงผล ไวยากรณ์ของมันมีดังนี้:

          ที่นี่ใช้พารามิเตอร์ต่อไปนี้:

          $menu - ตัวระบุที่เลือกสำหรับเมนู - ID, กระสุนหรือชื่อเมนู

          $container - เมนู UL เริ่มต้นคือ "รวม" ในคอนเทนเนอร์ DIV โดยใช้การตั้งค่านี้

          $container_class - ระบุคลาสของคอนเทนเนอร์ โดยค่าเริ่มต้นแล้วค่าคือ menu-(menu slug)-container นั่นคือในกรณีของเรา ตัวอย่างเช่น คลาสจะเป็น menu-first-container

          $container_id - คุณสามารถเพิ่ม ID ลงในคอนเทนเนอร์ได้ โดยไม่ได้ระบุเป็นค่าเริ่มต้น

          $menu_class เป็นคลาสสำหรับองค์ประกอบเมนู UL ค่าของมันคือเมนู

          $menu_id — ID สำหรับองค์ประกอบ ul ค่าเริ่มต้นคือเมนู-(กระสุน)

          $echo - หากคุณไม่ต้องการแสดงเมนู แต่คืนค่าของฟังก์ชัน ให้ใช้ 0 สำหรับการตั้งค่านี้

          $fallback_cb - หากไม่มีเมนู ฟังก์ชัน wp_page_menu จะถูกเรียกใช้

          $before - ตั้งค่าข้อความที่แสดงก่อนลิงก์ A

          $link_before — แสดงวลีก่อนข้อความลิงก์ โดยไม่ได้ระบุ

          $link_after — แสดงหลังข้อความลิงก์ และว่างเปล่าเช่นกัน

          $ความลึก - กำหนดจำนวนระดับลำดับชั้นเพื่อแสดงเมนู ค่าเริ่มต้นคือ 0 จะแสดงเมนูทั้งหมด

          $walker - "วัตถุวอล์คเกอร์" แบบกำหนดเองที่ไม่สามารถเข้าใจได้บางประเภทซึ่งอาจเป็นที่ต้องการของนักพัฒนาขั้นสูงมากกว่า

          $theme_location - ตำแหน่งของธีมที่จะใช้เมนูจะต้องเปิดใช้งานผ่าน register_nav_menu() เพื่อให้ผู้ใช้สามารถเลือกได้ นอกจากนี้ยังมีการตั้งค่าบางอย่างที่ไม่ชัดเจนเมื่อทำงานกับวิดเจ็ต

          ตัวอย่างการใช้ฟังก์ชัน wp_nav_menu

          รหัสที่ง่ายที่สุดที่ให้ไว้ในรหัสคือ:

          กำลังนำคอนเทนเนอร์ DIV ออกจากเมนู

          โดยหลักการแล้ว ไม่มีอะไรซับซ้อนในการสร้างและจัดการเมนู WordPress 3.0 นักพัฒนาได้ทำให้ขั้นตอนการทำงานง่ายขึ้นอย่างมากและขยายขีดความสามารถขององค์ประกอบการนำทางนี้ โซลูชันนี้มักใช้ในงานเทมเพลตที่หลากหลาย เช่น เมื่อสร้างเวอร์ชันมือถือและเดสก์ท็อป หลังจากนั้นฉันจะเพิ่มตัวอย่างอีกสองสามหัวข้อในหัวข้อนี้

          ป.ล. อารักขา. บล็อกที่น่าสนใจและมีประโยชน์สำหรับเว็บมาสเตอร์เกี่ยวกับ SEO ซึ่งคุณจะพบคำตอบสำหรับคำถามของคุณเกี่ยวกับ SEO
          บริษัท Aweb ได้สร้างชื่อเสียงมายาวนานในด้านการส่งเสริมเว็บไซต์ การเพิ่มประสิทธิภาพ และการส่งเสริมเครื่องมือค้นหาบนอินเทอร์เน็ต



    • มีคำถามอะไรไหม?

    แจ้งการพิมพ์ผิด

    ข้อความที่จะส่งถึงบรรณาธิการของเรา:

    ส่ง