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

سلام به دوست رایا وردپرسی عزیزم حال و احوالت میزونه؟! 😁 امروز می‌خوایم با هم یک ترفند ساده و کاربردی برای مدیریت عناوین طولانی نوشته‌های وردپرس رو بررسی کنیم. حتماً با عناوینی مواجه شدی که خیلی طولانی‌ و شاید حتی گیج‌کننده به نظر میرسن. این عناوین نه تنها خوانایی وب‌سایتت رو تحت تاثیر قرار می‌دن، بلکه ممکنه برای کاربرانی که از دستگاه‌های مختلف (مثل گوشی‌های هوشمند یا تبلت‌ها) به وب‌سایتت سر میزنن، مشکلاتی ایجاد کنه. اگر مثل من به زیبایی وب‌سایتت اهمیت میدی و دوست داری عناوین نوشته‌هات مختصر و جذاب باشند، این مقاله قطعاً به دردت میخوره!

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

چرا باید عناوین طولانی رو محدود کنیم؟

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

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

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

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

ترفند محدود کردن عنوان نوشته وردپرس: استفاده از CSS

بیا ببینیم چطور می‌تونیم با استفاده از CSS عناوین طولانی رو محدود کنیم. نگران نباش! این کار خیلی ساده هست و فقط یک تکه کد نیاز داری. در زیر کد CSS که باید به فایل استایل وب‌سایتت اضافه کنی رو میبینی:

h3 {
    white-space: nowrap;  /* جلوگیری از شکست خط */
    overflow: hidden;     /* پنهان کردن متن اضافی */
    text-overflow: ellipsis; /* نمایش ... برای متن طولانی */
    max-width: 200px;    /* عرض دلخواه خودت رو تنظیم کن */
}

توضیحات کد

• white-space: nowrap: این خاصیت باعث می‌شه که متن عنوان به یک خط محدود بشه و از شکستگی متن جلوگیری بشه. این یعنی هر وقت کاربر به وب‌سایتت سر می‌زنه، می‌تونه تمام متن عنوان رو به صورت یکجا ببینه.
• overflow: hidden: این ویژگی به ما کمک می‌کنه که وقتی عنوان بیش از اندازه‌ی مشخص شده طولانی می‌شه، متن اضافی پنهان بشه و فقط اون قسمتی که جا داره، نمایش داده بشه. این به ایجاد ظاهری منظم و مرتب کمک می‌کنه.
• text-overflow: ellipsis: این خط باعث می‌شه که وقتی متن طولانی میشه، به جای اینکه به هم بریزه، با سه نقطه (…) نشان داده بشه. این روش به خواننده این احساس رو میده که متن ادامه داره و باعث جلب توجه بیشتر میشه.
• max-width: 200px: می‌تونی این مقدار رو به دلخواه خودت تغییر بدی تا عرض مناسب برای وب‌سایتت رو پیدا کنی. این ویژگی کنترل می‌کنه که عنوان چقدر از فضا رو اشغال کنه و باعث میشه عناوین به طور یکنواخت و منظم نمایش داده بشن.

توجه ℹ️ تو کد بالا خط شماره 1 من نوشتم h3 تو میتونی تگ عنوان مطلبت رو قرار بدی اگه از h2، h3 یا هر تگ دیگه واسه عنوان استفاده میکنی باید اونو قرار بدیش یا هم برای اینکه کد دقیقا روی عنوان مدنظرت اعمال بشه اول کلاس عنوان مدنظرت رو در بیار بعد کلاس رو جایگزین h2 کن برای مثال اگه کلاس عنوانت elementor-widget-posts باشه کد بالا به صورت زیر میشه:

elementor-widget-posts {
    white-space: nowrap;  /* جلوگیری از شکست خط */
    overflow: hidden;     /* پنهان کردن متن اضافی */
    text-overflow: ellipsis; /* نمایش ... برای متن طولانی */
    max-width: 200px;    /* عرض دلخواه خودت رو تنظیم کن */
}

شاید واست سوال باشه کد رو کجا اضافه کنیم؟

اضافه کردن این کد به وب‌سایتت خیلی آسونه! فقط کافیه چند مرحله ساده رو دنبال کنی:

1. وارد پیشخوان وردپرس خودت شو: برای این کار معمولاً آدرس yourwebsite.com/wp-admin رو وارد کن و با اطلاعات کاربری‌ات وارد شو.
2. به قسمت ظاهر > ویرایشگر برو: در این بخش می‌تونی فایل‌های مختلف استایل وب‌سایتت رو پیدا کنی و تغییر بدی.
3. فایل style.css رو پیدا کن: این فایل معمولاً شامل تمام استایل‌های CSS وب‌سایتت هست و جاییه که کد رو باید اضافه کنی.
4. کد CSS رو در انتهای این فایل اضافه کن: کد بالا رو در انتهای فایل style.css بچسبون.
5. تغییرات رو ذخیره کن و وب‌سایتت رو رفرش کن: بعد از ذخیره تغییرات، به وب‌سایتت سر بزن تا ببینی چقدر عناوین زیباتر و مرتب‌تر شدن!

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

نتیجه‌ گیری

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

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