עיצוב מחדש של אתר וורדפרס שלך (להוסיף מגע אישי)

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


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

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

עיצוב ערכת צבע

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

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

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

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

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

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

216 צבעים לעומת 12 צבעים

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

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

קולר

קולר

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

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

בדוק את קולר.

תרשים צבע HTML

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

תרשים צבעוני HTML

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

הקודים יעבדו עם HTML, CSS, Adobe PhotoShop וכלים אחרים למניפולציה גרפית, כך שיש לך את כל החופש בעולם לשחק עם הצבעים שלך ככל שהיית רוצה.

עיין בתרשים הצבעים של HTML.

GENOPAL

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

גנופאלי

בעזרת GenoPal תוכלו להגדיל את הבהירות ולשלוט ברוויות הגוון, כך שתקבלו בדיוק את הגוון הרצוי.

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

COLORHEXA

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

קולורקס

איך עובד הבלנדר ColorHexa? כל שעליך לעשות הוא להקליד את קודי הצבע שלך מופרדים עם “+” ו- ColorHexa עושה את שאר העבודה. לדוגמה, ניסיתי:

# ff0000 + # 0000ff + # ff00ff ויש לי # aa00aa. מה שכן, הם נותנים לך דף שלם של מידע צבעוני (על הצבע הסופי שלך למשל # aa00aa). זהו כלי אחד שעליך לנסות לעצמך לחוות מיזוג צבעים כמו שלא היה מעולם.

בדוק את ColorHexa.

מחולל בריילז ‘של ULTIMATE

מחולל צבע צבעוני האולטימטיבי

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

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

בדוק את מחולל הדרגות ה- CSS האולטימטיבי.

בחירת גופנים

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

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

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

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

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

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

להלן דוגמא טובה:

#menu {font-family: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; גודל גופן: 0.8 em; צבע שחור;}

הקוד שלמעלה יגדיר את גודל הגופן בתפריט שלך על 0.8em ותגדיר את הצבע לשחור. זה גם יגדיר את הגופן ל- Arial, אבל אם למשתמש אין את Arial במחשב שלו, הלווטיקה תשתלט. אם אין להם את Helvetica או Arial, ורדנה, Sans-serif או Times New Roman ישתלטו עליהם.

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

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

בנוסף, זו עבודה קלה לאפיזי.

כל שעליך לעשות הוא לפתוח את שלך style.css ושם את הקוד הבא בראש.

@ font-face {font-family: Museo300; src: url ("font / museo300-regular.ttf") פורמט: ('סוג האמת'); משקל גופן: רגיל;}

הערה: עליך להגדיר את השם ואת מיקום הגופן שלך. בדוגמה שלמעלה “Museo300” הוא הגופן שנשמר בתיקיה בשם “גופנים”.

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

body {font-family: Museo300;}

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

#menu {font-family: Museo300;}

… תגדיר את Museo300 בתפריט שלך.

פירוש השיטה שלמעלה עליך להוריד את הגופן ולהעלות אותו לשרת שלך, שאם אתה שואל אותי הוא די מייגע.

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

אתה יכול פשוט לקשר לגופנים ממקטע הראש שלך (header.php) כך:

איך ואיפה מוסיפים את השורה שלמעלה? אתה צריך לפתוח את לוח הניהול של וורדפרס -> מראה -> עורך -> header.php

אם אינך רוצה או לא יכול לערוך את קובץ הכותרת שלך.php, פשוט ייבא את הגופנים על ידי הקלדת השורה הבאה style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

הדוגמה לעיל תאפשר לך להשתמש ב- מעבר לקשת פונט מגוגל בכל מקום באתר שלך. לדוגמה, אם רצית להשתמש ב- Over The Rainbow בכל אתר האינטרנט שלך, אתה יכול להשתמש בקוד זה:

body {font-family: "מעבר לקשת";}

גוגל מספקת מעל 600 משפחות גופנים בחינם, אז תשחק!

עדכון (07/12/13): אם ברצונך להוסיף גופנים של גוגל לאתר וורדפרס שלך בקלות, אתה יכול להשתמש ב- תוסף טיפוגרפיה של גוגל. פרט לכך, תוכלו ללמוד עוד על גופנים של גוגל וכיצד ליישם אותם בשיפור טיפוגרפיה האתר שלכם של וורדפרס באמצעות גופנים של גוגל מאת טום אוור..

משאבים נוספים על משחק עם גופנים

תוספי וורדפרס להוספת גופנים

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

האם אתה נהנה? בוא נמשיך הלאה…

 עיצוב תאריך ושעה

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

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

