Kuanza na Mandhari ya Mtoto WordPress

Kifungu kilichoandikwa na:
  • WordPress
  • Updated: Jul 27, 2013

Kwa hivyo, unafikiria kwamba wanaanza tuta zako katika ulimwengu wa WordPress na umepata mandhari nyingi za kushangaza. Pia unapata mada nyingi za malipo ya kwanza na nyingi zinafaa bei (vitabu vichache vya uangalizi na msimbo wa kitaalam). Na mada nyingi unazopata ni karibu sana, lakini hakuna unachotaka. Inafaa kuwa na uwezo wa kuhamisha bar ya menyu kidogo, kuchukua nafasi ya font, ili kuongeza kizuizi cha maandishi mpya.

Kweli, ikiwa hii inaonekana kawaida, mwongozo huu ni kwako. Hapa tutaingia kwenye mandhari ya watoto, ambapo unaweza kufanya chochote unachotaka bila kuvunja mada ya kushangaza uliyonunua, au kupoteza sasisho za baadaye kwa sababu chochote unachofanya kitafanywa.

Uhariri wa kuhariri bila kubadilisha faili za mandhari

Kwa kifupi, ndio jambo la Watoto linalohusu: Customizing bila kurekebisha faili za awali. Mandhari ya mtoto itakuwa na kazi sawa na kuangalia kwa mandhari yako kuu (mzazi), isipokuwa utasema wazi.

Itakuwa na angalau faili za 2, style.css na faili ya kazi.php, mafaili mengine yote yatachukuliwa kutoka kwenye kichwa cha wazazi hivyo isipokuwa ukiunda faili mpya kwenye saraka ya mandhari ya mtoto wako utatumia faili za wazazi.

Tuna fursa nyingi hapa, lakini faida kuu ni kwamba unaweza kurudi kwenye mandhari ya asili kwa urahisi, na hivyo unaweza pia kusasisha mandhari yako kuu bila kupoteza mipangilio yoyote, kwa kuwa imefanywa kwenye folda tofauti kabisa.

Hebu tufanye mikono yetu yafu

Kwa hiyo, hatua ya kwanza ni kuunda saraka ya mandhari ya mtoto mpya chini ya w / maudhui yako / mandhari / folda. Hebu tuiita "Twenty-Child", na hebu tufanye faili yetu ya msingi ya styles.css:

/ * Mandhari Jina: Twenty Child Theme URI: http://www.webrevenue.co Maelezo: Kujifunza mandhari ya watoto sasa Mwandishi: Rochester Oliveira Mwandishi URI: http://www.webrevenue.co/author/rochester/ Kigezo: ishirini na mbili * / / * Wito faili kuu ya CSS * / @import (".. .. twentytwelve / style.css"); / * Ongeza chochote unachotaka chini * /

Vigezo ni (kati ya vigezo vingine vya hiari vilivyochaguliwa):

  • Jina la Mandhari: Jina utaona chini ya skrini ya uteuzi wa mandhari
  • Mandhari URI: Kiungo kinachoonyeshwa pale
  • Ufafanuzi: Maelezo mafupi ili utakumbuka ni nini hii inavyohusu
  • Mwandishi: Nani aliyeunda mandhari ya mtoto
  • Mwandishi URI: Ikiwa unataka kuunganisha kwenye tovuti ya mwandishi
  • Kigezo: Folda kuu ya mandhari (hivyo kama unataka kutumia mandhari tofauti kama kuu, tu nafasi ya parameter hii)

Mara baada ya kuongeza msimbo huu utaona Mandhari ya Watoto chini ya WP admin> Mtazamo> Mandhari. Unaweza kuchagua sasa na mabadiliko yote yatafanywa yataonekana kwenye tovuti yako.

Mandhari ya Watoto Inahariri 101

Hii inaweza kuwa haina maana ikiwa una ujuzi wa sifuri CSS, sawa? Bado! CSS ni kweli rahisi sana na unaweza kupata snippets nyingi kukusaidia huko. Hapa ni vidokezo vichache rahisi kukusaidia katika maagizo yako.

#1 Weka Firebug

Watu wengi hupenda Chrome na Safari (hivyo mimi!), Lakini kwa ajili yangu FireFox ni bora zaidi kwa ajili ya maendeleo. Kwa hivyo, ikiwa unataka kuitumia, napendekeza pia kuweka moto, ambayo ni chombo cha kushangaza kuelewa wateule wote wanaohusika katika kipengele cha sasa.

Mara baada ya kuiweka, unaweza kushinikiza F12 au bonyeza moja kwa moja kwenye ukurasa na uchague "Angalia Element". Utaona dirisha jipya na ukurasa wa sasa HTML na CSS (na tabo nyingi zenye manufaa, labda tunaweza kuzungumza juu yao baadaye).

Katika sanduku la CSS utaona kutoka juu hadi chini sheria zote za CSS zinazotumiwa kwa kipengele cha sasa, na utawala zaidi "maalum" juu. Hiyo ni baridi, lakini hebu angalia nini unaweza kufanya na maelezo haya

