कोड का उपयोग करके वर्डप्रेस नेविगेशन मेनू में एक होम आइकन जोड़ें

हम वर्डप्रेस को पसंद करते हैं और लगभग हर दिन इसके साथ काम करते हैं। वर्डप्रेस में सक्रिय नेविगेशन मेनू अविश्वसनीय है - एक अच्छी ड्रैग-एंड-ड्रॉप सुविधा जिसका उपयोग करना आसान है। हालाँकि, कभी-कभी, आप एक मेनू बनाते हैं जिसे आप होम लिंक को शामिल किए बिना अपनी पूरी थीम में उपयोग करना चाहते हैं। यहाँ कुछ कोड है मेनू में होम लिंक जोड़ना वर्डप्रेस एडमिन में मेनू विकल्पों का उपयोग किए बिना।

वर्डप्रेस नेव मेनू में एक होम 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;
}

वर्डप्रेस नेविगेशन मेनू में होम एसवीजी जोड़ें

वर्ष का उपयोग करना एसवीजी अपने होम पेज को दर्शाने के लिए एक लिंक की बजाय होम का उपयोग करना भी काफी उपयोगी है। उपरोक्त कोड का उपयोग करके, मैं पाठ के बजाय एसवीजी को शामिल करने के लिए एक छोटा सा संपादन करने में सक्षम था:

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;
}

वर्डप्रेस नेव मेनू में एक होम फ़ॉन्टऑसम होम जोड़ें

यदि आप उपयोग कर रहे हैं बहुत बढ़िया फ़ॉन्ट आप अपनी साइट पर उनके आइकन का भी उपयोग कर सकते हैं। उपरोक्त कोड का उपयोग करके, मैं पाठ के बजाय उनके आइकन को शामिल करने के लिए एक छोटा सा संपादन करने में सक्षम था:

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;
}

वर्डप्रेस नेव मेनू में एक होम इमेज जोड़ें

अपने होम पेज को दर्शाने के लिए होम कहने वाले लिंक के बजाय एक छवि का उपयोग करना भी एक संभावना है। उपरोक्त कोड का उपयोग करके, मैं पाठ के बजाय एसवीजी को शामिल करने के लिए एक छोटा सा संपादन करने में सक्षम था:

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 फ़िल्टर आपको वर्डप्रेस नेविगेशन मेनू में आइटम को संशोधित करने की अनुमति देता है।
• RSI add_home_link संशोधन को संभालने के लिए फ़ंक्शन को परिभाषित किया गया है। यह फ़ंक्शन दो पैरामीटर लेता है: $items (मौजूदा मेनू आइटम) और $args (मेनू तर्क)।
• अंदर add_home_link फ़ंक्शन, यह जाँचता है कि क्या वर्तमान पृष्ठ उपयोग करने वाला मुख पृष्ठ है is_front_page(). इस पर निर्भर करते हुए कि यह फ्रंट पेज है या नहीं, यह स्टाइलिंग उद्देश्यों के लिए होम लिंक पर एक सीएसएस क्लास असाइन करता है।
• इसके बाद यह होम लिंक के लिए HTML बनाता है, जिसमें होम पेज के लिंक के साथ एक छवि भी शामिल होती है। आपको प्रतिस्थापित करना चाहिए [path to your home image] आपके घर की छवि के वास्तविक पथ के साथ।
• अंत में, यह होम लिंक को मेनू आइटम की शुरुआत में जोड़ता है और संशोधित मेनू आइटम लौटाता है।

इस कोड को अपनी थीम में जोड़ना सुनिश्चित करें functions.php आपके अंदर फाइल करें बाल थीम और इसे आवश्यकतानुसार अनुकूलित करें। यदि आपकी थीम किसी भिन्न संरचना का उपयोग करती है या किसी समस्या का सामना करती है, तो आपको तदनुसार कोड को समायोजित करने की आवश्यकता हो सकती है। और, निश्चित रूप से, सुनिश्चित करें कि आपके पास होम आइकन के लिए एक वैध छवि पथ है।