تخصيص الصفحة الرئيسية لموضوع WooCommerce Storefront [الدليل النهائي]

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

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

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

تخصيص الصفحة الرئيسية لموضوع واجهة المتجر

يحتوي موضوع WooCommerce Storefront على أكثر من 200000 تثبيت نشط في مجتمع WordPress. تتكون الصفحة الرئيسية للموضوع من 6 أقسام:

• محتوى الصفحة
• قسم فئات المنتجات
• قسم المنتجات المميزة
• قسم المنتجات الحديثة
• قسم المنتجات الأعلى تقييما
• قسم المنتجات المعروضة للبيع
• قسم المنتجات الأكثر مبيعاً

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

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

قالب الصفحة الرئيسية

يوفر لك قالب الصفحة الرئيسية طريقة رائعة لعرض جميع منتجاتك ، مما يمنحك نظرة عامة على المنتجات وفئات المنتجات.

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

يعد إعداده أمرًا سهلاً حيث عليك فقط:

1. قم بتسجيل الدخول إلى لوحة إدارة موقعك كمسؤول .
2. قم بإنشاء صفحة جديدة وإضافة بعض المحتوى لعرضه.
3. بعد ذلك ، سيتعين عليك تحديد " الصفحة الرئيسية " من القائمة المنسدلة للقوالب في مربع تعريف سمات الصفحة كما هو موضح أدناه:
4. بعد نشر هذه الصفحة ، يمكنك تعيينها كصفحة رئيسية من خلال الانتقال إلى الإعدادات ثم القراءة .
5. ستقوم بعد ذلك بتحديد " صفحة ثابتة " ثم تحديد الصفحة الرئيسية التي تم إنشاؤها من القائمة المنسدلة " الصفحة الرئيسية ".
6. بعد حفظ التغييرات ، ستنعكس تلقائيًا على الواجهة الأمامية .

بمجرد الانتهاء من التكوين ، يجب أن تحتوي صفحتك الرئيسية على أقسام متعددة كما هو موضح أدناه:

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

بمجرد إعداد الصفحة الرئيسية ، يمكننا الآن الوصول إلى التخصيص:

1. إزالة صور فئات المنتجات من الصفحة الرئيسية

يتيح لك WooCommerce عرض المنتجات بالإضافة إلى فئات المنتجات مع صورها على الصفحة الرئيسية. ومع ذلك ، إذا كنت تفضل عرض الفئات كنص فقط ، فأنت بحاجة إلى إضافة هذا السطر إلى ملف function.php الخاص بالقالب الفرعي. ما عليك سوى إضافته إلى نهاية ملف function.php.

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

ها هي النتيجة:

2. قم بتغيير رابط URL في الشعار

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

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

 add_action ('storefront_header'، 'custom_storefront_header'، 1)؛

وظيفة custom_storefront_header () {

    remove_action ('storefront_header'، 'storefront_site_branding' ، 20) ؛

    add_action ('storefront_header'، 'custom_site_branding'، 20) ؛

    وظيفة custom_site_branding () {

        // هنا قم بتعيين رابط الشعار أو عنوان الموقع الخاص بك

        $ link = home_url ('/ my-custom-link /') ؛

        ؟>

        <div class = "site-branding">

            <؟ php

                إذا (function_exists ('the_custom_logo') && has_custom_logo ()) {

                    $ custom_logo_id = get_theme_mod ('custom_logo') ؛

                    إذا (custom_logo_id $) {

                        $ custom_logo_attr = array ('class' => 'custom-logo'، 'itemprop' => 'logo')؛

                        $ image_alt = get_post_meta ($ custom_logo_id، '_wp_attachment_image_alt'، true)؛

                        إذا (فارغ ($ image_alt)) {

                            $ custom_logo_attr ['alt'] = get_bloginfo ('name'، 'display')؛

                        }

                        $ logo = sprintf ('<a href="٪1$s" class="custom-logo-link" rel="home" itemprop="url">٪ 2 $ s </a>'،

                            esc_url (رابط $) ،

                            wp_get_attachment_image ($ custom_logo_id، 'full'، false، $ custom_logo_attr)

                        ) ؛

                    }

                    elseif (is_customize_preview ()) {

                        $ logo = sprintf ('<a href="٪1$s" class="custom-logo-link" style="display:none؛"> <img class = "custom-logo" /> </a>' ، esc_url ($ link)) ؛

                    }

                    $ html = is_front_page ()؟ '<h1 class = "logo">'. شعار $. '</h1>': $ logo؛

                } elseif (function_exists ('jetpack_has_site_logo') && jetpack_has_site_logo ()) {

                    $ logo = site_logo () -> شعار ؛

                    $ logo_id = get_theme_mod ('custom_logo') ؛

                    $ logo_id = $ logo_id؟ $ logo_id: $ logo ['id']؛

                    $ size = site_logo () -> theme_size () ؛

                    $ html = sprintf ('<a href="٪1$s" class="site-logo-link" rel="home" itemprop="url">٪ 2 $ s </a>'،

                        esc_url (رابط $) ،

                        wp_get_attachment_image ($ logo_id، $ size، false، array (

                            'class' => 'site-logo attachment-'. حجم دولار ،

                            "حجم البيانات" => حجم دولار ،

                            'itemprop' => 'logo'

                        ))

                    ) ؛

                    $ html = apply_filters ('jetpack_the_site_logo'، $ html، $ logo، $ size)؛

                } آخر {

                    $ tag = is_front_page ()؟ 'h1': 'div'؛




                    html $ = '<'. esc_attr (علامة $). 'class = "beta site-title"> <a href="'. esc_url( $link).'" rel="home">'. esc_html (get_bloginfo ("الاسم")). "</a> </". esc_attr ($ tag). '>'؛




                    إذا (''! == get_bloginfo ('الوصف')) {

                        $ html. = '<p class = "site-description">'. esc_html (get_bloginfo ('description'، 'display')). "</p>"؛

                    }

                }

                صدى $ html؛

            ؟>

        </div>

        <؟ php

    }

}

