نمایش ساعت در سایت وردپرس با CoolClock

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

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

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

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

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

نمایش ساعت در سایت وردپرس با CoolClock

CoolClock یک افزونه رایگانه که ساعت آنالوگ رو با JavaScript نمایش می‌ده. JavaScript زبانیه که مرورگر برای اجرای بخش‌های تعاملی صفحه از اون استفاده می‌کنه. این افزونه به شما اجازه می‌ده ساعت رو با ابزارک، شورت‌کد یا تابع قالب در سایتتون بذارید.

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

طبق صفحه رسمی افزونه، CoolClock بیشتر از ۱٬۰۰۰ نصب فعال داره و به وردپرس 5.8 یا جدیدتر و PHP 5.6 یا جدیدتر نیاز داره. تعداد نصب‌ها و وضعیت سازگاری ممکنه با انتشار نسخه‌های تازه عوض بشن. برای همین، بهتره قبل از نصب نگاهی به مشخصات فعلی افزونه در صفحه رسمی اون بندازید.

نسخه رایگان ۲۱ پوسته آماده داره. پوسته Minimal و امکاناتی مثل تصویر پس‌زمینه، گوشه‌های گرد و جای‌گذاری پیشرفته به افزونه جداگانه CoolClock – Advanced مربوط هستن. اگه بعضی گزینه‌ها رو در سایتتون پیدا نمی‌کنید، به احتمال زیاد در نسخه رایگان قرار ندارن.

ویژگی‌های افزونه CoolClock

قبل از اینکه افزونه رو نصب کنید، بد نیست قابلیت‌های اصلی نسخه رایگان رو بشناسید:

• نمایش ساعت با ابزارک، شورت‌کد یا تابع قالب
• نمایش ساعت آنالوگ در مرورگرهای دارای JavaScript
• ۲۱ پوسته آماده در نسخه رایگان
• تغییر اندازه، تراز و ظاهر عقربه‌های ساعت
• امکان نمایش ساعت دیجیتال کنار ساعت آنالوگ
• تنظیم منطقه زمانی دلخواه

نصب افزونه CoolClock

در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید. CoolClock رو در کادر جست‌وجو بنویسید، افزونه رو نصب کنید و بعد روی «فعال‌کردن» بزنید. اگه تا حالا افزونه‌ای نصب نکرده‌اید، آموزش نصب افزونه در وردپرس همه مراحل رو به‌صورت کامل نشونتون می‌ده.

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

نمایش ساعت در قالب کلاسیک

اگه در پیشخوان سایتتون گزینه «نمایش ← ابزارک‌ها» رو می‌بینید، به احتمال زیاد از یک قالب کلاسیک استفاده می‌کنید. وارد همین صفحه بشید و ابزارک Analog Clock رو به نوار کناری یا فوتر موردنظرتون اضافه کنید. اگه کار با این قسمت براتون تازگی داره، آموزش قرار دادن محتوا در ابزارک وردپرس بخش ابزارک‌ها رو ساده‌تر توضیح می‌ده.

صفحه ابزارک‌ها در نسخه‌های جدید وردپرس با بلوک‌ها کار می‌کنه، پس ممکنه ظاهر اون با تصویرهای قدیمی این آموزش فرق داشته باشه. روی دکمه افزودن بلوک با علامت «+» بزنید، Analog Clock رو جست‌وجو کنید و اون رو در ناحیه ابزارک دلخواهتون بذارید. اگه هنوز ویرایشگر قدیمی ابزارک‌ها رو می‌بینید، می‌تونید ابزارک رو بکشید و در جای مناسب رها کنید.

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

تنظیم گزینه‌های ساعت

• Title یا عنوان: عنوانی رو تعیین می‌کنه که کنار یا بالای ساعت می‌بینید.
• Skin: ظاهر یا پوسته ساعت رو عوض می‌کنه.
• Radius: اندازه ساعت رو برحسب پیکسل تعیین می‌کنه.
• Hide Second Hand: عقربه ثانیه‌شمار رو پنهان می‌کنه.
• Show Digital: زمان دیجیتال رو کنار ساعت آنالوگ نشون می‌ده.
• GMT Offset: اختلاف ساعت با زمان جهانی UTC رو تعیین می‌کنه. برای تهران عدد 3.5، یعنی UTC+3:30، رو بنویسید. ایران دیگه تغییر ساعت فصلی نداره.
• Scale: نوع مقیاس ساعت رو تعیین می‌کنه. اگه مطمئن نیستید، همون مقدار پیش‌فرض رو نگه دارید.
• Align: ساعت رو در سمت راست، چپ یا وسط ناحیه می‌ذاره.

بعد از تنظیم گزینه‌ها، روی «به‌روزرسانی» یا «ذخیره» بزنید و محل نمایش ساعت رو در سایتتون ببینید. اگه ساعت نمایش داده نمی‌شه، اول بررسی کنید که JavaScript مرورگر غیرفعال نباشه. بعد هم کش سایت و مرورگر رو پاک کنید تا مطمئن بشید نسخه قدیمی صفحه جلوتون نیست.

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

اگه بخش‌های قالب رو از مسیر «نمایش ← ویرایشگر» تغییر می‌دید و گزینه «ابزارک‌ها» رو ندارید، سایتتون از قالب بلوکی استفاده می‌کنه. در چنین قالبی ممکنه به ابزارک‌های سنتی دسترسی نداشته باشید.

برای اضافه‌کردن ساعت، اول یک نوشته یا برگه آزمایشی باز کنید و بلوک «شورت‌کد» رو داخلش بذارید. شورت‌کد CoolClock رو وارد کنید و پیش‌نمایش صفحه رو ببینید. اگه ساعت درست کار کرد، می‌تونید همین بلوک شورت‌کد رو از مسیر «نمایش ← ویرایشگر» در قالب یا بخش دلخواهتون قرار بدید.

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

نمایش ساعت با شورت‌کد

برای اینکه ساعت داخل نوشته یا برگه دیده بشه، یک بلوک «شورت‌کد» اضافه کنید و نمونه زیر رو داخل اون بذارید:

[coolclock skin="chunkySwissOnBlack" radius="140" showdigital="true" align="left" /]

در این نمونه، skin پوسته ساعت، radius اندازه اون و align محل قرارگیریش رو تعیین می‌کنه. حتماً از گیومه ساده انگلیسی " استفاده کنید. گیومه‌های خمیده‌ای که بعضی ویرایشگرها به‌صورت خودکار می‌سازن، ممکنه شورت‌کد رو خراب کنن.

برای شروع، شورت‌کد ساده [coolclock /] رو امتحان کنید. اگه ساعت درست نمایش داده شد، گزینه‌های ظاهری رو یکی‌یکی به اون اضافه کنید. این کار پیدا‌کردن خطا رو خیلی راحت‌تر می‌کنه.

حالا صفحه رو ذخیره کنید و پیش‌نمایش اون رو ببینید. نتیجه باید چیزی شبیه نمونه زیر باشه.

سوالات متداول

نتیجه‌گیری

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

برای منطقه زمانی تهران مقدار 3.5 رو وارد کنید، امکانات نسخه رایگان رو با Advanced اشتباه نگیرید و افزونه رو همیشه به‌روز نگه دارید. با رعایت همین چند نکته، ساعت با تنظیمات درست و دردسر کمتری در سایتتون نمایش داده می‌شه.

تیم تولید محتوا

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