सामग्री विपणन

कोड वापरून वर्डप्रेस नेव्हिगेशन मेनूमध्ये होम आयकॉन जोडा

आम्हाला वर्डप्रेस आवडते आणि त्यासोबत दररोज काम करतो. वर्डप्रेसमध्ये सक्रिय असलेला नेव्हिगेशन मेनू अविश्वसनीय आहे - एक छान ड्रॅग-अँड-ड्रॉप वैशिष्ट्य जे वापरण्यास सोपे आहे. काहीवेळा, तुम्ही होम लिंक समाविष्ट न करता तुमच्या संपूर्ण थीममध्ये वापरू इच्छित असलेला मेनू तयार करता. येथे काही कोड आहे मेनूवर मुख्यपृष्ठ जोडणे वर्डप्रेस अॅडमिनमधील मेनू पर्याय न वापरता.

वर्डप्रेस नेव्ही मेनूमध्ये होम एचटीएमएल एंटिटी जोडा

एक वापरणे 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;
}

वर्डप्रेस नेव्ही मेनूमध्ये होम एसव्हीजी जोडा

एक वापरणे एसव्हीजी मुख्यपृष्ठ देखील खूप उपयुक्त आहे असे सांगणार्‍या दुव्याऐवजी तुमचे मुख्यपृष्ठ दर्शवण्यासाठी. वरील कोडचा वापर करून, मी मजकुराऐवजी 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;
}

वर्डप्रेस एनएव्ही मेनूमध्ये होम फॉन्टअवेसम होम जोडा

आपण वापरत असल्यास फॉन्ट अप्रतिम तुमच्या साइटवर, तुम्ही त्यांचे चिन्ह देखील वापरू शकता. वरील कोडचा वापर करून, मी मजकुराऐवजी त्यांचे चिन्ह समाविष्ट करण्यासाठी किरकोळ संपादन करू शकलो:

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

वर्डप्रेस नेव्ही मेनूमध्ये होम इमेज जोडा

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

हा कोड तुमच्या थीममध्ये जोडण्याची खात्री करा functions.php आपल्या मध्ये फाइल बाल थीम आणि आवश्यकतेनुसार सानुकूलित करा. तुमची थीम वेगळी रचना वापरत असल्यास किंवा काही समस्या आल्यास, तुम्हाला त्यानुसार कोड समायोजित करावा लागेल. आणि, अर्थातच, तुमच्याकडे होम आयकॉनसाठी वैध इमेज पाथ असल्याची खात्री करा.

Douglas Karr

Douglas Karr चे CMO आहे ओपनइनसाइट्स आणि चे संस्थापक Martech Zone. डग्लसने डझनभर यशस्वी MarTech स्टार्टअप्सना मदत केली आहे, Martech अधिग्रहण आणि गुंतवणुकीमध्ये $5 बिलियन पेक्षा जास्त योग्य परिश्रमात मदत केली आहे आणि कंपन्यांना त्यांच्या विक्री आणि विपणन धोरणांची अंमलबजावणी आणि स्वयंचलित करण्यात मदत करणे सुरू ठेवले आहे. डग्लस हा आंतरराष्ट्रीय स्तरावर मान्यताप्राप्त डिजिटल ट्रान्सफॉर्मेशन आणि MarTech तज्ञ आणि स्पीकर आहे. डग्लस हे डमीच्या मार्गदर्शक आणि व्यवसाय नेतृत्व पुस्तकाचे प्रकाशित लेखक देखील आहेत.

संबंधित लेख

परत शीर्षस्थानी बटण
बंद

अॅडब्लॉक आढळले

Martech Zone तुम्हाला ही सामग्री कोणत्याही खर्चाशिवाय प्रदान करण्यात सक्षम आहे कारण आम्ही आमच्या साइटवर जाहिरात महसूल, संलग्न दुवे आणि प्रायोजकत्वाद्वारे कमाई करतो. तुम्ही आमची साइट पाहता तेव्हा तुमचा अॅड ब्लॉकर काढून टाकल्यास आम्ही कृतज्ञ आहोत.