فروشگاه اینترنتی فایل 365 | برجسته کردن کلمه جستجو شده در نتایج جستجوی وردپرس

ادامه مطلب

ZIP

zip

آوریل 27, 2018

برجسته کردن کلمه جستجو شده در نتایج جستجوی وردپرس

با سلام و عرض ادب به همه دنبال‌کنندگان فایل ۳۶۵ , در این آموزش قصد داریم به چگونگی برجسته کردن کلمه جستجو شده در نتایج جستجوی وردپرس یا همان های‌لایت کردن متن جستجو شده بپردازیم با ما همراه باشید.

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

برجسته کردن کلمه جستجو شده در نتایج جستجوی وردپرس

برای این کار فایل search.php قالب‌تان را باز کنید و دنبال قطعه کد زیر بگردید:

[codesyntax lang=”php”]

&lt;?php the_title(); ?&gt;

1	<?php the_title(); ?>

[/codesyntax]

بعد از پیدا کردن این قطعه کد، آن را با قطعه کد پایین جایگزین کنید:

[codesyntax lang=”php”]

&lt;?php echo $title; ?&gt;

1	<?php echo $title; ?>

[/codesyntax]

کد زیر یک نمونه است:

[codesyntax lang=”php”]

&lt;?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '&lt;strong class="search-excerpt"&gt;\۰&lt;/strong&gt;', $title); ?&gt;

1	<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('\|', $keys) .')/iu', '<strong class="search-excerpt">\۰</strong>', $title); ?>

[/codesyntax]

بعد از این کار در نهایت استایل دادن لازم است. کدهای زیر را به فایل style.css یا rtl.css قالب‌ اضافه کنید.

[codesyntax lang=”php”]

strong.search-excerpt {
background-color:yellow;
color:blue;
}

strong.search-excerpt {

background-color:yellow;

color:blue;

}

[/codesyntax]

البته برای برجسته کردن و رنگ دادن به عنوان هم می‌توانید از تگ یا کلاس CSS استفاده کنید بعنوان نمونه:

[codesyntax lang=”php”]

&lt;span style="color: yellow"&gt; &lt;?php the_search_query(''); ?&gt; &lt;/span&gt;

1	<span style="color: yellow"> <?php the_search_query(''); ?> </span>

[/codesyntax]

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