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

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

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

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

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

מקווה שאהבתם, פנקו בלייקים ושתפו כרגיל 🙂

 

רועי יוסף

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

תגובות פייסבוק

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

השאירו תגובה

סאבי בלוג
קראו גם את:
תבנית בת וורדפרס
מהן תבניות בת בוורדפרס ואיך ליצור אותן ?

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