آموزش هایلایت کردن کلمه جستجو شده در صفحه نتایج وردپرس

آموزش هایلایت کردن کلمه جستجو شده در صفحه نتایج وردپرس

هایلایت کردن نوشته ها در دفتر و جزوه های درسی زیبایی خاص خود و باعث توجه میشود . همینطور میتوانیم این کار را در سایت های وردپرس خود انجام دهیم. امروز به شما چگونگی هایلایت کردن کلمه جستجو شده را آموزش میدهیم

برای انجام اینکار کافیست کد زیر را در functions.php قالب خود قرار دهید

function a4fran3_hl_set_query() {
  $query  = attribute_escape(get_search_query());
  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}
function a4fran3_hl_init_jquery() {
  wp_enqueue_script('jquery');
}
add_action('init', 'a4fran3_hl_init_jquery');
add_action('wp_print_scripts', 'a4fran3_hl_set_query');

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

<style type="text/css" media="screen">
    .devmehl { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\b"+ search.replace(/([-.*+?^${}()|[\]\/\])/g,"\") +")", 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, "devmehl");
    }
  });
  </script>

در خط 2 میتوانید رنگ هایلایت کردن را عوض نمایید بدین منظور کافیست بجای #D3E18A کد رنگ مورد نظر خور را جایگذاری نمایید