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

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

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

محدودیت کاراکتر عنوان مطالب در وردپرس چه کاری انجام می‌ده؟

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

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

قبل از تغییر قالب از پوسته فرزند استفاده کنید

کدی که در ادامه می‌بینید مخصوص قالب کلاسیکه و باید داخل فایل‌های PHP قالب قرار بگیره. فایل‌های قالب اصلی رو مستقیم تغییر ندید؛ چون به‌روزرسانی قالب ممکنه همه تغییراتتون رو پاک کنه. برای اینکه کد باقی بمونه، بهتره از پوسته فرزند وردپرس استفاده کنید.

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

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

اول فایل functions.php پوسته فرزند رو با فایل‌منیجر هاست یا یک ویرایشگر کد باز کنید. کد زیر رو به انتهای فایل اضافه کنید. اگه فایل از قبل با <?php شروع شده، این عبارت رو دوباره ننویسید.

function mihanwp_limited_title( $length = 30 ) {
    $title = get_the_title();

    return wp_html_excerpt( $title, absint( $length ), '…' );
}

این تابع با get_the_title() عنوان نوشته جاری رو می‌گیره. بعد تابع داخلی wp_html_excerpt() عنوان رو تا تعداد کاراکتری که تعیین کرده‌اید کوتاه می‌کنه و اگه لازم باشه، در انتهای اون سه‌نقطه می‌ذاره.

حالا باید فایل قالبی رو پیدا کنید که عنوان موردنظرتون داخلش نمایش داده می‌شه. با توجه به ساختار قالب، ممکنه این فایل index.php، archive.php، content.php یا یکی از فایل‌های پوشه template-parts باشه. عبارت the_title() رو در همون بخشی پیدا کنید که می‌خواید عنوانش کوتاه دیده بشه.

کد نمایش عنوان رو در همون محل با نمونه زیر عوض کنید:

<?php echo esc_html( mihanwp_limited_title( 30 ) ); ?>

عدد 30 بیشترین طول خروجی رو مشخص می‌کنه. می‌تونید با توجه به فضای کارت مطالب، این عدد رو کمتر یا بیشتر کنید. تابع esc_html() هم خروجی رو برای نمایش به‌صورت متن داخل HTML امن می‌کنه.

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

چرا نباید از substr برای عنوان فارسی استفاده کنیم؟

تابع عمومی substr() ممکنه متن UTF-8 رو بر اساس بایت قطع کنه. UTF-8 روش رایج ذخیره حروف فارسی و خیلی از زبان‌های دیگه هست. اگه متن فارسی در جای نامناسبی بریده بشه، ممکنه انتهای عنوان با یک حرف خراب یا علامتی ناخوانا دیده بشه.

برای جلوگیری از این مشکل، توی این آموزش از تابع داخلی وردپرس استفاده کردیم. این تابع برای عنوان فارسی انتخاب مطمئن‌تریه و کد رو با ابزارهای خود وردپرس هماهنگ نگه می‌داره. متغیر تعریف‌نشده $post رو هم لازم نداریم؛ چون get_the_title() بدون آرگومان می‌تونه عنوان نوشته جاری رو بگیره.

محدود کردن عنوان در قالب بلوکی وردپرس

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

خود وردپرس بلوک «عنوان نوشته» رو برای نمایش عنوان در اختیارتون می‌ذاره، ولی در زمان بازبینی این مقاله، این بلوک گزینه مستقیمی برای تعیین تعداد دقیق کاراکترها نداره. کد PHP بخش قبلی رو هم نمی‌تونید مستقیم داخل ویرایشگر سایت بذارید.

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

.wp-block-post-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

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

چند نکته مهم قبل از استفاده از کد

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

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

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

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