• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane
 

Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane

on

  • 3,090 views

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

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.

Statistics

Views

Total Views
3,090
Views on SlideShare
3,052
Embed Views
38

Actions

Likes
1
Downloads
32
Comments
1

4 Embeds 38

http://www.webnovinar.org 25
http://www.linkedin.com 7
http://www.slideshare.net 5
http://studiovh.net 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane Profesionalizacija veb-sajtova polaznika i izmena šablona naslovne strane Presentation Transcript

    • 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
    • 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 &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 ;
          • nepravilno: $test = &quot;Zdravo svete!&quot; echo &quot;Poruka: $test&quot;
          • pravilno: $test = &quot;Zdravo svete!&quot;; echo &quot;Poruka: $test&quot;;
      • Promenljive i nizovi
        • Promenljive (varijable) počinju znakom za dolar: $test
        • 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
    • Osnove PHP programiranja (2/2)
      • Uslovi i petlje (if...else; foreach; while)
        • 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;
      • Štampanje sadržaja
        • Tekst i promenljive štampamo naredama echo i print . echo &quot;Promenljiva &quot;$ test &quot; ima vrednost $test&quot;;
        • Višestruke promenljive u izlazu: print <<<EOF <a href=&quot;$url&quot;>$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 ).
    • Dobavljanje i upotreba podataka u šablonu (2/4)
      • 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_category za kategorije kojima članak pripada
        • $post->the_excerpt za sažetak članka
        • $post->the_content za sadržaj članka
    • Dobavljanje i upotreba podataka u šablonu (3/4)
      • 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(&quot; orderby=date&order=ASC &quot;);
        • Posebne kategorije: query_posts(&quot; cat=3,7,8 &quot;);
        • Isključivanje kategorije: query_posts(&quot; cat=-1 &quot;);
        • Proizvoljan broj članaka: query_posts(&quot; showposts=7 &quot;);
        • Preskakanje članaka: query_posts(&quot; offset=3 &quot;);
        • Dobavljanje određenog članka: query_posts(&quot; p=22 &quot;);
      • Kombinovanje više parametara dodavanjem znaka & između parametara: cat=3,7,8 & showposts=7 & orderby=name & order=DSC
    • Dobavljanje i upotreba podataka u šablonu (4/4)
      • 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:
      • <?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> <? } ?>
    • 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(); ?>
      • Kôd sa naredne tri strane spojiti i dodati na kraj datoteke functions.php
    • 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;> ' ; } ?>
    • 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>
    • 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() ?>
    • 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 . (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; }
    • 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)
      • Na http://validator.w3.org/ ukucatu URL bloga i kliknuti na dugme Check .
        • Zelena strana – kôd je validan
        • Crvena strana – kôd sadrži greške
      • Pažljivo pročitati opis greške i ispraviti istu u kôdu na mestu na kome se nalazi.
        • Otvoreni XHTML tâg mora se zatvoriti: <img src=&quot;...&quot; alt=&quot;...&quot; /> <a href=&quot;...&quot; > ... </a> <div id=&quot;...&quot; > ... </div>
        • 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 >
      • XHTML 1.1 specifikacija: http://www.w3.org/TR/xhtml11/
      u XHTML kôdu postoje greške opis greške
    • Validacija kôda (XHTML i CSS) i korekcije grešaka (2/2) ispravan CSS kôd
      • Na http://jigsaw.w3.org/css-validator/ ukucati URL bloga i kliknuti na dugme Check.
        • Zelena strana – kôd je validan
        • Crvena strana – kôd sadrži greške
      • U slučaju postojanja greške, pažljivo pročitajte opis greške i otklonite je.
      • Najčešće greške:
        • Atributi background (boja pozadine) i color (boja teksta) uvek moraju da idu jedan uz drugi
        • Koristite kompaktne definicije; umesto margin-top , margin-bottom , margin-left i margin-right : margin: <top> <right> <bottom> <left>
      • CSS 2.1 specifikacija: http://www.w3.org/TR/CSS21/
    • Korisne adrese
      • Kodeks WordPress-a http://codex.wordpress.org/
        • Template Tags http://codex.wordpress.org/Template_Tags
        • Database Description http://codex.wordpress.org/Database_Description
        • Formatiranje vremena http://codex.wordpress.org/Formatting_Date_and_Time
        • CSS http://codex.wordpress.org/CSS
        • Priprema za štampu http://codex.wordpress.org/Styling_for_Print
      • WordPress na srpskom http://sr.wordpress.org/
      • WordPress forum na srpskom http://sr.forums.wordpress.org/
      • PHP reference http://www.php.net/manual/en/langref.php
      • Validator za XHTML http://validator.w3.org/
      • Validator za CSS http://jigsaw.w3.org/css-validator/
      • On uvek sve zna http://google.com/
    • Pitanja i odgovori