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

נסביר איך לעצב / לשנות את ווידג׳ט החיפוש בוורדפרס

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

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

בכדי לבצע זאת, הוסיפו קודם כל את הווידג׳ט היכן שתרצו באתר שלכם. לאחר מכן הוסיפו את הקוד הבא לקובץ 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 שמאפשר לכם לשדרג בצורה מאד פשוטה וחלקה את תוצאות החיפוש שמוצגות לגולשים שלכם כשאלו משתמשים באפשרות החיפוש באתר הוורדפרס שלכם.

מקווה שעזר מעט, פנקו בלייק ושתפו כרגיל 🙂

 

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

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

{ 0 תגובות… הוסף אחת }

השאירו תגובה

פעימות
Up!
שיפור הציון ב Google Pagespeed
השיגו עוד מספר נקודות ב Google Page Speed

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