برجسته کردن عبارت جستُ جو شده در وردپرس توسط جی‌کوئری

به نظر من قسمت جستُ جو یکی از مهم‌ترین قسمت‌های یک سایت هستش، مخصوصاً اگه یک سایت و یا یک وبلاگ قدیمی باشه و آرشیو زیادی داشته باشه، حالا فرض کنید می‌خوایم تو این همه مطلب دنبال یک مطلب بگردیم، بدون استفاده از قسمت جستُ جو اگه سخت نباشه خیلی زمان‌بر و مشکل هستش!

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

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

۱- پی‌اچ‌پی

خب، اول از همه می‌ریم سراغ فایل function.php در پوشه پوسته‌ی وردپرسمون و کدهای زیر رو توش کپی می‌کنیم؛

function hls_set_query() {
  $query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

اگه این فایل در پوشه پوسته‌ی وردپرستون نبود، یه فایل با همین اسم بسازید و کدها رو توش کپی کنید.

۲- جی‌کوئری و جاوا اسکریپت

حالا نوبت می‌رسه به کد جاوا اسکریپت، حالا باید کدهای زیر رو در فایل header.php پوسته‌ی وردپرس قبل از تگ </header> قرار بدید.

<script type='text/javascript' src='http://armanam.net/uploads/web-design/jquery.js'></script>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\b"+ search.replace(/([-.*+?^${}()|[]/\])/g,"\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=""+ hls_class +"">" + c + "</strong>";
      }));
    }
  });
  jQuery(document).ready(function($){
    if(typeof(hls_query) != 'undefined'){
      $("#post-area").highlight(hls_query, 1, "hls");
    }
  });
  </script>

اگه از قبل کتاب‌خانه جی‌کوئری رو تو پوسته قرار داده بودید و ازش استفاده می‌کردید نیازی نیست خط اول کد بالا رو توی فایل header.php کپی کنید.

نکته خیلی مهم: در خط ۱۵ کد بالا، جایی که نوشته #post-area باید آی‌دی مربوط به بخشی از پوسته خودتون رو که مطالب توش قرار می‌گیره رو بنویسید تا فقط عبارت جستُ جو در قسمت مطالب برجسته بشه.
اگه نمی‌دونید آی‌دی قسمت مطالب پوسته شما چی هستش، پیشنهاد می‌کنم به جای #post-area کلمه body رو بنویسید تا کلمات جستُ جو شده تو همه قست‌های صفحه برجسته بشن!

۳- استایل (CSS)

بعد از اضافه کردن کدهای بالا به پوسته، حالا ما به کلمات جستُ جو شده توسط جی‌کوئری کلاس hls دادیم، حالا می‌خوایم این کلمات رو متفاوت از بقیه کلمه‌ها نشون بدیم، حالا ما میایم توسط کد زیر رنگ پس‌زمینه این کلمات رو تغییر می‌دیم؛

<style type="text/css" media="screen">
    .hls { background: #D3E18A; }
</style>

کد بالا رو می‌تونید به طور کامل در فایل header.php پوسته قرار بدید، یا فقط خط دوم اون رو در فایل style.css پوسته خودتون قرار بدید تا تغییراتی که ایجاد کردید قابل دیدن باشه.

کار شما تمام شد. یکم طولانی، اما شیرین بود :D