Во оваа статија за помош на WordPress, ќе ве одведам чекор-по-чекор низ процесот на додавање сопствени фонтови на вашите теми за блокови на WordPress. Ова значи дека можете да додадете БИЛО фонтови на БИЛО КОЈА тема, како што е додавањето на Google Fonts на темата Twenty Twenty Three.

Можете да го погледнете видео-упатството подолу или да го прескокнете и да ја прочитате статијата (која е достапна на повеќе јазици користејќи ги функциите за превод на оваа страница). 

Ви покажувам како да ја постигнете оваа задача користејќи го додатокот Create Block Theme развиен директно од тимот на развивачи на WordPress. Ова го прави приклучокот ултра лесен, со високи перформанси и многу лесен за користење со блок теми. Исто така, ви покажувам како да решите заеднички проблем со дозволите што може да се појави кога работите со овој приклучок.

Со овој метод, можете или да поврзете фонтови (т.е. линк до фонтови на Google) или да вметнете фонтови локално на вашиот сајт (за подобри перформанси на страницата). Ајде да влеземе во тоа!

Содржина

1. Инсталирајте го приклучокот „Креирај блок тема“.

За почеток, ќе сакате да се најавите во вашата административна област на WordPress, која ќе ве однесе до Контролната табла. Оттаму, одете до Plugins>Add New од главната навигација (црвена стрелка на горната слика).

Пребарајте го приклучокот „Креирај блок тема“ користејќи ја лентата за пребарување во горниот десен агол (наведена со зелена боја на горната фотографија). Откако ќе се прикаже приклучокот Create Block Theme, кликнете на копчето „Инсталирај сега“ за да го инсталирате на вашата страница (црвена стрелка).

Следно, кликнете на копчето „Активирај“ за да го активирате приклучокот.

WordPress поедноставен: Курс како да изградите моќни веб-страници од Дејвис Медиа Дизајн

2. Оневозможи безбедносен приклучок (привремено)

За да може остатокот од овој процес да се одвива непречено, ќе треба привремено да ги оневозможите сите безбедносни приклучоци што сте ги инсталирале што ја блокираат можноста на корисниците да уредуваат теми или приклучоци.

Во мојот конкретен случај го користам приклучокот SG Security (кој доаѓа со сите веб-локации на WordPress хостиран преку Siteground – домаќин кој топло го препорачувам). Јас точно знам дека овој приклучок го попречува процесот на додавање прилагодени фонтови, па затоа ќе ја оневозможам поставката што ми пречи.

Во овој случај, ќе отидам до делот „Безбедност на локацијата“ од приклучокот SG Security користејќи ја главната навигација (црвена стрелка на горната слика).

Следно, ќе скролувам надолу до опцијата означена како „Оневозможи уредувач на теми и приклучоци“ (означена со зелено на горната слика). Ќе видите преклопник десно од оваа опција - кликнете на копчето за да ја исклучите оваа функција (црвена стрелка). Треба да видите порака „Успех“ што се појавува во сината стрелка на десниот агол).

Кога нашиот безбедносен приклучок е привремено оневозможен, можеме да преминеме на следниот чекор на избирање и поставување на фонтови што сакаме да ги користиме на нашата страница.

Постојат две опции за користење на сопствени фонтови во WordPress.

3. Изберете прилагодени фонтови за WordPress (Поврзани фонтови на Google)

Првата опција е да се поврзе со фонтови на трета страна, Google Фонтови. Оваа опција е поедноставна и одзема помалку време за поставување, но ја забавува брзината на вчитување на страницата на вашата веб-страница. Исто така, ве ограничува на фонтовите достапни од Google Fonts (иако Google нуди тони одлични, бесплатни фонтови). Ако сте помалку познавачи на технологијата и не ви пречи да користите Google Fonts, ви ја препорачувам оваа опција.

За почеток, одете до „Изглед>Управување со фонтови со теми“ од главната навигација (црвена стрелка на горната слика).

Во работната област „Управување со фонтови со теми“, ќе ги видите сите стандардни фонтови моментално инсталирани во WordPress (означени со зелено на горната слика). Вашите фонтови се исто така наведени долж десната страна на работната област, заедно со различните варијации на секој фонт и големината на датотеката за секоја варијација на фонтот (наведени со сино).

За да додадете нов фонт на вашата тема, кликнете на копчето „Додај фонт на Google“ (црвена стрелка).

Кликнете на паѓачкото мени „Избери фонт“ и побарајте го фонтот на Google што сакате да го додадете на вашата страница (фонтовите се по азбучен ред). Ако не сте сигурни како изгледа секој фонт, препорачувам прелистување на веб-страницата на Google Fonts да истражуваат фонтови и да ги тестираат. Откако ќе го пронајдете фонтот што сакате да го користите, изберете го од паѓачкото мени (сина стрелка).

Сега ќе видите список на сите достапни варијанти што можете да ги инсталирате на вашата тема за тој фонт. Можете или да го штиклирате полето до поединечни варијанти или да кликнете на горното поле (црвената стрелка на сликата погоре) за да ги изберете сите варијанти. Ќе видите листа на вашите избрани варијанти, заедно со нивната големина на датотека, на десната страна на екранот. Откако ќе бидете подготвени, кликнете „Додај фонтови на Google на вашата тема“ (зелена стрелка).

