Wordpress -da shaffof fonni qanday yaratish kerak. Shaffof fon yoki CSS bilan matn

Fon - bu saytning barcha elementlarini ko'rsatadigan rasm. Yoki bu rasm emas, balki qattiq yoki gradient rang bo'lishi mumkin.

Ko'pgina shablonlar fonni sozlash va o'zgartirishni qo'llab -quvvatlamaydi. Biroq, hamma mavzular ham bunga qodir emas, ayniqsa bepul nusxalar haqida. Ammo saytingizda WordPress fonini sozlamalarda o'zgartirishingiz mumkin bo'lgan bunday shablon o'rnatilgan bo'lsa ham, bu juda kam operatsiya bo'ladi, chunki o'zgarishlar darhol butun saytga qo'llaniladi. Oddiy shablonlarda faqat ba'zi xabarlar, toifalar yoki sahifalar uchun fonni o'zgartirish mumkin emas.

Ushbu maqolada biz sizga bu muammoni bir necha marta bosish orqali hal qiladigan ikkita oddiy plagin haqida aytib beramiz.

Har bir sahifa uchun fon

Bu WordPress fonini boshqarishga imkon beradigan eng oddiy plagin. O'rnatish va faollashtirishdan so'ng, sayt boshqaruv panelida hech qanday sozlamalar va qo'shimcha elementlar paydo bo'lmaydi. Faqat har bir xabar va sahifaning sahifasida individual fon tasvirini qo'shish imkonini beradigan yangi variant paydo bo'ladi.

WordPress fon uchun tanlangan rasmga bir nechta effektlarni qo'llash mumkin:

  • Takrorlashni tanlang - gorizontal yoki vertikal;
  • Rasmni sayt bilan aylantiriladigan qilib qo'ying yoki sozlang;
  • WordPress fon yo'nalishini tanlang - o'ng, chap, markaz;
  • Rasmlar o'rniga oddiy to'ldirish rangini tanlang.

Plagin bepul. Bundan tashqari, har bir yuklangan WordPress fonini ushbu qo'shimchaning o'rnatilgan muharririda tahrir qilish mumkin.

To'liq ekranli fon rasmlari Pro

Va bu plagin bilan ishlash qiyinroq, bu sizga WordPress fonida ko'proq ishlashga imkon beradi. U to'lanadi va 13 dollar turadi. Plaginni faollashtirishni o'rnatgandan so'ng, uning menyusi elementi boshqaruv panelida paydo bo'ladi. U rasmlar galereyasini o'z ichiga oladi, bu erda siz xohlagan vaqtda rasm qo'shishingiz, o'chirishingiz va tahrir qilishingiz mumkin.

Bunga qo'shimcha ravishda, har qanday xabar yoki sahifa uchun WordPress fonini belgilashingiz mumkin, ularni identifikatori bo'yicha bosh sahifa, har qanday kategoriya, arxiv sahifalari va hatto 404 sahifa.

Ushbu plaginning keng imkoniyatlari birinchisidagi funksiya bilan to'ldiriladi - har bir sahifa va postni qo'shish uchun sahifada u yoki bu o'rnatish variantlari qo'shiladi. fon rasmi, muharrir va har xil effektlar bilan.

Umuman olganda, WordPress fonini yaratish uchun ajoyib vosita. Ham pulli, ham bepul plaginlar bu bilan bog'liq ko'plab vazifalarga mos keladi.


Bugun men o'z amaliyotimda menyu fonini qo'yish kerakligini aniqladim oshkoralik... Albatta, buni picture.png yordamida qilish imkoniyati bor edi, lekin baribir qazishga qaror qildim shaffof fon bilan CSS yordamida ... Bu juda oddiy bo'lib chiqdi :)

HTML-kodda biz "shaffoflik" ni yozamiz, buning uchun siz ma'lum shaffoflikni o'rnatishingiz kerak bo'ladi:

FON (fon: rgba (200, 54, 54, 0,5);)

Shunday qilib, men uchta asosiy rang uchun qiymatlarni belgilash orqali fon rangini ko'rsatdim (qizil - r, yashil - g, ko'k - b) va fon shaffofligi 50% (alfa - a) bitta mulk bilan. Rang qiymatlari 0 dan 255 gacha, shaffoflik uchun esa 0,0 dan 1,0 gacha bo'ladi.