ينتقل الرابط المخصص في السطر 7 '(' / my-custom-link / ')؛' ، حيث ستضيف رابطك المخصص عن طريق استبداله بـ " رابطي المخصص ".

3. إزالة الفئات تمامًا من صفحة المتجر الرئيسية

قد ترغب في إزالة الفئات الموجودة في الصفحة الرئيسية تمامًا. هذه الميزة تزيل الفئات ببساطة. كل ما عليك فعله هو إضافة الأسطر التالية إلى ملف function.php:

 الوظيفة storefront_child_reorder_homepage_contant () {

remove_action ('homepage'، 'storefront_product_categories'، 20) ؛

}

add_action ('init'، 'storefront_child_reorder_homepage_contant') ؛

ها هي النتيجة:

4. إزالة المنتجات الحديثة من الصفحة الرئيسية لمتجرك

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

لإزالة هذا القسم ، ما عليك سوى إضافة الكود التالي إلى ملف function.php الخاص بالقالب الفرعي.

 الوظيفة storefront_child_reorder_homepage_contant () {

remove_action ('homepage'، 'storefront_recent_products'، 30) ؛

}

add_action ('init'، 'storefront_child_reorder_homepage_contant') ؛

ها هي النتيجة:

5. إزالة المنتجات الأكثر مبيعًا من الصفحة الرئيسية للمتجر

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

 الوظيفة storefront_child_reorder_homepage_contant () {

remove_action ('homepage'، 'storefront_best_selling_products'، 70) ؛

}

add_action ('init'، 'storefront_child_reorder_homepage_contant') ؛

ها هي النتيجة:

6. إزالة المنتجات المميزة

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

 الوظيفة storefront_child_reorder_homepage_contant () {

remove_action ('homepage'، 'storefront_featured_products'، 40) ؛

}

add_action ('init'، 'storefront_child_reorder_homepage_contant') ؛

ها هي النتيجة:

7. كيفية تغيير لون الخطوط الأفقية في الصفحة الرئيسية لواجهة المتجر

ما عليك سوى إضافة الكود التالي إلى ملف custom.css لموضوع طفلك:

 .page-template-template-homepage .hentry .entry-header ،

.page-template-template-homepage .hentry،

.page-template-template-homepage .storefront-product-section {

لون الحدود: أحمر.

}

8. إضافة صورة الخلفية إلى واجهة المتجر قسم معين من الصفحة الرئيسية

يحتوي موضوع Storefront الافتراضي على ستة أقسام ، وهي فئات المنتجات ، والمنتجات الحديثة ، والمنتجات المميزة ، والمنتجات الشائعة ، والمنتجات المعروضة للبيع ، والمنتجات الأكثر مبيعًا. ما عليك سوى إضافة الكود التالي إلى ملف style.css :

 .storefront-المميز المنتجات {

صورة الخلفية: url (أضف عنوان URL الخاص بك هنا) ؛

موضع الخلفية: مركز المركز ؛

تكرار الخلفية: لا تكرار ؛

حجم الخلفية: غطاء ؛

- حجم الخلفية: غطاء ؛

}

ها هي النتيجة:

9. إضافة لون الخلفية إلى أقسام الصفحة الرئيسية لواجهة المتجر

قد ترغب في إضافة لون خلفية إلى قسم الصفحة الرئيسية. للقيام بذلك ، عليك أولاً تحديد القسم الذي تريد إضافة اللون إليه. يمكن القيام بذلك بسهولة عن طريق إضافة الكود التالي إلى ملف style.css :

 .storefront-المميز المنتجات {

لون الخلفية: # FFEB3B ؛

}

ها هي النتيجة:

10. كيفية إزالة أو إخفاء عنوان قسم الصفحة الرئيسية

للقيام بذلك ، عليك أولاً تحديد القسم الذي تريد إزالته أو إخفاؤه. يمكن القيام بذلك عن طريق إضافة الكود التالي إلى ملف style.css :

 .storefront-recent-products .section-title {display: none؛}

.storefront-product-categories .section-title {display: none؛}

.storefront-features-products .section-title {display: none؛}

.storefront-popular-products .section-title {display: none؛}

.storefront-on-sale-products .section-title {display: none؛}

.storefront-best-selling-products .section-title {display: none؛}

ها هي النتيجة:

11. كيفية تغيير عنوان قسم الصفحة الرئيسية

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

• storefront_product_categories_args
• storefront_recent_products_args
• storefront_featured_products_args
• storefront_popular_products_args
• storefront_on_sale_products_args
• storefront_best_selling_products_args

ما عليك سوى إضافة الكود التالي في ملف function.php للقالب الفرعي :

 add_filter ('storefront_featured_products_args'، 'custom_storefront_product_featured_title') ؛

// عنوان المنتجات المميزة على الصفحة الأولى

وظيفة custom_storefront_product_featured_title ($ args) {

$ args ['title'] = __ ("عنوان المنتجات المميزة الجديدة هنا"، "واجهة المتجر")؛

إرجاع $ args؛

}

ها هي النتيجة:

12. كيفية زيادة شبكة / عمود المنتج لقسم الصفحة الرئيسية

ما عليك سوى إضافة سطور التعليمات البرمجية التالية إلى ملف function.php الخاص بالقالب الفرعي.

 add_filter ('storefront_featured_products_shortcode_args' ، 'custom_storefront_featured_product_per_row') ؛




// عمود المنتجات المميزة

وظيفة custom_storefront_featured_product_per_row ($ args) {

$ args ['أعمدة'] = 2 ؛

إرجاع $ args؛

}

ها هي النتيجة:

13. كيفية عرض المزيد من الفئات على الصفحة الرئيسية

ما عليك سوى إضافة سطور التعليمات البرمجية التالية إلى ملف function.php الخاص بالقالب الفرعي.

 add_filter ('storefront_product_categories_shortcode_args' ، 'custom_storefront_category_per_page') ؛




// فئة المنتجات

وظيفة custom_storefront_category_per_page ($ args) {

$ args ['number'] = 4 ؛

إرجاع $ args؛

}

ها هي النتيجة:

14. كيفية إضافة وصف أدناه عنوان قسم الصفحة الرئيسية

ما عليك سوى إضافة هذا الرمز إلى ملف function.php للقالب الفرعي:

 add_action ('storefront_homepage_after_featured_products_title' ، 'custom_storefront_product_featured_description') ؛




function custom_storefront_product_featured_description () {؟>

<p class = "element-title - sub">

<؟ php echo "وصف القسم هنا" ؛؟>

</p>

<؟ php}

ها هي النتيجة:

15. كيفية إزالة قسم المنتجات الأعلى تصنيفًا من الصفحة الرئيسية لواجهة المتجر

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

ومع ذلك ، يمكنك ببساطة إزالة القسم باستخدام الخطافات. يتم ذلك ببساطة عن طريق إضافة السطر التالي إلى ملف function.php للقالب الفرعي :

remove_action( 'homepage', 'storefront_popular_products', 50 );

بالإضافة إلى ذلك ، يمكنك إزالته عن طريق إضافة الكود التالي في ملف style.css أو قسم CSS إضافي :

.storefront-popular-products .section-title {display:none;}

ها هي النتيجة:

16. كيفية تغيير عنوان قسم المنتجات الأعلى تقييماً

ما عليك سوى إضافة هذا الرمز إلى ملف function.php للقالب الفرعي:

 add_filter ('storefront_popular_products_args' ، 'custom_storefront_product_popular_title') ؛

// عنوان المنتجات المميزة على الصفحة الأولى

وظيفة custom_storefront_product_popular_title ($ args) {

$ args ['title'] = __ ("أفضل المنتجات"، "واجهة المحل")؛

إرجاع $ args؛

}

ها هي النتيجة:

17. كيفية عرض المزيد من المنتجات في القسم الأعلى تقييماً

يعرض الإعداد الافتراضي لـ Storefront 4 منتجات في قسم "الأعلى تقييماً". في هذا المثال ، سنزيدها إلى 12 منتجًا. ما عليك سوى إضافة هذا الرمز إلى ملف function.php للقالب الفرعي :

 add_filter ('storefront_popular_products_shortcode_args' ، 'custom_storefront_top_product_per_page') ؛




// منتجات مميزة لكل صفحة

وظيفة custom_storefront_top_product_per_page ($ args) {

$ args ['per_page'] = 12 ؛

إرجاع $ args؛

}

ها هي النتيجة:

18. كيفية إزالة قسم المنتجات المعروضة للبيع من الصفحة الرئيسية لواجهة المتجر

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

يمكنك ببساطة إزالة القسم باستخدام الخطافات. يتم ذلك ببساطة عن طريق إضافة السطر التالي إلى ملف function.php للقالب الفرعي:

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

ها هي النتيجة:

19. موضوع واجهة المتجر الصفحة الرئيسية التخصيص عمل الخطافات المراجع

هذه هي جميع وظائف add_action () المتاحة المستخدمة في سمة Storefront. يقوم بإرفاق وظيفة بخطاف كما هو محدد بواسطة do_action

رأس

• الصفحة الرئيسية
• storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

فئات المنتجات

• storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
• storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
• storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

المنتجات الأخيرة

• storefront_homepage_before_recent_products – Executed before the <section class="storefront-recent-products"> homepage section
• storefront_homepage_after_recent_products_title – Executed after the <h2 class="section-title"> recent products section title
• storefront_homepage_after_recent_products – Executed after the <section class="storefront-recent-products"> homepage section

منتجات مميزة

• storefront_homepage_before_featured_products – Executed before the <section class="storefront-featured-products"> homepage section
• storefront_homepage_after_featured_products_title – Executed after the <h2 class="section-title"> featured products section title
• storefront_homepage_after_featured_products – Executed after the <section class="storefront-featured-products"> homepage section

المنتجات الشعبية

• storefront_homepage_before_popular_products – Executed before the <section class="storefront-popular-products"> homepage section
• storefront_homepage_after_popular_products_title – Executed after the <h2 class="section-title"> popular products section title
• storefront_homepage_after_popular_products – Executed after the <section class="storefront-popular-products"> homepage section

المنتجات المعروضة للبيع

• storefront_homepage_before_on_sale_products – Executed before the <section class="storefront-on-sale-products"> homepage section
• storefront_homepage_after_on_sale_products_title – Executed after the <h2 class="section-title"> on-sale products section title
• storefront_homepage_after_on_sale_products – Executed after the <section class="storefront-on-sale-products"> homepage section

المنتجات الأكثر مبيعًا

• storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
• storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
• storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

وظائف واجهة المتجر

الملف: /inc/storefront-functions.php

• storefront_header_styles – filter the header styles
• storefront_homepage_content_styles – filter the homepage content styles
• فصول أمام المحل

استنتاج

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

إذا كنت مبتدئًا في WordPress ولا تعرف مكان العثور على ملف jobs.php ، فما عليك سوى اتباع هذه الخطوات البسيطة:

1. قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
2. من قائمة لوحة التحكم ، انقر فوق قائمة المظهر> قائمة محرر السمات . عند فتح صفحة Theme Editor ، ابحث عن ملف وظائف السمة حيث سنضيف الوظيفة.

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

مقالات مماثلة

1. 80+ حيل لتخصيص سمة WooCommerce لواجهة المتجر: دليل تخصيص مظهر واجهة المتجر النهائي
2. كيفية إخفاء منتج في WooCommerce أو إخفاء المنتجات حسب الفئة أو الأدوار
3. كيفية الحصول على اسم فئة المنتج الحالي في WooCommerce
4. كيفية تعيين المنتجات المميزة في WooCommerce
5. كيفية إخفاء جميع المنتجات من صفحة المتجر في WooCommerce
6. كيفية حساب العناصر المضافة إلى عربة التسوق WooCommerce كود عدد
7. كيفية إخفاء المنتجات بدون سعر في WooCommerce
8. كيفية إخفاء منتج WooCommerce من نتائج البحث
9. كيفية استخدام سمات منتج WooCommerce خطوة بخطوة [الدليل الكامل]
10. كيفية إنشاء ترقيم الصفحات في WordPress دون استخدام البرنامج المساعد