كيفية إخفاء الأدوات في WooCommerce

هل تبحث عن طرق لإخفاء الأدوات في WooCommerce ؟ إذا كان الأمر كذلك ، فقد هبطت في المكان الصحيح. سنعرض لك جميع الطرق الممكنة لإخفاء أو إزالة أدوات متجرك عبر الإنترنت في هذا البرنامج التعليمي.

ما هي الحاجيات في ووردبريس؟

الأدوات هي أنواع مختلفة من المحتوى أو العناصر التي يمكن إضافتها إلى الشريط الجانبي والتذييل ومناطق أخرى من موقع الويب. يسمح لك بتعيين ميزات محددة مثل التقويم والساعة وتقرير الطقس وما إلى ذلك. اعتمادًا على الأدوات ، فإنها تساعد في زيادة وظائف موقع الويب.

تتوفر سلسلة كاملة من الأدوات القياسية في معظم السمات. على سبيل المثال ، يمكن استخدام عنصر واجهة المستخدم "Text" لإخراج نص بسيط (بما في ذلك HTML). وبالمثل ، هناك أيضًا عناصر واجهة مستخدم للصور والصوت والقوائم والفئات و RSS والتعليقات الأخيرة والمزيد.

وفقًا لطبيعة عملك ، قد لا نحتاج دائمًا إلى جميع الأدوات المصغّرة التي يوفرها الموضوع. لذا فإن أفضل شيء تفعله هو إخفائها. ولكن قبل إخفاء عناصر واجهة المستخدم في WooCommerce ، يجب أن تفهم سبب حاجتك إلى تعطيل أو حتى إزالة الأدوات أيضًا.

لماذا يجب عليك إخفاء عناصر واجهة المستخدم في WooCommerce؟

سواء كنت ترغب في زيادة تجربة العملاء أو جعل موقع WooCommerce الخاص بك أكثر قوة ، فإن الأدوات المصغّرة تحتل مكانًا أساسيًا في تطوير موقعك. تأتي معظم الأدوات المصغّرة مع نواة WordPress ومتاحة في كل عملية تثبيت من البداية. ولكن قد لا تكون بعض الأدوات الذكية مطلوبة لمتجرك اعتمادًا على عملائك.

لنفترض أن لديك موقع WooCommerce حيث تريد إضافة مقاطع فيديو إرشادية. بعد ذلك ، قد تحتاج إلى الكثير من أدوات الفيديو لذلك. ولكن في الوقت نفسه ، إذا كان لديك أدوات صوتية جنبًا إلى جنب معها ، فلن يكون ذلك منطقيًا وقد يبدو غير ضروري.

وبالمثل ، قد يحتوي موقع الويب الخاص بك على أدوات مثل المشاركات / التعليقات الأخيرة أو حظر الاشتراك في الأخبار أو توقعات الطقس. إذا كان الأمر كذلك ، فسيكون عرضهم في كل صفحة من صفحات موقع الويب الخاص بك في غير محله. بالنسبة لصفحات WooCommerce مثل صفحة الدفع أو صفحة سلة التسوق ، فإن هذه الأدوات ليست مطلوبة. يمكنك تعطيل التعليقات في WordPress ، لكن هذا الحل لا ينطبق على جميع الأدوات.

بالإضافة إلى ذلك ، يمكن أن يؤدي وجود عنصر إضافي في الواجهة الأمامية لموقع WooCommerce الخاص بك إلى إبطاء موقع الويب الخاص بك مما يؤثر بشكل مباشر على تجربة المستخدم. هذا هو السبب في أنه من الأفضل إخفاء عناصر واجهة المستخدم في WooCommerce التي لا تضيف قيمة كبيرة للمستخدمين وتحسن قابلية استخدام الموقع ككل.

كيف تخفي WooCommerce Widgets؟

هناك طريقتان مختلفتان يمكنك استخدامهما لإخفاء الأدوات في WooCommerce.

1. مع البرنامج المساعد
2. برمجيا

قبل أن تبدأ بالبرنامج التعليمي ، تأكد من أنك قمت بإعداد WooCommerce بشكل صحيح دون أن تفوتك أي خطوات.

1. إخفاء الحاجيات في WooCommerce باستخدام البرنامج المساعد

لا تقدم ميزة WooCommerce الافتراضية سوى القليل جدًا من الوظائف عندما يتعلق الأمر بالأدوات. لا يسمح لك بإخفاء الأدوات في WooCommerce. لذلك إذا كنت ترغب في إخفاء عناصر واجهة المستخدم أو تعطيلها في صفحة أو منشور معين ، فيجب عليك استخدام مكون إضافي مخصص.

