سكريبت البحث عن الكلمات بالمواضيع

السلام عليكم

ورحمة الله

وبركاته

تدوينتنا اليوم عبارة عن سكريبت
يمكنك من البحث بالنصوص داخل التدوينة
عن طريق صندوق
لذا لن أطيل عليكم وأترككم مع الئرح

معاينة

طريقة التركيب

1. قم بتحرير القالب ثم ابحث عن b:skin
2. ثم قم بلصق الأكواد التالية فوقه

•   #search_para
• {
•  color:grey;
• }
•  #search-isw input {
•     background: white;
•     border: 1px solid #e6e6e6;
•     padding: 4px 7px;
•     font-family: unset;
• }
• .highlight
• {
•     color: black;
•     background: #fde87b;
•     padding: 0 0px;
• }

الان ننتقل الى أهم خطوة لذلك فقط ركز قليلا وستفهم 

1. ابحث عن الوسم /body
2. وضع فوقه الأكواد التالية

• <script>
• document.addEventListener( 'DOMContentLoaded',function(){
•  var searchpara=document.getElementById("search_para").innerHTML;
•  searchpara=searchpara.toString();
•  document.getElementById("search").onclick =function ()
•  {highlight_word(searchpara)};
• },false);
• 
  
• function highlight_word(searchpara)
• {
•  var text=document.getElementById("search_text").value;
•  if(text)
•  {
•   var pattern=new RegExp("("+text+")", "gi");
•   var new_text=searchpara.replace(pattern, "<span class='highlight'>"+text+"</span>");
•   document.getElementById("search_para").innerHTML=new_text;
•  }
• }
• </script>

1. الان افتح تبويب جديد بالمتصفح
2. ثم افتح أي تدوينة بمدونتك
3. ثم قم بالضغط على فحص المعلومات وتطبيق الشرح كما بالصورة

1. ستجد الوسم الحامل لنص الموضوع كالذي يشير اليه السهم بالصورة
2. الان ستعود الى القالب وتبحث عنه
3. ثم تضيف اليه الأيدي التالي id="search_para"

• <div class="post-text" id="search_para">

1. الان قم باضافة كود صندوق البحث فوق صورة الموضوع مثلا 

• <div id="search-isw">
• <input type="text" placeholder="ابحث عن كلمة ..."id="search_text"/>
• <input type="button" value="بحث" id="search"/>
•     </iv>
•       </div>

اذا لم تفهم كيف تضيف كود صندوق البحث فيمكنك ترك تعليق به رابط موقعك بصندوق التعليقات