كيفية جعل موضوع وورد التجارة جاهز

اجعل WordPress Theme WooCommerce متوافقًا مع الأطروحات المفيدة

لذلك تريد إضافة متجر إلى مظهرك – رائع! WooCommerce هو خيار رائع. من الناحية التقنية الكل السمات هي “WooCommerce Compatible” لأنها مكون إضافي. من الناحية النظرية ، يجب أن يعمل أي مكون إضافي مع أي سمة WordPress (مشفرة بشكل صحيح).


بصفتك مطورًا للسمة على الرغم من أنك قد ترغب في تعديل مخرجات WooCommerce لتناسب بشكل أفضل موضوعك أو لتوفير خيارات للمستخدمين النهائيين غير متاحة بسهولة في إعدادات WooCommerce (مثل تغيير عدد الأعمدة في المتجر). ستجد أدناه بعض المقتطفات المفيدة التي يمكنك استخدامها لتوفير دعم “أفضل” لـ WooCommerce في السمة الخاصة بك و / أو لتغيير الأشياء في تصميمك المحدد.

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

تحقق مما إذا كان WooCommerce ممكّنًا

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

// أضف ثابتًا جديدًا يُرجع صحيحًا إذا كان WooCommerce نشطًا
تعريف ('WPEX_WOOCOMMERCE_ACTIVE'، class_exists ('WooCommerce')) ؛

// التحقق مما إذا كان WooCommerce نشطًا
إذا (WPEX_WOOCOMMERCE_ACTIVE) {
// قم بعمل ما...
// مثل تضمين ملف جديد مع جميع تعديلات Woo.
}}

أعلن دعم WooCommerce

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

add_action ('after_setup_theme'، function () {
add_theme_support ('woocommerce') ؛
}) ؛

إزالة WooCommerce CSS

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

المقتطف التالي مخصص لإزالة جميع أنماط WooCommerce:

// إزالة كافة أنماط Woo
add_filter ('woocommerce_enqueue_styles'، '__return_empty_array')؛

هذا المقتطف هو مثال على إزالة أنماط CSS محددة بشكل مشروط:

function wpex_remove_woo_styles (أنماط $) {
unset ($ styles ['woocommerce-general']) ؛
unset ($ styles ['woocommerce-layout']) ؛
unset ($ styles ['woocommerce-smallscreen']) ؛
إرجاع أنماط $؛
}}
add_filter ('woocommerce_enqueue_styles'، 'wpex_remove_woo_styles')؛

تمكين معرض منتجات WooCommerce و Zoom و Lightbox (الإصدار 3.0 +)

في WooCommerce 3.0 قدموا معرضًا جديدًا للمنتجات ، والتكبير ، وصندوق الضوء. يجب تمكينها جميعًا عبر “add_theme_support” إذا كنت تريد الاستفادة منها في السمة الخاصة بك.

add_theme_support ('wc-product-gallery-slider') ؛
add_theme_support ('wc-product-gallery-zoom') ؛
add_theme_support ('wc-product-gallery-lightbox') ؛

إزالة عنوان المحل

تحتوي العديد من السمات بالفعل على وظائف لعرض عناوين الأرشيف ، لذلك يزيل هذا الرمز العنوان الإضافي من WooCommerce والذي من الأفضل إخفاؤه عبر CSS.

add_filter ('woocommerce_show_page_title'، '__return_false')؛

تغيير عنوان الأرشيف للمحل

إذا كان السمة الخاصة بك تستخدم وظيفتي archive_title () أو get_archive_title () لعرض عنوان المحفوظات الخاصة بك ، يمكنك بسهولة تعديله عبر مرشح للحصول على اسم صفحة المنتج بدلاً من عنوان أرشيف المتجر.

function wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ title = get_the_title ($ shop_id) ؛
}}
إرجاع عنوان $ ؛
}}
add_filter ('get_the_archive_title'، 'wpex_woo_archive_title')؛

قم بتغيير عدد المنتجات المعروضة لكل صفحة في المتجر

يُستخدم لتغيير عدد المنتجات المعروضة لكل صفحة في المتجر وأرشيفات المنتجات (الفئات والعلامات).

// Alter WooCommerce منشورات المتجر لكل صفحة
دالة wpex_woo_posts_per_page ($ cols) {
عودة 12 ؛
}}
add_filter ('loop_shop_per_page'، 'wpex_woo_posts_per_page')؛

قم بتغيير عدد الأعمدة المعروضة في المتجر لكل صف

لا أفهم سبب عمل WooCommerce بهذه الطريقة ولكن لا يمكنك فقط تغيير فلتر “loop_shop_columns” ، بل يجب أيضًا إضافة الفئات الفريدة إلى علامة النص لكي تعمل الأعمدة. في حين أن رموز Woo Shortcodes تحتوي على غلاف div مع الفئات الصحيحة التي لا تحتوي عليها صفحات المتجر ، لهذا السبب نحتاج إلى وظيفتين.

// تعديل أعمدة المتجر
دالة wpex_woo_shop_columns (أعمدة $) {
عودة 4 ؛
}}
add_filter ('loop_shop_columns'، 'wpex_woo_shop_columns')؛

// أضف فئة نصية صحيحة لأعمدة المتجر
دالة wpex_woo_shop_columns_body_class (فئات $) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ classes [] = 'عمود -4'؛
}}
إرجاع فئات $؛
}}
add_filter ('body_class'، 'wpex_woo_shop_columns_body_class')؛

تغيير سهام ترقيم الصفحات التالية والسابقة

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

