เพิ่มไอคอนหน้าแรกลงในเมนูนำทาง WordPress โดยใช้รหัส

เรารัก WordPress และทำงานกับมันแทบทุกวัน เมนูการนำทางที่ใช้งานอยู่ใน WordPress นั้นยอดเยี่ยมมาก – คุณสมบัติการลากและวางที่ดีที่ใช้งานง่าย บางครั้งคุณสร้างเมนูที่คุณต้องการใช้ตลอดทั้งธีมของคุณโดยไม่รวมโฮมลิงก์ด้วย นี่คือรหัสบางส่วน เพิ่มลิงค์บ้านลงในเมนู โดยไม่ต้องใช้ตัวเลือกเมนูใน WordPress Admin

เพิ่มเอนทิตี HTML หน้าแรกให้กับเมนู WordPress Nav

ใช้ HTML เอนทิตี (โฮม) เพื่อแสดงหน้าแรกของคุณ แทนที่จะเป็นลิงก์ที่ระบุว่าหน้าแรกเป็นเรื่องปกติ ด้วยการใช้โค้ดด้านบน ฉันสามารถทำการแก้ไขเล็กน้อยเพื่อรวมเอนทิตี HTML แทนที่จะเป็นข้อความ:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

เพิ่ม Home SVG ให้กับเมนู WordPress Nav

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

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path d="M8.293 1.293a.5.5 0 0 1 .414 0l6.25 3a.5.5 0 0 1 .25.434V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.727a.5.5 0 0 1 .25-.434l6.25-3a.5.5 0 0 1 .414 0zM8 2.618L2.354 5.293 2 5.534V13a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5.534L13.646 5.293 8 2.618z"/><path fill="#000" d="M7.293 0a1 1 0 0 1 .914 0l6.25 3a1 1 0 0 1 .5.867V13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3.867a1 1 0 0 1 .5-.867l6.25-3z"/></svg>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

เพิ่ม Home FontAwesome Home ให้กับเมนู WordPress Nav

หากคุณใช้ ตัวอักษรที่น่ากลัว บนเว็บไซต์ของคุณ คุณยังสามารถใช้ไอคอนของพวกเขาได้ ด้วยการใช้โค้ดด้านบน ฉันสามารถทำการแก้ไขเล็กน้อยโดยใส่ไอคอนแทนข้อความ:

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item"';
     else
          $class = '';

     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

เพิ่มรูปภาพหลักลงในเมนู WordPress Nav

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

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<img src="[path to your home image]" height="15" width="14" />' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

ต่อไปนี้คือรายละเอียดว่าโค้ดนี้ทำอะไรได้บ้าง:

• มันใช้ add_filter ฟังก์ชั่นเพื่อเชื่อมต่อเข้ากับ wp_nav_menu_items ตัวกรองช่วยให้คุณสามารถแก้ไขรายการในเมนูการนำทางของ WordPress
• พื้นที่ add_home_link ฟังก์ชั่นถูกกำหนดไว้เพื่อจัดการกับการแก้ไข ฟังก์ชันนี้รับพารามิเตอร์สองตัว: $items (รายการเมนูที่มีอยู่) และ $args (อาร์กิวเมนต์เมนู)
• ภายใน add_home_link ฟังก์ชั่นจะตรวจสอบว่าหน้าปัจจุบันเป็นหน้าแรกที่ใช้อยู่หรือไม่ is_front_page(). ขึ้นอยู่กับว่าเป็นหน้าแรกหรือไม่ โดยจะกำหนดคลาส CSS ให้กับโฮมลิงก์เพื่อจุดประสงค์ในการจัดแต่งทรงผม
• จากนั้นจะสร้าง HTML สำหรับลิงก์หน้าแรก รวมถึงรูปภาพที่มีลิงก์ไปยังหน้าแรก คุณควรเปลี่ยน [path to your home image] พร้อมเส้นทางสู่ภาพบ้านของคุณอย่างแท้จริง
• สุดท้ายจะเพิ่มลิงก์โฮมต่อท้ายรายการเมนูและส่งคืนรายการเมนูที่แก้ไข

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