Tema 19: Profesionalizacija veb-sajtova polaznika koji su zasnovani na “vordpres” (WordPress) sistemu za baratanje sadržaj...
Profesionalizacija WordPress bloga <ul><li>Osnove PHP programiranja
Struktura  WordPress  šablona
Dobavljanje i upotreba podataka u šablonu
Custom funkcija za članke po kategorijama
Vizuelno uređivanje grupisanog sadržaja
Validacija kôda ( XHTML  i  CSS ) i korekcije grešaka
Korisne adrese
Pitanja i odgovori </li></ul>
Osnove PHP programiranja (1/2) <ul><li>Oznaka početka i kraja PHP kôda, komentari </li><ul><li>PHP kôd počinje oznakom  <?...
npr:  <?php echo &quot;Zdravo svete!&quot;; ?>
Višelinijski počinje sa  /*  završava  */  , u jednoj liniji počinje sa  //
Svaka linija php kôda završava se znakom  ; </li><ul><li>nepravilno:  $test = &quot;Zdravo svete!&quot; echo &quot;Poruka:...
pravilno:  $test = &quot;Zdravo svete!&quot;; echo &quot;Poruka: $test&quot;; </li></ul></ul><li>Promenljive i nizovi </li...
Davanje vrednosti promenljivoj:  $test = 5;
Definisanje niza:  $niz = array(&quot;vesti&quot;, &quot;sport&quot;, &quot;kultura&quot;, &quot;nauka&quot;);
$niz[0]  je  vesti ;  $niz[1]  je  sport ;  $niz[2]  je  kultura </li></ul></ul>
Osnove PHP programiranja (2/2) <ul><li>Uslovi i petlje (if...else; foreach; while) </li><ul><li>if (  $test < 5  ) {  echo...
Višestruke promenljive u izlazu: print <<<EOF <a href=&quot;$url&quot;>$naslov</a><br /> <em><strong>Sadržaj:</strong> $sa...
Upcoming SlideShare
Loading in …5
×

Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane

2,769 views

Published on

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.

Published in: Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,769
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
35
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane

  1. 1. Tema 19: Profesionalizacija veb-sajtova polaznika koji su zasnovani na “vordpres” (WordPress) sistemu za baratanje sadržajem (content management system). Izmena šablona naslovne strane kako bi veb-sajt dobio kompleksan ali u isto vreme i pregledan izgled. predavač: Aleksandar Urošević http://urosevic.net Škola web novinarstva, Udruženje novinara Srbije
  2. 2. Profesionalizacija WordPress bloga <ul><li>Osnove PHP programiranja
  3. 3. Struktura WordPress šablona
  4. 4. Dobavljanje i upotreba podataka u šablonu
  5. 5. Custom funkcija za članke po kategorijama
  6. 6. Vizuelno uređivanje grupisanog sadržaja
  7. 7. Validacija kôda ( XHTML i CSS ) i korekcije grešaka
  8. 8. Korisne adrese
  9. 9. Pitanja i odgovori </li></ul>
  10. 10. Osnove PHP programiranja (1/2) <ul><li>Oznaka početka i kraja PHP kôda, komentari </li><ul><li>PHP kôd počinje oznakom <?php a završava se ?>
  11. 11. npr: <?php echo &quot;Zdravo svete!&quot;; ?>
  12. 12. Višelinijski počinje sa /* završava */ , u jednoj liniji počinje sa //
  13. 13. Svaka linija php kôda završava se znakom ; </li><ul><li>nepravilno: $test = &quot;Zdravo svete!&quot; echo &quot;Poruka: $test&quot;
  14. 14. pravilno: $test = &quot;Zdravo svete!&quot;; echo &quot;Poruka: $test&quot;; </li></ul></ul><li>Promenljive i nizovi </li><ul><li>Promenljive (varijable) počinju znakom za dolar: $test
  15. 15. Davanje vrednosti promenljivoj: $test = 5;
  16. 16. Definisanje niza: $niz = array(&quot;vesti&quot;, &quot;sport&quot;, &quot;kultura&quot;, &quot;nauka&quot;);
  17. 17. $niz[0] je vesti ; $niz[1] je sport ; $niz[2] je kultura </li></ul></ul>
  18. 18. Osnove PHP programiranja (2/2) <ul><li>Uslovi i petlje (if...else; foreach; while) </li><ul><li>if ( $test < 5 ) { echo &quot;manje&quot;; } else { echo &quot;veće&quot;; } foreach ( $niz as $test ) { echo &quot;kategorija $test&quot;; } while ( $test++ < 5 ) { echo &quot;$test je manje od 5&quot;; } while ( $test++ < 5 ): echo &quot;$test je manje od 5&quot;; endwhile; </li></ul><li>Štampanje sadržaja </li><ul><li>Tekst i promenljive štampamo naredama echo i print . echo &quot;Promenljiva &quot;$ test &quot; ima vrednost $test&quot;;
  19. 19. Višestruke promenljive u izlazu: print <<<EOF <a href=&quot;$url&quot;>$naslov</a><br /> <em><strong>Sadržaj:</strong> $sadrzaj</em> EOF; </li></ul></ul>
  20. 20. Struktura WordPress šablona <ul><li>WordPress tema sastoji se od datoteka šablona: </li><ul><li>Dinamičke PHP „skripte“: </li><ul><li>functions.php sadrži korisničke funkcije za šablon (dinamički sidebar, domen teksta za lokalizaciju teme, prilagođeni prikaz sadržaja – članci po kategorijama )
  21. 21. index.php je naslovna strana bloga
  22. 22. post.php , single.php i page.php za prikaz pojedinačnih članaka i strana
  23. 23. comments.php za prikaz i pisanje komentara na članke
  24. 24. Ostale komponente: header.php , footer.php , sidebar.php , i dr. </li></ul><li>CSS definicije: style.css
  25. 25. Slike: direktorijum images/ sa potrebnim slikama </li></ul></ul>
  26. 26. Dobavljanje i upotreba podataka u šablonu (1/4) <ul><li>Dobavljanje podataka o člancima iz baze, njihovo procesiranje, smeštanje u wrappere ( Codex: Template Tags ) i formatiranje izlaza obavlja se u tzv. loop sekvenci. </li><ul><li><?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> ... generisanje sadržaja ... <?php endwhile; ?> <?php else : ?> ... događaj kada nema članaka u bazi ... <?php endif; ?> </li></ul><li>Pomoću get_posts() funkcije podaci se smeštaju u niz (npr. $post ). Pristupa im se pomoću foreach() funkcije. Korisni su za napredne korisnike ( Codex: Database Description ). </li></ul>
  27. 27. Dobavljanje i upotreba podataka u šablonu (2/4) <ul><li>Wrapperi ( http://codex.wordpress.org/Template_Tags ): </li><ul><li>the_title() za naslov članka
  28. 28. the_time() za vreme objavljivanja članka
  29. 29. the_category() za kategorije kojima članak pripada
  30. 30. the_excerpt() za sažetak članka
  31. 31. the_content() za sadržaj članka </li></ul><li>Najčešće korišćeni ključevi u nizu $post : </li><ul><li>$post->the_title za naslov članka
  32. 32. $post->the_category za kategorije kojima članak pripada
  33. 33. $post->the_excerpt za sažetak članka
  34. 34. $post->the_content za sadržaj članka </li></ul></ul>
  35. 35. Dobavljanje i upotreba podataka u šablonu (3/4) <ul><li>Za kompleksnije upite u loop sekvenci koristi se tag query_posts ( http://codex.wordpress.org/Template_Tags/query_posts ): </li><ul><li>Izbor poretka ( author , date , title , category , ID ) i načina ređanja članaka ( ASC / DSC ): query_posts(&quot; orderby=date&order=ASC &quot;);
  36. 36. Posebne kategorije: query_posts(&quot; cat=3,7,8 &quot;);
  37. 37. Isključivanje kategorije: query_posts(&quot; cat=-1 &quot;);
  38. 38. Proizvoljan broj članaka: query_posts(&quot; showposts=7 &quot;);
  39. 39. Preskakanje članaka: query_posts(&quot; offset=3 &quot;);
  40. 40. Dobavljanje određenog članka: query_posts(&quot; p=22 &quot;); </li></ul><li>Kombinovanje više parametara dodavanjem znaka & između parametara: cat=3,7,8 & showposts=7 & orderby=name & order=DSC </li></ul>
  41. 41. Dobavljanje i upotreba podataka u šablonu (4/4) <ul><li>Ispisivanje naslova i sažetka četiri članka počevši od prvog, iz kategorije „politika“, poređanih po rastućem datumu (od starih ka novima) – mora se staviti unutar loop sekvence:
  42. 42. <?php query_posts(&quot;showposts=4&offset=1&orderby=date&order=DSC&category_name=politika&quot;); while(have_posts()) { the_post(); ?> <div class=&quot;post&quot;> <h3><a href=&quot; <?php the_permalink(); ?> &quot;> <?php the_title(); ?> </a></h3> <div class=&quot;info&quot;>Objavljeno <?php the_time(&quot;j. F Y. u G:i&quot;); ?> </div> <div class=&quot;sazetak&quot;> <?php the_excerpt(); ?> </div> </div> <? } ?> </li></ul>
  43. 43. Custom funkcija za članke po kategorijama (1/3) <ul><li>Korisnički definisane funkcije smeštaju se u datoteku functions.php . Custom funkcija webnovinar_postpercat() : </li><ul><li>Lista 5 najnovijih članaka za svaku kategoriju prvog nivoa.
  44. 44. Za najnoviji članak pored naslova ispisuje i sažetak.
  45. 45. Linkovi za svaku kategoriju su u posebnoj kućici (div).
  46. 46. Kućice su raspoređene u dve kolone.
  47. 47. U temi na mestu gde je potrebno prikazati ovaj sadržaj, stavlja se: <?php webnovinar_postpercat(); ?> </li></ul><li>Kôd sa naredne tri strane spojiti i dodati na kraj datoteke functions.php </li></ul>
  48. 48. Custom funkcija za članke po kategorijama (2/4) <?php function webnovinar_postpercat() { $kategorije = get_categories( 'child_of=0&orderby=ID' ); // rutina za određivanje broja članaka po koloni $br_kat = 0; $br_levo = 0; foreach ( $kategorije as $kat ) { if ( $kat ->count ) { $br_kat ++; } } $kat_levo = $br_kat / 2; if ( $kat_levo > intval ( $kat_levo ) ) { $kat_levo = intval ( $kat_levo ) + 1; } foreach ( $kategorije as $kat ) { // procesiramo svaku kategoriju niza if ( $kat ->count > 0 ) { // uzimamo samo kategorije sa člancima $br_levo ++; // kontrolni brojač // otvaramo levu kolonu if ( $br_levo == 1 ) { echo ' <div id=&quot;levo&quot;> ' ; } ?>
  49. 49. Custom funkcija za članke po kategorijama (3/4) <div class=&quot;box&quot;> <h2><a href=&quot; <?php bloginfo( 'url' ); ?> /?cat= <?php echo $kat ->cat_ID; ?> &quot;> <?php echo $kat ->cat_name; ?> </a></h2> <ul> <?php // uzimamo najnovijih 5 članaka iz kategorije $kat $clanci = get_posts( 'numberposts=5&order=DSC&orderby=date&category='.$kat->cat_ID ); // procesiramo svaki članak u kategoriji $kat $br = 0; // kontrolni brojač za sažetak prvog članka foreach ( $clanci as $clanak ) { ?> <li><strong><a href=&quot; <?php bloginfo( 'url' ); ?> /?p= < ?php echo $clanak ->ID; ?> &quot; title=&quot; <?php echo $clanak ->post_date; ?> &quot;> <?php echo $clanak ->post_title; ?> </a> </strong> <?php if ( $br ++ == 0 ) { // štampamo sažetak prvog članka echo &quot; <p> &quot;. $clanak ->post_excerpt.&quot; </p> &quot;; } echo &quot; </li> &quot;; } // kraj procesiranja svakog članaka u kategoriji $kat ?> </ul> </div>
  50. 50. Custom funkcija za članke po kategorijama (4/4) <?php } // kraj uzimanja samo kategorija sa člancima if ( $br_levo == $kat_levo ) { // zatvaramo levu i otvaramo desnu kolonu echo ' </div><div id=&quot;desno&quot;> '; } elseif ( $br_levo == $br_kat ) { // zatvaramo desnu kolonu echo ' </div> '; } } // kraj foreach petlje $kategorije as $kat } // kraj funkcije webnovinar_postpercat() ?>
  51. 51. Vizuelno uređivanje grupisanog sadržaja (1/2) <ul>Sadržaj koji generiše funkcija webnovinar_postpercat() pozicionira se pomoću CSS stilova u datoteci style.css . (kôd 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; } </ul>
  52. 52. Vizuelno uređivanje grupisanog sadržaja (2/2) <ul>Vizuelno uređivanje kućica, linija, pozadina i fontova pomoću CSS-a u datoteci style.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; } </ul>
  53. 53. Validacija kôda (XHTML i CSS) i korekcije grešaka (1/2) <ul><li>Na http://validator.w3.org/ ukucatu URL bloga i kliknuti na dugme Check . </li><ul><li>Zelena strana – kôd je validan
  54. 54. Crvena strana – kôd sadrži greške </li></ul><li>Pažljivo pročitati opis greške i ispraviti istu u kôdu na mestu na kome se nalazi. </li><ul><li>Otvoreni XHTML tâg mora se zatvoriti: <img src=&quot;...&quot; alt=&quot;...&quot; /> <a href=&quot;...&quot; > ... </a> <div id=&quot;...&quot; > ... </div>
  55. 55. Tâg img mora imati atribut alt, kao i a (anchor) href: < a href =&quot;...&quot;>< img src =&quot;...&quot; alt =&quot;opis&quot; / >< /a > </li></ul><li>XHTML 1.1 specifikacija: http://www.w3.org/TR/xhtml11/ </li></ul>u XHTML kôdu postoje greške opis greške
  56. 56. Validacija kôda (XHTML i CSS) i korekcije grešaka (2/2) ispravan CSS kôd <ul><li>Na http://jigsaw.w3.org/css-validator/ ukucati URL bloga i kliknuti na dugme Check. </li><ul><li>Zelena strana – kôd je validan
  57. 57. Crvena strana – kôd sadrži greške </li></ul><li>U slučaju postojanja greške, pažljivo pročitajte opis greške i otklonite je.
  58. 58. Najčešće greške: </li><ul><li>Atributi background (boja pozadine) i color (boja teksta) uvek moraju da idu jedan uz drugi
  59. 59. Koristite kompaktne definicije; umesto margin-top , margin-bottom , margin-left i margin-right : margin: <top> <right> <bottom> <left> </li></ul><li>CSS 2.1 specifikacija: http://www.w3.org/TR/CSS21/ </li></ul>
  60. 60. Korisne adrese <ul><li>Kodeks WordPress-a http://codex.wordpress.org/ </li><ul><li>Template Tags http://codex.wordpress.org/Template_Tags
  61. 61. Database Description http://codex.wordpress.org/Database_Description
  62. 62. Formatiranje vremena http://codex.wordpress.org/Formatting_Date_and_Time
  63. 63. CSS http://codex.wordpress.org/CSS
  64. 64. Priprema za štampu http://codex.wordpress.org/Styling_for_Print </li></ul><li>WordPress na srpskom http://sr.wordpress.org/
  65. 65. WordPress forum na srpskom http://sr.forums.wordpress.org/
  66. 66. PHP reference http://www.php.net/manual/en/langref.php
  67. 67. Validator za XHTML http://validator.w3.org/
  68. 68. Validator za CSS http://jigsaw.w3.org/css-validator/
  69. 69. On uvek sve zna http://google.com/ </li></ul>
  70. 70. Pitanja i odgovori

×