WordPress-ə Xüsusi Şriftlərin əlavə edilməsi


Xüsusi şriftləri WordPress-ə necə əlavə etmək olar


WordPress saytınız üçün doğru şrift seçmək veb dizayn və veb marka markasının mərkəzi hissəsidir.

Rənglər, şəkillər və digər elementlər, mətbəə kimi böyük bir rol oynayır saytınızın ziyarətçilər tərəfindən necə qəbul edildiyi.

Şükürlər olsun ki, WordPress şriftləri sərbəst şəkildə düzəldə biləcəyiniz çox şeylərdən biridir. İstədiyiniz WordPress saytınızda hər hansı bir pulsuz xüsusi şriftdən çox istifadə edə bilərsiniz.

WordPress şriftləri haqqında bilmək üçün lazım olanları əhatə edəcəyik:

  • A) WordPress-ə Şəxsi şriftləri necə əlavə etmək olar (əl ilə)
  • B) WordPress-də Şəxsi şriftləri necə əlavə etmək olar (plugin vasitəsilə)
  • Nə üçün WordPress-də Xüsusi Şriftlərdən istifadə edirsiniz
  • Xüsusi şriftləri harada tapmaq olar
  • Nəticə

A) Əllə WordPress-ə əlavə şriftləri necə əlavə etmək olar

Əl ilə WordPress-ə xüsusi şriftlər əlavə etmək məsələsinə gəldikdə, üç əsas seçiminiz var: HTML, JavaScript və CSS. Hər bir üsulun müsbət və mənfi cəhətləri var və sizin üçün ən uyğun olanı sizin parametrlərinizdən asılıdır. Narahat olmayın, hər birini ətraflı şəkildə nəzərdən keçirəcəyik.

1. CSS istifadə və @import

Ən az tövsiyə olunan metoddan başlayaq. Google Fonts-dan xüsusi yazı tiplərini quraşdırmağı planlaşdırırsınızsa, bunun bir etiketli nişan olduğunu gördünüz @import. Xidmət sizə bir parça CSS kodu verir.

google şriftlərində idxal nişanı

Onu olduğu kimi götürüb başlığınıza (daha aşağıda göstərilənlərə) daxil edə bilərsiniz və ya olmadan >mövzunun əvvəlinə mötərizələr (və ya daha yaxşı, uşaq mövzusu) stil.css fayl.

/ *
Mövzunun adı: iyirmi on yeddi uşaq
Mövzu URI: https://wordpress.org/txem/twentyseventeen/
Şablon: iyirmi on yeddi
Müəllif: WordPress komandası
Müəllif URI: https://wordpress.org/
Versiya: 1.0

* /

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


/ * əlavə CSS bura gedir * /

Bunu etmək, şriftlərinizi stil cədvəlindən saytınıza yükləyəcəkdir. Sadə bir həll kimi görünür, elə deyilmi? Niyə o zaman ən az tövsiyə olunur?

Səbəb performansla bağlı problemlərdir. Istifadə olunur @import artıq getmək üçün tövsiyə olunan yol deyil, çünki brauzerlərin birdən-birə bir neçə stil yükləməsinə mane olur. Nəticə: səhifənin yükləmə vaxtının yavaş olması. Bacardığınız təqdirdə ondan uzaq durun.

2. Bir WordPress Şablon Faylından istifadə

Saytınızdakı şriftləri əldə etmək üçün ikinci üsul, şrift kitabxanaları tərəfindən verilmiş kodu götürmək və özünüzə köçürməkdir başlıq.php şablon faylı. Ən çox standart WordPress mövzuları buna malikdir.

Arasında bir yerə qoymağınızdan əmin olun mötərizələr. Beləliklə, səhifə yüklənəndə şriftiniz yüklənəcəkdir.

google şriftlər kodunu wordpress başlığına daxil edin

Uşaq mövzusundan istifadə edirsinizsə, ana mövzusunun kopyalayacağına əmin olun başlıq.php uşağın mövzu qovluğuna daxil edin və orada dəyişiklik edin.

