Dizaino integravimas į WordPress turinio valdymo sistemą

Po pirmosios video pamokos pavadinimu „Tinklalapio (web) dizaino kūrimas“ paskelbimo sulaukėme nemažai klausimų, susijusių su dizaino integravimu į kokią nors turinio valdymo sistemą. Vieni norėjo sužinoti, kaip integruoti sukoduotą dizainą į „PHP-Fusion“ valdymo sistemą, kiti — į „Joomla“, dar kitiems rūpėjo sužinoti, kokiu būdu integruoti dizainą į „WordPress“ turinio valdymo sistemą. Žmonės klausė tiek e-grafika.lt diskusijų forumuose, tiek per skype, kol galiausiai suvokėme, kad reikia būtinai paruošti video pamoką, kurioje būtų parodyta, kaip pritaikyti dizainą „WordPress“ valdymo sistemai. Be to, Edmundas pirmojoje video pamokoje užsiminė, kad galbūt ateityje svetainės lankytojai išvys video pamoką būtent šia tema. Na, pagaliau turite tokią galimybę!

Šios video pamokos pradžioje bus pirmiausia aptarta „WordPress“ šablonų (temų) struktūra, vėliau parodyta, kaip tinkamai paruošti reikiamus šablono ir stiliaus failus. Po to, žinoma, pamatysite visą sukoduoto dizaino integravimo eigą: dizaino viršus, apačia, šoninė dalis (angl. sidebar), įrašų blokas. Taip pat sužinosite, kaip stilizuoti (redaguoti) standartinę komentarų bei paieškos sritį. Galiausiai video pamokos apibendrinime bus apibendrintas visas darbas bei nurodyta, ką būtų galima tobulinti savo integruotame dizaine ateityje.

Šioje video pamokoje naudojamas dizainas, kuris buvo sukurtas pirmojoje video pamokoje. Visus dizaino failus galite parsisiųsti iš čia: http://www.e-grafika.lt/failai/dizainas.rar (spauskite dešinįjį pelės mygtuką ir pasirinkite „Save Link As...“ (Firefox), „Download Linked File As...“ (Safari) arba „Save Target As...“ (Internet Explorer)).

Dizainą, paruoštą „WordPress“ valdymo sistemai (kurtą šioje pamokoje), galite parsisiųsti iš čia: http://www.e-grafika.lt/failai/wordpress_dizainas.rar.

„WordPress“ dokumentacija: codex.wordpress.org.

Diskusijos apie video pamoką forumuose:http://www.e-grafika.lt/forumai/tema/23.

mikronaz	2009-07-29 20:43:41
	Nebloga pamoka, pradinukams tikrai patiks, nes per daug į kodą nesigilinama ir tiesiai šviesiai parodoma kaip "užvilkti" dizainą, bet vis dėl to norėtųsi kažko sudėtingesnio

adijux	2009-07-29 23:10:20
	Na, čia labiau ne pamoka, kurioje viskas išaiškinta iki smulkmenų, o „walkthrough“. O ką galėtų dar sudėtingiau padaryti? Pritaikyti dizainą „WordPress“ valdymo sistemai yra gana paprasta, todėl, mano nuomone, nėra daug ką parodyti ir paaiškinti (žinoma, atsižvelgiant į tai, kad žmogus, kuris taiko dizainą šiai turinio valdymo sistemai, turi HTML/CSS ir PHP pagrindus).

mikronaz	2009-07-30 10:58:54
	Na, sudėtingiau būtų jei viskas būtų daroma nuo 0, o ne copy paste, su visais paaiškinimais apie WP Loop ir t.t. Dar galima padaryti ne tokį paprastą dizainą, kur daugiau WP funkcijų galima panaudoti, bet manau, viskas su laiku ;]

Chiudas	2009-07-31 14:13:30
	Tik pamoką galėtų vesti žmogus kurio balsas tinka įrašams ir kalba ne rusišku akcentu...iš vartotojo pusės vien pažiūrėjus įžangą atmušą nusiteikimą žiūrėti visą įrašą...

mikronaz	2009-07-31 20:53:50
	Jo, aš irgi pagalvojau, kad per daug skaitė ;]

infactor	2009-08-01 10:57:25
	Na įžangą buvau pasirašęs, gal ir per daug skaičiau, nenorėjau, kad užsitęstų pati pradžia.

Dephy	2009-09-19 14:49:05
	bereikalo stumiat ant žmogaus, normaliai dėstė info, nors aisku norėčiau kad biški detaliau viska paaiškintu, nes nelabai as gaudausi dar pats php. Bet,  keep it up!

Orangexas	2009-10-04 01:02:27
	Kaip tik reikėjo tokios pamokos. Dėl balso, tai manau skųstis nereikėtų, nes viskas sakoma aiškiai.. O dėl detalumo tai norėtusi šiek tiek plačiau apie kitas wordpress funkcijas, bet ir taip labai gerai, tad ačiū. Beje, jei ne paslaptis su kokia programa tvarkytas video?

adijux	2009-10-05 15:35:26
	Jei gerai atsimenu, Irmantas filmavo su programa pavadinimu „ScreenFlow“, skirta Mac OSX operacinei sistemai. Aš redagavau vaizdo failus su „Adobe After Effects CS4“.