#2 Fikiria maalum ya CSS (au uzito wa kuchagua)

Kila utawala wa CSS una mteuzi wake, mali na maadili. Lakini wakati kivinjari cha kupata 2 au sheria zaidi ambazo zitaathiri kipengele hicho ni lazima chagua ni moja kati yao yanafaa zaidi. Kwa kawaida tuna "utawala" huu kuelewa nini kitachukuliwa:

  • ! tamko muhimu litasababisha kitu kingine chochote
  • CSS ya ndani itaandika chochote lakini! sheria muhimu
  • ID (#header, #footer, # chombo ...) yenye thamani ya alama za 100
  • Darasa (.main, .nav, .box) zina thamani ya alama za 10
  • Tags (mwili, div, p, a) yenye thamani ya 1
  • Darasa la kuchagua na pseudo (*,: hover,: baada) vina thamani ya 0 lakini zitatumika ikiwa kuna "tie"

Naam, hebu tuone mfano ili tuelewe vizuri zaidi. Bonyeza kichwa cha tovuti yako kwa kutumia ishirini na mbili na utaona kwamba CSS ya kwanza inayoonekana ni hii:

kichwa cha kichwa {padding: 1.71429em 0; } makala, kando, maelezo, kidokezo, takwimu, footer, kichwa, hgroup, nav, sehemu {kuonyesha: kuzuia; }

Mchaguzi wa kwanza ana alama za 10 (kwa kuwa ni darasa), na ya pili ina alama ya 1 kila (kwa kuwa commas tu tofauti tofauti selectors) ndiyo sababu inaonekana juu. Ikiwa ungekuwa na kitu kama kichwa cha kichwa # hapo kwamba chaguo hakika itakuwa wa kwanza kuonyesha.

Kwa nini hii ni muhimu sana?

Kwa sababu ili kuhariri mandhari kuu bila kuhariri faili zake za CSS unahitaji mara zote kutumia sheria zilizo na pointi zaidi kuliko sheria zinazoelezwa kwenye mandhari kuu. Na unaweza kuwa smart juu ya hili na kutumia code rahisi. Kwa mfano ili urejeshe mali hii:

kichwa cha kichwa {padding: 1.71429em 0; }

Unaweza kuongeza hii katika mandhari ya mtoto wako CSS, lakini haipaswi:

kichwa cha kichwa {padding 15px 0! muhimu; }

Kwa sababu hii ni kanuni mbaya, na ni njia ngumu ya kurejesha tena ikiwa unahitaji kubadilisha hiyo katika ukurasa mmoja, kwa mfano. Kwa hivyo unaweza kutumia rahisi hii:

mwili .site-header {padding: 15px 0; }

Mchaguzi huyu ana pointi 11, ambayo ni kubwa kuliko 10 ya awali na hivyo kanuni hii itatumika.

#3 Tumia vizuri kazi

Faili ya kazi.php ya mtoto ni faili pekee ambayo itafakiwa KATI kwa faili ya awali. Hiyo ni kazi nzuri inayofanyika na timu ya WP, hivyo unaweza kuweka kazi za awali na kuongeza kazi zako. Kukamata ni, kazi ya mandhari ya mtoto itakuwa kubeba kwanza na msanii wa mandhari lazima kufanya kitu kama hiki ili kuepuka migogoro wakati wa kutangaza kazi:

ikiwa (! function_exists ('top_menu')) {function top_menu () {// cool code hapa} add_action ('wp_head', 'top_menu'); }

Hiyo ni kwa sababu ikiwa utafafanua kazi katika faili ya mada ya mtoto wako inaweza kuibadilisha ile ya asili. Ikiwa msanidi programu wa mada haifanyi kwa njia hii utaishia na hitilafu mbaya ya PHP (kwani kazi hiyo hiyo inaundwa mara mbili).

#4 Jifunze baadhi ya vipengee vya CSS

Je! Unajua kwamba unaweza kujificha na kuongeza vitu kwa kutumia CSS? Utahitaji kufunga moto ili kupata mteuzi sahihi, lakini unaweza kujificha kipengee kwa kuongeza msimbo huu:

mwili {kuonyesha: hakuna}

Ili kuongeza ni ngumu zaidi, kwani unaweza kuongeza tu maandiko madogo, ikiwa unataka maandishi ya "On Sale!" Baada ya lebo ya bei, kwa mfano unaweza kutumia code hii:

.price del: baada {rangi: nyekundu; maudhui: "On Sale!"; }

Unafikiri?

Unafikiria nini kuhusu mwongozo huu? Je, utafikiria kutumia mandhari ya watoto? Je! Tayari unayatumia? Hebu tujue kutumia sehemu ya maoni hapa chini!

Kuhusu Rochester Oliveira

Mimi ni mtengenezaji wa mtandao na mjasiriamali kutoka Itajubá (MG), Brasil. Ninapenda kuandika kuhusu mada ya wazi na kufanya mambo mengine ya baridi.

Kuungana: