ເພີ່ມໄອຄອນຫນ້າທໍາອິດໃສ່ເມນູນໍາທາງ WordPress ໂດຍໃຊ້ລະຫັດ

ພວກເຮົາຮັກ WordPress ແລະເຮັດວຽກກັບມັນ virtually ທຸກໆມື້. ເມນູນໍາທາງທີ່ເຮັດວຽກຢູ່ໃນ WordPress ແມ່ນບໍ່ຫນ້າເຊື່ອ - ຄຸນນະສົມບັດລາກແລະວາງງາມທີ່ງ່າຍຕໍ່ການນໍາໃຊ້. ບາງຄັ້ງ, ທ່ານສ້າງເມນູທີ່ທ່ານຕ້ອງການໃຊ້ຕະຫຼອດຫົວຂໍ້ຂອງທ່ານໂດຍບໍ່ລວມເອົາການເຊື່ອມຕໍ່ຫນ້າທໍາອິດ. ນີ້ແມ່ນລະຫັດບາງຢ່າງ ເພີ່ມການເຊື່ອມຕໍ່ເຮືອນຢູ່ໃນເມນູ ໂດຍບໍ່ຕ້ອງໃຊ້ຕົວເລືອກເມນູໃນ WordPress Admin.

ເພີ່ມ Home HTML Entity ໃສ່ເມນູ WordPress Nav

ການໃຊ້ HTML entity (🏠) ເພື່ອເປັນຕົວແທນຂອງຫນ້າທໍາອິດຂອງທ່ານແທນທີ່ຈະເປັນການເຊື່ອມຕໍ່ທີ່ເວົ້າວ່າຫນ້າທໍາອິດແມ່ນຂ້ອນຂ້າງທົ່ວໄປ. ການນໍາໃຊ້ລະຫັດຂ້າງເທິງ, ຂ້ອຍສາມາດແກ້ໄຂເລັກນ້ອຍເພື່ອປະກອບມີຫນ່ວຍງານ 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

ຖ້າທ່ານ ກຳ ລັງໃຊ້ Font ຫນ້າຫວາດສຽວ ຢູ່ໃນເວັບໄຊຂອງທ່ານ, ທ່ານຍັງສາມາດໃຊ້ໄອຄອນຂອງເຂົາເຈົ້າໄດ້. ການນໍາໃຊ້ລະຫັດຂ້າງເທິງ, ຂ້າພະເຈົ້າສາມາດແກ້ໄຂເລັກນ້ອຍເພື່ອປະກອບມີໄອຄອນຂອງພວກເຂົາແທນທີ່ຈະເປັນຂໍ້ຄວາມ:

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 file ຢູ່ໃນຂອງເຈົ້າ ເດັກນ້ອຍຫົວໃຈ ແລະປັບແຕ່ງມັນຕາມຄວາມຕ້ອງການ. ຖ້າຫົວຂໍ້ຂອງທ່ານໃຊ້ໂຄງສ້າງທີ່ແຕກຕ່າງກັນຫຼືພົບບັນຫາໃດໆ, ທ່ານອາດຈະຕ້ອງປັບລະຫັດຕາມຄວາມເຫມາະສົມ. ແລະ, ແນ່ນອນ, ໃຫ້ແນ່ໃຈວ່າທ່ານມີເສັ້ນທາງຮູບພາບທີ່ຖືກຕ້ອງສໍາລັບໄອຄອນເຮືອນ.