Osnove programiranja za veb-novinare

Tema: 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

Profesionalizacija WordPress bloga

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

Osnove PHP programiranja (1/2)

Oznaka početka i kraja PHP kôda, komentari

PHP kôd počinje oznakom <?php a završava se ?>

npr: <?php echo "Zdravo svete!"; ?>

Višelinijski počinje sa /* završava */ , u jednoj liniji počinje sa //

Svaka linija php kôda završava se znakom ;

nepravilno: $test = "Zdravo svete!" echo "Poruka: $test"

pravilno: $test = "Zdravo svete!"; echo "Poruka: $test";

Promenljive i nizovi

Promenljive (varijable) počinju znakom za dolar: $test

Davanje vrednosti promenljivoj: $test = 5;

Definisanje niza: $niz = array("vesti", "sport", "kultura", "nauka");

$niz[0] je vesti ; $niz[1] je sport ; $niz[2] je kultura

Osnove PHP programiranja (2/2)

Uslovi i petlje (if...else; foreach; while)

if ( $test < 5 ) { echo "manje"; } else { echo "veće"; } 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 sadržaja

Tekst i promenljive štampamo naredama echo i print . echo "Promenljiva "$ test " ima vrednost $test";

Višestruke promenljive u izlazu: print <<<EOF <a href="$url">$naslov</a><br /> <em><strong>Sadržaj:</strong> $sadrzaj</em> EOF;

Struktura WordPress šablona

WordPress tema sastoji se od datoteka šablona:

Dinamičke PHP „skripte“:

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 )

index.php je naslovna strana bloga

post.php , single.php i page.php za prikaz pojedinačnih članaka i strana

comments.php za prikaz i pisanje komentara na članke

Ostale komponente: header.php , footer.php , sidebar.php , i dr.

CSS definicije: style.css

Slike: direktorijum images/ sa potrebnim slikama

Dobavljanje i upotreba podataka u šablonu (1/4)

Dobavljanje podataka o člancima iz baze, njihovo procesiranje, smeštanje u wrappere ( Codex: Template Tags ) i formatiranje izlaza obavlja se u tzv. loop sekvenci.

<?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; ?>

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 ).

Wrapperi ( http://codex.wordpress.org/Template_Tags ):

the_title() za naslov članka

the_time() za vreme objavljivanja članka

the_category() za kategorije kojima članak pripada

the_excerpt() za sažetak članka

the_content() za sadržaj članka

Najčešće korišćeni ključevi u nizu $post :

$post->the_title za naslov članka

$post->the_dategory za kategorije kojima članak pripada

$post->the_excerpt za sažetak članka

$post->the_content za sadržaj članka

Za kompleksnije upite u loop sekvenci koristi se tag query_posts ( http://codex.wordpress.org/Template_Tags/query_posts ):

Izbor poretka ( author , date , title , category , ID ) i načina ređanja članaka ( ASC / DSC ): query_posts(" orderby=date&order=ASC ");

Posebne kategorije: query_posts(" cat=3,7,8 ");

Isključivanje kategorije: query_posts(" cat=-1 ");

Proizvoljan broj članaka: query_posts(" showposts=7 ");

Preskakanje članaka: query_posts(" offset=3 ");

Dobavljanje određenog članka: query_posts(" p=22 ");

Kombinovanje više parametara dodavanjem znaka & između parametara: cat=3,7,8 & showposts=7 & orderby=name & order=DSC

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):

<?php query_posts("showposts=4&offset=1&orderby=date&order=DSC&category_name=politika"); while(have_posts()) { the_post(); ?> <div class="post"> <h3><a href=" <?php the_permalink(); ?> "> <?php the_title(); ?> </a></h3> <div class="info">Objavljeno <?php the_time("j. F Y. u G:i"); ?> </div> <div class="sazetak"> <?php the_excerpt(); ?> </div> </div> <? } ?>

Custom funkcija za članke po kategorijama (1/3)

Korisnički definisane funkcije smeštaju se u datoteku functions.php . Custom funkcija webnovinar_postpercat() :

Lista 5 najnovijih članaka za svaku kategoriju prvog nivoa.

Za najnoviji članak pored naslova ispisuje i sažetak.

Linkovi za svaku kategoriju su u posebnoj kućici (div).

Kućice su raspoređene u dve kolone.

U temi na mestu gde je potrebno prikazati ovaj sadržaj, stavlja se: <?php webnovinar_postpercat(); ?>

Kompletan kôd funkcije i CSS definicija sa svim komentarima nalazi se na pokaznom blogu http://webnovinar.org/demo

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="levo"> ' ; } ?>

Custom funkcija za članke po kategorijama (3/4) <div class="box"> <h2><a href="/?cat= <?php echo $kat ->cat_ID; ?>"><?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="/?p= < ?php echo $clanak ->ID; ?> " title=" <?php echo $clanak ->post_date; ?> "> <?php echo $clanak ->post_title; ?> </a></strong> <?php if ( $br ++ == 0 ) { // štampamo sažetak prvog članka echo " <p> ". $clanak ->post_excerpt." </p> "; } echo " </li> "; } // kraj procesiranja svakog članaka u kategoriji $kat ?> </ul> </div>

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="desno"> '; } elseif ( $br_levo == $br_kat ) { // zatvaramo desnu kolonu echo ' </div> '; } } // kraj foreach petlje $kategorije as $kat } // kraj funkcije webnovinar_postpercat() ?>

Vizuelno uređivanje grupisanog sadržaja (1/2)

Sadržaj koji generiše funkcija webnovinar_postpercat() pozicionira se pomoću CSS stilova u datoteci 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; }

Vizuelno uređivanje grupisanog sadržaja (2/2)

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; }

Validacija kôda (XHTML i CSS) i korekcije grešaka (1/2)