Xüsusi CSS-i bir WordPress-lə işləyən veb-sayta necə əlavə etmək olar – Düzgün yol!

Yeni gələnlər üçün bir WordPress veb saytına CSS əlavə etmək asan məsələ deyil. Ancaq bəzən çox zəruri bir şeydir. Saytınızı (səhifə qurucuları, müxtəlif plaginlər və WordPress mövzu parametrləri ilə və s.) Düzəltməyin bir çox yolu var, lakin bəzən etməlisiniz ki, dizaynın bir və ya iki spesifik tərəfini dəyişdirəsiniz – bu da CSS-in daxil olduğu yerdir. Ancaq bunu necə edirsiniz? WordPress-də haradan başlayırsınız? Qorxma, cavablarımız var …


Budur, bilmək istədiyiniz şey:

WordPress-ə CSS-i necə əlavə etmək olar:

– (Qeyd: HeroPress-in yaradıcısı Topher DeRosia-a video kreditlər

Video Transcript:

Salam! Bu WinningWP ilə Topherdir. Bu videoda xüsusi CSS-in WordPress-ə necə düzgün şəkildə əlavə olunacağına nəzər salacağıq. Bir anlıq saytınızın görünüşünə bir az dəyişiklik etmək istədiyinizi düşünün. Google’u bir az gəzirsən və bir az CSS parçasını taparsan və deyirlər: “Bunu yalnız saytına yerləşdir.” Ancaq hara qoyursan? Və bunun düzgün şəkildə edildiyini necə bilirsiniz? Sənə göstərim. Əvvəlcə CSS-in nə olduğunu müəyyənləşdirməliyik. CSS tətbiq etmək istədiyiniz həqiqətən həqiqətən yalnız iki sahə var. Bunlardan biri dizayn, rəng və s. Ümumi sayt dizaynı üçündür. Digəri məzmun dizaynıdır və özünəməxsus məzmunun görünüşü belədir: görüntü müalicəsi və bloknot ölçüsü və s. Gələcəkdə sayt dizaynınızı dəyişdirmək istəyə bilərsiniz. Tamamilə yeni bir mövzu əldə edin və məzmununuzun necə göründüyü üçün etdiyiniz kiçik çırpınmaları saxlayın. Nə demək istədiyimi sizə göstərim. Burada olduqca sadə bir saytımız var və düzeni təsvir etmək asandır. Üst tərəfdə bir axtarış çubuğu, bir başlıq çubuğu, məzmun sahəsi var və görmək çətindir, çünki boşdur, amma burada yan panelim var. Arxa plan ağ, altbilgi boz və axtarış çubuğu qara rəngdədir. Bunlar mövzu ilə əlaqəli dəyişə biləcəyiniz şeylərdir. Burada məzmunumuz var və şəkillərin sağ hissəsində müəyyən miqdarda padding var və mövzular itivləşdirilmişdir. Bunlar məzmunla əlaqəli dəyişikliklər olacaqdır, buna görə də hər ikisini necə etmək lazım olduğunu nəzərdən keçirək. Sayt dizayn dəyişiklikləri məna verən mövzu ilə əlaqələndirilir. Gələcəkdə mövzunuzu dəyişdirsəniz, CSS-i saxlamaq istəmirsiniz, çünki görünüşün hamısı budur. Beləliklə, cari mövzunu dəyişdirmək istəyirik və sonra bu mövzudan yaxa qurtarsanız onu tərk etmək istəyirik. İki seçiminiz var, biri Customizer, digəri isə style.css düzəlişdir. Nə də çox çətin deyil, lakin Müştəri həqiqətən asanlıqla. Nə demək istədiyimi sizə göstərim. Saytımın başlığını qırmızı rəngə dəyişdirmək istərdim. Beləliklə, edəcəyim ilk şey onun adını tapmaqdır. Chrome-da sağa vurub yoxlayıram. Və burada bu saytda başlıq-əsas deyilir. Deməli, dəyişmək istədiyim budur. İndi mənim saytımın yuxarısında Özelleştir düyməsini basın. Customizer-in alt hissəsinə keçsəm Əlavə CSS-i vura bilərəm. İstifadəsi haqqında bir az təlimat var. Əgər yaxın vurursan, dərhal bura gəlir. Beləliklə, mən sayt başlığı əsas və qırmızı rəngə bükülmüş aşırma formalarına yazacağam. İndi mütləq müfəttişin mənim kimi istifadə etməyini bilməyiniz lazım deyil və fın qırmızı olduğunu bilməyinizə ehtiyac yoxdur. Bu kodu bir veb saytdan əldə etmiş ola bilərsiniz və bu, əladır, özünüzü necə tapacağınızı bilməlisiniz. Burada necə yerləşdirildiyini sizə göstərirəm. İndi orada olduğunu dərc edə bilərsiniz və indi bu nişanı bağlaya bilərəm və orada qırmızı başlıq var. İstədiyiniz qədər orada CSS-i qoya bilərsiniz. İstəyirsinizsə saytınızın bütün dizaynını tamamilə dəyişə bilərsiniz. Ancaq indi sizə CSS-i düzəltməyin başqa yolunu göstərmək istəyirəm. Əvvəl qoyduğum kodu çıxardıb saxlayacağam və indi temanın style.css faylını düzəldəcəyik. Görünüş, Mövzular altındakı tablosuna getmək üçün gedir. İndi aktiv mövzu həmişə yuxarıdan solda. Həqiqətən yalnız bir uşaq mövzusundan istifadə edirsinizsə bu xüsusi metodu etmək istəyirsiniz. Burada quraşdırmanı hazırladığımı görə bilərəm, amma aktiv mövzum – uşaq mövzusudur. Bu, bir yeniləmə edərsə, uşaq mövzusunda olacaq özəlləmələrimi silməməsi və uşaq mövzumda yeniləmələr almadıqları üçün uşaq mövzumun heç vaxt yeniləmə əldə etməməsi üçün edir. Bir uşaq mövzusundan istifadə etdiyinizi təsdiqləyə bilsəniz, burada menyuda Redaktor üçün bir əlaqə var. Budur, onlar sizə uşaq mövzularında dediyim hər şeyi danışacaqlar. Buna görə davam edin və uşaq mövzusundan istifadə etdiyinizi başa düşdüyünüz klikləyin. Gələn ilk fayl sizin style.css. Həmişə belə olacaq. Və bu mətnin hamısı mövzu haqqında məlumatdır. Buna heç bir əhəmiyyət verməyiniz lazım deyil. Sağdan dibinə gedin və burada “minik tərzinizi aşağıda əlavə edin” deyildiyini görəcəksiniz. Bu faylda hər hansı bir düzəliş etməzdən əvvəl onun ehtiyat nüsxəsini götürməyinizi tövsiyə etmək istəyirəm. Bu, həqiqətən sadədir. Sadəcə başqa bir yerə köçürüb başqa yerə köçürmək niyyətindəyik. Buna görə Windows-da olsanız, İdarə + A və ya Mac-da Komanda + A. edə bilərsiniz. Hər şeyi vurğulayacaq və ya İdarəetmə və ya Əmr etmək + C və onu kopyalayacaqdır. Mətn saxlaya bilən hər hansı digər fayla yapışdıra bilərsiniz. Həqiqətən qalıcı saxlamağınız lazım deyil, yalnız onu redaktə edərkən qoruyursunuz və bu mükəmməl gedirsə, sadəcə bir dəfə ehtiyat nüsxənizi silirsiniz. Ancaq bu pozulur və itirildiyiniz təqdirdə onu silə və kopyaladığınız şeyi geri yapışdıra bilərsiniz. Buna görə Customizer ilə etdiyim eyni koda yapışdırıb Fayl Yeniləmə düyməsini basın. Və sonra saytımı yenidən yükləyin. Biz də var, o da qırmızıdır. İndi Customizer çox asandırsa, niyə heç stil.css faylınızı qoymaq istəyərdiniz? Səbəb, style.css faylınızın Customizer-dən xeyli əvvəl yüklənməsidir. Buna görə Customizer ilə etmisinizsə, səhifənin tam yüklədiyi bir nümunə əldə edə bilərsiniz, bir ikinci hissəyə ağ görünür və sonra qırmızıya çırpılır. Ancaq onu stil.css-ə qoysan, bu etməz. Müştərini sevdiyim şeylərdən biri də dəyişikliklərinizi yazdığınız zaman görə biləcəyinizdir. Buna görə mənim üçün ümumi bir iş axını bütün CSS-ni Customizatorda yazmaq və sonra onu stil.css-ə köçürməkdir. Bunu etmək lazım deyil. Bütün bunları Customizer-də tərk edə bilərsiniz və yalnız əbədi tapmaq üçün işləyəcəkdir. Yalnız tövsiyəmə başlayarsan, yalnız Müştərini et. Tez, asandır, ağrısızdır və mənfi cəhətlər çox azdır. Təcrübə etmək və ayaqlarınızı WordPress-in daxili işlərindən bir az islamaq istəsəniz, davam edin və style.css faylınızı düzəldin. İndi işləmək istədiyiniz digər CSS növü məzmununuzu idarə etmək üçündür. İndi bunun mövzuya bağlanmasını istəmirsiniz. Mövzular dəyişdirsən də yapışmağını istəyirsən. İstənilən mövzu istifadə etməyinizdən asılı olmayaraq, hər zaman görüntüləmə mövzularının işarələnməməsini istəyə bilərsiniz. Bu vəziyyətdə bir plugin istifadə etmək istəyirsən. Sadə Xüsusi CSS adlı bu plagindən istifadə edirəm. Görünüş altında Xüsusi CSS menyusu var. Və burada sadəcə CSS yazmağa imkan verir. Buna görə bu başlıqın adını öyrənəcəyəm. Mən sağa vurub yoxlayıram. Və deyilir ki, bu wp-caption-text adlanır. Buna görə burada .wp-caption-text, font-style: normal; Yenilənən Xüsusi CSS düyməsini basın və sonra səhifəmizi yenidən yükləyəcəyik. Artıq itiv olmadığını görə bilərsiniz. Beləliklə, indi mövzumu dəyişmək üçün gedirəm. Görəcəksiniz ki, görüntü başlığım hələ də kursivlənməmişdir və yenə də qırmızı bir başlıq anlayışı yoxa çıxdı, çünki bütün kod digər mövzuya bağlandı. Yəni nəzərdən keçirmək üçün mövzunuzu idarə etmək istəyirsinizsə ya Customizatordan istifadə edərdiniz, ya da Görünüş altında redaktora gedin və tərz cədvəlinizi düzəldin. Məzmununuz üçün CSS’i idarə etmək istəyirsinizsə, onda CSS’inizi mövzudan ayrı saxlayan bir plagin istəyirsiniz. Xüsusi CSS kimi bir şey. WordPress haqqında daha çox məlumat əldə etmək istəyirsinizsə, www.winningwp.com saytına baxın.

Daha çox videoya baxın …

Əlavə ediləcək bir şey?

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