قالب وردپرس با سئو بالا راهکار جدید برای وب سایت های دانلودی دریافت و مشاهده

شروع ساختن قالب در ووکامرس – قسمت دوم

امیر چیتایی

در این مقاله می‌خواهیم چند موضوع مختلف که چندان به هم نامربوط هم نیستند را با هم بررسی کنیم. شما باید به عنوان یک طراح سایت به سیستم وردپرس مسلط باشید. بر اساس نیاز مشتریانتان امکان دارد که شما بخواهید برای یک سایت فروشگاهی( قسمت اول را خواندید ؟)  را طراحی کنید. پس با کمک این مقاله می‌توانید با موضوعات مختلفی در مورد ووکامرس آشنا شوید. در این مقاله ابتدا به سراغ ساختار الگو در ووکامرس می‌رویم و بعد با ساختار css آشنا می‌شویم و یاد می‌گیریم چطور سیستم ووکامرس دلخواه خود را در سایت مورد نظرمان بسازیم. پس به سراغ تیتر اول می‌رویم:

ساختار الگو و تغییر قالب از طریق یک موضوع

فایل های قالب ووکامرس دارای نشانه گذاری و ساختار قالب برای  و ایمیل‌های HTML فروشگاه شما هستند.

وقتی این فایل‌ها را باز می‌کنید، متوجه خواهید شد که همه آنها دارای هوک‌هایی هستند که به شما امکان اضافه کردن / انتقال محتوا بدون نیاز به ویرایش فایلهای خود را  خواهد داد. فایل های الگو را می توان در /woocommerce/templates/ دایرکتوری پیدا کرد که من در این مقاله ورژن آخر فایل‌های قالب را در اختیار شما قرار می‌دهم برای دریافت ورژن ۳٫۳٫۰ روی لینک زیر کلیک کنید.

چطور فایل‌ها را ویرایش کنیم؟

برای ویرایش فایل‌ها در راه ارتقا امنیت، از کنترل دستی استفاده کنید. کپی آن را به یک دایکرکتوری در تم خود به نام  /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 استفاده می‌کنیم که در فایل اول ساده تر و سریعتر عمل می‌کند.

CSS برای ایجاد طرح پیش فرض با هر کدام از تم ها با استفاده از عرض٪ برای تمام سبک های طرح سازگار است. با این حال، احتمال دارد که شما بخواهید تنظیمات شخصی خود را انجام دهید.

تغییرات

برای جلوگیری از مشکل به روز رسانی، توصیه می کنیم که این فایل ها را ویرایش نکنید، بلکه آنها را به عنوان مرجع استفاده کنید. اگر فقط می خواهید تغییرات ایجاد کنید، توصیه می کنیم برخی از سبک های برتر را به استایل شیت خود اضافه کنید. برای مثال نوشته‌ای را که در پایین آمده را به استایل شیت ووکامرس خود اضافه کنید تا از دکمه‌های سیاه رنگ به جای رنگ پیش‌فرض استفاده کنید.

a.button, button.button, input.button, #review_form #submit { background:black; }
همچنین ووکامرس  نام تم (علاوه بر اطلاعات مفید دیگر مانند نوع صفحه ای که در معرض دید قرار گرفته است به عنوان یک کلاس در  بادی تگ  که می‌تواند برای استایل دستی شما مفید باشد را ارائه می‌کند.

غیر فعال کردن استایل‌های ووکامرس

اگر قصد دارید تغییرات بزرگی انجام دهید ممکن است ترجیح دهید که همۀ استایل شیت‌های ووکامرس شما به صورت رفرنس نباشد. شما می‌توانید با انجام تغییراتی از ووکامرس خود بخواهید که از css‌های پیش‌ فرض ووکامرس استفاده نکند.

اما یک راه حل بهتر این است که کد زیر را به فایل functions.php تم خود اضافه کنید:
  // 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

این راه حل اجازه می دهد تا یک صفحه قالب جدید را در قالب خود که برای همۀ طبقه بندی‌ها و نمایش نوع پست در ووکامرس  استفاده می شود ایجاد کنید.

در حالی که همه چیز به راحتی درست می‌شود ولی مسئله اینجاست که این الگو برای تمامی طبقه بندی های WC (دسته های محصول و غیره) و انواع پست ها (آرشیو محصولات، صفحات محصول تک) استفاده می شود.
برای تنظیم این صفحه الگو:

تکرار page.php

فایل page.php تم خود را کپی کنید و نام آن را woocommerce.php بگذارید.

این فایل باید مانند این باشد: wp-content / themes / YOURTHEME / woocommerce.php.

صفحه خود را ویرایش کنید (woocommerce.php)

woocommerce.php جدید خود را در یک ویرایشگر متن یا ویرایشگر انتخابی خود باز کنید.

حلقه را عوض کنید

بعد شما باید حلقه را پیدا کنید، معمولاٌ حلقه با کد زیر شروع می‌شود:

<?php if ( have_posts() ) :

و با کد زیر پایان می‌یابد:

<?php endif; ?>

این تفاوت بین تم ها متفاوت است. هنگامی که آن را یافتید، آن را حذف کنید و کد زیر را به جایش قرار دهید:

<?php woocommerce_content(); ?>
این کار به جای آن از حلقه ووکامرس استفاده می کند. فایل را ذخیره کنید. بعد از انجام این کار شما الگو را تنظیم کرده‌اید.
نکته: هنگام ایجاد woocommerce.php در پوشه موضوع خود، نمی‌توانید قالب سفارشی woocommerce / archive-product.php را لغو کنید زیرا woocommerce.php دارای اولویت بیشتری نسبت به  archive-product.php است. به خاطر این که از برخی از مشکلات صفحۀ نمایش جلوگیری شود.

استفاده از هوک‌ها

روش قلاب بیشتر از استفاده از woocommerce_content شما را  درگیر می‌کند، اما انعطاف پذیرتر است.

این شبیه روش ما در هنگام ایجاد تم ها است. برای این‌کار چندین خط را در فایل functions.php تم خود قرار دهید. ابتدا WraCommerce را باز کنید:

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 انواع تگ‌های شرطی در وردپرس را ببینید.

برچسب های شرطی موجود

تمام تگ های شرطی تست می کنند که آیا یک شرط برآورده شده است یا خیر. می‌توانید تگ‌هایی که شروط را برآورده می‌کنند را در لینک زیر پیدا کنید. WooCommerce API Docs.

صفحۀ ووکامرس

is_woocommerce()

اگر در صفحه‌ای است که از قالبهای ووکامرس استفاده می‌کند، درست عمل می‌کند

سبد خرید و پرداخت، صفحات استاندارد با کد کوتاه هستند و بنابراین شامل این عملکرد نخواهند شد.

صفحۀ اصلی فروشگاه

is_shop()

هنگامی که در صفحه (فروشگاه) بایگانی محصول است درست عمل می‌کند.

صفحۀ فهرست محصول

is_product_category()

هنگام مشاهده یک آرشیو دسته بندی محصول، درست می شود.

is_product_category( ‘shirts’ )

هنگامی که صفحه دسته محصول برای دسته “پیراهن” نمایش داده می شود.
is_product_category( array( ‘shirts’, ‘games’ ) )
هنگامی که صفحه طبقه بندی محصولات برای دسته “پیراهن” یا “بازی ها” نمایش داده می شود.

صفحۀ برچسب محصول

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()
هنگام مشاهده یک نقطه پایانی ووکامرس درست می‌شود.
is_wc_endpoint_url( ‘order-pay’ )
هنگامی که صفحه پایانی برای پرداخت سفارش نمایش داده می شود.
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.';
  }

  }

به پایان این مقاله رسیدیم. امیدوارم که بعد از این پست درک بهتر و درست‌تری از ووکامرس داشته‌باشید و بتوانید از توضیحات و ترفند‌های بالا برای بهینه‌تر کردن سیستم فروشگاهی سایت وردپرس خود از طریق ووکامرس استفاده کنید. نظرات و پیشنهادات خود را با ما به اشتراک بگذارید. همچنین اگر نقصی در مطالب وجود داشت به ما کمک کنید که راحت‌تر مشکل را حل کنیم تا شما هم سهم مشترکی برای اطلاع رسانی به سایر مخاطبان این پست داشته‌ باشید. اگر مایل بودید از سایر پست‌های ما در زمینه‌های طراحی سایت بازدید کنید.

برچسب ها : , , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزش طراحی سایت

آموزش کامل طراحی سایت

اگر تا به حال به دنبال طراحی سایت رفتید و موفق نشدید بهتر است این مجموعه را یک نگاه کنید . مجموعه ای کامل با هدف شروع از ساده ترین نکات برای افراد مبتدی تا ساختن یک قالب حرفه ای در وردپرس !


براتون منتشر کنم