WordPressте Ыңгайлаштырылган шрифттерди кантип кошуу керек

WordPress'ке ыңгайлаштырылган шрифттерди кошкуңуз келеби? Ыңгайлаштырылган шрифттер типографияны жана колдонуучу тажрыйбасын жакшыртуу үчүн веб-сайтыңыздагы ар кандай шрифттердин жакшы аралашмасын колдонууга мүмкүндүк берет. Мыкты көрүнүүдөн тышкары, ыңгайлаштырылган шрифттер окууну жакшыртууга, брендингди түзүүгө жана колдонуучулардын веб-сайтыңызда өткөргөн убактысын көбөйтүүгө жардам берет. Бул макалада биз сизге Google Fonts ыкмасын, TypeKit жана CSS3 @Font-Face аркылуу WordPress'ке ыңгайлаштырылган шрифттерди кантип кошууну көрсөтөбүз.

Эскертүү: Өтө көп шрифттерди жүктөө веб-сайтыңызды жайлатышы мүмкүн. Биз сизге эки шрифт тандап, аларды веб-сайтыңызда колдонууну сунуштайбыз. Ошондой эле веб-сайтыңызды жайлатпастан аларды кантип туура жүктөө керектигин көрсөтөбүз. WordPress'ке ыңгайлаштырылган шрифттерди кантип кошууну караштыраардан мурун, сиз колдоно ала турган ыңгайлаштырылган шрифттерди табууну карап көрөлү.

WordPressте колдонуу үчүн ыңгайлаштырылган шрифттерди кантип тапса болот

Мурда ариптер кымбат болчу, бирок азыр андай эмес. Google Fonts, Typekit, FontSquirrel жана fonts.com сыяктуу мыкты бекер веб шрифттерди табуу үчүн көптөгөн жерлер бар. Эгерде сиз шрифттерди кантип аралаштырууну жана дал келүүнү билбесеңиз, Font Pairди колдонуп көрүңүз. Дизайнерлерге кооз Google шрифттерин айкалыштырууга жардам бериңиз. Ариптерди тандап жатканда, өтө көп ыңгайлаштырылган шрифттерди колдонуу веб-сайтыңызды жайлатарын унутпаңыз. Ошондуктан сиз эки шрифт тандап, аларды дизайныңызда колдонушуңуз керек. Ошондой эле дизайныңызга ырааттуулук алып келет.

Видео окуу куралы

MundoCMSке жазылыңыз Эгер сизге видео жакпаса же жазылган жолду тандасаңыз, андан ары окуңуз.

Google Fontsтан WordPressке Ыңгайлаштырылган Шрифттерди кошуңуз

Google Fonts - бул веб-сайтты иштеп чыгуучулар тарабынан эң чоң, акысыз жана эң көп колдонулган шрифт китепканасы. WordPressте Google шрифттерин кошуунун жана колдонуунун бир нече жолу бар.

Метод 1: Google'дун Easy Fonts Plugin колдонуу менен Ыңгайлаштырылган шрифттерди кошуңуз

Эгер сиз веб-сайтыңызга Google шрифттерин кошуп, колдонгуңуз келсе, бул ыкма эң оңой жана үйрөнчүктөр үчүн сунушталган. Сизге керек болгон биринчи нерсе - Easy Google Fonts плагинин орнотуу жана активдештирүү. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Жандыруудан кийин, сиз кире аласыз Көрүнүш » Настройка бет. Бул жандуу теманы ыңгайлаштыруу интерфейсин ачат, анда сиз жаңы Типография бөлүмүн көрөсүз.

Типографияны чыкылдатуу менен веб-сайтыңыздын ар кандай бөлүмдөрү пайда болот, анда сиз Google шрифттерин колдоно аласыз. Жөн гана өзгөртүүнү каалаган бөлүмдө "Шрифти өзгөртүү" баскычын чыкылдатыңыз.

Font Family бөлүмүндө сиз веб-сайтыңызда колдонууну каалаган Google шрифтин тандай аласыз. Сиз ошондой эле шрифттин стилин, шрифттин өлчөмүн, толтурууну, маржаны ж.б. тандай аласыз. Сиздин темаңызга жараша, бул жерде бөлүмдөрдүн саны чектелүү болушу мүмкүн жана сиз веб-сайтыңыздын ар кандай аймактары үчүн шрифт тандоосун түздөн-түз өзгөртө албашыңыз мүмкүн. Бул көйгөйдү чечүү үчүн, плагин ошондой эле өзүңүздүн башкаруу элементтериңизди түзүүгө жана аларды веб-сайтыңыздагы шрифттерди өзгөртүү үчүн колдонууга мүмкүндүк берет. Биринчи кезекте сиз барышыңыз керек Орнотуулар » Google шрифттери баракчасын жана полиция текшерүүңүздүн атын киргизиңиз. Полициянын текшерүү пунктун кайда колдоно турганыңызды тез аныктоого жардам берүү үчүн бир нерсени колдонуңуз.