دالة wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = ''؛
$ args ['next_text'] = ''؛
ارجاع $ args
}}
add_filter ('woocommerce_pagination_args'، 'wpex_woo_pagination_args')؛

قم بتغيير نص شارة OnSale

مفيد بشكل خاص على المواقع التي تستخدم لغة مختلفة أو لإزالة علامة التعجب التي لست من المعجبين بها.

دالة wpex_woo_sale_flash () {
إرجاع '". esc_html __ ('Sale'، 'woocommerce'). "'؛
}}
add_filter ('woocommerce_sale_flash'، 'wpex_woo_sale_flash')؛

تغيير أعمدة الصور المصغرة لمعرض المنتجات

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

دالة wpex_woo_product_thumbnails_columns () {
عودة 4 ؛
}}
add_action ('woocommerce_product_thumbnails_columns'، 'wpex_woo_product_thumbnails_columns')؛

تغيير عدد المنتجات ذات الصلة المعروضة

يُستخدم لتغيير عدد المنتجات المعروضة للمنتجات ذات الصلة في صفحة المنتج الفردي.

// تعيين المنتجات ذات الصلة لعرض 4 منتجات
دالة wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4 ؛
ارجاع $ args
}}
add_filter ('woocommerce_output_related_products_args'، 'wpex_woo_related_posts_per_page')؛

قم بتغيير عدد الأعمدة لكل صف للأقسام ذات الصلة والبيع المرتفع على المنتجات

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

// تصفية أعمدة البيع
دالة wpex_woo_single_loops_columns (أعمدة $) {
عودة 4 ؛
}}
add_filter ('woocommerce_up_sells_columns'، 'wpex_woo_single_loops_columns')؛

// تصفية الفلاتر ذات الصلة
دالة wpex_woo_related_columns ($ args) {
$ args ['عمود'] = 4 ؛
ارجاع $ args
}}
add_filter ('woocommerce_output_related_products_args'، 'wpex_woo_related_columns'، 10)؛

// تصفية فئات النص لإضافة فئة العمود
دالة wpex_woo_single_loops_columns_body_class (فئات $) {
if (is_singular ('product')) {
$ classes [] = 'عمود -4'؛
}}
إرجاع فئات $؛
}}
add_filter ('body_class'، 'wpex_woo_single_loops_columns_body_class')؛

أضف رابط سلة التسوق الديناميكي وتكلفة عربة التسوق إلى قائمتك

سيضيف هذا المقتطف عنصر عربة WooCommerce إلى قائمتك يعرض تكلفة العناصر في سلة التسوق الخاصة بك. بالإضافة إلى ذلك ، إذا تم تمكين Font-Awesome في موقعك ، فسيعرض رمز حقيبة تسوق صغير. مهم: يجب عدم تضمين هذه الدوال في is_admin () شرطي لأنها تعتمد على AJAX لتحديث التكلفة يجب التأكد من أن الوظائف متاحة عندما تُرجع is_admin () صوابًا وخطأ.

// أضف رابط السلة إلى القائمة
function wpex_add_menu_cart_item_to_menus ($ items، $ args) {

// تأكد من تغيير "wpex_main" إلى موقع القائمة !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart'؛

if (is_cart ()) {
$ css_class. = 'current-menu-item'؛
}}

عناصر $. = '
  • '؛ $ items. = wpex_menu_cart_item ()؛ عناصر $. = '
  • '؛ }} إرجاع العناصر $؛ }} add_filter ('wp_nav_menu_items'، 'wpex_add_menu_cart_item_to_menus'، 10، 2)؛ // دالة تقوم بإرجاع ارتباط عربة القائمة الرئيسية دالة wpex_menu_cart_item () { الناتج $ = '' ؛ $ cart_count = WC () -> cart-> cart_contents_count ؛ $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count) ؛ إذا ($ cart_count) { $ url = WC () -> cart-> get_cart_url () ؛ } آخر { $ url = wc_get_page_permalink ("متجر") ؛ }} $ html = $ cart_extra = WC () -> cart-> get_cart_total () ؛ $ html = str_replace ('amount'، ''، $ html)؛ الناتج $. = ''؛ الناتج $. = ''؛ $ output. = wp_kses_post ($ html) ؛ الناتج $. = ''؛ إرجاع الناتج $ }} // تحديث رابط سلة التسوق مع AJAX function wpex_main_menu_cart_link_fragments ($ fragments) { أجزاء $ ['. wpex-menu-cart-total'] = wpex_menu_cart_item ()؛ إرجاع أجزاء $؛ }} add_filter ('add_to_cart_fragments'، 'wpex_main_menu_cart_link_fragments')؛

    استنتاج

    سيعمل WooCommerce مع أي سمة افتراضيًا ولكن إضافة بعض الدعم الإضافي للمكون الإضافي بحيث يناسب بشكل أفضل السمة الخاصة بك أمر سهل للغاية. لقد كتبت هذا المنشور بالفعل أثناء ترميز موضوع مدونة وورد الخاص بنا في نيويورك ، لذا يتم تضمين معظم هذه التعديلات في موضوعنا. أو إذا كنت تفضل شراء السمة لإلقاء نظرة على كيفية تنفيذ كل شيء (راجع الملفات في wpex-new-york / inc / woocommerce) – فقد تكون طريقة أسهل لتعلم كيفية الإضافة بشكل صحيح دعم مخصص للمكون الإضافي WooCommerce من خلال النظر في موضوع مشفر بالفعل.

    هل هناك أي مقتطفات أخرى تعتقد أنها تنتمي إلى هذه القائمة أو ستجدها مفيدة عند تطوير موضوعات جديدة جاهزة لـ WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map