شروع ساختن قالب در ووکامرس – قسمت دوم
در این مقاله می‌خواهیم چند موضوع مختلف که چندان به هم نامربوط هم نیستند را با هم بررسی کنیم. شما باید به عنوان یک طراح سایت به سیستم وردپرس مسلط باشید. بر اساس نیاز مشتریانتان امکان دارد که شما بخواهید برای یک سایت فروشگاهی( قسمت اول را خواندید ؟) را طراحی کنید. پس با کمک این مقاله می‌توانید با موضوعات مختلفی در مورد ووکامرس آشنا شوید. در این مقاله ابتدا به سراغ ساختار الگو در ووکامرس می‌رویم و بعد با ساختار css آشنا می‌شویم و یاد می‌گیریم چطور سیستم ووکامرس دلخواه خود را در سایت مورد نظرمان بسازیم. پس به سراغ تیتر اول می‌رویم:
ساختار الگو و تغییر قالب از طریق یک موضوع
فایل های قالب ووکامرس دارای نشانه گذاری و ساختار قالب برای و ایمیل‌های HTML فروشگاه شما هستند.
چطور فایل‌ها را ویرایش کنیم؟
برای ویرایش فایل‌ها در راه ارتقا امنیت، از کنترل دستی استفاده کنید. کپی آن را به یک دایکرکتوری در تم خود به نام /woocommerce توسط ساختار فایل مشابه نگهدارید ولی حواستان باشد که /templates/ را از ساب دایرکتوری خود خذف کنید. به طور مثال برای کنترل دستی اعلان سفارش مدیر، کد زیر را وارد کنید:
wp-content/plugins/woocommerce/templates/emails/admin-new-order.php to wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php
فایل کپی شده در حال حاضر فایل قالب پیش فرض ووکامرس را به صورت دستی در می‌آورد.
هشدار: این فایل ها را درون پلاگین هسته ای خود ویرایش نکنید زیرا در طول فرآیند ارتقاء مجددا تغییر می‌کنند و باعث می‌شود که تغییرات دلخواه ما به صورت دستی از بین برود.
برای قالب های دلخواه
اگر شما در زمینۀ توسعۀ و طراحی قالب فعالیت دارید و یا می‌خوهید از فایلهای دلخواه در تم خود استفاده کنید، باید با استفاده از پشتیبانی add_theme_support اقدام کنید.
اگر تم شما فایل woocommerce.php دارد، شما قادر نخواهید بود که تنظیمات دستی را در woocommerce/archive-product.php برای قالبهای تم دلخواه خود ایجاد کنید. در نظر داشته‌باشید که woocommerce.php دارای اولویت بیشتری نسبت به سایر فایل های قالب است، زیرا رعایت کردن این نکته باعث جلوگیری از نشان دادن برخی از مشکلات می‌شود.
ساختار CSS
درون assets/css/ دایرکتوری شما می توانید شیوه های مربوط به شیوه نامه سبک های پیش فرض ووکامرس را پیدا کنید. فایلهایی که برای جستجو وجود دارند woocommerce.scss و woocommerce.css هستند.
woocommerce.css استایل شیت منحصر به فردی است. css هیچ فضایی را اشغال نمی‌کند و با این کار باعث می‌شود که فایل‌ها خیلی سریع لود شوند. این فایل توسط پلاگین ارجاع شده است و تمام سبکهای ووکامرس را اعلام می‌کند. woocommerce.scss مستقیما توسط پلاگین مورد استفاده قرار نمی گیرد. اغلب طراحان قالب وردپرس به طور مستقیم از این فایل استفاده می‌کنند. خود ما از فایل SASS در اسکریپت CSS استفاده می‌کنیم که در فایل اول ساده تر و سریعتر عمل می‌کند.
تغییرات
برای جلوگیری از مشکل به روز رسانی، توصیه می کنیم که این فایل ها را ویرایش نکنید، بلکه آنها را به عنوان مرجع استفاده کنید. اگر فقط می خواهید تغییرات ایجاد کنید، توصیه می کنیم برخی از سبک های برتر را به استایل شیت خود اضافه کنید. برای مثال نوشته‌ای را که در پایین آمده را به استایل شیت ووکامرس خود اضافه کنید تا از دکمه‌های سیاه رنگ به جای رنگ پیش‌فرض استفاده کنید.
a.button, button.button, input.button, #review_form #submit { background:black; }
همچنین ووکامرس نام تم (علاوه بر اطلاعات مفید دیگر مانند نوع صفحه ای که در معرض دید قرار گرفته است به عنوان یک کلاس در بادی تگ که می‌تواند برای استایل دستی شما مفید باشد را ارائه می‌کند.
غیر فعال کردن استایل‌های ووکامرس
اگر قصد دارید تغییرات بزرگی انجام دهید ممکن است ترجیح دهید که همۀ استایل شیت‌های ووکامرس شما به صورت رفرنس نباشد. شما می‌توانید با انجام تغییراتی از ووکامرس خود بخواهید که از cssهای پیش فرض ووکامرس استفاده نکند.
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
با این تعریف در جای خود، تم شما دیگر از استایل شیت‌های ووکامرس استفاده نخواهد کرد و به شما یک بوم خالی می‌دهد که به سلیقه خودتان طرح / سبک دلخواه خود را بسازید.
مشارکت
اگر شما از هستۀ ووکامرس خود کمک می‌گیرید و نیاز به ویرایش استایل دارید. فایلهای SASS خود را ویرایش کنید و سپس آنها را با استفاده از Grunt کامپایل کنید. برای اطلاعات بیشتر در مورد کارهایی که Grunt انجام می‌دهد، فایل Gruntfile.js را در داخل روت ووکامرس خود بررسی کنید.
شخص ثالث/ سفارشی/ بدون سازگاری تم ووکامرس
ووکامرس با تمام تم های وردپرس به عنوان نسخه ۳٫۳ سازگار است، حتی اگر آنها تم‌های ووکامرس خاص نباشند و همچنین پشتیبانی رسمی نشوند. قالب ها در داخل محتوا ظاهر می شوند و این همه چیز را در سایت شما طبیعی می کند.
تم‌های بدون ووکامرس به طور پیش فرض شامل موارد زیر است:
- قابلیت زوم در آن فعال شده است، توانایی بزرگ و کوچک کردن تصاویر محصولات
-
قابلیت سبد فعال -گالری تصاویر نمایش محصولات به صورت پاپ آپ برای بررسی دقیق‌تر
- قسمت نظرات (بدون قسمت بررسی‌ها) فعال شده است، بازدید کنندگان / خریداران می توانند نظر خود را مثل یک پست وارد کنند، همچنین می‌توانند برای محصول مورد نظر امتیازی وارد کنند یا در این فضا محصول را به صورت اجمالی بررسی کنند.
شما باید از یک نسخه قبل از ورژن ۳٫۳ استفاده کنید، ما توصیه می‌کنیم که آخرین نسخه را به روز رسانی کنید. این اولین پیشنهاد ماست. اگر مشکلی مثل این در تم خود دارید احتمالا راه حل همین خواهد بود.
سایت ها / فروشگاه ها بدون استفاده از ورژن ۳٫۳ ووکامرس
ممکن است شما زمانی که از پیش فرض بسته بندی محتوای ووکامرس خود استفاده می‌کنید به مشکل بربخورید و این بسته بندی پیش‌فرض با تم انتخاب شدۀ شما مطابقت نداشته باشد. این موضوع به این نکته اشاره می‌کند که خودتان، طرح مورد نظرتان را در صفحات ووکامرس شکسته‌اید و ساید بارها را در موقعیت نادرستی قرار داده‌اید. این مسئله می‌تواند تاثیر بالقوه‌ای روی صفحۀ اصلی فروشگاه، صفحۀ معرفی هر محصول و صفحات طبقه‌بندی شما مثل دسته ها و برچسب ها بگذارد زیرا، ووکامرس برای نمایش این صفحات از قالب های خود استفاده می کند و این برای ووکامرس غیر ممکن است که نشانه‌گذاری‌های دقیق تم شما را بشناسد.
صفحات دیگر شامل: (پرداخت، سبد خرید، حساب) از این قاعده مستثنی هستند زیرا آنها از قالب page.php تم شما استفاده می کنند.
- استفاده از هوک برای کاربران پیشرفته و طراحان قالب
- استفاده از woocommerce_content برای بهبود عملکرد داخل تم شما
استفاده از woocommerce_content
این راه حل اجازه می دهد تا یک صفحه قالب جدید را در قالب خود که برای همۀ طبقه بندی‌ها و نمایش نوع پست در ووکامرس استفاده می شود ایجاد کنید.
تکرار page.php
فایل page.php تم خود را کپی کنید و نام آن را woocommerce.php بگذارید.
صفحه خود را ویرایش کنید (woocommerce.php)
حلقه را عوض کنید
بعد شما باید حلقه را پیدا کنید، معمولاٌ حلقه با کد زیر شروع می‌شود:
<?php if ( have_posts() ) :
و با کد زیر پایان می‌یابد:
<?php endif; ?>
این تفاوت بین تم ها متفاوت است. هنگامی که آن را یافتید، آن را حذف کنید و کد زیر را به جایش قرار دهید:
<?php woocommerce_content(); ?>
استفاده از هوک‌ها
روش قلاب بیشتر از استفاده از woocommerce_content شما را درگیر می‌کند، اما انعطاف پذیرتر است.
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10); remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);
سپس در عملکردهای مورد نیاز خود هوک کنید تا پلاگین ها را با توجه به تغییرات مورد نیاز تم شما نمایش دهد.
add_action(‘woocommerce_before_main_content’, ‘my_theme_wrapper_start’, 10); add_action(‘woocommerce_after_main_content’, ‘my_theme_wrapper_end’, 10); function my_theme_wrapper_start() { echo ‘<section id=”main”>’; } function my_theme_wrapper_end() { echo ‘</section>’; }
اطمینان حاصل کنید که نشانه گذاری منطبق با موضوع شماست. اگر شما مطمئن نیستید کدام کلاس ها یا شناسه ها برای استفاده مناسب می‌باشند، نگاهی به page.php خود بیاندازید و از آن راهنمایی بگیرید.
از تم ووکامرس استفاده کنید
اگر قادر به انجام روش های بالا نیستید یا در توسعۀ و طراحی تم خود مشکل دارید توصیه می‌کنیم که از سایر تم‌های ووکامرس برای رفع مشکل احتمالیتان استفاده کنید.
تگ‌ها (برچسبهای) شرطی
برای این که موضوع را بررسی کنیم ابتدای امر باید بدانیم که تگ چیست و شامل چه چیزهایی می‌شود و بعد از آن سایر تگ‌های شرطی موجود را بررسی می‌کنیم.
برچسبهای شرطی چیست؟
برچسب های شرطی ووکامرس و وردپرس را می توان در فایل های قالب خود مورد استفاده قرار داد تا محتوا را بر اساس شرایط مطابق تغییر داده و توسط صفحه نمایش داده شود.
شما می‌توانید با تگ شرطی is_shop() این کار را انجام دهید.
از آنجا که ووکامرس از انواع پست سفارشی استفاده می کند، شما همچنین می توانید از بسیاری از برچسب های شرطی وردپرس نیز استفاده کنید. از http://codex.wordpress.org/Conditional_Tags انواع تگ‌های شرطی در وردپرس را ببینید.
برچسب های شرطی موجود
صفحۀ ووکامرس
is_woocommerce()
اگر در صفحه‌ای است که از قالبهای ووکامرس استفاده می‌کند، درست عمل می‌کند
صفحۀ اصلی فروشگاه
is_shop()
صفحۀ فهرست محصول
is_product_category()
هنگام مشاهده یک آرشیو دسته بندی محصول، درست می شود.
is_product_category( ‘shirts’ )
صفحۀ برچسب محصول
is_product_tag()
is_product_tag( ‘shirts’ )
هنگامی که صفحه برچسب محصول برای برچسب “پیراهن” نمایش داده می شود.
is_product_tag( array( ‘shirts’, ‘games’ ) )
صفحۀ محصول تک
is_product()
بسته بندی برای is_singular درست بر روی یک صفحه محصول درست می شود.
صفحۀ سبد خرید
is_cart()
صفحۀ پرداخت
is_checkout()
در صفحۀ پرداخت درست می شود.
صفحات حساب مشتری
is_account_page()
نقطۀ پایانی
is_wc_endpoint_url( 'order-received' )
is_wc_endpoint_url( 'view-order' )
is_wc_endpoint_url( 'edit-account' )
is_wc_endpoint_url( 'edit-address' )
is_wc_endpoint_url( 'lost-password' )
is_wc_endpoint_url( 'customer-logout' )
is_wc_endpoint_url( ‘add-payment-method’ )
وقتی صفحه نقطه پایانی برای اضافه کردن روش پرداخت نمایش داده می شود.
درخواست آژاکس
is_ajax()
زمانی که صفحه از طریق آژاکس بارگذاری می‌شود. درست می‌شود.
نمونه کار
مثال نشان می دهد که چگونه محتوای مختلف را با دسته‌بندی های مختلف نمایش دهید.
if ( is_product_category() ) {
if ( is_product_category( 'shirts' ) ) {
echo 'Hi! Take a look at our sweet tshirts below.';
} elseif ( is_product_category( 'games' ) ) {
echo 'Hi! Hungry for some gaming?';
} else {
echo 'Hi! Check our our products below.';
}
}
به پایان این مقاله رسیدیم. امیدوارم که بعد از این پست درک بهتر و درست‌تری از ووکامرس داشته‌باشید و بتوانید از توضیحات و ترفند‌های بالا برای بهینه‌تر کردن سیستم فروشگاهی سایت وردپرس خود از طریق ووکامرس استفاده کنید. نظرات و پیشنهادات خود را با ما به اشتراک بگذارید. همچنین اگر نقصی در مطالب وجود داشت به ما کمک کنید که راحت‌تر مشکل را حل کنیم تا شما هم سهم مشترکی برای اطلاع رسانی به سایر مخاطبان این پست داشته باشید. اگر مایل بودید از سایر پست‌های ما در زمینه‌های طراحی سایت بازدید کنید.
دیدگاهتان را بنویسید