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


כיצד להוסיף גופנים מותאמים אישית לוורדפרס


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

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

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

אנו מכסים את כל מה שאתה צריך לדעת על גופני וורדפרס:

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

א) כיצד להוסיף גופנים מותאמים אישית לוורדפרס באופן ידני

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

1. באמצעות CSS ו- @ ייבוא

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

ייבוא ​​לשונית בגופנים של גוגל

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

/ *
שם הנושא: עשרים ושבע עשרה ילד
URI של נושא: https://wordpress.org/themes/twentyseventeen/
תבנית: twentyseventeen
מחבר: צוות וורדפרס
URI של המחבר: https://wordpress.org/
גרסה: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS נוסף נכנס לכאן * /

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

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

2. שימוש בקובץ תבנית WordPress

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

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

הזן קוד גופני גוגל לכותרת הוורדפרס

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

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

3. שימוש @סוג גופן

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

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

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

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

לאחר מכן, עליך לטעון את הגופן בגיליון הסגנון שלך באמצעות @סוג גופן. כך נראה:

@סוג גופן {
font-family: רובוטו;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
משקל גופן: רגיל;
}

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

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

4. לגייס גופנים - "דרך וורדפרס"

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

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

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

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

פונקציה add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

לעומת זאת, גופנים מגופני Adobe Edge Web מגיעים כ- JavaScript. לכן, כדי לרשום אותם באתר שלך, הקוד ייראה כך:

פונקציה add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

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

5. התקשר לגופנים המותאמים אישית בגליון הסגנון שלך

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

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'רובוטו';
}

פתק: שימו לב כיצד השירות בו אתם משתמשים מציין את הצהרת CSS עבור הגופנים שלכם. באתר הבדיקה שלנו, נראה כי לא יכולנו לגרום לגופני Adobe Edge לעבוד משום שהם מכנים Open Sans ב- CSS עם סאן פתוחים לעומת 'סאן פתוח' בגופנים של גוגל.

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

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

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

1. התקן את התוסף

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

2. הוסף / שנה גופנים באתר שלך

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

תפריט טיפוגרפיה בהתאמה אישית של WordPress

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

הגדרות גופנים קלות של גוגל בהתאמה אישית של WordPress

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

גופנים קלים של גוגל לשנות גופן

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

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

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

שינה גופן מותאם אישית בגופנים פשוטים של גוגל

3. הגדר את הגופן

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

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

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

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

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

הגדרות מיקום בגופנים פשוטים של גוגל

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

זה לא עובד, מה אני עושה?

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

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

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

הוסף שליטת גופנים בגופנים פשוטים של גוגל

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

תוספות וורדפרס נוספות לגופנים מותאמים אישית

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

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

מדוע להשתמש בגופנים מותאמים אישית באתר וורדפרס שלך?

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

1. טיפוגרפיה היא חלק מההתרשמות הראשונה

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

2. לגופנים יש השפעה רבה יותר ממה שאתה חושב

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

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

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

היכן למצוא גופנים מותאמים אישית

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

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

כך תוכלו להשתמש בזה:

2. מצא את הגופן הנכון

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

כיצד להוסיף גופנים מותאמים אישית בדף הבית של גופני וורדפרס

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

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

  • Serif - פירוש גופנים עם קווים מעוותים בסוף, כמו Times New Roman.
  • פונט סאנס סריף - גופנים פשוטים ללא מתפתל, כמו הלווטיקה. הגופנים המשמשים באתר זה הם דוגמא לכך.
  • תצוגה - גופנים הניתנים לשימוש בגדלים גדולים יותר כמו כותרות.
  • כתב יד - האם אתה רוצה שהטיפוגרפיה שלך תיראה כאילו היא נכתבה ביד? ואז זו ההגדרה שלך.
  • מונוספייס - טיפוגרפיה בה כל הדמויות תופשות את אותו החלל, ככה.

מסננים אחרים כוללים:

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

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

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

ערוך טקסט לדוגמה בגופני גוגל

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

דף פרטי גופן בגופנים של גוגל

3. הוסף אוסף גופנים

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

גופנים שנבחרו בגופני גוגל

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

4. התאם אישית את הגדרות הגופן

ברגע שאתה מרוצה מהאוסף שלך, לחץ על התפריט התחתון. פעולה זו תפתח מסך זה:

הגדרות גופן בגופני גוגל

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

התאם אישית גופנים בגופני גוגל

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

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

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

בחר שפות גופנים בגופני גוגל

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

הורד ושיתוף כפתור בגופנים של גוגל

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

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

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

מקור נוסף לגופנים מותאמים אישית

  • אנו ממליצים על 15 גופנים בטוחים באינטרנט

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map