Mulk rgba boshqa barcha elementlar uchun ham amal qiladi. Ammo agar ushbu sinfdagi barcha elementlar uchun shaffoflikni o'rnatish zarur bo'lsa, siz bu xususiyatdan foydalanishingiz mumkin shaffoflik, bu butun element yoki butun sahifa uchun shaffoflikni o'rnatadi. keyin kod shunday bo'ladi:

FON (shaffoflik: 0,5;)

Bunday holda, ushbu sinfdagi barcha elementlar shaffof bo'ladi, shu jumladan rasm va matn shaffof bo'ladi.

Obuna bo'ling va pochta orqali foydali maqolalarni oling!

Bizning blogimizdagi boshqa ajoyib maqolalar

  • Bilamanki, amalda shunday holat tez -tez uchrab turadiki, sayt egasi bir necha bor "noldan" saytni "olib tashlaydi" yoki yaratadi va natijada kerakli natijaga erishmaydi. Bunday holda, quyidagicha ...
  • Hamkorlik materiallari! Doimiy konsentratsiya orqali qidiruv tizimlari to'g'ridan -to'g'ri Internet foydalanuvchisi va so'nggi yangilanishlar ko'rsatkichlari Google algoritmlari, sayt egalari yuklanish tezligiga e'tibor berishlari yanada muhimroq bo'ldi ...
  • Qarang, agar sizning vazifangiz "kalit kalitli veb -saytni ishlab chiqish" bo'lsa - bu havolaga o'ting va vazifani bizga topshiring. Agar sizga texnik topshiriqning namunasi kerak bo'lsa, "Texnik topshiriqni yaratish bo'yicha topshiriq ..." maqolasiga qarang.
  • Hamkorlik materiallari! - Maqolangizni nashr qilmoqchimisiz? Ko'p veb -sayt egalari uchun SEO qiyin vazifa kabi ko'rinadi. Aslida bu haqiqat emas. Rag'batlantirishga yuqori malakali mutaxassislarni jalb qilish juda ...


Yaqinda echimlar haqida gaplashdik - bundan mustasno CSS yordamida va Javascript ham bu vazifani bajaradi 2 WordPress plaginlari... Men bugun ularni batafsil ko'rib chiqadiganlardan biri bu fon menejeri. Hamma mavzularda ham sayt fonini o'zgartirish sozlamalari mavjud emas va har bir foydalanuvchi uni andozadagi uslublar orqali o'zgartira olmaydi. Bundan tashqari, modul bir nechta qo'shimcha qurilmalarga ega qiziqarli xususiyatlar, shuning uchun uni batafsilroq o'rganishga qaror qilindi.

Yangilanish: 08.11.2018 Afsuski, modul uzoq vaqt davomida yangilanmagan va hozirda u rasmiy Plugin Directory omboridan butunlay yo'q bo'lib ketgan. Maqolani o'qing yoki plaginlar tanlovini ko'ring.

Siz ushbu sahifada modulni topishingiz yoki WordPress administrator maydonidan nom bilan o'rnatishingiz mumkin. Bu yozilish vaqtida u allaqachon ancha eski hisoblangan, tk. qo'llab -quvvatlanadigan versiya 3.7.8 bilan tugadi. Afsuski, plagin hozirda qo'llab -quvvatlanmasligi mumkin. Biroq, men uni muvaffaqiyatli sinovdan o'tkazdim oxirgi versiya tizimlar 4.2.1. Bundan tashqari, har bir modulda 30 mingta yuklanish topilmaydi.