Bəzi mövzular arxa plan vasitəsilə başlıq və altbilgiyə xüsusi kodu əlavə etməyə imkan verən parametrlərlə gəlir. Bu da əlverişli bir seçimdir.

3. istifadə @ font-face

İndiyə qədər yalnız başqa bir yerdə, yəni Google və Adobe serverlərində yerləşdirilən WordPress-də xüsusi şriftlərdən necə istifadə ediləcəyi barədə danışdıq. Bununla yanaşı, öz saytınızda şriftlər yerləşdirmək və oradan ziyarətçilərin brauzerlərinə təqdim etmək də mümkündür.

Bunu etmək üçün əvvəlcə şrifti yükləməlisiniz. Google Şriftlərindəki yükləmə düyməsini xatırlayırsınız? Bu indi lazımlı olacaq. Digər provayderlər şriftləri yükləməyinizə imkan verir.

Etdikdə, onu bir veb şriftində əldə etdiyinizə əmin olun. Bu TTF, OTF və ya WOFF deməkdir. Bu barədə daha çox məlumat tapa bilərsiniz burada. Doğru veb şrift formatınız yoxdursa, istifadə edə bilərsiniz bu xidmət şriftinizi dəstəklənən birinə çevirmək üçün.

Şrift sənədləriniz hazır olduqdan sonra onları FTP vasitəsilə WordPress saytınıza yükləməlisiniz. Onları saxlamaq üçün yaxşı bir yer, adlı uşağınızın mövzusunun alt bölməsindədir şriftlər (yaradıcı, bilirik).

Bundan sonra, şriftinizi şriftə yükləməlisiniz @ font-face. Görünən budur:

@ font-face {
şrift ailəsi: Roboto;
src: url (http: //localhost/wordpress/wp-content/txem/twentyseventeen-child/fonts/Roboto-Regular.ttf);
şrift çəkisi: normal;
}

Şriftin adını və yerləşdiyi yeri öz saytınızda dəyişdirməyi unutmayın. Bundan sonra yeni xüsusi şriftiniz istifadəyə yararlı olacaq.

Ancaq bu da ən yaxşı həll yolu deyil, xüsusən performans baxımından mükəmməldir. Google serverləri, ehtimal ki, olduğunuzdan daha sürətli və buna görə orijinal şriftləri yükləmək daha yaxşı həll yolu tapacaqdır.

4. Enteueing şriftləri - "WordPress Way"

Doğrudan da WordPress-ə xüsusi şriftlər əlavə etmək istəsəniz, istifadə edəcəksiniz funksiyaları.php faylı (hazırda aktiv mövzu qovluğunun içərisində) və funksiyanı  wp_enqueue_script və ya wp_enqueue_style.

Onların köməyi ilə şrift saytları tərəfindən verilmiş kod parçaları götürə bilərik. Ancaq onları bir fayla kopyalamaq əvəzinə bir funksiya ilə başlıqlara əlavə edəcəyik.

Arada nə fərq var wp_enqueue_scriptwp_enqueue_style? Onların adlarından göründüyü kimi biri skript əlavə etmək üçün, biri stil cədvəlləri üçün. Hansı birini istifadə etmək düzgündür, xüsusi şriftlərinizin mənbələrdən necə təmin olunduğuna bağlıdır.

Məsələn, Google Fonts sizə stil cədvəlləri şəklində şriftlər verir. Bu halda onları WordPress saytınıza bu şəkildə əlavə edərdiniz:

funksiya add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scriptts', 'add_google_fonts');

Bunun əksinə olaraq Adobe Edge Web Fonts-dan gələn şriftlər JavaScript olaraq gəlir. Buna görə də onları saytınızda əyləndirmək üçün kod bu kimi görünür:

funksiya add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scriptts', 'add_adobe_fonts');

Bu qədər çətin deyildimi? Üstəlik, bunu WordPress şəkildə etməyiniz üçün əlavə xal qazanırsınız.

5. Stil cədvəlinizdə Xüsusi Şriftlərə zəng edin

Artıq şriftlər saytınıza əlavə olundu və rəsmi olaraq istifadə edə bilərsiniz. Bunun üçün üslub vərəqinizə yeni şrift üçün bəyannamə əlavə etmək qalır. Məsələn, başlıq yazılarınızın şriftini dəyişdirmək üçün bu kimi bir şey istifadə edərdiniz:

h1,
h2,
h3,
h4,
h5,
h6 {
şrift ailəsi: 'Roboto';
}

Qeyd: İstifadə etdiyiniz xidmətin şriftləriniz üçün CSS bəyannaməsini necə göstərdiyinə diqqət yetirin. Test saytımızda Adobe Edge Veb Şriftlərini işə sala bilmədik, çünki onlar CSS-də Açıq Sans deyirlər. açıq-saçıq əksinə olaraq 'Açıq Sans' Google Şriftlərində.

Bu belədir. Xüsusi şriftləri WordPress-ə əl ilə necə əlavə edəcəyinizi indi bilirsiniz. Özünüzü təbrik edin, bu növbəti səviyyəli bilikdir! Aydındır ki, eyni hərəkətlər pluginlər vasitəsilə mümkündür. Bu barədə növbəti danışacağıq.

B) Plugin vasitəsilə WordPress-ə Xüsusi Şriftləri necə əlavə etmək olar

Platformaya xüsusi şriftlər əlavə etmək üçün bir neçə plugin həlli olmadıqda, WordPress sferası heç nə olmazdı. İstifadə qaydalarına baxacağıq Asan Google Şriftləri, bu sahədə ən populyar plaginlərdən biridir.

1. Plugini quraşdırın

İlk addım plugin quraşdırmaqdır. Bunun üçün başınıza keçin Pluginlər> Yeni quraşdırın. Sonra, plugin adını axtarın. Axtarış nəticələrində vurun İndi quraşdırın və saytınızda olduqdan sonra plagini aktivləşdirin.

2. Saytınızdakı Şriftləri əlavə edin / dəyişdirin

Plugin aktiv olduqda, adlı yeni bir menyu maddəsi tapırsınız Tipoqrafiya altında Görünüş> Fərdiləşdirin.

wordpress Customizer-də mətbəə menyusu

Tıkladığınız zaman seçin Defolt tipoqrafiya, paraqrafların və başlıqların şriftini dəyişdirmək üçün nəzarət siyahısını tapırsınız.

wordpress özelleştiricisinde asan google şrift parametrləri

Onlardan istifadə həqiqətən sadədir. Sadəcə dediyi yerə açılan menyunu vurun Şrifti redaktə edin saytınızın bir hissəsi üçün onu dəyişdirmək istədiyiniz üçün. Bu menyuya daxil olmaq imkanı verir:

asan google şriftləri dəyişdirin

Budur, ən vacib hissə altındadır Şrift Ailəsi. Burada bütün Google Font kitabxanasından yeni bir şrift növü seçə bilərsiniz (istifadə edin) Skript / Alt Xüsusi işarələri olanlara şrift seçimini məhdudlaşdırmaq üçün).

Şriftlər standart, serif, sans-serif, ekran, əl yazısı və monosfer şriftləri ilə sifariş olunur. Bununla yanaşı, onları sadəcə adı ilə axtara bilərsiniz.

Bir şriftə vurduğunuzda, sağdakı dəyişiklikləri real vaxt rejimində görə bilərsiniz.

asan şriftlərdə xüsusi şrift dəyişdirdi

3. Şrifti konfiqurasiya edin

Bir şrift seçdikdən sonra mətbəəinizi daha da inkişaf etdirmək üçün bir çox seçim var.

Əvvəla, eyni adın menyusu altında şrift ölçüsünü / tərzini dəyişə bilərsiniz. Bu hərflərin qalınlığını idarə edir.

Bundan əlavə, altında Mətn Dekorasiyası, alt, xətt və üstü əlavə edə bilirsən. Mətn Dəyişməsi eyni zamanda bütün hərfləri, bütün kiçik hərfləri təyin etmək və ya hər hərfin başlığını təyin etmək imkanı verir. Altında Görünüş sekmeli üstündə, şrift rəngi, fon rəngi, şrift ölçüsü, xətt boyu və məktub boşluğuna nəzarət edə bilərsiniz.

google şriftlərində görünüş parametrləri

Nəhayət, Yerləşdirmə margin, doldurma, haşiyə, haşiyə radiusu və ekran kimi digər parametrləri dəyişdirməyə imkan verir.

google şriftlərində yerləşdirmə parametrləri

Bir sözlə, saytınızdakı şriftləri tamamilə öz istəyinizə uyğunlaşdıra bilməlisiniz. Asandır, elə deyilmi? Vurmağı unutmayın Saxla və Yayın dəyişikliklərinizdən razı qaldığınız zaman yuxarıda.

İşləmir, Nə Edirəm?

Bəzən saytınızdakı bəzi şriftləri dəyişdirə bilmirsiniz. Adətən istifadə etdiyiniz mövzu onları stil etmək üçün standart olmayan CSS dərsləri və seçicilərlə birlikdə olur.

Məsələn, iyirmi on altı mövzusunda, blog yazılarının adları yalnız H1 olaraq təyin edilmir, eyni zamanda CSS adlı bir sinif var .giriş başlığı. Bu səbəbdən, plugin onları dəyişdirə bilmir.

Bu problemi aradan qaldırmaq üçün sözdə bir yaratmaq lazımdır şriftə nəzarət altında Parametrlər> Google Şriftləri.

google şriftlərində şrift nəzarətini əlavə edin

CSS seçicilərini yeni idarəetmə ilə əlaqələndirə və lazım olduqda qüvvəni ləğv edə bilərsiniz. Bunu etdikdən sonra, yeni şrift nəzarət altındakı WordPress Customizer-də əlavə seçim kimi mövcuddur Tema tipoqrafiyası. Asan peasy.

Digər Xüsusi Şriftlər WordPress Pluginləri

Xüsusi şriftlər əlavə etmək üçün mövcud digər WordPress plaginləri də var:

  • İstənilən Şriftdən istifadə edin - Hər hansı bir CSS olmadan yüklənmiş şriftlərdən istifadə etməyinizə kömək edir. Öz serverinizdə şriftlər yerləşdirir və həmçinin şrift formatları üçün dönüşüm alətlərini təklif edir.
  • WordPress üçün yazılmış şriftlər - Adobe’in şriftlərindən istifadə edin Typekit xidmət (qeydiyyatdan keçməlisiniz). Gələn kodları və xüsusi CSS-ni birbaşa plugin-ə daxil etməyə imkan verir.
  • TK Google Şriftləri - Google Fonts təcrübəsini WordPress yenilənməsinə köçürən Google şriftlərini yerləşdirmək üçün alternativ bir həll. Bir önizleme və xüsusi mətn ilə şriftləri sınayın, sonra WordPress Customizer içərisində dəyişdirin.

Niyə WordPress Veb saytınızda Xüsusi Şriftlərdən istifadə edin?

Tipoqrafiya özü bir elmdir və burada veb dizaynda şriftlərin istifadəsi barədə tam bir kurs verə bilməyəcəyik. Axı, bu yalnız şriftə aid deyil, həm də ölçüsü, əyri, qalınlığı və başqa bir çox şeydir. Ancaq biz bacarmaq WordPress saytınızda xüsusi şriftlərdən istifadə etməyin yaxşı bir fikir olduğunu əhatə edin.

1. Tipoqrafiya İlk təəssüratın bir hissəsidir

Əvvəla, istifadə etdiyiniz şrift saytınızın necə qəbul olunduğuna çox təsir göstərir. Saytınız əyləncəli və oynaqdır? Bir iş peşəkarısınız? Ziyarətçilər bunu bir baxışdan qərar verirlər və mətbəəiniz onların qavranılmasında böyük rol oynayır.

2. Şriftlər düşündüyünüzdən daha çox təsir göstərir

Bu, öyrənmək, mətnləri yadda saxlamaq və hətta əhval-ruhiyyənizə təsir edə bilər.