Сега треба да видите порака на врвот на работната област дека фонтот е инсталиран на вашата тема (во овој случај на темата Twenty-Twenty Three). Потоа можете да кликнете на врската „Управување со фонтови“ во полето за успешна порака или кликнете на малата стрелка за назад (црвената стрелка на сликата погоре) за да се вратите во работната област „Управување со фонтови со теми“.

Сега ќе го видите вашето ново инсталирано семејство на фонтови на списокот со останатите фонтови на вашата тема (црвена стрелка на горната слика). Исто така, ќе го видите вашето семејство на фонтови и сите негови поврзани варијации на фонтови на десната страна од работната област (означено со зелено).

4. Вметнете прилагодени фонтови за WordPress (локални фонтови за подобро оптимизација)

Втората опција за додавање фонтови на вашата веб-страница на WordPress е да ги „вградите“ или „локално да ги хостирате“ вашите фонтови. Со други зборови, вашите датотеки со фонтови ќе бидат лоцирани во истиот веб-сервер што е домаќин на вашата веб-страница.

Придобивката од овој метод е тоа што не бара преземање фонтови од домен на трета страна. Како резултат на тоа, вашите фонтови се вчитуваат побрзо и на тој начин вашата веб-страница се вчитува побрзо. Побрзото вчитување на веб-страниците е подобро за корисничкото искуство, што значи дека може да помогне вашиот сајт да се рангира повисоко на пребарувачите и да добие повеќе сообраќај.

Со други зборови, вградените фонтови се подобри за оптимизација (оптимизација на пребарувачот).

Иако овој метод бара неколку дополнителни чекори, сепак е прилично лесен и го користи истиот приклучок што го инсталиравме претходно (приклучок за креирање блок теми).

За да ги инсталирате вашите фонтови локално, почнете со навигација до Изглед>Управување со фонтови со теми од главната навигација (ако веќе не сте таму од последниот чекор – сината стрелка на горната слика). Следно, кликнете на копчето „Додај локален фонт“ во горниот десен агол на работната област (црвена стрелка).

Ќе бидете префрлени во областа „Локални фонтови“ каде што можете да изберете датотека од вашиот компјутер за да ја поставите на вашата тема. Под копчето „Избери датотека“ ќе видите листа на поддржани формати на датотеки за фонтови. Можете да ги добиете овие формати од која било веб-локација за доверливи фонтови, вклучувајќи ги и Google Fonts.

Најдете и преземете го вашиот фонт по избор од Google Fonts

Ќе скокнам на Google Fonts и ќе ја користам лентата за пребарување (црвена стрелка) за да го барам фонтот што го сакам - во овој случај фонтот „Catamaran“. Откако фонтот е наведен во резултатите, ќе кликнам на него за да ја погледнам страницата со фонтот (зелена стрелка).

Следно, ќе кликнам на копчето „Преземи семејство“ за да го преземам овој фонт и сите негови варијации на мојот компјутер. Можете да скролувате надолу на страницата со фонтови ако сакате да ги видите сите достапни варијации за овој фонт.

Кликнете на „Зачувај“ за да ја зачувате zip-датотеката на фонтот на вашиот компјутер.

Отпакувајте ја папката со фонтови за да пристапите до датотеките со фонтови

Откако ќе заврши преземањето, кликнете на стрелката веднаш до завршеното преземање (црвена стрелка) и кликнете „Прикажи во папка“ (зелена стрелка).

Десен-клик на zip-датотеката во вашиот истражувач на датотеки и кликнете „Extract All“.

Ќе се прикаже скокачки прозорец, кој ќе ви покаже каде се извлекуваат фонтовите (црвена стрелка). Ако сакате, можете да ја промените оваа локација, инаку кликнете на копчето означено со „Екстракт“ (зелена стрелка). Ова ќе ја отпакува папката и ќе создаде нова датотека на вашиот компјутер со сите отпакувани датотеки со фонтови. Оваа папка треба да се отвори автоматски.

Ако сте преземале датотеки со фонтови користејќи Google Fonts, внесете ја папката означена како „статички“ за да ги видите сите ваши датотеки со фонтови. Во спротивно, едноставно побарајте ги сите датотеки што се датотеки OTF, TTF, WOFF или WOFF2.

Внатре во оваа „статична“ папка ќе видите список со сите варијации на фонтови што ги преземавме за фонтот Catamaran од Google Fonts. Има вкупно 9 варијации и ние можеме или да ги прикачиме сите на нашата веб-страница или само варијациите што ги сакаме/потребни. Кликнете на локацијата на папката во истражувачот на датотеки (зелена стрелка), потоа кликнете со десното копче и изберете „Копирај“.

Поставете ги вашите сопствени фонтови на WordPress