audrys0218	2009-11-26 19:15:14
	Sveiki, nesupratau vienos vietos iš jūsų pamokos. Pvz buvo tokia vieta: <ul><li><a>Pagrindinis<a/></li> <li><a>Mano darbai</a></li> <li><a>Kontaktai</a></li> <li><a>Dar kazkas</a></li> </ul> ir jūs šiuos užrašus pakeičiate funkcija, dbr tiksliai neprisimenu kokia. Ir man įdomu, iš kur paskui ta funkcija paima visą tą informacija. Tikiuosi supratote, ką norėjau paklausti. Lauksiu atsakymo.

infactor	2009-11-27 01:06:50
	Tikriausiai kalbi apie funkciją, kuri generuoja statinių puslapių navigaciją: wp_list_pages('title_li=' ) Šita funkcija ima iš DB lentelės statinius puslapius ir pagal DB įrašus generuoja sąrašą: http://codex.wordpress.org/Template_Tags/wp_list_pages Dabar tiksliai nepasakysiu iš kurios tiksliai lentelės ima tuos duomenis, bet pabandyk per administravimo pultą pridėti naują statinį puslapį (Pages) ir pamatysi, kad atsirado naujas meniu punktas.

audrys0218	2009-11-27 14:02:53
	Dėkui, regis supratau .

madman333	2010-01-15 01:09:11
	esu prisiregistraves ir prisijunges tacviau negaliu ziureti visos video pamokos kokia beda?

adijux	2010-01-23 14:37:20
	Ar rodo kokį nors klaidos pranešimą ar dar ką nors? Kokią naršyklę naudoji? Rekomenduoju žiūrėti per Firefox, Opera ar Chrome — užtikrinu, kad tikrai per šias naršykles veikia.

madman333	2010-01-24 10:03:56
	kelias minutes tik parodo o toliau iprastai tarsi video pasibaiges jau naudoju mozilla  naujausia

goaxer	2010-02-09 19:36:49
	Sone yra video skyriai, paspausk sekanty skyriu ir rodys tolimesni video.

Aseksas	2010-02-02 10:02:49
	Prisiregistravau, nerodo pradžia Video parodo ir viskas, o su opera net neprisijunge P.S kur rast atsijungimo mygtuką?

• Pamokos introdukcija
• 1. Pasiruošimas darbui ir WordPress šablono struktūra
•         1.1. Šablono struktūra
•         1.2. Šablono failų paruošimas
•         1.3. Stiliaus failų paruošimas
• 2. Sukoduoto dizaino integravimas į WordPress
•         2.1. Viršutinė dizaino dalis
•         2.2. Apatinė dizaino dalis
•         2.3. Šoninė dizaino dalis
•         2.4. Įrašų blokas
•         2.5. Komentarai
•         2.6. Paieškos sritis
• 3. Apibendrinimas

Kodėl neįkraunamas video grotuvas?

Kiekviena video pamokos įžanga (pristatymas/introdukcija) yra prieinama visiems lankytojams, tačiau tolimesnes pamokos dalis gali peržiūrėti tik užsiregistravę lankytojai (gali būti išimčių). Užsiregistruoti e-grafika.lt svetainėje gali užpildęs registracijos formą. Prižadame, kad registracija neskausminga!

Jeigu esi užsiregistravęs mūsų svetainėje ir prisijungęs, tačiau vis tiek negali matyti video, patikrink, ar turi naujausią Flash versiją. Taip pat rekomenduojama naudoti Mozilla Firefox arba Apple Safari naršyklę.

---

Ar galiu padidinti vaizdą?

Taip, vaizdą gali padidint paspaudęs ikoną video grotuvo dešiniajame kampe. Iš tikrųjų rekomenduojame žiūrėti video failus per visą ekraną (fullscreen), nes tik taip galėsi viską aiškiai matyti.

adijux

Ši problema buvo keletą kartų aptarta diskusijų forumuose: http://www.e-grafika.lt/index.php/forumai/tema/24/

Keris17

Sveiki. Man iškilo problema žiūrint pamokas. Noriu pradėti koduoti bet kai tik ijųngiu photoshop ir pasižiųrėjąs noriu pradėti. Photoshop'e nieko neleidžia daryti. Ir taip visą laiką. Keistai kažkaip. spaudžiu photoshope betkokį tool ir man rodo tą ranką ir nieko negaliu nei piešti ir aplamai nei vienas tool neveikia po video žiūrėjimo.

adijux

Ateityje rekomenduoju didesnėms problemoms išspręsti pasitelkti diskusijų forumus, kadangi ten su lauksi daugiau pagalbos.

GIANT1

Jau ištaisiau įkėlęs reset.css failą

GIANT1

Sveiki, viską mėginau, bet niekaip nesigauna gerai padaryt, žiūrėjau ir tavo css failą, ir nukopijavau kodą, bet vis tiek kažko blogai atvaizduoja. Va kur problema: http://www.part.lt/img/ca317d7775f399f00e123838ab2bc0d2958.JPG        Kodėl viršuje ta mėlyna juostelė neprisiglaudus prie viršaus, neper visą plotą ir "Pagrindinis" neprisiglaudęs prie jos? Visiem, kam siunčiau atvaizduoja taip pat, o paleidus Jūsų failus, rodo normaliai. Kaip ištaisyti šią klaidą?