آموزش ساخت شمارش معکوس در وردپرس

شمارنده معکوس ( تایمر شگفت انگیز ) یکی از قسمت‌هایی است که در سایت ممکن است به آن نیاز باشد . این قسمت در سایت‌های فروشگاهی بیشتر به چشم می‌خورد اما اگر درکل وب سایت‌هایی که نمایش شمارش معکوس نیاز داشته باشند ، می‌توانند از آن استفاده کنند . حتی در سایت سئو نود نیز در بخشی از صفحه اصلی یک قسمت شمارش معکوس برای دوره‌های ویژه وجود دارد .

برای اینکه این قسمت را طراحی کنید ، بصورت خام ، نیازمند html و css و یک کتابخانه جی کوئری مثل SilmpleTimer هستید . در اینصورت شما می‌توانید دیتای شمارشی و متن و آیکون و هرچیزی که به این قسمت مربوط است را بصورت اختصاصی برنامه نویسی کنید .

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

در ادامه ، یکی از افزونه‌های ساخت شمارش معکوس خدمتتان معرفی می‌شود که البته می‌توانید خودتان نیز ضمن یادگیری این افزونه ، از افزونه‌های دیگری که برای این کار وجود دارند استفاده کنید .

معرفی افزونه Countdown Timer Ultimate

افزونه Countdown Timer Ultimate یکی از پلاگین‌های خوب در مخزن وردپرس است که می‌توانید آن را بسادگی روی سایت خودتان راه اندازی کنید . اگر در گوگل نیز اسم Countdown Timer Ultimate را سرچ کنید ، می‌توانید از مخزن وردپرس افزونه را مشاهده کنید اما در این بخش از داخل پیشخوان وردپرس و قسمت افزودن افزونه تازه اقدام به نصب می‌کنیم . تصویر این افزونه را در مخزن وردپرس مشاهده می‌کنید :

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

البته دقت داشته باشید که پس از انجام تنظیمات مربوط به شمارنده ، شما باید از کدکوتاه یا همان short code استفاده کنید . تصویر اولیه از افزونه را در بالا مشاهده می‌کنید .

زمانی که افزونه را نصب و فعال کردید ، یک صفحه همانند تصویر بالا مشاهده خواهید کرد که می‌توانید با گزینه Skip از آن صرف نظر کرده و به سراغ منوی تنظمیات و ایجاد تایمر جدید بروید ! زمانی که منوی پیشخوان وردپرس را مشاهده کنید ، بخش Countdown Timer را مشاهده خواهید کرد که اضافه شده است .

اگر قصد دارید تا یک تایمر شمارش معکوس ایجاد کنید ، باید از قسمت Add New Timer اقدام به ساخت یک تایمر جدید کنید . نمای این بخش شاید شما را به یاد قسمت نوشته‌ها و برگه‌ها بیندازد که حقیقتا نیز همینطور است .

این افزونه برای اینکه قسمت Countdown Timer را در اختیار شما قرار دهد از ساختار post_type با نام wpcdt_countdown استفاده کرده است . زمانی که قصد دارید تا یک تایمر جدید بسازید ، با یک صفحه همانند زیر روبر هستید :

در این بخش ابتدا باید یک نام برای تایمر وارد کنید ( نام انگلیسی توصیه می‌شود تا شورت کد شما نیز تمیز باشد ) . پس از اینکه یک نام برای تایمر تنظیم کردید ( ممکن است شما چندین تایمر مختلف در سایت داشته باشید به هیمن دلیل باید برای هرکدام یک اسم تعیین کنید ) قسمت Expiry Date & Time را مشاهده خواهید کرد .

در این قسمت باید تعیین کنید که از همین لحظه تا چه تاریخی تایمر شما فعال باشد . به عبارتی مثلا تخفیف ویژه از امروز تا دو روز آینده خواهد بود پس باید هنگام کلیک در این قسمت و باز شدن تقویم ، تاریخ درست را انتخاب کنید . همین !

تنظیمات طراحی و نمایشی شمارنده معکوس

پس از اینکه تاریخ اتمام تایمر را مشخص کردید ، حتما متوجه شدید که 4 گزینه برای فعالسازی روز ، ساعت ، دقیقه و ثانیه وجود دارد . اگر شما مثلا 2 روز را برای تایمر معکوس تنظیم کرده باشید ، با فعال کردن گزینه Days ، عدد 1 روز و در بخش ساعت 23 ساعت را مشاهده خواهید کرد .

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

اگر به تصویر بالا دقت کنید ، شما می‌توانید در بخش اول و با کمک قسمت Design ، طراحی نمایشی را انتخاب کنید . در حالتی که از افزونه رایگان استفاده می‌کنید ، تنها مدل Circle Style 1 در دسترس است و سایر مدل‌های نمایشی در حالت PRO قابل دسترس هستند .

با استفاده از گزینه Timer Width می‌توانید عرض قسمت شمارنده را تعیین کنید که بصورت پیشفرض روی عدد 750 و واحد PX تعریف شده است .

زمانی که حالت نمایشی را برای تایمر انتخاب می‌کنید ، که اینجا حالت Circle Style 1 است ، تنظیمات مربوط به همین حالت برای شما نمایش داده می‌شود که در داخل تصویر آنها را مشاهده می‌کنید .

گزینه‌های Animation و Circle Width و Background Width را می‌توانید درمورد عرض و انیمیشن المان‌ها استفاده کنید .

بخش مربوط به تنظیمات Background Colors Settings نیز شامل 5 تنظیمات است که یکی مربوط به رنگ پس زمینه کل شمارنده معکوس است و 4 تای دیگر مربوط به 4 آیتم روز و ساعت و دقیقه و ثانیه است که می‌توانید تعیین کنید .

پس از انجام تنظیمات افزونه ( اگر به تصویر سوم دقت کنید ) زیر قسمت انتشار ، یک کد کوتاه بصورت زیر وجود دارد :

[wpcdt-countdown id="50079"]

کافیست این کد کوتاه را داخل قسمت نوشته یا برگه استفاده کنید . البته اگر قصد دارید تا از آن داخل کدهای php استفاده کنید ، باید از حالت دوم که شامل کد زیر است استفاده کنید :

<?php echo do_shortcode('[wpcdt-countdown id="50079"]'); ?>

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

امیدواریم این محتوای آموزشی حداقل نیازهای شما را درمورد داشتن یک شمارنده معکوس برآورده کرده باشد . موفق و پاینده باشید دوستان من .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا