התאמה אישית לאלמנטי וורדפרס, איך ליצור תפריט אינטראקטיבי

מדריכים נוספים

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

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

בחירתגלריהבעיצוב

נחלץ על 3 הנקודות נבחר בעריכת HTML ונעתיק את הקוד:

 

נפתח את VS Code, ניצור קובץ חדש, נשמור אותו כקובץ html ונדביק בו את הקוד. לאחר לחיצה על save התוכנה תסדר את הקוד באופן נוח לעריכה: בקוד ישנם אלמנטי html בסיסיים, ul שהוא האלמנט לפריטי רשימה וli שהוא אלמנט פריט רשימה יחיד ומכך אנו מבינים כי הגלריה היא לפני הכל רשימה. במקרה הזה לשם מדריך הלימוד שוכפלו הli כך שיהיו 4 תמונות אך הul המכיל אותן נשאר זהה:

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

 

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

 

כך יהיה אפשרי להסתיר אותה. כעת נוסיף סקשן <style>, סקשן זה יכיל את קוד הcss שלנו:

בקוד זה מסמנים את הid בסולמית והclass בנקוד ואחריה שם הclass, הclass הוא סימון כמו id אך אחד היכול לכוון למספר אלמנטים. הclass של הli שלנו הוא blocks-gallery-item:

ולכן נוסיף בסטייל שלנו את הclass והid אחריו באופן הבא:

ובתוכו נוסיף display: none עם סוגר ; שהוא ההגדרה להסתרת הפיסקה

 

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

כעת נשלב את האפקטים האלו לקוד אחד שיפעיל את ההצגה בריחוף עכבר:

כפי שאתם רואים נוסף סימון :hover צמוד לclass סימון זה בקוד css הוא סימון שבו מצב יקרה רק בסיטואציה של ריחוף העכבר על האלמנט השייך לסימון הצמוד, לדוגמה במקרה זה התנאי הוא במקרה ומרחפים הcalss בשם blocks-gallery-item האפקט יחול על הid בשם explain שהוא הid הצמוד לסוגריים המסולסלים, מצב זה אפשרי רק באלמנטים שחלים עליהם הסימונים שהוצגו. הdisplay:block מציג את האלמנט, הanimation מפעיל את האנימציה בפרק הזמן שהוגדר בשניות וanimation-fill-mode קובע את כיוון האנימציה ובמקרה שלנו הוא forwards כלומר שהאנימציה קורית בכיוון קדימה ואז שומרת על מצבה עד שישתנה בהמשך ע"י אפקט נוסף.

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

 

נבחר את כמות האייקונים בשורה בתפריט ברך שנשנה את מספר נתון הcolumns באלמנט הfigure המכיל את הul של הגלריה:

 

במצב הדסקטופ זה משנה למספר שנרשום, אולם במובייל זה לרוב יהיה 1 או 2 בהתאם להגדרות הוורדפרס כיוון שהגדרה זו מצביעה על class של וורדפרס לאלמנטי גלריה. כעת נוסיף אפקטים שיופיעו במצב המובייל בעזרת סמן ה@media only screen and (max-width: 600px) כל האפקטים בין הסוגריים המסולסלים של סמן זה יופעלו אף ורק מתחת לרוחב המוגדר בmax-width:

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

 

והחלק הסוגר אותו בחלק התחתון לאחר סקשן הfigcaption של הכיתוב והפיסקה:

 

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

ונצפה במוצר המוגמר:

כתיבת תגובה

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

מוזמנים ליצור קשר

לקוחות מספרים

מבצעים

מדריכים נוספים

דילוג לתוכן