آخرین بازبینی: ۱۳۹۹/۱۲/۰۳

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

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

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

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

برش عنوان مطلب در قالب‌های وردپرس

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

برای این کار ابتدا کد زیر را در فایل functions.php قرار دهید:

function limited_title( $chars ) {
	$title = get_the_title($post->ID);
	$title = substr( $title, 0, $chars );
	echo $title;
}

function limited_title( $chars ) {

$title = get_the_title($post->ID);

$title = substr( $title, 0, $chars );

echo $title;

}

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

<?php limited_title( 10 ); ?>

1	<?php limited_title( 10 ); ?>

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

برش عنوان مطلب در قالب‌های وردپرس

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