Андан кийин, "Булакты башкарууну түзүү" баскычын чыкылдатыңыз, андан кийин сизден CSS селекторлорун киргизүү сунушталат. Сиз каалаган HTML элементин кошо аласыз (мисалы, h1, h2, p, blockquote) же CSS класстарын колдоно аласыз. Сиз өзгөрткүңүз келген аймакта кайсы CSS класстары колдонуларын билүү үчүн браузериңиздеги Текшерүү куралын колдоно аласыз.

Эми орнотууларыңызды сактоо үчүн "Бакты башкарууну сактоо" баскычын чыкылдатыңыз. Сиз веб-сайтыңыздын ар кандай бөлүмдөрү үчүн канча керек болсо, ошончо шрифт контроллерин түзө аласыз. Бул шрифт драйверлерин колдонуу үчүн, сиз барышыңыз керек Көрүнүш » Настройка жана Типография өтмөктү чыкылдатыңыз. Типография астында сиз азыр "Тема типографиясы" опциясын көрөсүз. Мурда түзүлгөн ыңгайлаштырылган шрифт башкаруу элементтерин көрсөтүү үчүн аны басыңыз. Сиз азыр жөн гана бул башкаруунун шрифттерин жана көрүнүшүн тандоо үчүн Түзөтүү баскычын чыкылдата аласыз.

Өзгөртүүлөрүңүздү сактоо үчүн Сактоо же Жарыялоо баскычын басууну унутпаңыз.

Метод 2 – WordPressте Google шрифттерин кол менен кошуңуз

Бул ыкма сизден WordPress тема файлдарына код кошууну талап кылат. Эгер сиз буга чейин андай кылбасаңыз, WordPressте кодду кантип көчүрүп жана чаптоо боюнча биздин колдонмону карап чыгыңыз. Биринчиден, Google шрифт китепканасына баш багыңыз жана колдонгуңуз келген арипти тандаңыз. Андан кийин булактын астындагы тез колдонуу баскычын чыкылдатыңыз.

Ариптер барагында ошол шрифт үчүн жеткиликтүү стилдерди көрөсүз. Долбооруңузда колдонгуңуз келген стилдерди тандап, андан кийин жогору жактагы капталдагы баскычты чыкылдатыңыз.

Андан кийин сиз кыстаруу кодун көчүрүү үчүн каптал тилкесиндеги "Embed" өтмөгүнө өтүшүңүз керек болот. Бул кодду WordPress сайтыңызга кошуунун эки жолу бар. Биринчиден, сиз темаңыздын header.php файлын түзөтүп, кодду тегдин алдына кое аласыз. Бирок, WordPressте түзөтүү коду менен тааныш болбосоңуз, бул кодду кошуу үчүн плагинди колдонсоңуз болот. Жөн гана Insert Headers and Footers плагинин орнотуп, иштетиңиз. Көбүрөөк маалымат алуу үчүн, WordPress плагинин кантип орнотуу боюнча биздин кадам-кадам жолду караңыз. Активдештирүү учурунда төмөнкүгө өтүңүз Орнотуулар » Жогорку жана төмөнкү колонтитулдарды киргизүү баракчасын ачып, кыстаруу кодун "Скрипттердин баш жагындагы" кутусуна чаптаңыз.

Өзгөртүүлөрүңүздү сактоо үчүн Сактоо баскычын басууну унутпаңыз. Плагин эми веб-сайтыңыздын бардык барактарында Google Fonts кыстаруу кодун жүктөй баштайт. Бул шрифтти темаңыздын стилдер барагында төмөнкүдөй колдонсоңуз болот: .h1 site-title {font-family: 'Open Sans', Arial, sans-serif; } Көбүрөөк нускамаларды алуу үчүн, WordPress темаларына Google шрифттерин кантип кошуу боюнча биздин жолду караңыз.

Typekit аркылуу WordPressке Ыңгайлаштырылган шрифттерди кошуңуз

