איך לבנות אתר אינטרנט עם וורדפרס – המדריך המלא

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



הקדמה

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

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

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

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

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

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

אז מבלי להכביר מילים, בואו נצא לדרך!

שלב ראשון – קניין דומיין לאתר ושרת אחסון

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

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

תהליך טעינת אתר אינטרנט

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

קניית שם דומיין.

לחצו על הכפתור על מנת לקנות דומיין פרטי משלכם!

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

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

לצורך המדריך, אני חיפשתי את hamispara.com, ראיתי שהוא פנוי ועכשיו, כל שנותר הוא להוסיף אותו לעגלה ולרכוש אותו.

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

קניית שרת אחסון

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

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

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

השוואה בין שרתי אינטרנט

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

אמזון גילתה שעיכוב בטעינת האתר שלהם במאה מאיות השניה גורר הפסדים של 1%. אתם קוראים נכון, אמזון מאבדת אחוז אחד מהמכירות על כל האטה של 100 מאיות (!) השניה!!! אם זה ההפסד של אחת החברות הגדולות בעולם מטעינת אתר איטית, תחשבו כמה מהירות אתר היא קריטית עבור העסק שלכם.
בנוסף, אחד מהפקטורים החשובים בדירוג אתרים בגוגל נקרא bounce rate (מדד נטישה). הבאונס רייט הוא הזמן בין הרגע שלחצו על האתר שלכם בגוגל לבין הזמן שמי שלחץ על האתר חוזר לגוגל. זאת אומרת, אם הלקוח לחץ על האתר שלכם, קרא מה אתם מציעים, אולי אפילו המשיך לעוד איזה דף או שניים אז מדד הנטישה הוא נמוך מכיוון שהוא בזבז זמן אצלכם וסביר להניח נהנה מהתוכן.

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

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

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

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

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

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

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

שרת אחסון עבור האימייל שלנו (דואר אלקטרוני)

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

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

למשל, האימייל של support@hamispara.com יהיה הרבה יותר מקצועי וקל לזכור מאשר hamispara@gmail.com. הדוא״ל הראשון כולל בתוכו את שם הדומיין שלכם ואילו השני הוא של ג’ימייל מה שיכול ליצור בלבול אצל לקוחות שמשתמשים בהוטמייל, יאהו וכו’. בנוסף כרטיסי ביקור עליו אימייל עם שם הדומיין שלכם ישדרו ללקוחות שמדובר בעסק רציני יותר.

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

לחצו על הכפתור על מנת לקנות שרת אחסון לדוא״ל!

בלחיצה על הכפתור משמאל, אתם תקבלו את המחיר הטוב ביותר לשרת אחסון לדוא״ל. בדף התוכניות, תבחרו את תכנית Hatchling. בדף הבא תלחצו על הלשונית הימנית (I already own this domain) ותכניסו את הדומיין שקניתם מוקדם יותר.
תגלגלו למטה ותבחרו את משך התכנית שלכם (בין חודש לשלוש שנים). מן הסתם, ככל שאתם בוחרים לזמן ארוך יותר אתם תקבלו מחיר טוב יותר. בכל מקרה, הקופון שאני אתן לכם למטה יתן לכם את ההנחה הטובה ביותר לכל תכנית ומשך תכנית שתבחרו.

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

בשלב הקופון תמחקו את הקופון שהם נתנו לכם ותרשמו במקום את הקופון Atar.

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

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

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

עכשיו, לחצו על Email accounts מתחת ל Control panel בצד ימין ותבחרו את שם האימייל שלכם. השמות הנפוצים לשירות לקוחות הם בד״כ support או contact. תרשמו סיסמא ותשנו את הקיבולת ל- Unlimited. לאחר מכן, לחצו על הכפתור הכתום ליצירת האימייל.

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



התקנת ssl

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

כמעט לכל אתר שתכנסו אליו תוכלו לראות ולזהות את ה-ssl בעצמכם. פשוט תסתכלו על שם הדומיין בצד שמאל למעלה ותראו שליד ה-http מופיעה האות s, וזו הכוונה ל-secure. גם באתר הזה ממש, תסתכלו בצד שמאל למעלה ותראו https משמאל לשם האתר.

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

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

התקנת תעודת ה-ssl היא מהירה וסופר פשוטה ואתם יכולים לעקוב ולראות איך מתקינים אותה במדריך המלא בדקה ה-11.

הפעלת cdn

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

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

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

cdn זה ראשי תיבות של content delivery network. זאת אומרת, רשת cdn בעצם תשכפל את האתר שלכם מהשרת הראשי ותמקם אותו בכל מקום בה יש לה סניפים.

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

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

למזלינו, קינסטה, חברת האחסון שלנו כוללת cdn בכל החבילות שלה, בחינם! עכשיו אתם רואים איזו בחירה טובה עשיתם!

הפעלת רשת ה-cdn היא תהליך פשוט ביותר ולוקח כ-10 דקות עד רבע שעה ואתם יכולים לעקוב ולראות איך מפעילים אותה במדריך המלא בדקה ה-28.

שלב שני – הגדרות וורדפרס

כניסה והתחברות לוורדפרס

אחרי שקינסטה התקינו את וורדפרס עבורינו ובחרנו את שם המשמתמש והסיסמא זה הזמן להתחבר אל מערכת וורדפרס של האתר שלנו. על מנת לעשות זאת, יש להוסיף wp-admin/ לסוף ה-url של כתובת האתר שלכם. לדוגמא, hamispara.com/wp-admin. הכניסו את שם המשתמש והסיסמא ותועברו אל לוח הבקרה של האתר.

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

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

שינוי הגדרות וורדפרס

חפשו בתפריט הימני הגדרות -> כללי.
שם האתר -> רשמו את שם העסק שלכם, במקרה שלנו, המספרה.
תיאור האתר -> רשמו את סלוגן העסק שלכם או משפט שמתמצת את מה שהעסק עוסק בו. תיאור האתר של פלאפון למשל הוא ’תקשורת סלולרית בישראל ובחו״ל‘.
הכתובת של וורדפס -> רשמו את שם האתר כמו שבחרתם כדומיין ראשי בקינסטה, עם/בלי www. אל תשכחו להוסיף s ל-http בהתחלה. באתר לדוגמא שלנו רשמתי https://hamispara.com בלי www.
הכתובת של האתר -> בדיוק כמו הכתובת של וורדפרס.
שפת המערכת -> עברית.
אזור זמן -> ירושלים.
מבנה תאריך/זמן -> תשנו למה שמתאים לכם, זה לא באמת משנה חוץ מנוחות.
היום הראשון בשבוע -> יום ראשון.
תלחצו ’שמור שינויים’ בתחתית הדף.

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

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




שלב שלישי – בניית יסודות האתר

התקנת תבנית

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

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

על מנת לשנות לתבנית המדוברת, נכנס בתפריט הימני לעיצוב -> תבניות. בדף הזה נוכל לראות את כל תבניות ברירות המחדל שהגיעו מותקנות עם וורדפרס. לחצו על כפתור ’תבנית חדשה’ למעלה ורשמו בחיפוש בצד שמאל hello. רחפו עם העכבר על תבנית ’שלום אלמנטור‘ ותלחצו על התקנה. לאחר ההתקנה לחצו על ’הפעלה‘.

התקנת תבנית בת

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

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

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

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

לחצו על הכפתור להוריד את תבנית הבת

על מנת להתקין את תבנית הבת נכנס לעיצוב -> תבניות ונלחץ על כפתור ’תבנית חדשה‘ למעלה. עכשיו נלחץ על ’העלאת תבנית’ ופה נבחר את תבנית הבת שהורדנו.

נלחץ על התקנה ונפעיל את תבנית הבת לאחר ההתקנה.

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

לוגו

על מנת לקבוע לוגו לאתר יש ללחוץ על כפתור ’התאמה אישית‘ בתפריט העליון ואז לבחור באופציה של ’פרטי אתר’.

לחצו על כפתור ’בחירת לוגו‘ ותעלו את תמונת הלוגו שלכם. במידה ואין לכם לוגו ניתן ליצור אחד במספר אתרים אונליין. במדריך אנחנו משתמשים ב-logomakr.com אבל יש מלא אתרים אחרים וטובים לא פחות. לאתרים נוספים ליצירת לוגואים, הורידו את דף המקורות על ידי לחיצה על הכפתור למטה וקבלו את הרשימה המלאה.

לחצו על הכפתור והורידו את דף המקורות!

סמל האתר

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

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

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

יצירת דפים

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

על מנת ליצור ולפתוח דפים נלחץ על עמודים -> עמוד חדש בתפריט מימין.

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

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

במדריך הזה פתחתי את הדפים הבאים:

אודות
מחירון
צור קשר
בלוג

יצירת תפריט

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

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

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

התקנת תוספים (פלאגינים)

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

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

מכיוון שתוספים ’יושבים‘ על וורדפרס ומופעלים בעת טעינת האתר, ריבוי תוספים יכול וכנראה יגרע ממהירות טעינת האתר. ככלל אצבע, עדיף להתקין כמה שפחות תוספים (אני ממליץ לא יותר מ-5).

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

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

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

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

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

לחצו על כפתור ה-download בצד ימין למעלה ותורידו את התוסף.

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

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

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

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

רכשו את אלמנטור פרו במחיר הזול ביותר!

לאחר הרכישה, יישלח אליכם לינק להורדת התוסף וקוד ההפעלה שלו.

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

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

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




שלב רביעי – עיצוב האתר

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

הדר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תהליך טעינת אתר אינטרנט

בלשונית של התוכן בדרך כלל נוכל בין היתר לשנות את התוכן של הפריט, למשל, לשנות את הכתוב או לשנות את התמונה במידה ומדובר בווידג‘ט של תמונה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כעת נעשה את אותו התהליך לעמודה של הלוגו, רק שאותה נכווץ ל- 70 אחוז. שימו לב, על מנת ששתי השורות יופיעו אחת ליד השניה, יש לוודא שרוחבן ביחד אינו עולה על 100 אחוז. זאת אומרת אם אחת העמודות היא 20 אחוז, העמודה השניה אינה יכולה להיות יותר מ- 80 אחוז וכו‘.

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

עבודה טובה! ההדר שלכם מוכן וכעת לחצו על הכפתור ’פרסם‘ למטה.

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

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

דף הבית

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

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

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

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

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

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

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

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

פוטר

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

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

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

שאר הדפים

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

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

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

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

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

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

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

עמוד ארכיון הבלוג

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

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

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

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

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

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

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

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

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

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

עמוד הפוסט

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

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

נלחץ על טמפלטים -> הוספת חדש בתפריט מימין ונבחר יחיד ואז פוסט וניתן לזה שם טמפלט פוסטים.

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

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

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

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

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




סיכומים

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

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

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

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

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

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

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

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

השרביט עובר אליכם

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

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

שיהיה לכם בהצלחה!

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב whatsapp
שיתוף ב pinterest
שיתוף ב linkedin
שיתוף ב email

כתיבת תגובה

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

אתר זה נבנה בעזרת איךלבנותאתר