Məsələn, birində tədqiqat, bəzi mətnin oxunmasına sərf olunan vaxtı artırmaq istəyirsinizsə, serif şriftdən istifadə etməyiniz lazım olduğu qeyd edildi. Ancaq qısa bir müddətdə daha çox oxumaq istəyirsinizsə, sans-serif şriftinə keçməlisiniz.

Başqa bir araşdırma insanlara fərqli tipli eyni təlim təlimlərini göstərdi. Sonra iştirakçılardan göstərilən təlimatları başa çatdırmaq üçün nə qədər vaxt lazım olacağını təxmin etmələrini istədilər. Təəccüblü, daha mürəkkəb şriftə sahib olanların, daha sadə şriftli qrupdan daha uzun olacağını təxmin etdilər. Nəticədə, məşq qaydalarını izləmək şansları az idi.

Xüsusi şriftləri harada tapmaq olar

1. Xüsusi mətbəə tapmaq üçün Google Şriftlərdən istifadə edin

Baxacağımız ilk xidmətdir Google Şriftləri. Adından göründüyü kimi, 800+ fərqli şriftlər təqdim edən Google tərəfindən təqdim olunan bir xidmətdir. İstifadəsi pulsuzdur. Hər kəs üçün.

Ondan istifadə qaydaları:

2. Doğru şrifti tapın

İlk dəfə Google Şriftlər səhifəsinə girdiyinizdə (yalnız Google Axtarışa yazın) bu, görəcəksiniz:

wordpress google fonts ana səhifəsində xüsusi şriftləri necə əlavə etmək olar

İstifadəçi interfeysi, məqsədiniz üçün uyğun şrift tapmağınız üçün hazırlanmışdır. Zaten bir şrift varsa, adını sağ tərəfdəki axtarış sahəsinə yaza bilərsiniz.

Yoxdursa, şriftləri müxtəlif yollarla, məsələn, kateqoriya üzrə süzgəcdən keçirə bilərsiniz:

  • Serif - Times New Roman kimi sonunda sərt xətləri olan şriftlər.
  • Sans-Serif - Helvetica kimi fiqurlarsız sadə şriftlər. Bu veb saytında istifadə olunan şriftlər buna bir nümunədir.
  • Göstərin - Başlıqlar kimi daha böyük ölçülərdə istifadə edilə bilən yazılar.
  • Əl yazısı - Mətninizin əl ilə yazıldığını görmək istərdinizmi? Sonra bu sizin qəbulunuzdur.
  • Monosos - Bütün simvolların eyni yer tutduğu tipoqrafiya, bunun kimi.

Digər filtrlərə aşağıdakılar daxildir:

  • Çeşidləmə - Populyar, tarix əlavə edilmiş və ya əlifba sırası ilə şriftləri sırala.
  • Dillər -Şrift seçiminizi Latın əlifbasında yazılmamış ərəb, Tay və ya Vyetnam kimi dillərə məhdudlaşdırın.
  • Bir sıra üslublar -Bir şriftin müxtəlif qalın, iti, qalın və daha çox yerlərdə olub-olmamasını ifadə edən neçə stil lazım olduğunu seçin..
  • Qalınlığı - Şriftinizin istədiyiniz qalınlığını seçin.
  • Kəsik - Qalınlığı eynidir, ancaq meyl üçün. Düzdən demək olar ki, üfüqə qədər dəyişir.
  • Genişlik - Şriftləri hərflərinin və aralıqlarının genişliyinə görə süzün.

Hər hansı bir filtr tətbiq edərkən axtarış nəticələriniz real vaxt rejimində tənzimlənir. Solda, kateqoriya və nümunə cümlələrinizdə mövcud şriftləri görəcəksiniz.

Bir şrift üzərində gəzdikdə yuxarıdakı açılan menyulardan istifadə edərək Google Fonts-a nümunə paraqrafını, bütün əlifba və ya rəqəmləri göstərmək üçün istifadə edə bilərsiniz. Ayrıca cümlə sahəsini vurub istədiyinizi yaza bilərsiniz.

nümunə mətni google şriftlərində redaktə edin

