В тази помощна статия за WordPress ще ви преведа стъпка по стъпка през процеса на добавяне на персонализирани шрифтове към вашите WordPress блок теми. Това означава, че можете да добавите ВСЯКАКВИ шрифтове към ВСЯКА тема, като например добавяне на Google Fonts към темата Twenty Twenty Three.

Показвам ви как да изпълните тази задача с помощта на плъгина Create Block Theme, разработен директно от екипа разработчици на WordPress. Това прави приставката ултра лека, висока производителност и много лесна за използване с блокови теми.

С този метод можете или да се свържете към шрифтове (т.е. връзка към Google Fonts) или да вградите шрифтове локално на вашия сайт (за по-добро представяне на сайта). Нека влезем в него!

Съдържание

Видео: Добавете персонализирани шрифтове към WordPress

1. Инсталирайте приставката „Създаване на блокова тема“.

Като за начало ще искате да влезете в административната зона на WordPress, която ще ви отведе до таблото за управление. Оттам отидете на Plugins>Add New от главната навигация (червена стрелка в горното изображение).

Потърсете приставката „Създаване на блокова тема“, като използвате лентата за търсене в горния десен ъгъл (очертана в зелено на снимката по-горе). След като се покаже плъгинът Create Block Theme, щракнете върху бутона „Install Now“, за да го инсталирате на вашия сайт (червена стрелка).

След това щракнете върху бутона „Активиране“, за да активирате приставката.

Опростен WordPress: Как да изградим мощни уебсайтове Курс от Davies Media Design

2. Деактивирайте приставката за сигурност (временно)

За да може останалата част от този процес да протече гладко, ще трябва временно да деактивирате всички добавки за защита, които сте инсталирали и които блокират възможността на потребителите да редактират теми или добавки.

В моя конкретен случай използвам плъгина SG Security (който идва с всички уебсайтове на WordPress хостван чрез Siteground – хост, който силно препоръчвам). Със сигурност знам, че този плъгин пречи на процеса на добавяне на персонализирани шрифтове, така че ще деактивирам настройката, която пречи.

В този случай ще навигирам до секцията „Сигурност на сайта“ на приставката за сигурност на SG, като използвам основната навигация (червена стрелка в изображението по-горе).

След това ще превъртя надолу до опцията с надпис „Деактивиране на редактора на теми и добавки“ (маркирана в зелено на изображението по-горе). Ще видите превключвател вдясно от тази опция – щракнете върху превключвателя, за да деактивирате тази функция (червена стрелка). Трябва да видите изскачащо съобщение „Успех“ в синята стрелка в десния ъгъл).

След като нашата добавка за сигурност е временно деактивирана, можем да преминем към следващата стъпка за избор и качване на шрифтовете, които искаме да използваме на нашия сайт.

Има две опции за използване на персонализирани шрифтове в WordPress.

3. Изберете персонализирани шрифтове за WordPress (свързани шрифтове на Google)

Първата опция е да направите връзка към шрифтове на сайт на трета страна, Google Fonts. Тази опция е по-опростена и отнема по-малко време за настройка, но забавя скоростта на зареждане на страницата на вашия уебсайт. Той също така ви ограничава до наличните шрифтове от Google Fonts (въпреки че Google предлага тонове страхотни, безплатни шрифтове). Ако сте по-малко запознати с технологиите и нямате нищо против да използвате Google Fonts, препоръчвам тази опция.

Като за начало отидете на „Външен вид>Управление на шрифтовете на темата“ от основната навигация (червена стрелка в изображението по-горе).

В работната област „Управление на шрифтовете на темата“ ще видите всички шрифтове по подразбиране, инсталирани в момента в WordPress (маркирани в зелено на изображението по-горе). Вашите шрифтове също са изброени от дясната страна на работната област, заедно с различните варианти на всеки шрифт и размера на файла за всеки вариант на шрифта (очертани в синьо).

За да добавите нов шрифт към вашата тема, щракнете върху бутона „Добавяне на Google шрифт“ (червена стрелка).

Щракнете върху падащото меню „Избор на шрифт“ и потърсете шрифта на Google, който искате да добавите към вашия сайт (шрифтовете са подредени по азбучен ред). Ако не сте сигурни как изглежда всеки шрифт, препоръчвам разглеждайки уебсайта на Google Fonts за да изследвате шрифтове и да ги тествате. След като намерите шрифта, който искате да използвате, изберете го от падащото меню (синя стрелка).

Сега ще видите списък с всички налични варианти, които можете да инсталирате на вашата тема за този шрифт. Можете или да поставите отметка в квадратчето до отделните варианти, или да щракнете върху горното квадратче за отметка (червена стрелка на изображението по-горе), за да изберете всички варианти. Ще видите списък с избраните от вас варианти, заедно с размера на файла им, от дясната страна на екрана. След като сте готови, щракнете върху „Добавяне на шрифтове на Google към вашата тема“ (зелена стрелка).

Сега трябва да видите съобщение в горната част на работната област, че шрифтът е инсталиран към вашата тема (в този случай към темата Twenty-Twenty Three). След това можете да щракнете върху връзката „Управление на шрифтове“ в полето за съобщение за успех или да щракнете върху малката стрелка назад (червена стрелка на изображението по-горе), за да се върнете към работната област „Управление на шрифтове на тема“.

Сега ще видите вашето новоинсталирано семейство шрифтове в списъка с останалите шрифтове на вашата тема (червена стрелка в изображението по-горе). Ще видите също вашето семейство шрифтове и всички свързани с него вариации на шрифтове от дясната страна на работната област (маркирани в зелено).

4. Вградете персонализирани шрифтове за WordPress (локални шрифтове за по-добро SEO)

Втората опция за добавяне на шрифтове към вашия уебсайт WordPress е да „вградите“ или „локално да хоствате“ вашите шрифтове. С други думи, вашите файлове с шрифтове ще бъдат разположени в същия уеб сървър, който хоства вашия уебсайт.

Предимството на този метод е, че не изисква извличане на шрифтове от домейн на трета страна. В резултат на това вашите шрифтове се зареждат по-бързо и следователно вашата уеб страница се зарежда по-бързо. По-бързото зареждане на уеб страниците е по-добро за потребителското изживяване, което означава, че може да помогне на вашия сайт да се класира по-високо в търсачките и да получи повече трафик.

С други думи, вградените шрифтове са по-добри за SEO (оптимизация за търсачки).

Въпреки че този метод отнема няколко допълнителни стъпки, той все още е доста лесен и използва същия плъгин, който инсталирахме по-рано (плъгин за създаване на блокови теми).

За да инсталирате шрифтовете си локално, започнете, като отидете на Appearance>Manage Theme Fonts от основната навигация (ако вече не сте там от последната стъпка – синя стрелка в изображението по-горе). След това щракнете върху бутона „Добавяне на локален шрифт“ в горния десен ъгъл на работната зона (червена стрелка).

Ще бъдете отведени до областта „Локални шрифтове“, където можете да изберете файл от вашия компютър, който да качите във вашата тема. Под бутона „Избор на файл“ ще видите списък с поддържаните файлови формати на шрифтове. Можете да получите тези формати от всеки доверен уебсайт за шрифтове, включително Google Fonts.

Намерете и изтеглете избрания от вас шрифт от Google Fonts

Ще отскоча до Google Fonts и ще използвам лентата за търсене (червена стрелка), за да потърся шрифта, който искам – в този случай шрифта „Catamaran“. След като шрифтът е посочен в резултатите, ще щракна върху него, за да видя страницата с шрифта (зелена стрелка).

След това ще щракна върху бутона „Изтегляне на семейството“, за да изтегля този шрифт и всичките му варианти на моя компютър. Можете да превъртите надолу страницата с шрифтове, ако искате да видите всички налични варианти за този шрифт.

Щракнете върху „Запазване“, за да запишете zip файла на шрифта на вашия компютър.

Разархивирайте вашата папка с шрифтове, за да получите достъп до файлове с шрифтове

След като изтеглянето приключи, щракнете върху стрелката до готовото изтегляне (червена стрелка) и щракнете върху „Покажи в папка“ (зелена стрелка).

Щракнете с десния бутон върху zip файла във вашия файлов мениджър и щракнете върху „Извличане на всички“.

Ще се покаже изскачащ прозорец, който ви показва къде се извличат шрифтовете (червена стрелка). Можете да промените това местоположение, ако желаете, в противен случай щракнете върху бутона с надпис „Извличане“ (зелена стрелка). Това ще разархивира папката и ще създаде нов файл на вашия компютър с всички разархивирани файлове с шрифтове. Тази папка трябва да се отвори автоматично.

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

В тази „статична“ папка ще видите списък с всички варианти на шрифтове, които изтеглихме за шрифта Catamaran от Google Fonts. Има общо 9 варианта и ние можем да качим всички на нашия уебсайт или само вариантите, които искаме/необходими. Щракнете върху местоположението на папката във файловия мениджър (зелена стрелка), след това щракнете с десния бутон и изберете „Копиране“.

