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

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

מה הרעיון?

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

Yes We CAN!

אז כן, אמנם זאת לא שאלת וורדפרס אלא שאלה תכנותית נטו אבל אפשר להדגיש את מילת החיפוש בתוצאות החיפוש שלנו ולעשות זאת בעזרת jQuery וקצת Css. שימו לב בעזרת טכניקה זאת תוכלו לסמן גם תוצאות חיפוש בכל תבנית וורדפרס (כמעט) בתנאי שיש לכם דף search.php בתבנית שלכם וקצת ידע כיצד להתאים את הSelector של jQuery למיכל / Div של תוצאות החיפוש שלכם.

צעד 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');
	
});

 

מידע נוסף למתעניינים:

הפונקציה הראשונה בסקריפט +
הפונקציה הראשונה בסקריפט אחראית לפעולה קטנה אבל חשובה. מה שהיא עושה הוא לבדוק הוא לקחת את המשתנה מהURL אשר נקרא s. כאשר אתם עושים חיפוש בוורדפרס תוכלו לשים לב כי לURL מתווסף s=מחרוזת+חיפוש+לדוגמה… בצורה כזאת אנו בודקים "מחוץ לוורדפרס" מה מחרוזת החיפוש בה נעשה שימוש.

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,  " "));
}

הפונקציה השלישי בסקריפט +
הפונקציה השלישית אחראית לדבר דיי מורכב והוא לחפש אחר המילה הרצויה (מחרוזת החיפוש) בתוך מיכל / Div אותו הגדרנו בעזרת סלקטור של jQuery ואז לעטוף את אותה מילה בעזרת תג Span עם קלאס higlighted.
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 שאומרת "המתן שהדף יטען במלואו" היא המקום בו אנו מחברים את כל הפונקציות יחדיו לפעולה אחת.
jQuery(document).ready(function($) {
	
	var findText = decodeURIComponent(getUrlVars()["s"]);
	var clnText	= replaceSubstring(findText, '+', ' ');
	searchAndHighlight(clnText, '.singleCatExcerpt');
	
});

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

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

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

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

  • מה: הגדרות עיצוביות עבור הדגשת מילת החיפוש
  • איפה: ממש בתחתית של הקובץ style.css
אם תרצו לעשות רקע צהוב להדגשה הדביקו את הקוד הבא:
/*** SEARCH.PHP ***/
.highlighted {background: #FFFF99;}
אם תרצו שהמילה המחופשת תהיה מודגשת הוסיפו את הקוד הבא:
/*** SEARCH.PHP ***/
.highlighted {font-weight: bold;}

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

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

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

בברכה, שגיב SEO