בונים ביחד תבנית וורדפרס – פרק 20

אני כותב טקסט לחיפוש באתר, ואז מופיעים לי תוצאות החיפוש, כל מיני פוסטים ודפים, והשאלה שלי איך אפשר ליצור שהטקסט שבחרתי יהיה מסומן בכל הפוסטים המוצגים. כמו לדוגמא מערכת החיפוש בדפדפן כרום

צעד 1: פתחו את search.php

בראש ובראשונה נתחיל עם עריכה של הדף אשר מציג את תוצאות החיפוש שלנו. אם עקבתם בצורה מלאה אחר המדריך יש לכם כעת דף בתוך תיקיית התבנית שלכם אשר נקרא search.php פתחו אותו וגללו עד למטה.

ממש לפני התג הסוגר של הBody ניצור סקריפט jQuery חכם בעזרתו נמצא, נסנן ונסמן את מילת החיפוש בתוך תוצאות החיפוש.

 

הוסיפו את הקוד הבא:

function getUrlVars() {
	var vars = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
		vars[key] = value;
	});
	return vars;
}

function decode(str) {
	 return decodeURIComponent(str.replace(/+/g,  " "));
}

function replaceSubstring(inSource, inToReplace, inReplaceWith) {

  var outString = inSource;
  while (true) {
	var idx = outString.indexOf(inToReplace);
	if (idx == -1) {
	  break;
	}
	outString = outString.substring(0, idx) + inReplaceWith +
	  outString.substring(idx + inToReplace.length);
  }
  return outString;

}	

function searchAndHighlight(searchTerm, selector) {
	if(searchTerm) {
		var selector = selector || "body";                             //default selector is body if none provided
		var searchTermRegEx = new RegExp(searchTerm,"ig");
		var matches = $(selector).text().match(searchTermRegEx);
		if(matches) {
			$('.highlighted').removeClass('highlighted');     //Remove old search highlights
			$(selector).html($(selector).html()
					.replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
			if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
				$(window).scrollTop($('.highlighted:first').position().top);
			}
			return true;
		}
	}
	return false;
}

jQuery(document).ready(function($) {
	
	var findText = decodeURIComponent(getUrlVars()["s"]);
	var clnText	= replaceSubstring(findText, '+', ' ');
	searchAndHighlight(clnText, '.singleCatExcerpt');
	
});

 

צעד 2: פתחו את style.css

כעת שיש לנו פונקציה מתאימה אשר עוטפת את כל החזרות של מחרוזת החיפוש בשדה התיאור של כל תוצאה נותר לנו רק ליצור הגדרת Css אשר תבדיל את התג העוטף משאר הטקסט.

אתם יכולים לעצב את זה כרצונכם!

אתם כמובן יכולים לעצב את ההבלטה הזאת איך שתרצו. רקע צהוב, טקסט מודגש, טקסט עם קו תחתון וכו'… הכל שאלה של הCSS המתאים. בואו נראה כמה דוגמאות…

אם תרצו לעשות רקע צהוב להדגשה הדביקו את הקוד הבא:

/*** SEARCH.PHP ***/
.highlighted {background: #FFFF99;}

אם תרצו שהמילה המחופשת תהיה מודגשת הוסיפו את הקוד הבא:

/*** SEARCH.PHP ***/
.highlighted {font-weight: bold;}

סיימנו! מה בפרק הבא?

ובכן, יש הרבה רעיונות איזו פונקציונליות להוסיף לתבנית שבנינו יחדיו אך יש עוד להשלים את הפרק בדיקת שגיאות. בנוסף אתם מוזמנים לשאול ולהגיב ולבקש פונקציונליות מסוימת ואנו ננסה לבנות את המדריך המתאים בהתאם לכמות הזמן הפנויה שיש לנו!

אם אהבתם נודה לכם אם תפרגנו עם איזה +1 חביב או לייק מפרגן (וגם מילה טובה תשמח לבב אנוש). כמו תמיד השארנו את האפשרות להגיב פתוחה ואתם מוזמנים לפנות עם כל שאלה רלוונטית.