WordPress Bolalar mavzusiga kirish

Maqola muallifi:
  • WordPress
  • Yangilangan sana: Jul 27, 2013

Shunday qilib, WordPress dunyosida sizning tweakslaringizni boshlayotganingizni tasavvur qilasiz va siz juda ko'p ajoyib mavzularni topdingiz. Siz hatto juda ko'p premium mavzularini topasiz va ularning aksariyati haqiqatan ham narxga ega (professional ko'rinish va kod uchun bir nechta kitob). Va siz topadigan mavzularning ko'pi juda yaqin, lekin hech kim siz xohlagan narsadir. Yangi matn bloklarini qo'shish uchun shriftni almashtirish uchun menyu satrini bir oz yura olishi mumkin.

Xo'sh, agar bu tanish bo'lsa, ushbu qo'llanma siz uchun. Bu erda biz bolalar mavzulari dunyosiga sho'ng'iymiz, bu erda siz o'zingiz xohlagan mavzuni buzmasdan yoki kelajakda yangilanishlarni yo'qotmasdan istagan narsangizni qila olasiz, chunki siz qilgan barcha narsalar bekor qilinadi.

Mavzuni o'zgartirmasdan ko'rinishini o'zgartirish

Muxtasar qilib aytganda, bolaning mavzusi quyidagicha: Original fayllarni o'zgartirmagan holda xususiylashtirish. Bola mavzusi sizning asosiy mavzudagi (ota-ona) bir xil funktsiyalari va ko'rinishiga ega bo'ladi.

U ota-fayllardan foydalanadigan bolaning mavzu katalogida yangi faylni yaratmaguningizcha, unda kamida 2 fayl, style.css va functions.php fayllari bo'lishi kerak, boshqa barcha fayllar ota-ona mavzusidan mahrum bo'ladi.

Bu erda bizda juda ko'p imkoniyatlar mavjud, ammo asosiy afzallik, siz asl mavzuni osongina qaytarib olishingiz va shu sababli siz o'zingizning asosiy mavzuni tahrirlashni o'zgartirmasdan yangilashingiz mumkin, chunki ular butunlay boshqa papkada bajarilgan.

Keling, qo'limizni iflos qilaylik

Shunday qilib, birinchi qadam / wp-mazmun / mavzular / papkangiz ostida yangi bolaning mavzu katalogini yaratishdir. Keling, "Yigirma-Bola" deb ataymiz, va asosiy styles.css faylini yarataylik:

/ * Mavzuni nomi: Yigirma bolali mavzu URI: http://www.webrevenue.co Tavsif: Bolalar mavzusini hozirda o'rganish Muallif: Rochester Oliveira Muallif: URI: http://www.webrevenue.co/author/rochester/ Andoza: twentytwelve * / / * Asosiy mavzudagi CSS faylini chaqirish * / @import ("../ twentytwelve / style.css"); / * Quyida siz xohlagan narsani qo'shing * /

Parametrlar (boshqa ixtiyoriy parametrlardan tashqari):

  • Mavzu nomi: Mavzu tanlash ekranida ko'riladigan ism
  • Mavzu URI: U erda ko'rsatiladigan aloqa
  • Sharh: Qisqacha tavsif, shuning uchun bu nimani anglatishini eslaysiz
  • Muallif: Bolaning mavzuini kim yaratgan?
  • Muallif URI: Agar siz mualliflik saytiga ulanishni xohlasangiz
  • Andoza: Asosiy mavzu papkani (agar siz asosiy mavzudagi boshqa mavzuni ishlatmoqchi bo'lsangiz, bu parametrni o'zgartiring)

Ushbu kodni qo'shganingizdan so'ng, WP admin> Tashqi ko'rinish> Mavzular ostida "Bolalar" mavzusini ko'rasiz. Siz hozir uni tanlashingiz mumkin va amalga oshirilgan barcha o'zgarishlar saytida ko'rinadi.

Bola mavzusiga oid o'zgartirishlar 101

Agar nol CSS bilimingiz bo'lsa, bu foydasiz bo'lishi mumkin, to'g'rimi? Noto'g'ri! CSS aslida juda oson va o'sha erda sizga yordam berish uchun juda ko'p qismlarni topishingiz mumkin. Sizning sozlashlaringizda sizga yordam beradigan bir necha oddiy maslahatlar mavjud.

#1 Firebug-ni o'rnating

Ko'pchilik faqat Chrome va Safari'ni sevadi (men ham shunday qilaman!), Ammo men uchun FireFox rivojlanishi uchun juda yaxshi. Shunday qilib, agar siz uni ishlatmoqchi bo'lsangiz, men sizni ushbu elementda faol bo'lgan barcha tanlovchilarni tushunishning ajoyib usuli bo'lgan yong'oqni o'rnatishni tavsiya etaman.

Uni o'rnatganingizdan so'ng, F12 tugmasini bosish yoki sahifadagi biror joyni o'ng tugmasini bosib "Elementni tekshirish" -ni tanlashingiz mumkin. HTML va CSS-ning joriy sahifasi bilan yangi oyna (va boshqa foydali yorliqlar, ehtimol ular haqida keyinroq gapirishimiz mumkin) bilan yangi oyna ko'rasiz.

CSS qutisidan yuqoridan pastga qarab joriy elementga qo'llaniladigan barcha CSS qoidalari va yuqoridagi "o'ziga xos" qoidalar ko'rinadi. Bu juda yaxshi, ammo bu ma'lumot bilan nima qilishingiz mumkinligini ko'rib chiqaylik

#2 CSS spesifikasini (yoki selektorning vazni)

Har bir CSS qoidasi o'z tanlovi, xususiyatlari va qadriyatlariga ega. Ammo brauzer 2 yoki bir xil elementga ta'sir qiladigan qoidalarni topsa, ularning qaysi biri mosroq ekanligini tanlash kerak. Biz odatda nima hisoblanadiganini tushunish uchun ushbu "qoidaga" egamiz:

  • ! muhim deklaratsiya boshqa hech narsa yozilmaydi
  • Inline CSS-da hech narsa yozilmaydi! muhim qoidalar
  • ID raqami (#header, #footer, # container ...) qiymati 100
  • 10 balli sinflar (.main, .nav, .box)
  • Teglar (tanasi, div, p, a) qiymati 1
  • 0 qiymatida universal selektor va pseudo sinflari (*,: hover,: keyin), ammo ular "tie"

OK, buni yaxshiroq tushunish uchun bir misolni ko'rib chiqaylik. Yigirma o'n ikki marta foydalanib, sayt nomini o'ng tugmasini bosing va siz ko'ringan birinchi CSS-bu:

.site-header {to'ldirish: 1.71429em 0; } maqola, shuningdek, tafsilotlar, figcaption, raqam, footer, header, hgroup, nav, section {display: block; }

Birinchi selektor 10 punktga ega (bu sinf) va ikkinchisining har biri 1 nuqtaga ega (chunki vergullar turli xil tanlovchilarni ajratadi), shuning uchun u yuqorida ko'rinadi. Agar sizda #header div kabi bir narsa bo'lsa, u holda selektor birinchi bo'lib ko'rinadigan bo'lar edi.

Nima uchun bu juda muhim?

Chunki asosiy mavzuni CSS-fayllarini tahrir qilmasdan tartibga solish uchun siz har doim asosiy mavzuda belgilangan qoidalarga qaraganda ko'proq balllarga ega bo'lgan qoidalarni qo'llashingiz kerak bo'ladi. Va bu haqda aqlli bo'lishi mumkin va oddiy kodni ishlatishingiz mumkin. Masalan, ushbu xususiyatni qayta yozish uchun:

.site-header {to'ldirish: 1.71429em 0; }

Siz uni bolangizdagi CSS-da qo'shishingiz mumkin, ammo quyidagilarni bajarmaslik kerak:

.site-header {to'ldirish 15px 0! muhim; }

Bu yomon kod bo'lgani uchun, masalan, bitta sahifada o'zgartirish kerak bo'lsa, uni qayta yozishni qiyinlashtiradi. Shunday qilib siz oddiygina foydalanishingiz mumkin:

body .site-header {to'ldirish: 15px 0; }

Ushbu selektor 11 punktga ega, bu esa original 10dan katta va shuning uchun ushbu kod qo'llaniladi.

#3 Funktsiyalardan yaxshi foydalaning

Bola funktsiyalari.php fayli asl faylga IN ADDITIONga o'rnatiladigan yagona fayl. Bu WP komandasi tomonidan amalga oshirilgan aql bovar qilmaydigan ishdir, shuning uchun asl funktsiyalarni saqlab, o'z funktsiyalaringizni qo'shishingiz mumkin. Chaqiriq, bolaning mavzu vazifalari birinchi navbatda yuklanadi va mavzuni ishlab chiquvchi funktsiyalarni e'lon qilishda mojarolar oldini olish uchun shunday qilish kerak:

if (! function_exists ("top_menu")) {function top_menu () {// bu erda salqin kod} add_action ('wp_head', 'top_menu'); }

Agar siz bolalar mavzusidagi faylda funktsiyani aniqlasangiz, u asl nusxasini bekor qilishi mumkin. Agar mavzuni ishlab chiquvchisi buni shunday qilmasa, siz yomon PHP xatosiga duch kelasiz (chunki bitta funktsiya ikki marta yaratilmoqda).

#4 Ba'zi CSS xususiyatlarini bilib oling

CSS-dan foydalanib narsalarni yashirish va qo'shish mumkinligini bilasizmi? To'g'ri selektorni topib olish uchun yong'in sig'imini o'rnatishingiz kerak, lekin siz ushbu kodni qo'shib ob'ektni yashirishingiz mumkin:

body {belgisi: yo'q}

Buning uchun qo'shimcha matnni qo'shishingiz mumkin, chunki siz kichik matnlarni qo'shishingiz mumkin, agar siz "Sotuvda!" Matnini narx yorlig'idan keyin istasangiz, masalan, ushbu kodni ishlatishingiz mumkin:

.Price del: after {rang: qizil; kontent: "Sotish bo'yicha!"; }

Siz nima deb o'ylaysiz?

Ushbu qo'llanma haqida nima deb o'ylaysiz? Bolalar mavzusidan foydalanishni o'ylaysizmi? Siz allaqachon foydalanasizmi? Quyidagi izohlar bo'limidan foydalanishni bizga xabar bering!

Rochesterda Oliveira haqida

Men Itajubaning (MG) braziliyalik veb-uslubchisi va tadbirkori bo'ldim. Men qorong'u mavzular haqida yozishni yaxshi ko'raman va ba'zi ajoyib narsalarni qilaman.

»I ¿