Вратете се на WordPress каде што ја имате отворена работната област „Локални фонтови“. Кликнете на копчето „Избери датотека“ (црвена стрелка на горната слика) за да ги изберете вашите фонтови. Можете рачно да се движите до локацијата на вашиот компјутер каде што се зачувани вашите фонтови. Или, едноставно кликнете на лентата за адреси на истражувачот на датотеки (сина стрелка), избришете ја адресата што е моментално таму, потоа кликнете со десното копче и изберете „Вметни“ (зелена стрелка). Ова ќе ја залепи адресата што ја копиравте во претходниот чекор. Притиснете го копчето Enter и ќе бидете однесени во папката со вашите фонтови.

Мора да ги прикачувате вашите варијации на фонтови една по една. За овој пример, едноставно ќе ја подигнам варијацијата на фонтот „Catamaran-Regular“ со кликнување на неа (зелена стрелка), а потоа кликнување на копчето „Отвори“ (црвена стрелка).

Сега треба да видите информации за „ИМЕ НА ФОНТ“, „СТИЛ НА ФОНТ“ и „ТЕЖИНА НА ФОНТ“, како и преглед на фонтот од десната страна. Кликнете на „Постави фонт на вашата тема“ (црвена стрелка) за да ја поставите варијацијата на фонтот.

Прегледајте ги вашите сопствени фонтови за теми

Сега треба да видите успешна порака на горниот дел од работната област (на горната слика означена со зелена боја). Честитки - вашиот прилагоден фонт сега е поставен на вашата тема како локален фонт! Можете да продолжите да кликнете на „Избери датотека“ и да испраќате онолку варијации на фонтови колку што сакате.

Откако ќе завршите, кликнете на врската „Управување со фонтови“ во полето за успешна порака или на стрелката назад (означена со црвената стрелка) за да се вратите во работната област Управување со фонтови со теми.

Сега ќе го видите новото семејство на фонтови „Catamaran“ наведено со останатите семејства на фонтови на вашата тема (црвена стрелка). Плус, ќе го видите семејството на фонтови и сите варијации што сте ги инсталирале на десната страна од прозорецот Управување со фонтови со теми (означен со зелено).

5. Променете ги фонтовите на вашата тема во вашите сопствени фонтови

Сега кога ги имате инсталирано новите фонтови, време е за забавниот дел!

За да ги промените фонтовите на вашата тема во вашите сопствени фонтови, одете до Уредувачот на страницата со одење до Изглед>Уредувач (црвена стрелка на горната слика).

Кликнете каде било внатре во главната област за содржина (црвена стрелка) на Уредувачот на страницата за да се појават контролите.

Во Топ мени, кликнете на иконата „Стилови“ (сина стрелка). Потоа, кликнете на „Типографија“ (црвена стрелка).

Под „Елементи“ можете да го промените фонтот за текстот, врските, насловите или копчињата. Ќе ја изберам опцијата „Наслови“ за овој пример.

Сега ќе видите паѓачко мени под „Типографија“ каде што можете да изберете од кој било од вашите фонтови за теми (црвена стрелка). Можете да ги видите фонтовите „Neuton“ и „Catamaran“ што ги додадов за ова упатство се наведени овде. Ќе изберам „Neuton“ за мојот фонт за наслов.

Кликнете на копчето „Зачувај“ во горниот десен агол за да ги зачувате вашите промени.

Кликнете на „Зачувај“ уште еднаш (црвена стрелка) и вашиот прилагоден фонт сега ќе биде зачуван за сите наслови низ вашата страница!

Следно, можете да кликнете на врската View>View Site во горниот десен агол на уредникот на страницата (црвени стрелки на горната фотографија) за да видите како изгледа вашата веб-страница со вашиот нов фонт. Вратете се во Уредувачот на страницата и повторете го овој процес за сите други елементи чиј фонт сакате да го приспособите.

За да се вратите во администраторската област на WordPress, кликнете на логото во горниот лев агол на уредникот на страницата (зелена стрелка), потоа повторно кликнете на логото.

6. Како да ги избришете сопствените фонтови од WordPress

За да избришете кој било од вашите сопствени фонтови, започнете со навигација назад до Изглед>Управување со фонтови со теми.

Можете да ја избришете целата фамилија на фонтови така што ќе лебдите со глувчето над десната страна од семејното име на фонтот и ќе кликнете на иконата за корпа за отпадоци што се појавува (сина стрелка). Или, поставете го глувчето над поединечни варијации на фонтови и кликнете на иконата за отпадоци (варијациите на фонтот се наоѓаат во зелената означена област). Можете исто така да кликнете на врската „Отстрани го семејството фонтови“ за да избришете кое било семејство на фонтови (виолетова стрелка).

Тоа е тоа за овој туторијал! Ако ви се допадна, можете да го погледнете и мојот друг Написи за помош на WordPress или запишете се во мојот Мастеркласа на WordPress на Udemy.

Билтен за е-пошта за бесплатни креативни апликации на Davies Media Design

Претплатете се на билтенот на DMD

Пријавете се за да добивате нови упатства, ажурирања на курсевите и најновите вести за вашите омилени бесплатни креативни апликации!

Успешно сте претплатени!

Пин Тоа на Pinterest