Bundan əlavə, şriftin tərzini və ölçüsünü dəyişdirmək üçün seçimlər var. Dəyişikliklər etdikdə, onları bütün axtarış nəticələrinizə tətbiq etmək seçimi alacaqsınız. Nəhayət, tıklayarak şrift təfərrüatları səhifəsinə baxın Nümunəyə baxın.

google şriftlərindəki şrift detalları səhifəsi

3. Kolleksiyanıza şrift əlavə edin

Müəyyən bir şrift istəsəniz, kolleksiyanıza əlavə etmək üçün yuxarı sağ küncdəki qırmızı plyus işarəsindən istifadə edə bilərsiniz. Bunu etmək, seçdiyiniz bütün şriftləri gördüyünüz altındakı bir menyu açacaqdır.

google şriftlərində seçilmiş şriftlər

Qeyd edək ki, birdən çox şrift ailəsi əlavə edə bilərsiniz. Bu, məsələn, bədən nüsxəsi üçün birini, digəri üçün başlıqları götürəndə məna verir.

4. Şrift parametrlərini fərdiləşdirin

Kolleksiyanızdan razı qaldıqdan sonra alt menyunu vurun. Bunu etmək bu ekranı açacaq:

google şriftlərindəki yazı parametrləri

Gördüyünüz kimi, saytınıza şriftlər yerləşdirmək və istifadə etmək üçün bəzi kod parçaları tapa bilərsiniz. Bu sonradan vacib olacaq. Hələlik deyilən nişanı vurun Özəlləşdirmək. Bunu etmək sizi bu menyuya aparır:

Google şriftlərində şriftləri düzəldin

Budur, sual altındakı şriftlərin üslublarını seçə bilərsiniz. Fərqli ölçüdə şriftlərdən istifadə etmək istəyirsinizsə, bu çox vacibdir.

Ancaq ehtiyatlı olun: saytınıza nə qədər çox üslub yüklənsə, o qədər də yavaşlaşacaq (Google Fonts hətta yuxarı sağdakı cari kolleksiyanıza yükləmə sürətini göstərir). Beləliklə, həqiqətən ehtiyacınız olanı düşünün və yalnız bunu seçin. Yeri gəlmişkən, WordPress-i sürətləndirə biləcəyiniz daha çox yol var.

Standart Latın əlifbasından başqa hər hansı bir dilə ehtiyacınız varsa, onu altdan da seçdiyinizə əmin olun.

google şriftlərində şrift dillərini seçin

Bundan əlavə, bilmək lazımdır ki, yuxarıdakı iki ox nişanıdır.

google şriftlərində yükləyin və paylaşın

Sol tərəfdə olan, yazı kolleksiyanızı nəzərdən keçirməyə və bölüşməyə imkan verir. Bunu etməyi seçdiyiniz zaman, nümunə mətnini daxil edə və bir anda bütün şriftlərdə görə biləcəyiniz geniş bir səhifə açır. Bu səhifə də insanlarla bölüşmək üçün yaxşıdır.

Daha önəmlisi yanındakı yükləmə düyməsidir. Bunun üzərinə tıklayarak masaüstündeki maşında istifadə etmək üçün şrift fayllarını yükləyə bilərsiniz (məsələn, Photoshop-da). İstifadə edin Skyfonts onları aktuallaşdırmaq.

Daha sonra, bu faylları serverinizə yükləməyin və birbaşa saytınızdakı şriftlərin yerləşdirilməsinin yolunu göstərəcəyik. Gələcək üçün bunu unutmayın. Hələ ki, sizə ikinci, oxşar şrift kitabxanasını göstərəcəyik.

Xüsusi Şriftlər üçün Əlavə Mənbə

  • Tövsiyə etdiyimiz 15+ veb təhlükəsiz şriftlər

Yuxarıda göstərilənlərlə özünüz üçün bir şey tapmağı bacarmalısınız. Son bir ipucu - şriftləri necə düzgün birləşdirməyi bilmirsinizsə, istifadə edin Font Cütlük dizaynerlər sizin üçün ayaqüstü işlər gördülər.

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