نمایش متحرک سرتیتر خبرها در وردپرس با افزونه رایگان Ditty

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

در ادامه، اول فرق نوار خبر با پیام ثابت و اسلایدر رو می‌بینید. بعد افزونه رو نصب می‌کنید، چند سرتیتر می‌سازید، ظاهر و سرعت حرکت اون‌ها رو تنظیم می‌کنید و نوار آماده رو داخل نوشته یا برگه می‌ذارید. مسیرها براساس رابط جدید Ditty توضیح داده شدن؛ همون افزونه‌ای که قبلاً با نام Ditty News Ticker شناخته می‌شد.

نمایش متحرک سرتیتر خبرها در وردپرس چه کاربردی داره؟

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

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

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

آیا وردپرس بدون افزونه نوار خبر متحرک می‌سازه؟

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

بلوک «حلقه کوئری» یا Query Loop هم فهرستی از نوشته‌های سایتتون رو به‌صورت خودکار نمایش می‌ده. Query Loop یعنی بلوکی که نوشته‌ها رو براساس شرط‌هایی مثل دسته‌بندی یا زمان انتشار پیدا می‌کنه. این بلوک به‌صورت پیش‌فرض عنوان‌ها رو مثل نوار خبر حرکت نمی‌ده و برای افزودن حرکت به کدنویسی نیاز دارید.

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

آشنایی با نسخه رایگان افزونه Ditty

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

در Ditty با سه اصطلاح اصلی روبه‌رو می‌شید. Item یعنی هر خبر یا پیام جداگانه. Layout یعنی چیدمان و ظاهر محتوا. Display هم روش نمایش آیتم‌ها رو مشخص می‌کنه؛ مثلاً تعیین می‌کنه خبرها به‌شکل Ticker، Slider یا List دیده بشن.

رابط فعلی افزونه با نسخه قدیمی Ditty News Ticker فرق داره. محتوایی که با ساختار قدیمی ساخته شده ممکنه در بخش Legacy دیده بشه. Legacy یعنی بخش سازگار با ساختار قدیمی افزونه. برای ساخت نوار تازه بهتره از ویرایشگر جدید Ditty استفاده کنید تا تنظیمات Item، Layout و Display رو در اختیار داشته باشید.

پیش‌نیازهای ساخت نوار خبر متحرک

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

متن خبرها و لینک هرکدوم رو هم از قبل آماده کنید. عنوان‌هایی مثل «تخفیف پاییزی شروع شد» از جمله‌های طولانی بهتر خونده می‌شن. هر خبر باید یک پیام روشن داشته باشه و لینک اون هم دقیقاً به صفحه‌ای بره که جزئیات همون پیام رو توضیح می‌ده.

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

نصب و فعال‌کردن افزونه Ditty

1. از پیشخوان وردپرس وارد مسیر «افزونه‌ها ← افزودن افزونه تازه» بشید.
2. عبارت Ditty رو داخل کادر جست‌وجو بنویسید. نام افزونه و اطلاعات سازنده رو با صفحه رسمی اون در مخزن وردپرس مقایسه کنید تا افزونه اشتباهی نصب نشه.
3. روی «هم‌اکنون نصب نمایید» بزنید و بعد از تموم‌شدن نصب، دکمه «فعال نمایید» رو انتخاب کنید.

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

ساخت اولین نوار خبر متحرک با Ditty

ساخت یک Ditty تازه

بعد از فعال‌سازی، گزینه Ditty به منوی پیشخوان اضافه می‌شه. وارد این بخش بشید و Add New رو بزنید. Add New یعنی ساخت یک مورد تازه. برای اون یک عنوان مدیریتی مشخص مثل «نوار خبر صفحه اصلی» بنویسید. این عنوان برای مدیریت داخلیه و کمک می‌کنه بعداً نوار موردنظرتون رو راحت پیدا کنید.

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

افزودن سرتیتر خبرها

در بخش Items یک آیتم متنی تازه بسازید. Item همون خبر جداگانه‌ایه که داخل نوار نمایش داده می‌شه. متن خبر رو کوتاه و قابل‌فهم بنویسید. مثلاً «آموزش تازه سایت منتشر شد» خیلی سریع‌تر از یک توضیح چندخطی خونده می‌شه.

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

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

تنظیم چیدمان و ظاهر خبرها

پنل Layout شکل نمایش هر آیتم رو کنترل می‌کنه. برای شروع، یک چیدمان ساده انتخاب کنید که متن خبر رو واضح نشون بده. نوار خبر جای مناسبی برای طرح‌های شلوغ نیست؛ چون کاربر باید در چند لحظه پیام رو بفهمه.

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

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

انتخاب حالت نمایش متحرک

در پنل Display روش نمایش خبرها رو انتخاب کنید. برای حرکت پیوسته سرتیترها، حالت Ticker انتخاب مناسبیه. Ticker همون حالت نواریه که خبرها رو در یک مسیر متحرک نشون می‌ده.

حالت Slider آیتم‌ها رو مثل اسلاید یکی‌یکی جابه‌جا می‌کنه. حالت List هم همه آیتم‌ها رو به‌شکل فهرست نشون می‌ده و حرکت نواری نداره. پس اگه هدفتون دقیقاً نمایش متحرک سرتیتر خبرها در وردپرسه، اول Ticker رو امتحان کنید.

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

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

ذخیره و آزمایش نوار خبر

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

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

نمایش نوار خبر داخل نوشته یا برگه

نمایش با بلوک Ditty

1. نوشته یا برگه موردنظرتون رو در ویرایشگر وردپرس باز کنید.
2. روی دکمه افزودن بلوک بزنید و عبارت Ditty رو جست‌وجو کنید.
3. بلوک افزونه رو اضافه کنید و نوار خبری رو که ساختید از فهرست انتخاب کنید.
4. صفحه رو پیش‌نمایش کنید و بعد از بررسی نسخه رایانه و موبایل، اون رو منتشر یا به‌روزرسانی کنید.

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

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

1. شورت‌کد نوار موردنظرتون رو از صفحه خود افزونه کپی کنید.
2. در ویرایشگر وردپرس، بلوک «کد کوتاه» رو به صفحه اضافه کنید.
3. شورت‌کد رو بدون تغییر داخل بلوک بذارید و خروجی صفحه رو پیش‌نمایش کنید.

شناسه یا ساختار شورت‌کد رو حدس نزنید. کدی رو بردارید که خود افزونه برای همون Ditty نشون می‌ده تا نوار درست بارگذاری بشه.

نمایش نوار خبر در بخش‌های مختلف سایت

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

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

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

بهینه‌کردن نوار خبر برای موبایل و دسترس‌پذیری

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

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

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

رفع مشکل‌های رایج افزونه Ditty

بلوک Ditty در ویرایشگر دیده نمی‌شه

اول مطمئن بشید افزونه فعاله و صفحه ویرایشگر رو یک بار تازه‌سازی کنید. بعد نام Ditty رو در جست‌وجوی بلوک‌ها بنویسید. اگه بلوک همچنان دیده نمی‌شه، از شورت‌کدی که خود افزونه ساخته داخل بلوک «کد کوتاه» استفاده کنید.

نوار خبر در صفحه نمایش داده نمی‌شه

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

خبرها خیلی سریع یا نامنظم حرکت می‌کنن

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

ظاهر نوار خبر در موبایل به‌هم می‌ریزه

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

لینک خبرها درست باز نمی‌شن

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

نکته‌های مهم قبل از انتشار نوار خبر

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

جمع‌بندی

برای نمایش متحرک سرتیتر خبرها در وردپرس، نسخه رایگان Ditty راه ساده‌ای پیش روتون می‌ذاره. کافیه افزونه رو نصب کنید، برای هر خبر یک Item بسازید، ظاهر اون رو در Layout تنظیم کنید و حالت Ticker رو از بخش Display انتخاب کنید. بعد هم می‌تونید نوار آماده رو با بلوک Ditty یا شورت‌کد داخل نوشته و برگه بذارید.

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

سؤال‌های متداول درباره نمایش متحرک سرتیتر خبرها در وردپرس

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

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