آموزشها
قالبها
افزونه‌ها
آکادمی
هاست وردپرس
طراحی سایت
فرمانساخت تایم لاین در وردپرس با افزونه Cool Timeline
- افزونه وردپرس
- بروزرسانی شده در
اگه میخواید مسیر رشد کسب‌وکارتون، اتفاق‌های مهم، تاریخچه برند یا نوشتههای سایتتون رو به‌ترتیب زمانی نشون بدید، تایملاین کار رو خیلی ساده‌تر می‌کنه. کاربر با یک نگاه می‌فهمه هر اتفاق چه زمانی افتاده و داستان از کجا شروع شده و به کجا رسیده.
توی این آموزش، ساخت تایم لاین در وردپرس با افزونه Cool Timeline رو قدم‌به‌قدم یاد می‌گیرید. از نصب افزونه و اضافه‌کردن رویدادها شروع می‌کنیم، بعد ظاهر تایملاین رو تنظیم می‌کنیم و اون رو با بلوک یا کد کوتاه داخل سایت نشون می‌دیم. در ادامه هم می‌بینید چطور نوشته‌ها رو به شکل خط زمانی نمایش بدید و مشکل‌های رایج رو برطرف کنید.
آنچه در این مقاله می‌خوانید
ساخت تایم لاین در وردپرس چه کاربردی داره؟
تایملاین یا خط زمانی، چند اتفاق رو براساس تاریخ کنار هم می‌چینه. هر رویداد می‌تونه عنوان، توضیح، تاریخ و تصویر خودش رو داشته باشه. اگه قراره یک داستان مرحله‌ای تعریف کنید، این مدل معمولاً از چند پاراگراف پشت سر هم خواناتر و قابل‌فهم‌تره.
- توی سایت شخصی میتونید سوابق کاری، پروژه‌ها یا دستاوردهای خودتون رو نشون بدید.
- توی سایت شرکتی میتونید تاریخچه برند، معرفی محصولات یا مراحل انجام یک پروژه رو نمایش بدید.
- توی سایت آموزشی میتونید برنامه دوره، مسیر یادگیری یا ترتیب اتفاق‌های تاریخی رو مشخص کنید.
- توی بخش وبلاگ میتونید نوشته‌ها رو از جدید به قدیم یا برعکس مرتب کنید.
اینجا منظورمون از تایملاین، خط زمانی و کارت‌های رویدادیه که داخل سایتتون نمایش داده می‌شن. این تایملاین به حساب Facebook وصل نمی‌شه و فقط ظاهر مرتب و زمان‌بندی‌شده‌ای برای محتوای سایت می‌سازه.
برای ساخت تایم لاین در وردپرس به چی نیاز دارید؟
قبل از نصب افزونه، بهتره محتوای تایملاین رو آماده کنید. برای هر رویداد یک عنوان کوتاه، تاریخ دقیق، توضیح ساده و در صورت نیاز یک تصویر کنار بذارید. وقتی این اطلاعات آماده باشن، ساخت تایملاین خیلی روان‌تر پیش می‌ره. برای شروع به این موارد نیاز دارید:
- دسترسی مدیر به پیشخوان وردپرس
- عنوان، متن و تاریخ هر رویداد
- تصاویر کم‌حجم و مرتبط، اگه تایملاین تصویری میخواید
- یک نسخه پشتیبان تازه از سایت قبل از نصب افزونه
اگه هنوز با محیط وردپرس آشنا نیستید، پکیج رایگان آموزش وردپرس کمکتون می‌کنه بخش‌های اصلی پیشخوان رو راحت‌تر بشناسید.
نصب افزونه Cool Timeline
- از منوی پیشخوان وارد افزونه‌ها ← افزودن افزونه تازه بشید.
- عبارت Cool Timeline رو داخل کادر جست‌وجو بنویسید.
- نام افزونه و سازنده اون رو با صفحه رسمی Cool Timeline مقایسه کنید تا مطمئن بشید افزونه درستی رو پیدا کردید.
- روی هم‌اکنون نصب نمایید بزنید و وقتی نصب تموم شد، دکمه فعال نمایید رو انتخاب کنید.
ممکنه اسم بعضی گزینه‌ها با توجه به نسخه افزونه یا زبان پیشخوان کمی فرق داشته باشه. اگه عنوانی دقیقاً مثل متن این آموزش نبود، دنبال گزینه‌ای با معنی مشابه مثل Timeline، Stories یا Add New بگردید.
ساخت اولین تایملاین در وردپرس
اضافه‌کردن رویدادهای تایملاین
بعد از فعال‌سازی، بخش مربوط به تایملاین یا داستان‌ها به پیشخوان اضافه میشه. هر Story یا داستان توی این افزونه، یک رویداد روی خط زمانیه.
- گزینه افزودن داستان یا رویداد تازه رو باز کنید.
- یک عنوان کوتاه بنویسید؛ برای نمونه «راه‌اندازی اولین دفتر».
- توضیح رویداد رو داخل ویرایشگر بنویسید. بهتره متن هر رویداد بیشتر از چند جمله کوتاه نباشه.
- تاریخ رویداد رو از بخش تنظیمات تایملاین انتخاب کنید. یادتون باشه تاریخ انتشار نوشته لزوماً همون تاریخ رویداد نیست.
- اگه به تصویر نیاز دارید، یک تصویر شاخص مرتبط و کم‌حجم انتخاب کنید.
- روی انتشار بزنید و همین مراحل رو برای بقیه رویدادها تکرار کنید.
تاریخ همه رویدادها رو به یک شکل وارد کنید. تاریخ ناقص یا اشتباه می‌تونه ترتیب خط زمانی رو به‌هم بزنه و نتیجه با چیزی که انتظار دارید فرق کنه.
تنظیم ظاهر تایملاین
حالا بخش تنظیمات یا ابزار ساخت تایملاین رو باز کنید. گزینه‌هایی که می‌بینید به نسخه افزونه و امکانات رایگان یا پولی اون بستگی دارن. معمولاً میتونید نوع چیدمان، ترتیب رویدادها، رنگ‌ها و شکل نمایش تاریخ رو از همین بخش تنظیم کنید.
- چیدمان عمودی: برای صفحه‌های معمولی و خوندن محتوا با موبایل، انتخاب ساده‌تریه.
- چیدمان دوطرفه: کارتها رو دو طرف خط مرکزی نشون میده و ظاهرش به تایملاین Facebook نزدیک‌تره.
- چیدمان افقی: برای تعداد کمی مرحله یا چند رویداد کوتاه به کار میاد.
- رنگ و فاصله: رنگ خط، کارتها و نوشته‌ها رو طوری انتخاب کنید که با قالب سایتتون هماهنگ باشن.
اگه بعضی چیدمان‌ها یا تنظیمات رو نمی‌بینید، ممکنه اون قابلیت توی نسخه‌ای که نصب کردید در دسترس نباشه. قبل از خرید نسخه پولی، جدول امکانات همون نسخه رو توی سایت رسمی سازنده ببینید.
نمایش تایملاین در نوشته یا برگه
نمایش تایملاین با بلوک گوتنبرگ
گوتنبرگ همون ویرایشگر بلوکی وردپرسه. توی این ویرایشگر، هر قسمت صفحه مثل متن، تصویر یا دکمه داخل یک بلوک جدا قرار می‌گیره. اگه نسخه افزونه شما بلوک تایملاین رو داره، این روش برای شروع راحتتره.
- از بخش نوشته‌ها یا برگه‌ها، صفحه موردنظرتون رو باز کنید.
- روی دکمه + بزنید و عبارت Timeline رو جست‌وجو کنید.
- بلوک مربوط به Cool Timeline رو انتخاب کنید.
- محتوا، ترتیب و ظاهر تایملاین رو از نوار کناری بلوک تنظیم کنید.
- روی پیشنمایش بزنید و نتیجه رو هم در دسکتاپ و هم در موبایل ببینید.
- اگه همه‌چیز درست بود، برگه رو منتشر یا به‌روزرسانی کنید.
نمایش تایملاین با کد کوتاه
کد کوتاه یا Shortcode یک تکه کده که داخل براکت مربع قرار می‌گیره و وردپرس اون رو به محتوای آماده تبدیل می‌کنه. اگه افزونه برای تایملاین شما کد کوتاه ساخته، اون رو کامل کپی کنید. بهتره گزینه‌های داخل کد رو بدون کمک‌گرفتن از راهنمای افزونه تغییر ندید.
- کد کوتاهی رو که افزونه ساخته، از بخش تنظیمات کپی کنید.
- برگه یا نوشته موردنظرتون رو باز کنید.
- از دکمه +، بلوک کد کوتاه رو اضافه کنید.
- کد رو داخل بلوک بذارید و صفحه رو پیشنمایش کنید.
برای آشنایی بیشتر با این روش میتونید راهنمای رسمی بلوک کد کوتاه وردپرس رو هم ببینید.
نمایش نوشتههای وردپرس به شکل تایملاین
شاید نخواید همه رویدادها رو جداگانه بسازید و ترجیح بدید نوشتههای فعلی سایتتون روی خط زمانی قرار بگیرن. این کار شدنیه، ولی در دسترس‌بودن اون و فیلترهایی که می‌بینید به نسخه Cool Timeline نصبشده روی سایتتون بستگی داره.
- موقع اضافه‌کردن بلوک یا ساخت کد کوتاه، نوع محتوا رو روی نوشته‌ها بذارید.
- اگه فیلتر دسته یا برچسب در دسترس بود، دسته یا برچسب موردنظرتون رو انتخاب کنید.
- ترتیب نمایش رو روی جدید به قدیم یا قدیم به جدید بذارید.
- تعداد نوشتههای هر صفحه رو محدود کنید تا صفحه بیش‌ازحد طولانی نشه.
دسته برای مرتب‌کردن موضوع‌های اصلی مناسبه و برچسب، جزئیات مشترک بین چند نوشته رو مشخص می‌کنه. اگه از برچسب استفاده می‌کنید، راهنمای استفاده درست از برچسب در وردپرس کمکتون می‌کنه ساختار سایتتون نامرتب نشه. برای نمایش عادی مطالب هم میتونید آموزش نمایش نوشتههای وردپرس در یک برگه خاص رو ببینید.
چطور تایملاین رو شبیه Facebook طراحی کنید؟
اگه ظاهر تایملاین Facebook رو دوست دارید، چیدمان دوطرفه با یک خط زمانی در وسط صفحه انتخاب مناسبیه. برای هر کارت هم یک عنوان کوتاه، تاریخ مشخص، تصویر هماهنگ و چند خط توضیح در نظر بگیرید تا تایملاین مرتب و ساده بمونه.
- برای خط، آیکون‌ها و تاریخ‌ها از یک رنگ اصلی استفاده کنید.
- نسبت و اندازه تصاویر رو یکسان نگه دارید تا کارتها منظم دیده بشن.
- متن هر کارت رو کوتاه بنویسید و برای جزئیات بیشتر به یک صفحه جدا لینک بدید.
- تعداد فونت‌ها و رنگ‌ها رو محدود کنید تا خط زمانی شلوغ نشه.
- تایملاین دوطرفه رو حتماً روی موبایل ببینید؛ بهتره کارتها توی صفحه باریک به شکل تک‌ستونه نمایش داده بشن.
رفع مشکلات رایج تایملاین وردپرس
تایملاین داخل برگه نمایش داده نمی‌شه
اول مطمئن بشید افزونه فعاله و دست‌کم یک رویداد منتشرشده دارید. بعد بلوک یا کد کوتاه رو دوباره ببینید. اگه از کد کوتاه کمک می‌گیرید، اون رو داخل بلوک «کد کوتاه» بذارید، نه بلوک کد یا پاراگراف. پاک‌کردن کش سایت و مرورگر هم ممکنه نسخه تازه صفحه رو نشون بده.
ترتیب تاریخ‌ها درست نیست
تاریخ اختصاصی هر رویداد و تنظیم ترتیب صعودی یا نزولی رو بررسی کنید. اگه تایملاین از نوشته‌ها ساخته شده، ممکنه افزونه تاریخ انتشار هر نوشته رو مبنا قرار بده. توی این حالت، تاریخ انتشار نوشته‌ها رو هم بررسی کنید.
تصاویر یا متن‌ها به‌هم‌ریخته دیده می‌شن
این مشکل بیشتر وقت‌ها از تفاوت اندازه تصاویر یا تداخل ظاهر قالب و افزونه میاد. همه تصاویر رو با یک نسبت یکسان آماده کنید و تایملاین رو موقتاً داخل یک برگه ساده بذارید. اگه به‌هم‌ریختگی فقط با قالب فعلی دیده میشه، تنظیمات ظاهری قالب و کدهای CSS سفارشی رو بررسی کنید.
ظاهر تایملاین در موبایل مناسب نیست
حالت تک‌ستونه یا عمودی معمولاً روی موبایل خواناتر دیده میشه. پیشنمایش موبایل ویرایشگر فقط برای بررسی اولیه خوبه؛ پس صفحه رو با یک گوشی واقعی هم باز کنید. متن‌های بریده، تصاویر بیرون‌زده و نوشتههای خیلی کوچک رو با دقت بررسی کنید.
نکات مهم برای سریع و خوانا نگه‌داشتن تایملاین
- توضیح هر رویداد رو به چند جمله کوتاه محدود کنید.
- تصاویر رو قبل از بارگذاری فشرده کنید و فایل‌های خیلی بزرگ نفرستید.
- رویدادهای زیاد رو صفحه‌بندی کنید یا فقط موارد مهم‌تر رو نشون بدید.
- عنوان‌ها رو روشن و ساده بنویسید تا کاربر با مرور سریع صفحه، مسیر داستان رو بفهمه.
- بعد از هر تغییر، صفحه رو روی دسکتاپ و موبایل بررسی کنید.
برای یک بررسی ساده از سرعت و کیفیت صفحه میتونید از راهنمای Google Lighthouse کمک بگیرید. یادتون نره تایملاین زیبا وقتی به درد کاربر می‌خوره که سریع باز بشه و خوندنش راحت باشه.
سوالات متداول درباره ساخت تایم لاین در وردپرس
آیا میشه بدون کدنویسی تایملاین ساخت؟
بله. با افزونهای مثل Cool Timeline میتونید رویدادها رو بسازید و با بلوک گوتنبرگ یا کد کوتاه داخل برگه نشون بدید. برای انجام مراحل اصلی لازم نیست کدنویسی بلد باشید.
آیا تایملاین به حساب Facebook وصل میشه؟
نه. توی این آموزش یک خط زمانی با ظاهر نزدیک به Facebook داخل سایت وردپرسی خودتون می‌سازید. این تایملاین محتوا رو به حساب یا صفحه Facebook نمی‌فرسته.
آیا میشه نوشتههای یک دسته خاص رو در تایملاین نشون داد؟
اگه نسخه افزونه شما فیلتر دستهبندی رو داشته باشه، میتونید موقع تنظیم بلوک یا کد کوتاه، دسته موردنظرتون رو انتخاب کنید. قبل از شروع، امکانات نسخه نصبشده رو توی صفحه رسمی افزونه ببینید.
برای نمایش تایملاین بهتره از بلوک استفاده کنیم یا کد کوتاه؟
برای کاربر تازهکار، بلوک معمولاً راحتتره چون تنظیمات رو به شکل دیداری نشون میده. اگه بلوک در دسترس نیست یا میخواید تایملاین آماده افزونه رو جای مشخصی بذارید، کد کوتاه گزینه مناسبیه.
چطور ظاهر تایملاین رو در موبایل بررسی کنیم؟
اول پیشنمایش موبایل رو داخل ویرایشگر ببینید و بعد صفحه منتشرشده رو با یک گوشی واقعی باز کنید. اندازه نوشته، بریدگی تصاویر، فاصله کارتها و بیرونزدگی محتوا از صفحه رو بررسی کنید.
جمع‌بندی
برای ساخت تایم لاین در وردپرس لازم نیست قالب سایتتون رو عوض کنید یا کدنویسی بلد باشید. کافیه رویدادها رو با تاریخ و توضیح کوتاه آماده کنید، Cool Timeline رو نصب کنید و خروجی رو با بلوک یا کد کوتاه داخل برگه بذارید. در آخر هم صفحه رو روی موبایل و دسکتاپ ببینید تا خط زمانی برای همه کاربرها مرتب، سریع و خوانا باشه.
برای ارسال نظر لطفا ابتدا ثبتنام کنید یا وارد شوید.