savvy-wordpress-development

[savvy-wordpress-development]

מה זה Facebook Pixel ואיך להוסיפו לאתר וורדפרס?

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

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

הוספת הפיקסל של פייסבוק בצורה ידנית (באמצעות קוד).

הוספת…

[savvy-wordpress-development]

מהו קובץ robots.txt וכיצד להשתמש בו נכון

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

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

מה זה בעצם הקובץ…

[savvy-wordpress-development]

מבט על Blend Modes (מיזוג) ב CSS

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

ב CSS קיימות שתי תכונות האחראיות למיזוג המדובר. mix-blend-mode אחראית למיזוג אלמנטים ב DOM – כלומר מיזוג של אלמנט עם אלמנט כלשהו הנמצא מאחוריו.

לעומתה, התכונה

[savvy-wordpress-development]

ביטול RSS Feed (פיד) באתרי וורדפרס

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

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

כברירת מחדל, וורדפרס מייצרת מספר…

[savvy-wordpress-development]

עיצוב פסי גלילה (Scrollbars) עם CSS

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

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

[savvy-wordpress-development]

מספר מילים על HTTP Status Codes

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

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

Name Value HTTP/1.1 200 OK Content-Type:t…

[savvy-wordpress-development]

יצירת לשוניות (Tabs) עם CSS בלבד

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

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

[savvy-wordpress-development]

כיצד לקשר את Google Search Console לגוגל אנליטיקס

אם אתם מעוניינים לראות את ביצועי האתר שלכם בגוגל, כנראה ותרצו להשתמש ב Google Search Console בכדי לעשות זאת. GSC מאפשר לכם לעקוב אחר נוכחות האתר שלכם בתוצאות החיפוש ��ל גוגל.

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

[savvy-wordpress-development]

מדוע וכיצד להשתמש בפורמט WebP לתמונות?

שימוש והמרת תמונות לפורמט WebP.

WebP הוא פורמט תמונות שפותח על ידי גוגל ב 2010 ונוצר בכדי להוות אלטרנטיבה לפורמטים כגון PNG ו JPG. הפורמט מציע גודל קובץ קטן בהרבה מאלו וכל זאת כאשר הוא שומר על איכות תמונה די זהה.

שימו לב לדוגמאות הבאות, JPEG משמאל ו WebP מימין, האם אתם רואים הבדל? (לחצו להגדלה): [raw]

WebP Image (172.82 KB)

JPG Image (251.03 KB)

[/raw]

מדוע להשתמש ב WebP?

WebP הוא פורמט…

[savvy-wordpress-development]

הקדמה על Variable Fonts - העתיד של פונטים ברשת

הקדמה Variable Fonts - העתיד של פונטים ברשת

כל מה שחשבתם שאתם יודעים על פונטים השתנה (לטובה).

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

אמנם היררכיה טיפוגרפית וטיפוגרפיה נכונההם בעלי ערך רב בעיצוב לטובת קריאות וחווית משתמש טובה, אך…

[savvy-wordpress-development]

קו מפריד עם אלמנט באמצע - כיצד עושים זאת ב CSS?

קו מפריד עם אלמנט באמצע – כיצד עושים זאת ב CSS?

Line-On-Sides Headers עם CSS.

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

<span> <img src="deco.svg"> </span>

וה CSS נראה כך:

span { display:…

[savvy-wordpress-development]

מעקב אחר המרות באמצעות Google Analytics Campaigns

מעקב אחר המרות באמצעות Google Analytics Campaigns

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

עם מעקב אחר קמפיינים (Campaign Tracking) בגוגל אנליטיקס ותודות ל UTM Parameters, תוכלו לגלות מידע כגון איזו פרסומת בפייסבוק, איזה טוויט בטוויטר או איזה קישור שהופץ ברשימת התפוצה שלכם הוא זה שבפועל הוביל להמרה.

מעקב אחר המרות…

[savvy-wordpress-development]

מהם UTM Parameters, מדוע צריך אותם וכיצד להשתמש בהם?

כל מה שרציתם לדעת על UTM Parameters.

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

ועל אף שניתן לראות מי לחץ על קישור מסויים בפייסבוק, ולמרות…

[savvy-wordpress-development]

Google Search Console - המדריך השלם (מעודכן ל 2020)

״קונסולת החיפוש של גוגל״ (Search Console) – מדריך למתחילים.

קונסולת החיפוש של גוגל הנקראית Google Search Console בלעז (GSC בקצרה) – היא כלי חינמי המאפשר מעקב אחר ביצועי האתר שלכם בתוצאות החיפוש של גוגל ומספק אינפורמציה על בעיות באתר שעליכם לשפר.

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

[savvy-wordpress-development]

הצמדת אלמנט לתחתית הקונטיינר באמצעות התכונה flex-grow

הצמדת אלמנט לתחתית הקונטיינר באמצעות התכונה flex-grow

כיצד ליצור גריד בגובה זהה (equal height) באמצעות Flexbox תוך שמירה על האלמנט התחתון צמוד לתחתית?

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

הכל נחמד ועובד יפה עד לרגע בו הלקוח מעוניין להוסיף טקסט באורך…

[savvy-wordpress-development]

הבנת הנתון משתמשים (Users) בגוגל אנליטיקס

הבנת הנתון משתמשים (Users) בגוגל אנליטיקס

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

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

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

[savvy-wordpress-development]

שימוש ב Lightbox להצגת תמונות, וידאו ותוכן באמצעות Lity

שימוש ב Lightbox להצגת תמונות, וידאו ותוכן באמצעות Lity

כיצד להציג תמונות באמצעות Lightbox באתרי וורדפרס?

Lity היא ספריית lightbox קלת משקל, נגישה ורספונסיבית התומכת בתמונות, וידאו, iframes ואף inline content. הספרייה שוקלת כ 3K בלבד כאשר היא דחוסה ובמידה ו gzip מופעל בשרת שלכם.

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

מה זה Lightbox (בשתי מילים)?

אם אינכם יודעים, אז lightbox זה ספריית Javascript שמציגה…