هناك العديد من الأدوات المجانية والمميزة عندما يتعلق الأمر بإخفاء الحاجيات. هذه بعض من أفضل الأدوات التي يمكنك استخدامها لإخفاء تلك التي ليست مهمة لموقع WooCommerce الخاص بك.

الحاجيات خيارات

Widget Options هو مكون إضافي لبرنامج WordPress يمنحك تحكمًا كاملاً في عناصر واجهة المستخدم الخاصة بك. مع أكثر من 100000 عملية تثبيت ، تعد واحدة من أكثر المكونات الإضافية لحلول إدارة عنصر واجهة المستخدم شيوعًا في WordPress. لذلك ، يمكنك بسهولة إخفاء أو إزالة الأدوات على موقع الويب الخاص بك باستخدام هذا المكون الإضافي.

يحتوي على واجهة سهلة الاستخدام وتكامل سلس مع WooCommerce والذي يمكن استخدامه دون عناء لتخصيصات عناصر واجهة المستخدم الخاصة بك. يمكنك أيضًا العثور على عنصر واجهة المستخدم المعين الذي تريد تحريره بمساعدة مرشح بحث عنصر واجهة المستخدم المباشر.

دلائل الميزات

• إخفاء عنوان القطعة
• استيراد أو تصدير الحاجيات
• البحث عن القطعة الحية
• إظهار أو إخفاء الحاجيات على جهاز معين
• منطق القطعة - شرطي لإخفاء وإظهار القطعة

السعر

يأتي خيار القطعة مع إصدار مجاني بالإضافة إلى إصدار ممتاز. يمكنك تمديد الميزات بدءًا من 19 دولارًا أمريكيًا سنويًا.

القطعة تعطيل

Widget Disable هو مكون إضافي مجاني يمكنك من خلاله إخفاء أدوات الشريط الجانبي بطريقة بسيطة للغاية. يعرض المكون الإضافي جميع الأدوات على موقع الويب الخاص بك ويتيح لك اختيار الأداة التي تريد إخفاءها. ليس ذلك فحسب ، بل يمكنك أيضًا تعطيل أدوات لوحة القيادة لجعل منطقة لوحة القيادة أقل تشوشًا.

كما أن المكون الإضافي خفيف الوزن ولا يثقل أو يعاقب على سرعة صفحة الويب الخاصة بك. بالإضافة إلى ذلك ، فهو مكون إضافي سهل الاستخدام للمطورين ، كما أنه يوفر عوامل تصفية لاستبعاد عناصر واجهة المستخدم من الشريط الجانبي أو لوحة القيادة.

دلائل الميزات

• مناسب لكل من المبتدئين والمطورين
• واجهة بسيطة وسهلة الاستخدام
• تعطيل أدوات الشريط الجانبي ولوحة القيادة
• يتم توفير المرشحات لتعديل الملفات في الجزء الأساسي

السعر

Widget Disable هو البرنامج المساعد المجاني. يمكنك تنزيله من مستودع المكونات الإضافية الرسمي لـ WordPress.

إخفاء الأدوات في WooCommerce باستخدام Widget Disable Plugin

الآن بعد أن ألقينا نظرة على المكونات الإضافية ، فلنلقِ نظرة على كيفية استخدامها أيضًا. لذلك في هذا العرض التوضيحي ، سنخفي عناصر واجهة المستخدم في WooCommerce باستخدام المكون الإضافي Widget Disable . إنه مكون إضافي مجاني وسهل الاستخدام للغاية مع واجهة بسيطة تؤدي المهمة على أكمل وجه.

ولكن إذا كنت تفضل استخدام أي مكون إضافي آخر ، فيمكنك القيام بذلك أيضًا. العملية متشابهة بغض النظر عن البرنامج المساعد الذي تستخدمه. لكنك تحتاج إلى تثبيته وتنشيطه قبل البدء في استخدامه.

1.1 قم بتثبيت البرنامج المساعد وتنشيطه

لتثبيت مكون إضافي ، انتقل إلى الإضافات الخاصة بك> إضافة جديد من لوحة معلومات WordPress وابحث عن المكون الإضافي Widget Disable في شريط البحث الموجود على الجانب الأيمن. ثم ، انقر فوق التثبيت الآن وقم بتنشيطه بعد اكتمال التثبيت.

