צבע רקע לשורת כתובת באתר וורדפרס בסמרטפון

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

להטמיע את השורות הבאות בקובץ functions.php בתבנית בת שלכם, לשנות את קוד הצבע לצבע הרצוי, וזהו זה.

/* Written by Batz Bar  http://he.amaze.website/צבע-רקע-לשורת-כתובת-באתר-וורדפרס-בסמרט/
based on this stackoverflow answer http://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-android-chrome-v */
add_action('wp_head','color_address_bar');

function color_address_bar() {
	
	// Set here your html color. You could find a color picker here http://www.colorpicker.com/
	$color ="#4285f4";
	
	// Forgive user if no "#" before color
	$color = (strpos($color,'#') !== false ? $color : '#' . $color);
	
	// HTML to add to header
	$color_meta = '
	<!-- Chrome, Firefox OS and Opera -->
	<meta name="theme-color" content="' . $color . '">
	<!-- Windows Phone -->
	<meta name="msapplication-navbutton-color" content="' . $color . '">
	<!-- iOS Safari , works only in black. to set this off, comment the next line -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">';

	echo $color_meta;

}

חשוב להשים לב לבחור את צבע הרקע תוך כדי שימת לב לחווית משתמש.

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

מצו"ב ההבדלים:

wordpress set background color of address bar mobile

wordpress set color of address bar background

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

האימייל שלך: (חובה)

מאשר קבלת עדכונים על מאמרים חדשים באתר

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *