אז איך מטמיעים פופאפים באתר וורדפרס? מאוד פשוט

צפו במדריך הוידאו, התקנתי ואני מדגים איך משתמשים בתוסף popup maker

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

ניתן לראות את התוצאה של ההדגמות באתר הוורדפרס החדש https://www.wpisrael.co.il שמוקדש לכל מה שוורדפרס.

מספר סיבות להנגיש את אתרי האינטרנט:

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

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

בגלל המוגבלויות האלו חלק מהאתרים בלתי נגישים.

ישנן סיבות רבות שהופכות את האתרים ללא נגישים למשל:

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

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

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

דוגמאות לכפתורים בניווט של הנגישות:

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

ועוד

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

הנה חמשת תוספי הנגישות בחינם המובילים לוורדפרס:

accessible-poetry

wp-accessibility-helper

SOGO Accessibility
enable.co.il
userway-accessibility-widget

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

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

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

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

מה זה בעצם https

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

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

אבטחת האתר עם HTTPS היא בעלת יתרונות לגולשים ולבעלי האתרים.

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

קישורים חשובים לאבטחה

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

קישור לבדיקת איכות האבטחה של האתר, כמובן שדירוג A הוא האיכותי ביותר.

חברה שנותנת תעודת הסמכה https חינם לשלושה חודשים עם אפשרות חידוש הרשיון בחינם.

פעולות לבצע אחרי חיבור האתר ל https

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

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

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

קיים אתר בדיקת https שניתן לבדוק דרכו אם כל ההגדרות של האתר נכונות והאתר מאובטח ותקין.

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

סיכום

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

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

ישנו תוסף שניתן להתקין – תוסף של כתובת מקוצרת שיעשה את העבודה.

ניתן גם לשתול קוד בעמוד התבנית functions.php , *לפני ביצוע שתילת קוד יש לבצע גיבוי של הדטאבייס והתבנית.

add_filter( 'get_shortlink', function( $shortlink ) {return $shortlink;} );

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

כמו בדוגמא מטה:

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

מה גם שקיימים המון סוגי מדיה להצגה באתרים.

אתר אדפטיבי

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

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

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

אתר רספונסיבי

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

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

סיכום

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

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

הלקוחות יוכלו לקבל הנחיות ניווט מהמיקום שלהם, אליכם בקלות.

ניתן בקלות להציג קישור לוויז מתוך האתר.

אז איך מוסיפים קישור לוויז מעמוד באתר?

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

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

פעולה זו פותחת חלונית קטנה עם קויי הרוחב והגובה של המיקום.

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

מדביקים את המספרים לתוך קישור הדוגמא:

waze://?ll=<lat>,<lon>

ולכן התוצאה שמתקבלת היא:

waze://?ll=32.072519,34.779362

את הקישור ניתן להוסיף בכל מקום בעמוד כלינק או ככתובת שניתן להעתיק

דוגמא לקישור

בוא לצפות בהצגות בהבימה – קישור לוויז

לחיצה על הקישור בטלפונים תפתח את waze.

בהצלחה

אני משתמש בו ברוב האתרים שאני בונה.

מדריך הוידאו עובר על השלבים של יצירת טופס והטמעה שלו בעמוד.

אורך הוידאו כ- 14 דקות.

קישור להורדת התוסף

קישור להסברים והגדרות (אנגלית)

כפתור בחלק העליון של המערכת, מאפשר הדלקה או כיבוי של שדות עריכה אלו.

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

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