إذا كنت تستخدم مكونًا إضافيًا مميزًا أو أي مكون إضافي مجاني آخر غير مضمن في مستودع مكونات WordPress الإضافية ، فأنت بحاجة إلى تنزيله وتثبيته يدويًا. يرجى الاطلاع على دليلنا حول كيفية تثبيت مكون WordPress الإضافي يدويًا للحصول على مزيد من المعلومات حوله.

1.2 إخفاء الحاجيات باستخدام البرنامج المساعد

أفضل شيء في المكون الإضافي Widgets Disable هو أنك لست بحاجة إلى تكوين أو تغيير أي من الإعدادات.

بمجرد تنشيط المكون الإضافي ، ستتمكن من رؤية خيار Disable Widgets في مظهر لوحة معلومات WordPress الخاصة بك. ما عليك سوى تحديد الخيار وستتم إعادة توجيهك إلى الصفحة التي يتم فيها إدراج جميع عناصر واجهة المستخدم للشريط الجانبي وأدوات لوحة المعلومات.

يمكنك تحديد الأدوات التي تريد إخفاءها من علامات التبويب هذه. إذا كنت تريد إخفاء أي من أدوات الشريط الجانبي ، فانقر فوق عنصر واجهة الشريط الجانبي وتحقق من الأدوات التي تريد إخفاءها.

افعل نفس الشيء مع Dashboard Widgets إذا كنت تريد إخفاء أي منها أيضًا. بمجرد تحديد الأدوات التي تريد إخفاءها من الشريط الجانبي ولوحة المعلومات ، تأكد من حفظ التغييرات .

كما رأيت ، يستغرق الأمر بضع خطوات ووقت قصير جدًا لإخفاء الأدوات في WooCommerce.

وبالمثل ، إذا كنت تريد عرض أي عناصر واجهة مستخدم قمت بتعطيلها ، فما عليك سوى تمكينها عن طريق إلغاء تحديد المربع. وستظهر الأداة المخفية الخاصة بك على الموقع دون أي خطأ.

هل نجحت؟ عمل عظيم! يمكنك الآن إخفاء الأدوات في متجر WooCommerce باستخدام مكونات إضافية مخصصة.

2. إخفاء الحاجيات في WooCommerce برمجيًا

لنفترض أنك تفضل عدم استخدام مكون إضافي لتعطيل الأدوات في WooCommerce. تضيف المكونات الإضافية وزنًا إلى موقع الويب الخاص بك وقد تفضل إطارًا فعالاً وخفيفًا. إذا كانت لديك أي أسباب أخرى مماثلة لتجنب استخدام مكون إضافي ، فيمكنك أيضًا إخفاء عناصر واجهة المستخدم باستخدام نهج برمجي.

ولكن للمتابعة ، نوصيك بشدة بعمل نسخة احتياطية من موقع الويب الخاص بك واستخدام سمة فرعية لأننا سنقوم بتعديل الجزء الأساسي من المظهر الخاص بك. يمكنك إنشاء قالب فرعي برموز وإلا يمكنك استخدام المكونات الإضافية للقوالب الفرعية. لا تقلق ، فهذه المكونات الإضافية ضرورية لموقع الويب الخاص بك ولن تؤثر كثيرًا على إطار العمل خفيف الوزن الخاص بك.

الآن ، انتقل إلى Appearance> Theme File Editor من السمة الخاصة بك وافتح ملف jobs.php .

كل ما عليك فعله هو نسخ الكود التالي ولصقه في الجزء السفلي من ملف jobs.php .

 add_filter ('sidebars_widgets'، 'quadlayers_woocommerce_conditionally_hide_widget') ؛
الدالة quadlayers_woocommerce_conditionally_hide_widget ($ sidebars_widgets) {
إذا (! is_admin ()) {
إذا (is_cart ()) {
foreach ($ sidebars_widgets كـ $ sidebar_id => $ sidebar) {
$ key = array_search ('estore_woocommerce_product_grid-1'، $ sidebars_widgets ['tg-column-4 collection-block']) ؛
إذا (مفتاح $) {
unset ($ sidebars_widgets ['tg-column-4 collection-block'] [$ key])؛
}}
}
}
إرجاع sidebars_widgets دولار ؛
}

في هذا العرض التوضيحي ، نخفي الأداة الترويجية الموجودة في الشريط الجانبي الأيسر. لذلك أولاً ، نحتاج إلى العثور على معرف القطعة ومعرف الشريط الجانبي لكي يعمل المقتطف.

للحصول على معرف الأداة ، انقر بزر الماوس الأيسر على الأداة المحددة وانقر فوق فحص . في هذه الحالة ، يتم توفير معرف عنصر واجهة المستخدم في section id= العلامة.

وبالمثل ، للعثور على معرف الشريط الجانبي ، يمكنك تحريك المؤشر إلى عناصر أخرى في عناصر الفحص. إذا تم تمييز الأداة عند تحديد فئة أو معرف معين ، فمن المرجح أن يكون معرف الشريط الجانبي الخاص بك. هذه إحدى أسهل الطرق للعثور على معرف الشريط الجانبي الخاص بك بمساعدة عناصر الفحص.

بمجرد العثور على معرف القطعة ومعرف الشريط الجانبي الخاصين بك ، يمكنك الآن الانتقال إلى ملف jobs.php من محرر السمات ولصق الكود الذي قدمناه أعلاه.

إذا نظرت إلى لقطة الشاشة أعلاه ، فإن معرف عنصر واجهة المستخدم الخاص بنا هو " estore_woocommerce_product_grid-1 ". عند نسخ المقتطف ولصقه ، استبدل " estore_woocommerce_product_grid-1 " بمعرف الأداة الخاص بك. وينطبق الشيء نفسه مع معرف الشريط الجانبي. وفقًا لموضوعنا ، معرف الشريط الجانبي الخاص بنا هو ' tg-column-4 collection-block ' ، يجب استبداله بمعرف الشريط الجانبي الخاص بك ، وإلا فلن يعمل الرمز.

نتيجة لذلك ، يمكنك أن ترى ، لا يتم عرض قسم عنصر واجهة المستخدم الترويجية في الواجهة الأمامية لموقع WooCommerce على الويب.

هذا هو! لقد نجحت في تعطيل الأداة التي تريد إخفاءها في WooCommerce باستخدام مقتطفات التعليمات البرمجية. يمكنك تعديل الرموز بناءً على احتياجاتك لإخفاء المزيد من الأدوات.

المكافأة: كيفية إنشاء عنصر واجهة مستخدم مخصص للرأس

أنت تعرف بالفعل لماذا وكيف تخفي الحاجيات في WooCommerce. وبالمثل ، قد ترغب في إنشاء أداة رأس مخصصة لموقع الويب الخاص بك.

لا تسمح لك معظم سمات WordPress بإضافة مناطق عناصر واجهة المستخدم فوق المحتوى أو في الرأس. ولكن إذا قمت بإضافة عنصر واجهة مستخدم مخصص ، يمكن لموقع الويب الخاص بك أن يبرز عن منافسيك ويزيد أيضًا من بعض الوظائف. على سبيل المثال ، يمكنك عرض عناصر مثل الإعلانات أو المقالات الحديثة أو أي شيء مشابه.

يعد إنشاء عنصر واجهة مستخدم لرأس العميل أمرًا سهلاً للغاية بمساعدة مقتطفات التعليمات البرمجية. كل ما عليك فعله هو إضافة برنامج نصي إلى الجزء الأساسي وهو function.php من قالبك. ولكن من أجل إضافة عنصر واجهة مستخدم مخصص ، نحتاج إلى إنشاء منطقة عنصر واجهة مستخدم جديدة أولاً.

1. إنشاء منطقة عنصر واجهة مستخدم جديدة

لإنشاء منطقة عنصر واجهة مستخدم جديدة لعنصر واجهة المستخدم المخصص الخاص بك ، ستحتاج إلى إضافة مقتطف رمز إلى ملفات السمة الخاصة بك.

ولكن قبل ذلك ، دعنا نلقي نظرة على مناطق عناصر واجهة المستخدم المتاحة التي يوفرها قالبك. لذا انتقل إلى المظهر> الأدوات من لوحة معلومات WordPress الخاصة بك.

يمكن رؤية جميع مناطق الحاجيات النشطة للموضوع هنا. هذا هو المكان الذي سنضيف فيه منطقة عنصر واجهة المستخدم الجديدة أيضًا.

الآن دعنا ننتقل إلى إنشاء منطقة عنصر واجهة مستخدم جديدة. نحتاج إلى تعديل ملف function.php لموضوعنا الفرعي على غرار الطريقة البرمجية لإخفاء الأدوات. يمكنك أيضًا استخدام مكون إضافي مثل Code Snippets إذا لم تكن مرتاحًا بما يكفي لتحرير الملفات مباشرة.

سنستخدم البرنامج المساعد Code Snippets لهذا البرنامج التعليمي. بادئ ذي بدء ، قم بتثبيت المكون الإضافي وتنشيطه.

بعد التنشيط ، يمكننا العثور على إعداد المكون الإضافي في لوحة معلومات WordPress ضمن Snippets> All Snippets . انقر الآن على إضافة جديد لإنشاء مقتطف جديد.

لقد أطلقنا عليها اسم " Custom Header Widget " ولكن يمكنك إعطاء الاسم الذي تريده لها. الآن انسخ والصق الكود التالي داخل قسم الكود.

 الدالة quadlayers_widgets_init () {
Register_sidebar (مجموعة (
'name' => "أداة رأس مخصصة" ،
"معرف" => "أداة رأس مخصصة" ،
'before_widget' => '<div class = "ql-widget">'،
'after_widget' => '</div>'،
'before_title' => '<h2 class = "ql-title">'،
'after_title' => '</h2>'،
)) ؛
}
add_action ('widgets_init'، 'quadlayers_widgets_init') ؛ 

بعد لصق الرمز وحفظه ، يتم إنشاء عنصر واجهة المستخدم الجديد كـ Custom Header Widget في موقع WordPress الخاص بك.

2. إضافة القطعة إلى الرأس

لإضافة عنصر واجهة المستخدم إلى العنوان ، نحتاج إلى تعديل ملف header.php. يمكنك تحديد موقع ملف الرأس في محرر السمات من خلال التنقل من خلال المظهر > محرر ملف السمة من لوحة معلومات WordPress الخاصة بك. الآن ، افتح ملف رأس السمة (header.php) من قائمة ملفات السمات والصق الكود التالي هنا.

 <؟ php

إذا (is_active_sidebar ('quadlayers-header-widget')):؟>
<div class = "ql-widget-area widget-area" role = "completeary">
<؟ php dynamic_sidebar ('quadlayers-header-widget') ؛ ؟>
</div>

<؟ php endif؛ ؟>

كالعادة ، قم بتحديث الملف بعد إضافة الرمز.

الآن ، دعنا نضيف عنصر واجهة مستخدم إلى منطقة عنصر واجهة المستخدم الجديدة. لقد أضفنا هنا كتلة فقرة لاختبار الأداة.

نتيجة لذلك ، يجب أن تكون قادرًا على رؤية العنوان في الواجهة الأمامية لموقع الويب.

ومع ذلك ، ربما لاحظت أنك بحاجة إلى تلميع مظهر العنوان لجعله يبدو جذابًا. يمكنك اتباع هذا الدليل لمزيد من التخصيص والتحكم في رؤية أداة الرأس.

خاتمة

وهذا ينتهي دليلنا حول كيفية إخفاء الأدوات في WooCommerce. يمكن أن يكون إخفاء عناصر واجهة مستخدم معينة مفيدًا جدًا إذا كنت لا ترغب في عرض عناصر غير ضرورية في موقع الويب الخاص بك مما يؤدي إلى موقع ويب بطيء ومشتت . حيث أن عرض الأدوات التي تحتاجها بالفعل فقط يحسن قابلية الاستخدام الإجمالية لمتجر WooCommerce الخاص بك .

للتلخيص ، قدمنا ​​لك طريقتين مختلفتين لإخفاء الأدوات في موقع الويب الخاص بك:

• باستخدام البرنامج المساعد
• برمجيا

أسهل طريقة لإخفاء الأدوات هي استخدام المكون الإضافي. ومع ذلك ، فإن المقتطفات التي عملنا معها اليوم هي أيضًا بسيطة وسهلة التخصيص. يمكنك تخصيصه من خلال البحث عن معرف الأداة وإعادة تسميته لجعل الكود يعمل لموقعك على الويب.

بالإضافة إلى ذلك ، قمنا أيضًا بتضمين قسم لإنشاء رأس مخصص لإنشاء مساحة إضافية لعناصر واجهة المستخدم دون إعاقة القائمة الرئيسية. يمكن أن تكون مفيدة لعرض أحدث العروض والخصومات والإعلانات بطريقة منظمة. وبالمثل ، لدينا أيضًا دليل لإضافة عنصر واجهة مستخدم مخصص لخلاصة Instagram باستخدام Instagram Feed Gallery إذا كنت ترغب في إضافة المزيد من عناصر واجهة المستخدم المخصصة.

أخيرًا ، إليك بعض المقالات التي قد ترغب في التحقق منها لتحسين متجر WooCommerce وتجربة العميل:

• كيفية تحرير الرأس في ووردبريس
• أفضل الإضافات لتخصيص صفحة منتج WooCommer
• كيفية تخصيص قوالب WooCommerce

هل يمكنك إخفاء الأدوات في موقع التجارة الإلكترونية الخاص بك الآن؟ هل فعلت ذلك من قبل؟ سنكون سعداء لمعرفة ذلك في التعليقات أدناه.