Hola amigos ، مقتطف اليوم يأتي في الواقع من موقع الويب الخاص بي. ربما لاحظت وجود “عدسة مكبرة” صغيرة في قائمة التنقل والتي يتم تمريرها لأسفل إلى شريط البحث.
عملي ، على وجه التحديد ، يبحث حصريًا عن منشورات المدونة (استبعدت الصفحات ، والمنتجات ، وما إلى ذلك) ، ولكن يمكنك تخصيص هذا وجعله يبحث عن المنتجات فقط على سبيل المثال. إليك كيف فعلت ذلك – آمل أن تتعلم شيئًا جديدًا اليوم!
شريط البحث المخصص لـ Business Bloomer في التذييل
شريط البحث المخصص لـ Business Bloomer في التذييل
/**
* @snippet WooCommerce Custom Search Bar
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=21175
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// ----------------------------------
// 1. ADD SEARCH TO STOREFRONT FOOTER
add_action( 'storefront_footer', 'bbloomer_add_search_to_footer' );
function bbloomer_add_search_to_footer() {
get_search_form();
}
// ----------------------------------
// 2. LIMIT SEARCH TO POSTS OR PRODUCTS ONLY
function SearchFilter($query) {
if ( !is_admin() && $query->is_search ) {
$query->set('post_type', 'post'); // OR USE 'PRODUCT'
}
return $query;
}
add_filter( 'pre_get_posts', 'SearchFilter' );
// ----------------------------------
// 3. CHANGE PLACEHOLDER & BUTTON TEXT
function bbloomer_storefront_search_form_modify( $html ) {
return str_replace( array('Search …','Search'), array('WooCommerce Hooks, Storefront Theme, Google AdWords...','Search Article'), $html );
}
add_filter( 'get_search_form', 'bbloomer_storefront_search_form_modify' );
// ------------------------------
// 4. ADD SEARCH ICON TO NAVIGATION MENU
function bbloomer_new_nav_menu_items($items) {
$searchicon = '<li class="search"><a href="#colophon"><i class="fa fa-search" aria-hidden="true"></i></a></li>';
$items = $items . $searchicon;
return $items;
}
add_filter( 'wp_nav_menu_additional-resources_items', 'bbloomer_new_nav_menu_items' );هذا كل شيء 🙂 الآن امنح مربع البحث الخاص بي فرصة للذهاب لمعرفة ما إذا كان يعمل!
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
