Kako WordPress procesira sadržaj? Koje datoteke čine WordPress temu? Kako teme prilagođavati sopstvenim potrebama? Polaznici uz instrukcije predavača nadograđuju svoje blogove na WordPress verziju 2.7. Upoznaju se sa strukturom tema i dodaju custom funkciju i CSS stilove u temu koju koriste. Pronalaze eventualne greške pomoću validatora i ispravljaju ih.
- 1. Tema 19: Profesionalizacija veb-sajtova polaznika koji su
zasnovani na vordpres (WordPress) sistemu za baratanje sadrajem
(content management system). Izmena ablona naslovne strane kako bi
veb-sajt dobio kompleksan ali u isto vreme i pregledan izgled.
predava: Aleksandar Uroevi http://urosevic.net kola web
novinarstva, Udruenje novinara Srbije
2. Profesionalizacija WordPress bloga
3. StrukturaWordPressablona 4. Dobavljanje i upotreba podataka u
ablonu 5. Custom funkcija za lanke po kategorijama 6. Vizuelno
ureivanje grupisanog sadraja 7. Validacija kda ( XHTMLiCSS ) i
korekcije greaka 8. Korisne adrese 9. Pitanja i odgovori 10. Osnove
PHP programiranja (1/2)
- Oznaka poetka i kraja PHP kda, komentari
11. npr: 12. Vielinijski poinje sa/*zavrava*/, u jednoj liniji
poinje sa// 13. Svaka linija php kda zavrava se znakom;
- nepravilno:$test = "Zdravo svete!" echo "Poruka: $test"
14. pravilno:$test = "Zdravo svete!"; echo "Poruka: $test";
Promenljive i nizovi
- Promenljive (varijable) poinju znakom za dolar:$test
15. Davanje vrednosti promenljivoj:$test = 5; 16. Definisanje
niza:$niz = array("vesti", "sport", "kultura", "nauka"); 17.
$niz[0]jevesti ;$niz[1]jesport ;$niz[2]jekultura 18. Osnove PHP
programiranja (2/2)
- Uslovi i petlje (if...else; foreach; while)
- if ($test < 5) {echo "manje";} else {echo "vee";} foreach
($niz as $test) {echo "kategorija $test";} while ($test++ < 5)
{echo "$test je manje od 5";} while ($test++ < 5): echo "$test
je manje od 5"; endwhile;
tampanje sadraja
- Tekst i promenljive tampamo naredamaechoiprint .
echo"Promenljiva"$ test "ima vrednost $test";
19. Viestruke promenljive u izlazu: print ... dogaaj kada nema
lanaka u bazi ...
Pomouget_posts()funkcije podaci se smetaju u niz (npr.$post
).Pristupa im se pomouforeach()funkcije. Korisni su za napredne
korisnike ( Codex: Database Description ). 27. Dobavljanje i
upotreba podataka u ablonu (2/4)
- Wrapperi ( http://codex.wordpress.org/Template_Tags ):
- the_title()za naslov lanka
28. the_time()za vreme objavljivanja lanka 29. the_category()za
kategorije kojima lanak pripada 30. the_excerpt()za saetak lanka
31. the_content()za sadraj lanka Najee korieni kljuevi u nizu$post
:
- $post->the_titleza naslov lanka
32. $post->the_categoryza kategorije kojima lanak pripada 33.
$post->the_excerptza saetak lanka 34. $post->the_contentza
sadraj lanka 35. Dobavljanje i upotreba podataka u ablonu (3/4)
- Za kompleksnije upite uloopsekvenci koristi se tagquery_posts (
http://codex.wordpress.org/Template_Tags/query_posts ):
- Izbor poretka ( author ,date ,title ,category ,ID ) i naina
reanja lanaka ( ASC / DSC ):query_posts("
orderby=date&order=ASC ");
36. Posebne kategorije:query_posts(" cat=3,7,8 "); 37.
Iskljuivanje kategorije:query_posts(" cat=-1 "); 38. Proizvoljan
broj lanaka:query_posts(" showposts=7 "); 39. Preskakanje
lanaka:query_posts(" offset=3 "); 40. Dobavljanje odreenog
lanka:query_posts(" p=22 "); Kombinovanje vie parametara dodavanjem
znaka&izmeu parametara:cat=3,7,8 & showposts=7 &
orderby=name & order=DSC 41. Dobavljanje i upotreba podataka u
ablonu (4/4)
- Ispisivanje naslova i saetka etiri lanka poevi od prvog, iz
kategorije politika, poreanih po rastuem datumu (od starih ka
novima) mora se staviti unutarloopsekvence:
42.
43. Custom funkcija za lanke po kategorijama (1/3)
- Korisniki definisane funkcije smetaju se u
datotekufunctions.php . Custom funkcijawebnovinar_postpercat()
:
- Lista 5 najnovijih lanaka za svaku kategoriju prvog nivoa.
44. Za najnoviji lanak pored naslova ispisuje i saetak. 45.
Linkovi za svaku kategoriju su u posebnoj kuici (div). 46. Kuice su
rasporeene u dve kolone. 47. U temi na mestu gde je potrebno
prikazati ovaj sadraj, stavlja se: Kd sa naredne tri strane spojiti
i dodati na kraj datoteke functions.php 48. Custom funkcija za
lanke po kategorijama (2/4) 49. Custom funkcija za lanke po
kategorijama (3/4)
/?cat= ">
- /?p= < ?php echo $clanak ->ID; ?> " title=" ">
50. Custom funkcija za lanke po kategorijama (4/4) 51. Vizuelno
ureivanje grupisanog sadraja (1/2)
- Sadraj koji generie funkcijawebnovinar_postpercat()pozicionira
se pomou CSS stilova u datotecistyle.css . (kd sa ove i naredne
strane dodati na kraj datoteke style.css) #levo ,#desno{ width :
47%;position : relative;margin : 0;padding : 0; } #levo{ float :
left; } #desno{ float : right; } .box{ width : 100%;position :
relative;clear : both; margin-bottom : 10px;padding : 2px 5px; }
.box h2{ margin : 0;padding : 0 0 2px 0;display : block; } .box ul{
list-style : none;margin : 0;padding : 0; } .box ul li{ margin-top
: 5px; } .box ul li p { padding : 0;margin : 0; }
52. Vizuelno ureivanje grupisanog sadraja (2/2)
- Vizuelno ureivanje kuica, linija, pozadina i fontova pomou
CSS-a u datotecistyle.css .box{ background : #fff
url(images/boxbg.gif) no-repeat bottom right; border : 1px solid
#ccc; } .box h2{ background : transparent; color : #1e90ff;
font-weight : bold; font-size : 12pt; border-bottom : 1px solid
#ccc; } .box ul li p{ font-style : italic; font-size : 9pt;
background : transparent; color : #aaa; } .box ul li a{ font-size :
9pt; text-decoration : none; font-weight : normal; }
53. Validacija kda (XHTML i CSS) i korekcije greaka (1/2)
- Nahttp://validator.w3.org/ukucatu URL bloga i kliknuti na
dugmeCheck .
- Zelena strana kd je validan
54. Crvena strana kd sadri greke Paljivo proitati opis greke i
ispraviti istu u kdu na mestu na kome se nalazi.
- Otvoreni XHTML tg mora se zatvoriti: ... ...
55. Tg img mora imati atribut alt, kao i a (anchor) href: < a
href ="...">< img src ="..."alt ="opis"/ >< /a >
XHTML 1.1 specifikacija:http://www.w3.org/TR/xhtml11/ u XHTML kdu
postoje greke opis greke 56. Validacija kda (XHTML i CSS) i
korekcije greaka (2/2) ispravan CSS kd
- Nahttp://jigsaw.w3.org/css-validator/ ukucati URL bloga i
kliknuti na dugme Check.
- Zelena strana kd je validan
57. Crvena strana kd sadri greke U sluaju postojanja greke,
paljivo proitajte opis greke i otklonite je. 58. Najee greke:
- Atributibackground(boja pozadine) icolor(boja teksta) uvek
moraju da idu jedan uz drugi
59. Koristite kompaktne definicije; umestomargin-top
,margin-bottom ,margin-leftimargin-right :margin: CSS 2.1
specifikacija:http://www.w3.org/TR/CSS21/ 60. Korisne adrese
- Kodeks WordPress-ahttp://codex.wordpress.org/
- Template Tagshttp://codex.wordpress.org/Template_Tags
61. Database
Descriptionhttp://codex.wordpress.org/Database_Description 62.
Formatiranje vremena
http://codex.wordpress.org/Formatting_Date_and_Time 63.
CSShttp://codex.wordpress.org/CSS 64. Priprema za
tampuhttp://codex.wordpress.org/Styling_for_Print WordPress na
srpskomhttp://sr.wordpress.org/ 65. WordPress forum na
srpskomhttp://sr.forums.wordpress.org/ 66. PHP
referencehttp://www.php.net/manual/en/langref.php 67. Validator za
XHTMLhttp://validator.w3.org/ 68. Validator za
CSShttp://jigsaw.w3.org/css-validator/ 69. On uvek sve
znahttp://google.com/ 70. Pitanja i odgovori