Adobe Fonts'тен Typekit - бул укмуштай шрифттер үчүн дагы бир акысыз жана премиум булак, аны сиз дизайн долбоорлоруңузда колдоно аласыз. Алардын акы төлөнүүчү жазылуусу жана сиз колдоно ала турган чектелген акысыз планы бар. Жөн гана Adobe Fonts каттоо эсебин түзүп, Ариптерди карап чыгуу бөлүмүнө өтүңүз. Ал жерден булакты тандап, долбоор түзүү үчүн аны басышыңыз керек.

Андан кийин сиз долбоордун идентификатору менен кыстаруу кодун көрөсүз. Ал ошондой эле темаңыздын CSS'инде шрифти кантип колдонууну көрсөтөт. Бул кодду веб-сайтыңыздын бөлүмүнө көчүрүп, чапташыңыз керек.

Бул кодду WordPress сайтыңызга кошуунун эки жолу бар. Биринчиден, сиз темаңыздын header.php файлын түзөтүп, кодду тегдин алдына кое аласыз. Бирок, WordPressте түзөтүү коду менен тааныш болбосоңуз, бул кодду кошуу үчүн плагинди колдонсоңуз болот. Жөн гана Insert Headers and Footers плагинин орнотуп, иштетиңиз. Активдештирүү учурунда төмөнкүгө өтүңүз Орнотуулар » Жогорку жана төмөнкү колонтитулдарды киргизүү жана кыстаруу кодун "Скрипттердин аталышы" кутусуна чаптаңыз.

Болду, эми WordPress темаңыздын стилдер барагында тандаган Typekit шрифтин төмөнкүдөй колдонсоңуз болот: h1 .site-title {font-family: gilbert, sans-serif; } Көбүрөөк нускамаларды алуу үчүн, Typekit аркылуу WordPressте укмуштуудай типографияны кантип кошуу боюнча биздин окуу куралыбызды карап көрүңүз.

CSS3 @font-face колдонуу менен WordPressте Ыңгайлаштырылган шрифттерди кошуу

WordPress'ке ыңгайлаштырылган шрифттерди кошуунун эң түз жолу - бул CSS3 @font-face ыкмасын колдонуу менен шрифттерди кошуу. Бул ыкма сизге веб-сайтыңызда каалаган арипти колдонууга мүмкүндүк берет. Эң биринчи сиз каалаган шрифти веб форматында жүктөп алышыңыз керек. Эгерде сизде шрифтиңиздин веб форматы жок болсо, аны FontSquirrel веб шрифт генератору аркылуу конверттесеңиз болот. Сизде веб шрифт файлдары болгондон кийин, аларды WordPress хостинг сервериңизге жүктөшүңүз керек. Ариптерди жүктөп алуу үчүн эң жакшы жер - темаңыздагы же бала тема каталогундагы жаңы "шрифтер" папкасынын ичинде. Арипти жүктөп алуу үчүн FTP же cPanel файл менеджериңизди колдонсоңуз болот. Арипти жүктөгөндөн кийин, арипти темаңыздын стилдер жадыбалына төмөнкүдөй CSS3 @font-face эрежесин колдонуп жүктөшүңүз керек: @font-face {font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); шрифттин салмагы: нормалдуу; } Шрифттер үй-бүлөсүн жана URL дарегин өзүңүзгө алмаштырууну унутпаңыз. Андан кийин, сиз бул шрифтти темаңыздын стилдер барагынын каалаган жеринде төмөнкүдөй колдоно аласыз: .h1 site-title {font-family: "Arvo", Arial, sans-serif; } Ариптерди CSS3 @font-face аркылуу түздөн-түз жүктөө дайыма эле эң жакшы чечим боло бербейт. Эгер сиз Google Fonts же Typekit'тен шрифт колдонуп жатсаңыз, мыкты иштеши үчүн шрифти түз сервериңизден тейлегениңиз жакшы. Болду, биз бул макала WordPress-те ыңгайлаштырылган шрифттерди кошууга жардам берди деп үмүттөнөбүз. Ошондой эле WordPressте сөлөкөт шрифттерин колдонуу жана WordPressте шрифттин өлчөмүн кантип өзгөртүү боюнча биздин колдонмого кайрылсаңыз болот. Бул макала сизге жакса, WordPress видео сабактары үчүн YouTube каналыбызга жазылыңыз. Бизди Twitter жана Facebookтан да таба аласыз.

Башында жарыяланган 2021-02-23 20:33:14.