Search

כיצד לשנות את ווידג׳ט החיפוש בוורדפרס?

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

שינוי ווידג׳ט החיפוש בוורדפרס

בכדי לבצע זאת, הוסיפו קודם כל את הווידג׳ט היכן שתרצו באתר שלכם. לאחר מכן הוסיפו את הקוד הבא לקובץ functions.php :

function my_search_form( $form ) {

	$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
	<div class="search_widget_container">
		<input type="text" placeholder="חיפוש עבור..." value="' . get_search_query() . '" name="s" id="my_search_widget" />
		<input type="submit" id="my_search_submit" value="'. esc_attr__( 'חיפוש' ) .'" />
	</div>
	</form>';

	return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

אתם יכולים לשנות את מה שרשום בתוך תיבת החיפוש על ידי שינוי הטקסט בתוך ה – placeholder בשורה 5, כמו כן תוכלו לשנות את המילה חיפוש בשורה 6.

לאחר מכן, הוסיפו את השורות הבאות לקובץ ה CSS שלכם:


input#my_search_widget {
  background-color: #F3F3EF;
  outline: none;
  -webkit-appearance: none;
  border: 1px solid #C8C8C8;
  font-size: 18px;
  line-height: 32px;
  text-indent: 10px;
  font-family: Arial, Helvetica, sans-serif;
  width: calc(100% - 66px);
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
}

input#my_search_submit {   
    border: none;    
    outline: none;
    width: 60px;      
    height: 32px;      
    background-color: #211a07;
    display: inline;
    vertical-align: middle;
    border-radius: 4px;
    color: white;
    line-height: 32px;   
    font-size: 12px;
 }

שימו לב שאנו משתמשים ב calc על מנת לחשב את אורך התיבה ביחס לכפתור כך שלא משנה מה יהיה רוחב המסך הווידג׳ט ייראה תמיד כראוי.

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

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

עד כאן.

 

רועי יוסף
רועי יוסף

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

0 תגובות...

תגובה חדשה

Up!
לבלוג