وردپرس: کد هایلایت کردن کلمه جستجو شده در صفحه نتایج
کد تخفیف در جریان tabestan97 %15 تا آخر تابستان 97

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

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

اولین کد را باید در فایل functions.php قرار دهید تا بتوانیم توسط این کد، ویژگی جدید را به قالب معرفی کنیم.

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

این کد نیازی به شخصی سازی و تغییرات ندارد اما اگر قصد دارید آن را پیشرفته تر کنید، بهتر است از کدهای صحیح در آن استفاده نمایید.

پس از قرار دادن کد بالا در فایل functions اکنون باید کد زیر را در فایل header.php قالب و پیش از تگ </head> قرار دهید.

<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>

کد بالا بخش اصلی کار را توسط CSS و JS انجام می دهد.

در این کد شما می توانید در خط 2 بجای #D3E18A کد رنگ مورد نظرتان را وارد نمایید. این رنگ برای هایلایت کردن یا همان پس زمینه کلمه جستجو شده استفاده خواهد شد.

هنوز دیدگاهی ارسال نشده! نظر شما چیست؟

دیدگاه شما درباره این صفحه چیست؟