Кодты пайдаланып WordPress шарлау мәзіріне үй белгішесін қосыңыз

Біз WordPress-ті жақсы көреміз және онымен күн сайын жұмыс істейміз. WordPress жүйесінде белсенді навигация мәзірі керемет – сүйреп апарудың жақсы мүмкіндігі, оны пайдалану оңай. Кейде сіз тақырып бойынша пайдаланғыңыз келетін мәзірді үй сілтемесін қоспай жасайсыз. Міне, кейбір код мәзірге үй сілтемесін қосу WordPress әкімшісінде мәзір опцияларын пайдаланбай.

WordPress Nav мәзіріне үй HTML нысанын қосыңыз

Пайдалану 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;
}

WordPress Nav мәзіріне Home SVG қосыңыз

Пайдалану 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;
}

WordPress Nav мәзіріне Home FontAwesome үйін қосыңыз

Егер сіз пайдаланып жатсаңыз қаріп Awesome сайтыңызда олардың белгішесін де пайдалануға болады. Жоғарыдағы кодты пайдалана отырып, мен мәтінді емес, олардың белгішесін қосу үшін шағын өңдеу жасай алдым:

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 шарлау мәзіріндегі элементтерді өзгертуге мүмкіндік береді.
• The add_home_link функция өзгертуді өңдеу үшін анықталған. Бұл функция екі параметрді қабылдайды: $items (бар мәзір элементтері) және $args (мәзір дәлелдері).
• Ішінде add_home_link функциясы, ол ағымдағы бет пайдаланатын алдыңғы бет екенін тексереді is_front_page(). Бұл алдыңғы бет пе, жоқ па, байланысты, ол стильдеу мақсаттары үшін үй сілтемесіне CSS сыныбын тағайындайды.
• Содан кейін ол басты бетке сілтемесі бар кескінді қоса, Басты сілтемесі үшін HTML жасайды. Сіз ауыстыруыңыз керек [path to your home image] үй бейнесіне апаратын нақты жолмен.
• Соңында, ол мәзір элементтерінің басына Басты сілтемесін қосады және өзгертілген мәзір элементтерін қайтарады.

Бұл кодты тақырыпқа қосуды ұмытпаңыз functions.php Сіздің файлыңызда Балалар тақырыбы және қажетінше теңшеңіз. Тақырыбыңыз басқа құрылымды пайдаланса немесе қандай да бір мәселелерге тап болса, кодты сәйкесінше реттеу қажет болуы мүмкін. Және, әрине, үй белгішесі үшін жарамды кескін жолы бар екеніне көз жеткізіңіз.