Качете вашите персонализирани шрифтове в WordPress

Върнете се в WordPress, където имате отворена работна област „Локални шрифтове“. Щракнете върху бутона „Избор на файл“ (червена стрелка в горното изображение), за да изберете вашите шрифтове. Можете ръчно да навигирате до мястото на вашия компютър, където се съхраняват вашите шрифтове. Или просто щракнете върху адресната лента на файловия мениджър (синя стрелка), изтрийте адреса, който в момента е там, след това щракнете с десния бутон и изберете „Поставяне“ (зелена стрелка). Това ще постави адреса, който сте копирали в предишната стъпка. Натиснете клавиша enter и ще бъдете отведени до папката с вашите шрифтове.

Трябва да качите вашите варианти на шрифтове един по един. За този пример просто ще кача варианта на шрифта „Catamaran-Regular“, като щракна върху него (зелена стрелка), след което щракна върху бутона „Отвори“ (червена стрелка).

Сега трябва да видите информация за „ИМЕ НА ШРИФТА“, „СТИЛ НА ШРИФТА“ и „ТЕГЛО НА ШРИФТА“, както и визуализация на шрифта от дясната страна. Кликнете върху „Качване на шрифт към вашата тема“ (червена стрелка), за да качите варианта на шрифта.

Вижте своите персонализирани шрифтове на тема

Сега трябва да видите съобщение за успех в горната част на работната зона (очертана в зелено на изображението по-горе). Поздравления – вашият персонализиран шрифт вече е качен във вашата тема като локален шрифт! Можете да продължите да щракнете върху „Избор на файл“ и да качите толкова варианти на шрифта, колкото искате.

След като приключите, щракнете върху връзката „Управление на шрифтове“ в полето за съобщение за успех или върху стрелката назад (обозначена с червената стрелка), за да се върнете към работната област Управление на шрифтове на тема.

Сега ще видите новото семейство шрифтове „Catamaran“ в списъка с останалите семейства шрифтове на вашата тема (червена стрелка). Освен това ще видите фамилията шрифтове и всички варианти, които сте инсталирали, от дясната страна на прозореца Управление на шрифтовете на темата (маркиран в зелено).

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

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

За да промените шрифтовете на вашата тема към вашите персонализирани шрифтове, отидете до редактора на сайта, като отидете на Облик>Редактор (червена стрелка в горното изображение).

Щракнете някъде в областта на основното съдържание (червена стрелка) на редактора на сайта, за да изведете контролите.

В горното меню щракнете върху иконата „Стилове“ (синя стрелка). След това щракнете върху „Типография“ (червена стрелка).

Под „Елементи“ можете да промените шрифта за текста, връзките, заглавията или бутоните. Ще избера опцията „Заглавия“ за този пример.

Сега ще видите падащо меню под „Типография“, където можете да избирате от който и да е от вашите тематични шрифтове (червена стрелка). Можете да видите шрифтовете „Neuton“ и „Catamaran“, които добавих за този урок, са изброени тук. Ще избера „Neuton“ за моя шрифт на заглавието.

Щракнете върху бутона „Запазване“ в горния десен ъгъл, за да запазите промените си.

Щракнете върху „Запазване“ още веднъж (червена стрелка) и вашият персонализиран шрифт вече ще бъде запазен за всички заглавия в сайта ви!

След това можете да щракнете върху връзката Изглед>Преглед на сайта в горния десен ъгъл на редактора на сайта (червени стрелки на снимката по-горе), за да видите как изглежда вашият уебсайт с новия ви шрифт. Върнете се в редактора на сайта и повторете този процес за всички други елементи, чийто шрифт искате да персонализирате.

За да се върнете към зоната за администриране на WordPress, щракнете върху логото в горния ляв ъгъл на редактора на сайта (зелена стрелка), след което щракнете върху логото отново.

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

За да изтриете някой от персонализираните си шрифтове, започнете, като се върнете към Облик>Управление на шрифтовете на темата.

Можете да изтриете цялото семейство шрифтове, като задържите курсора на мишката над дясната страна на името на семейството шрифтове и щракнете върху иконата на кошчето, която се появява (синя стрелка). Или задръжте курсора на мишката над отделните варианти на шрифта и щракнете върху иконата на кошчето (вариантите на шрифта се намират в зелено маркираната област). Можете също да щракнете върху връзката „Премахване на семейство шрифтове“, за да изтриете всяко семейство шрифтове (лилава стрелка).

Това е за този урок! Ако ви хареса, можете да разгледате и другия ми Помощни статии за WordPress или се запишете в моя Майсторски клас по WordPress на Udemy.