Background Manager plaginining asosiy vazifasi - har bir yangi tashrif buyuruvchi uchun tasodifiy fonni ko'rsatish yoki bir nechta rasmlardan slayd -shou yaratish. Ochig'ini aytganda, dastlab men modul shunchaki bosiladigan fonni yaratishga yordam beradi deb o'ylagandim, lekin uning vazifalari biroz boshqacha. Bu sizga imkon beradi:

  • rasmlar to'plamini yarating, ulardan rasmlar saytning foniga kiritiladi. Siz ularni bu erdan yuklab olishingiz mumkin mahalliy kompyuter, WordPress media kutubxonasi yoki boshqa modullar;
  • fonning joylashishini, uning "replikatsiyasini" aniqlang (agar u naqsh bo'lsa);
  • fonda qoplamali naqshlar;
  • yuklangandan so'ng butun tasvirni ko'ring va asta -sekin yuqoridan pastgacha paydo bo'lguncha kutmang (agar siz sekin Internetdan foydalansangiz);
  • fon tasvirini o'rnating ma'lum sahifalar: asosiy, bo'limlar, arxivlar yoki xabarlar;
  • Google Analytics orqali konvertatsiya statistikasini hisoblash bilan fon uchun havola qo'shing.

Ko'rib turganingizdek, juda qiziqarli variantlar to'plami. Bu global imkoniyatlar haqida, lekin "Background Manager" moduli har xil tafsilotlarga to'la. Shunday qilib, masalan, siz birlashtirilgan naqshning shaffofligini tanlashingiz, slayd -shouda rasmlar o'rtasida almashish paytida ta'sirini aniqlashingiz mumkin va hokazo.

Modul sozlamalari tashqarisida "bo'limida topasiz. Tashqi ko'rinish" -" Fon ". Aytgancha, sizda bir xil nomdagi ikkita menyu elementi bo'lishi mumkin bo'lgan vaziyat yuzaga keladi. Agar eslasangiz, ayrimlarida WordPress mavzular shunga o'xshash sozlash mavjud. Shunday qilib, Background Manager plagini u bilan to'liq mos keladi va siz uni ushbu bo'limda boshqarishingiz mumkin.

Lekin faqat modul sozlamalarini ifodalovchi "Fon" ga o'tish yaxshiroqdir. Bu sahifada siz turli xil sozlamalarni ko'rasiz.

Biroq, birinchi qadam - fon uchun rasmlar to'plamini yaratish - "havolasini bosing. Yangi rasm to'plamini qo'shing". Mavjud to'plamlarni "Rasm to'plamlari" ko'rinishida ko'rishingiz mumkin.

Aytganimdek, bu erda juda ko'p sozlamalar mavjud:

  • fon uchun rasmlarni tanlash printsipi - tasodifiy va boshqalar;
  • har safar turli xil rasmlarni ko'rsatish yoki ularni brauzer seansida saqlash;
  • fon rangi;
  • fonni to'liq ekranda ko'rsatish yoki "replikatsiya";
  • rasm ustiga naqsh solish;
  • siz Pinterest -dan Pin It tugmasini qo'shishingiz va boshqa bir qancha variantlarni belgilashingiz mumkin.

Nihoyat, shuni ta'kidlash kerakki, ba'zida fonni ko'rsatishda muammolar paydo bo'lishi mumkin. Agar sizda CSS shablonida fonni aniq belgilash yoki qayta aniqlash bo'lsa, Background Manager plagini ishlamasligi mumkin. Misol uchun, bitta saytda, masalan, rasm osongina yuklandi va uslublar fonining xususiyatini almashtirdi, lekin bu blogda men buni ataylab izohlashga majbur bo'ldim. Bu nimaga bog'liqligini aytish qiyin. Mana, oxirida nima bo'ldi.

Umuman olganda, fon menejeri - bu sizning veb -saytingiz fonida turli xil tasvirlarni ko'rsatish va hatto ulardan slayd -shou yaratish imkonini beruvchi ajoyib plagin. Ba'zi loyihalar uchun bu ajoyib "dekorativ" element bo'lishi mumkin.

Orqa fon menejerining orqa fonidagi havolalarga kelsak. Sozlamalarda shunga o'xshash variant mavjud va siz har bir rasm uchun havolani belgilashingiz mumkin. Men bu xususiyatni sinab ko'rdim va hamma narsa yozilgan paytda ishlaganga o'xshardi. Biroq, hozir bu borada muammolar mavjud. Biz qila oladigan yagona narsa - havolani maxsus elementga joylashtirish - yuqoridagi skrinshotdagi [+] belgisiga qarang. Bu plagin xususiyati muammosiz ishlaydi.

WordPress blog eng ko'p o'zgartirilishi mumkin har xil yo'llar va bu o'zgarishlar aslida amalga oshirilmoqda kodlarda PHP fayllari joylashgan faol dizayn mavzusi papkasida blogda.

Endi blogingizga tanqidiy nazar bilan qarang. Yaqinda ko'p narsa boshqacha bo'ladi, chunki printsipial jihatdan siz xohlagan narsani o'zingiz o'zgartirishingiz mumkin. Albatta, buni qanday qilishni bilishingiz kerak.

Administrator panelida

Boshqaruv paneliga o'ting Tashqi ko'rinishi - muharrir ... Siz allaqachon shablonlarning ko'pi nima uchun javobgarligini bilasiz, lekin endi siz shablonlarga qiziqmaysiz, lekin ularning ostidagi narsalar: Uslublar... Aniqrog'i, ularning bir qismi, deyiladi Uslublar ro'yxati.

Fayl bu ro'yxatga mos keladi uslub.css... Bu fayl blogda faol mavzu papkasida joylashgan. Siz uni har doim o'sha erda topishingiz mumkin.

Brauzerda

Faqat brauzerda o'z hisobingizni oching. Ko'pgina brauzerlarning yaxshi xususiyati bor: siz blogning istalgan maydonini o'ng tugmasini bosishingiz va operatsiyalar ro'yxatidan tanlashingiz mumkin Element kodini ko'rish ... Pastki qismida siz bosgan element haqida qiziqarli ma'lumotlarni topishingiz mumkin bo'lgan oyna paydo bo'ladi.

Bu oynada chapda Siz sahifa kodini ko'rasiz va bu kodda chiziq ajratiladi. berilgan elementga mos keladi. A o'ngda, uslubda, bu elementning xossalari bo'ladi.

Shrift o'lchami, chiziqlar, matn va fon ranglari, tekislash: hammasi uslubda va bularning hammasini o'zgartirish mumkin.

Fon rangini o'zgartiring

Yoqilgan WordPress blog Maqolalar va boshqa narsalarning fonlari boshqacha bo'lishi menga shaxsan yoqmaydi. Bu holda, tasmadagi maqolalar alohida bloklarda va menimcha, unchalik yaxshi ko'rinmaydi. Biz fonni hamma joyda maqolaning foniga o'xshash qilib qo'yamiz. O'zgartirmoqchi bo'lgan fonni bosing, sichqonchaning o'ng tugmasi bilan bosing, Element kodini ko'rish-ni tanlang. O'ngdagi natijada ta'kidlanadigan qatorda bizni qiziqtiradi sinf atributining nomi ... Uslublar sinflar tomonidan yozilgan.

Ushbu holatda class = art-layout-hujayra Bu shuni anglatadiki, uslubda, faylda uslub.css, bunday sinf ham bo'ladi va unda xususiyatlar allaqachon yozilgan bo'ladi. Faqat u boshqacha ko'rinadi, xususan:

.art-tartib-hujayra va keyin bu sinfning xususiyatlari jingalak qavs ichida yoziladi.

Faylda shu nomdagi sinfni toping uslub.css... Keling, qidirish funktsiyasidan foydalanamiz Ctrl + F va qidiruv maydoniga ismni yozing: art-layout-hujayra... Biz darhol fonni ko'ramiz:

fon rangi: Shaffof. Shaffof degan ma'noni anglatadi shaffof .

Endi bizga qanday rang kerak? Maqolalarimizning fon rangini qayerdan olishim mumkin? Bu safar biz foydalanamiz FSCapture... Unda. boshqa narsalar qatorida, asboblar to'plami orasida ham topishingiz mumkin pipetka monitor ekranidagi har qanday maydonning rangini belgilaydi. Juda foydali vosita!

FSCapture dasturini oching, o'ting Sozlamalar va asbobni tanlang Ekranli pipetka ... Ekranda kerakli maydonni bosing. Derazada Olti burchakli Siz kerakli rang kodini ko'rasiz: D2E8EE

Siz uni uslubga qo'shasiz art-layout-hujayra so'z o'rniga Shaffof .

Nima bo'lganini ko'ring. Hali qilinadigan ishlar ko'p, lekin boshlanishi allaqachon qilingan.

Haqida video. WordPress blogida fonni qanday o'zgartirish mumkin

Ko'proq tafsilotlar Siz "Hamma kurslar" va "Foydalilik" bo'limlariga kirishingiz mumkin Yuqori menyu sayt. Ushbu bo'limlarda maqolalar turli mavzular bo'yicha eng batafsil (iloji boricha) ma'lumotlarni o'z ichiga olgan bloklar bo'yicha guruhlangan.

Siz shuningdek blogga obuna bo'lishingiz va barcha yangi maqolalar bilan tanishishingiz mumkin.
Bu ko'p vaqtni talab qilmaydi. Faqat quyidagi havolani bosing: