WordPress mövzusuna simge şriftlərini necə asanlıqla əlavə etmək olar

WordPress saytınıza simge şriftləri əlavə etmək istəyirsiniz? Bu yaxınlarda oxucularımızdan biri WordPress mövzusuna simvol şriftləri əlavə etməyin ən asan yolunun nə olduğunu soruşdu.

Nişan şriftləri veb saytınızı yavaşlatmadan vektor (ölçülən) nişanlar əlavə etməyə imkan verir. Onlar veb şriftləri kimi yüklənir və CSS ilə tərtib edilə bilər.

Bu yazıda addım-addım addım ataraq WordPress mövzusuna simge şriftlərini asanlıqla necə əlavə edəcəyinizi göstərəcəyik.

Hər hansı bir WordPress mövzusu olan simge şriftlərindən istifadə edin

Simge şriftləri nədir və niyə istifadə etməliyəm?

Nişan şriftlərində hərf və rəqəm əvəzinə işarələr və ya piktoqramlar var. Bu piktoqramlar veb sayt məzmununa asanlıqla əlavə oluna bilər və CSS-dən istifadə edərək ölçüsünə görə dəyişdirilə bilər. Şəkil əsaslı nişanlar ilə müqayisədə yazı nişanları daha sürətli olur, bu da WordPress veb saytınızın ümumi sürətinə kömək edir.

Icon font önizləmə

İşarəli şriftlər, tez-tez istifadə olunan nişanları göstərmək üçün istifadə edilə bilər. Məsələn, onları səbətinizdə, yükləmə düymələri, xüsusiyyət qutuları, hədiyyə yarışması və hətta WordPress naviqasiya menyularında istifadə edə bilərsiniz.

Yüzlərlə gözəl nişanlar olan bir neçə pulsuz və açıq mənbəli ikon şriftləri mövcuddur.

Əslində, hər bir WordPress quraşdırma pulsuz dashicon simvol dəsti ilə gəlir. Bu nişanlar WordPress admin menyusunda və WordPress idarəetmə sahəsindəki digər sahələrdə istifadə olunur.

Bəzi digər məşhur simge mənbələri:

  • Şrift Zəhmli
  • Ümumi
  • IcoMoon
  • Linearikonlar
  • Google material nişanlar
  • Əsaslı layihə

Bu dərs üçün biz Font Awesome istifadə edəcəyik. Mövcud olan ən populyar pulsuz və açıq mənbəli simvol şriftidir. WPBeginner saytında FontAwesome istifadə edirik, həmçinin OptinMonster, WPForms, RafflePress və s. Kimi WordPress pluginlərimizdən istifadə edirik.

Bu təlimatda, WordPress-də simge şriftləri əlavə etmək üçün üç yolu əhatə edəcəyik. Sizə ən uyğun olan həlli seçə bilərsiniz.

Pluginlərdən istifadə edərək WordPress-də icon şriftləri əlavə edin

Bir başlanğıc səviyyəli istifadəçisinizsə, yalnız yazılarınıza və səhifələrinizə bəzi nişanlar əlavə etməyə çalışırsınızsa, bu metod sizin üçün uyğundur. Tema sənədlərini dəyişdirməyiniz lazım deyildi və veb saytınızdakı hər yerdə simge şriftlərindən istifadə edə bilərsiniz.

Ediləcək ilk şey Font Awesome WordPress plaginini quraşdırmaq və aktivləşdirməkdir. Daha çox məlumat üçün, WordPress plaginini necə quraşdıracağımızı addım-addım təlimatımıza baxın.

Aktivləşdirildikdən sonra plagin mövzu üçün Font Awesome dəstəyini təmin edir. İndi hər hansı bir WordPress yazısını və ya səhifəsini redaktə edə bilərsiniz və bu kimi bir işarə qısa kodunu istifadə edə bilərsiniz:

(icon adı = "raket")

Bu qısa kodu digər mətnlərlə birlikdə və ya yalnız xüsusi qısa kod blokunda istifadə edə bilərsiniz.

WordPress-də simge mənbə kodu əlavə edin

Əlavə edildikdən sonra, işarənin canlı bir saytda necə görünəcəyini görmək üçün poçtunuzu və ya səhifənizi əvvəlcədən görə bilərsiniz. Test saytımıza necə baxdısa, belədir.

Icon önizləmə

Ayrıca, bir bənd blokunun içərisində şrift simvolu üçün qısa kodu əlavə edə bilərsiniz, burada simge ölçüsünü artırmaq üçün blok parametrlərini istifadə edə bilərsiniz.

İşarənin ölçüsünü artırın

Mətnin ölçüsü artdıqca, bu mətn redaktorunda qəribə görünə bilər. Qısayol kodunun avtomatik olaraq blok redaktorundakı bir simvol şriftinə keçməməsi.

Həqiqi simge ölçüsünün necə görünəcəyini görmək üçün poçtunuzdakı və ya səhifənizdəki önizləmə düyməsini vurmalısınız.

Genişləndirilmiş Icon Şrift

Ayrıca sütunların içərisindəki simge qısa kodlarını istifadə edə və bu kimi xüsusiyyət qutuları yarada bilərsiniz:

Xüsusiyyət qutularında simge şriftlərindən istifadə edin

2. Bir WordPress səhifə generatoru ilə işarəli şriftlərdən istifadə

Ən populyar WordPress səhifə qurucusu plaginləri simvol şriftlərinə quraşdırılmış dəstəklə gəlir. Bu, açılış səhifələrinizdə, həmçinin veb saytınızın digər sahələrində simge şriftlərindən asanlıqla istifadə etməyə imkan verir.

Qunduz inşaatçısı

Beaver Builder, bazarda ən yaxşı WordPress səhifə qurucusu pluginidir. Heç bir kod yazmadan asanlıqla xüsusi WordPress səhifə planlarını yaratmağa imkan verir.

Beaver Builder, yazılarınıza və səhifələrinizə sürükləyə biləcəyiniz gözəl istifadəyə hazır nişanlar və modullarla gəlir.

Qunduz İnşaatçı Icon Modulları

Nişanlar qrupları yarada, tək bir ikona əlavə edə və onları yaxşı yerləşdirilmiş satırlar və sütunlara köçürə bilərsiniz. CSS yazmadan öz rənglərinizi, arxa planlarınızı, boşluqlarınızı və kənarlarınızı da seçə bilərsiniz.

Beaver Builder-də simvol şriftlərini düzəldin

Beaver Builder Themer məhsulu ilə heç bir kod yazmadan tamamilə xüsusi WordPress mövzularını yarada bilərsiniz.

Elementor Pro

Elementor, başqa bir məşhur WordPress səhifə qurucusu plaginidir. Ayrıca bir nişan elementi də daxil olmaqla işarə şriftlərindən istifadə etməyə imkan verən müxtəlif elementlər ilə gəlir.

Elementor işarəsi

Sadəcə bir simgəni istənilən yerə sürükleyib ata və gözəl səhifələr yaratmaq üçün satırlar, sütunlar və masalarla istifadə edə bilərsiniz.

Divi və Visual Composer kimi digər məşhur səhifə qurucuları da simvol şriftlərinə tam dəstək verirlər.

3. Kod ilə əl ilə WordPress-də simge şriftləri əlavə edin

Daha əvvəl qeyd etdiyimiz kimi, simge şriftləri yalnız şriftlərdir və hər hansı bir xüsusi şrift əlavə etmək kimi saytınıza əlavə edilə bilər.

Şrift Zəhmli kimi bəzi nişanlar şriftləri internetdəki CDN serverlərində mövcuddur və birbaşa WordPress mövzu ilə əlaqələndirilə bilər.

Bütün şrift qovluqlarını WordPress mövzusundakı bir qovluğa yükləyə və sonra həmin şriftləri tərz cədvəlinizdə istifadə edə bilərsiniz.

Bu dərs üçün Zərif Şrift istifadə etdiyimiz üçün hər iki üsuldan istifadə edərək necə əlavə edə biləcəyinizi sizə göstərəcəyik.

Metod 1:

Bu əl üsulu olduqca asandır.

Əvvəlcə Font Awesome veb saytına daxil olmalı və daxil edilmiş kodu əldə etmək üçün e-poçt adresinizi daxil etməlisiniz.

Font Awesome-dən gönder kodu alın

İndi giriş kodunuzu Font Zəhmli bir e-poçt üçün yoxlayın. Bu emblemini etiketdən əvvəl WordPress mövzusunuzun header.php faylına kopyalayın və yapışdırın.

Gələn kodunuz Font Awesome kitabxanasını birbaşa CDN serverlərinizdən axtaracaq bir xətt olacaqdır. Bu kimi bir şey görünəcək:

 
 

Bu üsul daha sadədir, lakin digər plaginlər ilə qarşıdurmalara səbəb ola bilər.

Daha yaxşı bir yanaşma, daxili növbə mexanizmindən istifadə edərək JavaScript-in WordPress-ə düzgün yüklənməsi olacaqdır.

Tema başlığınızın şablonundan stil cədvəlinə keçid etmək əvəzinə, temanın funksiyaları.php faylına və ya bir sayt xüsusi plaginə aşağıdakı kodu əlavə edə bilərsiniz.

 
 function wpb_load_fa() {
 
 wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
 
 }
 
 add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
 
 

Metod 2:

İkinci üsul asan deyil, ancaq Font Awesome simvolundakı şriftləri öz veb saytınıza yerləşdirməyə imkan verəcəkdir.

Əvvəlcə şrift paketini kompüterinizə yükləmək üçün Font Awesome veb saytını ziyarət etməlisiniz.

Simge şriftini kompüterinizə yükləyin

Sadəcə simge şriftlərini yükləyin və paketi açın.

İndi bir FTP müştəri istifadə edərək WordPress hostingə qoşulmalı və WordPress tema qovluğuna getməlisən.

Orada yeni bir qovluq yaratmalı və onu mənbələr adlandırmalısınız. Sonra, simge şrift qovluğunun məzmununu veb hosting serverinizdəki şrift qovluğuna yükləməlisiniz.

Simge şriftləri WordPress mövzusuna yükləyin

Artıq WordPress mövzusuna simge şriftləri yükləməyə hazırsınız. Bu kodu yalnız temanın funksiyaları.php faylına və ya bir sayt üçün xüsusi bir plagin əlavə edin.

 
 function wpb_load_fa() {
 
 wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
 
 }
 
 add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
 
 

WordPress mövzusuna Font Awesome proqramını uğurla yüklədiniz.

İndi WordPress mövzusuna, yazılarına və ya səhifələrinə həqiqi nişanlar əlavə edəcəyiniz hissə gəlir.

WordPress-də simge şriftlərinin əl ilə göstərilməsi

Mövcud nişanların tam siyahısını görmək üçün Font Awesome veb saytına gedin. Istifadə etmək istədiyiniz hər hansı bir simvolu vurun və simge adını görəcəksiniz.

İkonik ad

İşarənin adını kopyalayın və WordPress-də bu kimi istifadə edin.

  
 

Bu simvolu temanın tərz cədvəlində belə tərtib edə bilərsiniz:

 .fa-arrow-alt-circle-up { 
 font-size:50px; 
 color:#FF6600; 
 }
 

Ayrıca fərqli nişanlar birləşdirə və eyni zamanda dizayn edə bilərsiniz. Məsələn, yanındakı nişanlar ilə əlaqələrin siyahısını göstərmək istəyərsən. Onları a altına qoya bilərsiniz

müəyyən bir sinif olan element.

 

Home Library Applications Settings

İndi bunları tema tərz cədvəlinizdə belə tərtib edə bilərsiniz:

 .icons-group-item i { 
 color: #333; 
 font-size: 50px; 
 } 
 .icons-group-item i:hover { 
 color: #FF6600
 } 
 

Ümid edirik ki, bu məqalə WordPress mövzusuna simge şriftlərini asanlıqla necə əlavə etməyinizi öyrənməyə kömək etdi. Həm də WordPress-də naviqasiya menyuları ilə şəkil nişanlarını əlavə etmək barədə təlimimizi nəzərdən keçirə bilərsiniz.

Bu yazını bəyənmisinizsə, kanalımıza abunə olun YouTube WordPress tutorial video izləmək üçün. Bizi də tapa bilərsiniz Twitter y Facebook.