אצלך לוח מחוונים של WP, נווט ל מראה חיצוני, ואז ל עורך כפי שמוצג מטה:

תאריך העיצוב

כשתהיה שם, תוכל לראות רשימה של קבצי ה- PHP שלך מימין לקצה:

הודעה בודדת

לחץ על הודעה בודדת (single.php) וברגע שהוא פתוח, פתח את סרגל החיפוש על ידי לחיצה על Ctrl + F. בסרגל החיפוש שמופיע הקלד:

הזמן

תבחין מייד בשורה שעשויה להיראות כמו:

כעת, האזור שאתה רוצה לערוך הוא (‘F Y’).

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

ה- “F” ב (‘F Y’) מיועד שם החודש המלא וה- “Y” מייצג את שנה בארבע ספרות. לכן, אם אתה משתמש (‘F Y’), התאריך שלך ייראה כמו:

ספטמבר 2013

אם אתה זורק פסיק בין F ל- Y, אתה צריך להיות כמו:

ספטמבר 2013

אם תרצה להוסיף את היום ואלמנטים אחרים, אתה יכול להשתמש בתווים הבאים:

l = שם מלא של היום (L אותיות קטנות)

F = חודש

j = יום החודש (התאריך)

Y = שנה בארבע ספרות

y = שנה בשתי ספרות

ניתן למצוא תווים נוספים בטבלה שלהלן:

עיצוב טבלת תאריכים

והנה, כמה דוגמאות:

עיצוב דוגמאות לתאריך

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

מה שכן, תוכלו להיפטר מהתאריך על ידי מחיקה …

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

מתודלקים לחלק הבא? מוטב שתהיה.

לא מצא את הפונקציה_time?

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

שימוש בתמונות

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

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

להוסיף מדיה

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

להעלות שירות

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

למידע נוסף על הוספת תמונות, אנא עיין במשאבים הבאים:

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

רואים? אמרתי לך שזה יהיה הקצר ביותר

הוספת פייקיקון

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

Favicon יעזור לקוראים שלך לזהות את האתר שלך באופן חזותי.

באופן כללי, favicon הוא קובץ גרפי מרובע של 16X16 פיקסלים עם הסיומת .ico. התוסף מייצג סמל.

כיצד ליצור פייקיקון

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

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

אם אתה משתמש בעורך תמונות:

  • חתוך או הוסף שטח בהתאם כדי להבטיח שהתמונה שלך מרובעת
  • שנה את גודל התמונה ל – 16 X 16 פיקסלים, ו
  • שמור את התמונה בשם favicon.ico

שירותים מקוונים בהם תוכלו להשתמש כדי ליצור favicons כוללים (אך לא רק):

לאחר שתיצור את ה- favicon שלך, הם יאפשרו לך להוריד אותו למחשב שלך, אז אל תדאג.

כיצד להתקין את הפייקיקון שלך בוורדפרס

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

ללימוד זה השתמשתי ב- faviconer.com כדי ליצור favicon לבלוג שלי ול- Filezilla כדי למחוק favicons קיימים.

עם קובץ ה- favicon.ico ביד, העלה אותו לתיקיה הראשית של העיצוב שלך. זוהי התיקיה בה נשמר הנושא הנוכחי שלך.

לאחר מכן העלה עותק נוסף של ה- favicon שלך לתיקיית השורש (בדרך כלל public_html) או לספרייה הראשית בה האתר שלך מאוחסן, כך שתוכל לראות את ה- favicon שלך כשאתה מקליד yoursite.com/favicon.ico. זה יוסיף אוטומטית את favicon לעדכונים שלך.

כשתסיים להעלות, הגיע הזמן להתחיל את favicon.ico שלך. זה מה שאתה צריך לעשות:

הוספת הפייקיקון שלך באמצעות תוסף

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

כל אחד ב- favicon

הוספת favicon ידנית לתבנית שלך

אנשים מסוימים עשויים להעדיף (למרות שזו לא הדרך הטובה ביותר) להוסיף את ה- favicons שלהם ידנית לתבנית שלהם, לשם כך בצע את הצעדים הבאים:

  • התחבר אל שלך לוח מחוונים
  • נווט ל מראה חיצוני
  • ואז ל עורך (עורך נושא)
  • מצא ופתח header.php (כותרת עליונה) קובץ

הוסף שורה זו לקובץ הכותרת שלך (רצוי בחלקו העליון שבו אתה רואה אחר תגיות:

שמור פעם אחת שנעשתה. 

רענן את הדפדפן שלך כדי לראות את השינויים החדשים שלך.

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

סיכום

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me