פיתוח ועיצוב וורדפרס מ 0 – חלק 1

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

הפוסט פורסם לראשונה בבלוג אמנות המסך.

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

דרך הפעולה

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

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

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

המצרכים הדרושים

(לא לדאוג, נגיע לכולם ביחד)

1. מחשב pc

1. שרת אינטרנט תומך php

1. בסיס נתונים MySql

1. קבצי התקנה של WordPress (רצוי את ההתקנה בעברית)

1. תוכנה לעריכת קוד. או איזשהו IDE שמועדף עליכם.

1. חיבור לאינטרנט.

5  כוסות קפה .

שלב ההורדה

בשלב הראשון נוריד את סביבת הפיתוח שלנו wamp שתיתן לנו אפשרות לדמות שרת אינטרנט בתוך המחשב שלנו.

ניכנס לאתר של wamp ונוריד את הגירסה המתאימה למערכת ההפעלה שלנו. בסיום נפעיל את התוכנה ונמתין עד שנקבל אייקון W בצד הימני התחתון של המסך. אפשר ללחוץ עליו ולראות את כל הרכיבים שהוא התקין (שרת apache, סביבת php , בסיס נתונים MySql) . בואו נלחץ שם על www-directory ונראה את הנתיב של השרת בתוך המחשב שלנו. נזכור את הנתיב ומהיום נקרא  Document-Root.

בשלב הבא נבצע הורדה של וורדפרס. נכנס לכתובת http://he.wordpress.org  , נלחץ על כפתור ההורדה ונוריד את הקובץ. נחלץ את הקבצים שבתוך ה הקובץ zip  אל תוך תיקיית ה Document-Root שהגדרנו מלפני-כן שבמחשב שלנו. חשוב  לחלץ את מה שיש בתוך תיקית wordpress שבתוך הקובץ. 

12

אני לא מציע לעשות זאת אבל במידה ונהיה מעוניינים לשנות את ניתוב ה Document-Root נבצע את השלבים הבאים: נלחץ על האייקון בצד ימין למטה של ה Wamp , ולאחר מכן נגיע אל  Apache –> httpd.conf .  בתוך הקובץ הזה נחפש את הערך DocumentRoot . אמור להתקבל הנתיב בתוך המחשב של ה DocumentRoot , פה אנחנו יכולים לשנות את הנתיב אל תיקיה אחרת שאותה נרצה להגדיר קתיקיית האב שלנו. יש להשים לב שאנחנו מגדירים פעמיים . 

DocumentRoot

אוקי, אז יש לנו סביבת עבודה, יש לנו קבצי התקנה שחילצנו לתוך ה Document Root שלנו . השלב הבא יהיה :

הגדרת בסיס הנתונים

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

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

לאחר שהגדרנו הרשאות ליוזר שלנו, נכנס שוב ל phpMyAdmin, עכשיו עם ה user=root והסיסמה שהגדרנו.

3

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

השלב הבא יהיה

יצירת בסיס נתונים חדש ל WordPress

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

4

עכשיו נגדיר משתמש חדש בעבור הבסיס נתונים שיצרנו

בתפריט העליון נבחר ב users .

ב User Name נכניס את שם המשתמש שאנחנו מעוניינים בו,

ב Host נשנה ל Local ובצד ל localhost ,

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

5

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

שלב ההתקנת WordPress

עכשיו נחזור למסך ההתקנה (להיכן שחילצנו את הקבצים) אבל אנחנו חייבים לפנות דרך הדפדפן אל הכתובת  http://localhost.

מה שאנחנו אמורים לקבל זה את התוצאה הבאה ::

1

מה שההודעה הזו אומרת לנו בעצם זה שאנחנו צריכים להגדיר כמה נתונים בקובץ wp-config.php בצורה ידנית, וזאת כדי שנוכל להמשיך בהתקנה ולסנכרן את המערכת אל מול הבסיס נתונים שזה עתה הגדרנו. מה שהיה נהוג בגירסאות הקודמות זה באמת בשלב הזה לגשת לקובץ עצמו ולערוך אותו בצורה ידנית ולהוסיף את הגדרות הבסיס נתונים שלנו והגדרות המשתמש. אתם יכולים לדלג גל שלב זה וללחוץ על "יצירת קובץ הגדרות". אבל ליתר ביטחון, כדאי שתדעו מה צריך להוסיף בקובץ :

11

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

לאחר שלחצנו, אנחנו נגיע למסך שמסביר לנו מה אנחנו עומדים להגדיר ,שם נלחץ על המשך :

2

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

6

נלחץ על "שלח" בסיום ונגיע למסך עם הודעה שסיימנו בהצלחה להגדיר את הגדרות הבסיס נתונים בבלוג:

7

נלחץ על "התקנה".

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

שם הבלוג שלנו, שם המשתמש והסיסמה למערכך ה admin שלנו (יש לשים לב לא לבחור את השם משתמש והסיסמה שבחרנו לבסיס הנתונים שלנו) .

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

8

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

9

מזל טוב, התקנתם את הבלוג בהצלחה.

סיכום

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

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

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

בהצלחה !

יקי רפאל

מפתח web בחברת Conduit . בוגר החוג לתקשורת אינטראקטיבית במכללת הדסה. 5 שנים בתחום.
התמחויות: HTML5, CSS3, Jquery, JavaScript . חי ונושם Frontend . לאחרונה גם פתח בלוג חדש - " אמנות המסך" בו הוא כותב על פיתוח פרונט אנד.

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

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


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

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


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

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: