Crearea Unei Teme WordPress

Crearea unei teme Word Press Lectia 1.

1. Creezi un folder pe care-l denumesti tutorial in htdocs/wordpress/themes2. In folderul tutorial creezi fisierele index.php si style.css cu ajutorul unui editor de text3. In index.php copiezi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;

charset=<?php bloginfo('charset'); ?>" /><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"

type="text/css" media="screen" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php

bloginfo('rss2_url'); ?>" /><link rel="alternate" type="text/xml" title="RSS .92" href="<?php

bloginfo('rss_url'); ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

bloginfo('atom_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_get_archives('type=monthly&format=link'); ?><?php //comments_popup_script(); // off by default ?><?php wp_head(); ?>

</head><body></body></html>

4. Salvezi fisierul cu numele index.php5. Fisierul style.css ramane pana una alta gol.

Explicatii in legatura cu fiserul index.php <?php bloginfo('stylesheet_url'); ?> - este o functie PHP care invoca locatia lui style.css in fiecare pagina a site-ului.

6. Copiezi in style.css urmatorul fisier:

1

/* Theme Name: TutorialTheme URI: http://www.wpdesigner.comDescription: This is my theme for a tutorial.Version: 1.0Author: Small PotatoAuthor URI: http://www.wpdesigner.com/*/ 7.Salvezi fisierul cu numele style.css si il inchizi Setarea temei Deschizi un browser in care scrii http://localhost/wordpress/wp-login.php. Mergi in zona de administrare unde activezi tema “tutorial”. Tine minte ca nu ai niciun thumbnail, deci ceea ce se deschide este o pagina complet goala. Tema a fost setata.

Lectia 2 (Header template)

In lectia de astazi aflam cum se invoca site-ul.1. Deschizi browser-ul si mergi la adresa http://localhost/wordpress unde vei gasi pagina alba de mai inainte (tema goala).2. Te intorci in folderul “tutorial” si deschizi cu editorul de text, index.php3. Intre <body> si </body> adaugi: <?php bloginfo('name'); ?> si apoi salvezi.4. Mergi la browser si dai refresh. Ar trebui sa iti apara titlul blogului tau. Al meu este “Demo Theme Development”. Ce s-a intamplat? Ai adaugat o linie de cod php in index.php inauntrul corpului paginii tale. Acea linie invoca informatiile despre site (blog): bloginfo(). In mod specific, el invoca numele blogului tau. Este numele pe care l-ai pus in weblog Title, la optiuni. Explicatii: <?php – porneste PHP bloginfo('name') – invoca informatiile despre blog, in mod special titlul ; - opreste invocarea ?> - inchide PHP5. De fiecare data cand adaugi sau schimbi ceva in fisierul index.php, salvezi si apoi dai refresh ca sa vezi schimbarea.6. Sa punem un link catre titlul site-ului. Acest lucru reclama un tag xhtml. Ne intoarcem la index.php7. Adaugam: <a href=”#”> si </a> pe aceiasi linie. Noua linie de cod ar trebui sa arate asa: <a href=”#”><?php bloginfo('name'); ?></a>8. Te intrci la browser, dai refresh si ar trebui sa ai deja titlul sub forma de link. Acuma, exista un link dar care nu are nicio legatura. Pentru ca este titlul site-ului, ai vrea sa-l legi de prima pagina (front page). Ca sa faci asta, scrii: <?php bloginfo('url'); ?>intre ghilimele de citare ale lui href=.9. Ar trebui sa ai:

2

http://localhost/wordpress/wp-login.php

http://localhost/wordpress

<a href=”<?php bloginfo('url');>”><?php bloginfo('name'); ?></a>10. Mergi la browser si dai refresh. Cand apesi link-ul, bara de sus a browserului ar trebui sa-ti arate: http://localhost/wordpress. Cand dai clik pe link ar trebui sa te trimita pe prima pagina. Primesti aceiasi pagina, dar ai adresa http://localhost/wordpress. Ce s-a intamplat? Ai schimbat titlul paginii intr-un link spre front page. Explicatii: bloginfo('url') – invoca informatiile despre blog, in special adresa URL, paginile principale <a> - este tagul xhtml care deschide un link </a> - inchide un link href = ” ” - este prescurtarea valorii hypertext. Ceea ce se gaseste intre ghilimele “ si “ reprezinta valoarea. Spus in cuvinte, codul de mai sus inseamna ca am pornit un link. Valoarea link-ului meu este url-ul site-ului; am utilizat functia PHP bloginfo('url') ca sa invoc adresa URL. Numel link-ului este numele site-ului. Am utilizat apoi functia PHP bloginfo('name') ca sa invoc titlul site-ului. Am inchis link-ul.11. Adaugi tagurile <h1> si </h1> in jurul liniei de cod de mai devreme:<h1><a href= ”<?php bloginfo('url'); ?>” > <?php bloginfo('name') ?> </a> </h1>Salvezi si mergi din nou in browser, dai refresh.12. Invoci descrierea blogului scriind chiar sub codul link-ului linia: <?php bloginfo('description'); ?> deci vei avea: <h1><a href= ”<?php bloginfo('url'); ?>” > <?php bloginfo('name') ?> </a> </h1> <?php bloginfo('description'); ?>13. Salvezi si dai refresh in browser ca sa vezi daca descrierea apare sub link. Poti schimba descrierea site-ului mai tarziu.14. In pasul care urmeaza introducem un nou tag si anume DIV. Scrie deci <div> si </div> in jurul a tot ceea ce ai scris pana acuma: <div><h1><a href=”<?php bloginfo('url'); ?>” ><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> </div>Salvezi si dai refresh in browser. Nu vei observa nicio schimbare. Gandeste-te la DIV ca la o cutie invizibila. El este aici ca sa separe titlul blogului si descrierea de orice altceva. Pentru ca nu ai inca style, nu ai continut separat. Mai tarziu, vei utiliza style.css pentru stilizarea cutiei invizibile. Poti sa dai etichetei DIV borders, paddings, margins, background color, background images etc.15. Adauga id=”header” etichetei DIV astfel: <div id=”header”>16. Salveaza si apoi da refresh in browser. Aceasta schimbare nu inseamna inca nimic. Atribuim un id etichetei DIV pentru ca vor fi mai multe “cutii goale” (div-uri), deci ai nevoie sa separi o cutie invizibila de alta, nu-i asa?

Lectia numarul 3 Buclele (The Loops) Buclele invoca intrarile site-ului tau. Este cel mai important set de cod PHP. Deschizi fisierul index.php si adaugi o eticheta DIV sub zona header. Dai numele “container” pentru id: <div id=”container”> </div>Va veti intreba pentru ce este acest DIV? El este pentru a separa continutul site-ului de orice altceva

3



care vine dupa, ca de exemplu sidebar-ul sau footer-ul.17. Adauga urmatorul cod intre tagurile DIV Container: <?php if(have_posts()): ?><?php while(have_posts()): the_post() ?> <?php endwhile; ?> <?php endif; ?> Din acest punct este usor sa recunosti fiecare parte de cod, ce este si cum lucreaza. Ceea ce tocmai ai scris este numit Bucla (loop) in Word Press. Inainte de a explica ce face fiecare cod, ar trebui sa ai asta: <body> <div id =”header”> <h1><a href=”<?php bloginfo('url'); ?>” ><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description');?> </div>

<div id=”container”> <?php if (have_posts()): ?><?php while(have_posts()): the_post; ?> <?php endwhile; ?> <?php endif; ?> </div> </body> </html>Observi ca am indentat liniile continutului. Aceasta este pentru organizare. Nu este indeajuns sa scrii cod; este necesar sa-l organizezi ca sa vezi ce este si de cine este legat. Dar sa vedem cum functioneaza. if(have_posts()) - verifica sa vezi daca ai (have) un post

while(have_post()) - daca ai un post, pana cand (while) ai orice post, executa the_post()

the_post() - invoca postul pentru a fi aratat pe ecran

endwhile; - inchide comanda while()

endif; - inchide comanda if()In lectia anterioara ai invatat sa invoci titlul blogului utilizand bloginfo('name'). Acuma vei invata cum sa invoci titlul postarii (post) intre bucle (loop). 18. Scrie <? php the_title(); ?> dupa the_post();?> dar inainte de <?php endwhile; ?>. Salveaza index.php si da refresh la browser. Ar trebui sa vezi Hello World dedesubt de descrierea blogului. Implicit, blogul tau are o singura postare. Pentru mine, blogul de test are mai multe postari, asa ca am mai multe titluri. 19 . Intoarce-te la post titles si tranforma-le in link-uri. Salveaza index.php si da refresh. Acuma titurile tale sunt link-uri dar nu duc nicaieri. Pentru a rezolva problema ai nevoie sa inclocuiesti semnul # cu the_permalink(). Hai s-o facem!

<a href=”<?php the_permalink(); ?>” ><?php the_title(); ?> </a>Permalink-ul (the_permalink()) este o functie PHP care invoca locatia sau adresa fiecarei postari.. Salvezi si dai refresh. Daca ai un singur titlu Hello World, da click pe acel link; privesti in bara de sus din browser si observi ca nu mai este http://localhost/wordpress# .Daca ai mai multe titluri-link vei vedea fiecare link pe o alta pagina. Dar titurile noastre sunt toate pe aceiasi linie. Ca sa le separam adaugam sub-header-ul <h2> si </h2> in jurul fiecarui link: <h2><a href=”<?php the_permalink(); ?>” ><?php the_title(); ?></a></h2>

4


Sa ne amintim ca H1(header) se foloseste la titlu si H2 (sub-header) la subtitlu. Salvam index.php si dam refresh in browser pentru a vedea schimbarile. 20. La final ar trebui sa avem codul urmator:

<body><div id=”header”><h1><a href=”<?php bloginfo('url'); ?>”><?php bloginfo('name'); ?></a></h1><?php bloginfo('description'); ?></div><div id=”container”><?php if(have_posts()): ?><?php while(have_posts()): the_post(); ?> <h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2><?php endwhile; ?><?php endif; ?></div></body></html>

Lectia numarul 4 – Continutul (The Content) Astazi vom vorbi despre ceea ce chiar conteaza. Cum faci sa adaugi continut in blog si sa-l afisezi? Deschidem fisierul index.php din folderul “tutorial'. Scriem sub codul titlului postarii urmatoarea linie de cod: <?php the_content(); ?> deci vom avea:

------------------- <h2><a href=”<?php the_permalink(); ?>”>---------- <?php the_content; ?> <?php endwhile; ?> <?php endif; ?> Salvam si dam refresh in browser. Ce s-a intamplat? Folosim functia PHP the_content() ca sa invocam postarile. In acest moment, continutul este doar o linie lunga de text asezata in partea dreapta a ferestrei pentru ca nu i-au fost aplicate stiluri. Sa ne amintim de style.css. Mai tarziu il vom folosi pentru a controla cum arata totul. Mergi in browser, dai click pe View – source. Se deschide o fereastra de cod. Observi diferenta dintre codul tau si codul sursa? Tot ceea ce este in codul sursa este invocat de functia the_content(). Destul de folositor, nu? Fara softwear-ul de bloguri, ar trebui sa codifici tot textul si imaginile aferente.Ma trebuie spus ca in codul sursa apare tagul html P. El nu este prezent in index.php dar este de gasit in codul sursa. Tagul P. Ce si cum?In timp ce scrii o postare, schimbi linia la un paragraf. Ai nevoie de o cale pentru asta. Fiecare text se imparte in paragrafe. “Invelesti” cu un tag invizibil (DIV) the_content si ii dai clasa “entry” astfel:

<div class=”entry”> </div>

5

Ar trebui sa ai cam asa ceva: <div id=”container”> <?php if(have_posts()): ?><?php while ------- <h2><a href =”<?php the_permalink>”>----- <div class=”entry”> <?php the_content(); ?> </div> <?php endwhile; ?>------------ Salveaza si da refresh in browser. Daca mergi la codul sursa vei vedea DIV-ul class=”entry” inconjurand fiecare postare. De ce? Primul motiv ar fi ca poti sa spui unde incep titlul postarilor si intrarile. Al doilea motiv este acela ca poti stiliza cu style.css. Daca vrei poti sa stilizezi intrarile fara sa afectezi nimic altceva.Care este diferenta dintre id si class? Pentru fiecare “cutie invizibila” DIV folosesti id ca s-o

denumesti. Iti amintesti id=”header”? Deci care e diferenta? id este unic, in timp ce class nu este. Daca privesti codul sursa ai doar un singur id=”header” si un singur id=”container” dar sunt multiple class=”entry”. Pot fi header si container in schimb id-uri? Desigur. Deci tine minte acest lucru: nu poti repeta niciun id! De exemplu nu poti avea doua id-uri header pe aceiasi pagina. Cand vrei sa folosesti si sa refolosesti ceva ca de exemplu post entries, utilizezi class.

Pasul urmator: Pune un DIV in jurul titlului postarii si al intrarii posturilor. Numeste-l class=”posts”. Vei avea deci: <div class=”posts”> </div>(Numele claselor si id-urilor pot fi oricare pe care le doresti. Le poti denumi dupa mancarea ta favorita dar post si entry sunt scurte si lesne de memorat, nu?). Deci acuma vei avea: <div id=”container”> <?php if(have_posts()): ?><?php while()------- <div class=”post”> <h2><a href=”<?php the_permalink”>---- <div class=”entry”> <?php the_content(); ?> </div> </div> <?php endwhile; ?> Salveaza fisierul index.php si da refresh in browser ca sa vezi schimbarile din codul sursa. De ce am adaugat inca un DIV la post title si post entry? Am adaugat div-ul class=”entry” pentru a seapara titlul postarii de intrarea postarii. Div-ul class=”post” este pentru separarea unei postari de alta.

6

Lectia numarul 5 Postmetadata

Astazi vom vorbi despre date, categorii, autor, numarul comentariilor si diverse alte informatii specifice postarilor. Deschidem index.php. Paul 1. Copiem codul postmetadata.txt (aflat pe site-ul lui “small potato” la lectia “postmetadata”) sub <?php the_content(); ?> (Pentru aceasta parte doar copiezi. Cand am pus temele Wordpress impreuna, am copiat de asemenea si aceasta parte. Nu este inca nevoie sa intelegi totul. )

<p class="postmetadata">

<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />

<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>

</p>

Acest screen-shot a fost impartit. Acorda atentie organizarii si amplasarii codului postmetadata. Nu taia codul la 1Comment # ca mai jos:

<div class=”entry”> <?php the_content(); ?> <p class = “postmetadata”> <?php_e('Filed under:'); ?><?php the_category(',') ?><?php <?php comments_popup_link('No Comments» ',' 1Comment&# </p> </div>Salveaza si da refresh in browser si vei vedea schimbarile. Te poti uita si in codul sursa al paginii ca sa vezi cum arata postmetadata. Explicatii:<p class=”postmetadata”> si </p> - toate aceste informatii postmetadata stau intre un set de paragrafe numite class=”postmetadata” pentru ca vrem sa separam postmetadata de continut si intrarile postarilor. Fara tagurile de paragraf <p>, metadatele continua acolo unde ai terminat continutul fara spatii si diferente intre continut si postmetadata.<?php_e('Filed under &#58'); ?> - &amp#58; este codul pentru invocarea a doua puncte (:).

<?php the_category(','); ?> - the_category() este o functie PHP care invoca categoriile cu care etichetezi postarile. Daca pui Filed under: si the_category() impreuna vei avea: Numele categoriei 1, numele categoriei 2; virgula inauntrul categoriei the_category() este o cale de separare a numelor categoriilor.<?php_e('by'); ?> - la fel ca Filed under: daca creezi o tema de uz personal, inconjoara _e( ) in

jurul cuvantului “by” daca este necesar. _e( ) face asta ca sa poti crea teme translatabile, un lucru f. important atunci cand creezi teme folosite de oameni de pe tot globul.<?php the_author(); ?> - printeaza (arata) numele tau sau cine publica postarea

7

http://www.wpdesigner.com/2007/03/02/wp-theme-lesson-6-sidebar/

<?php comments_popup_link('No Comments» ',' % Comments»'); ?> - invoca o fereastra pop-up , atunci cand este activata<?php edit_post_link('Edit',|',”);?> - este vizibil doar cand te loghezi ca administrator

Lectia numarul 6 Else, Post ID, Link title

Else, Post ID si Link title sunt cele trei optiuni pe care le poti adauga la fiecare postare. Ele sunt optionale. Pasul 1. Scrii urmatorul cod sub <?php endwhile; ?> :

<?php else : ?><div class=”post”><h2><?php_e('Not Found'); ?></h2></div>Salvezi dar nu vei vedea nicio diferenta. Explicatii: Ne intoarcem la lectia Bucla (the loop) ca sa intelegem ce se intampla.Aici avem bucla:

<?php if(have_posts()):?><?php while(have_posts()): the_post(); ?><?php endwhile; ?><?php endif; ?>

Prima data, if(have_posts()) verifica daca ai vreun post pe blog. Al doilea, while(have_posts()) executa the_post() care invoca postarile tale. Else este ceea ce trebuie sa scrii atunci cand nu ai alte alternative. Imagineaza-ti while() si endwhile; cuibarite intre if () si else: . Din acest motiv <?php else :?> vine dupa <?php endwhile; ?>Acuma sa aflam ce este else, ce ii spune lui WP sa faca atunci cand nu exista nicio postare sau nu gaseste vreuna. Ii spui lui WP sa arate un mesaj de eroare NOT FOUND. Acest mesaj poate fi orice. Uita-te la fisierul index.php de mai sus spre exemplu. In acest exemplu, mesajul Not Found sta inauntrul linie de cod <?php_e(' '); ?>.Mai departe, intreg mesajul si codul Not found este inconjurat de tagurile <h2> si </h2>. Nu sunt neaparat necesare. Poti sa scrii pur si simplu:<div class=”post”>Not Found</div>Dar folosind tagurile <h2> pentru mesajul de eroare este evident pentru vizitatori ca nu exista nimic pe acea pagina.

Pasul 2. Adauga id=”post-<?php the_ID(); ?>” la <div class=”post”>, adica vei avea:<div class=”post” id=”post - <?php the_ID(); ?>”> Salvezi index.php si dai refresh in browser. Mergi la sursa paginii si vei vedea ca fiecare postare are un id atasat. the_ID( ) invoca id-ul fiecarei postari. Il folosim ca sa customizeze imaginea fiecarei postari in parte. Mai tarziu, cand vom folosi style.css vom spune temei ca fiecare post sa

8

arate la fel. Cu un ID unic atasat fiecarei postari poti face ca ea sa arate diferit de celelalte. Fara ID-uri nu va exista nicio diferenta in interiorul style.css.Cum poti atribui ambele valori class si id aceluiasi DIV ? DIV este un tag, class este un atribut si id este tot atribut. Fiecare tag (eticheta) poate avea mai multe atribute. (id este un atribut xhtml. the_ID() este o functie PHP. Ele sunt diferite!!).

Pasul 3. Adauga title=”<?php the_title(); ?>” linkului titlu al postarii, adica:

<h2><a href=”<?php the_permalink(); ?>”title=”<?php the_title(); ?>”></a></h2>Salveaza si da refresh in browser. Mergi din nou la codul sursa si uita-te dupa orice post title link. Daca el este Hello World, atunci la stanga el ar trebui sa fie title=”Hello World”.

Title=” ” este un alt atribut xhtml pentru tagul (link) <a>. In acest caz titlul fiecarei postari este de asemenea linkul descrierii. Este motivul pentru care utilizam din nou functia PHP the_title().Daca nu folosesti functia the_title() ca o valoare pentru title=” “, atunci fiecare titlu link al postarilor vor avea aceiasi descriere. De exemplu, daca in loc de the_title() folosesti title=” ”, fiecare postare va avea ca descriere Click me.

Lectia numarul 7 Posts Nav LinkIn josul fiecarui blog WP exista Next Page sau Previous Pagelink. Poti invoca aceste linkuri folosind posts_nav_link() din sistemul de sabloane WP. Deschidem index.php. Pasul 1. Adaugam urmatorul cod intre <?php endwhile; ?> si <?php else : ?> astfel ca vom avea:

<?php endwhile; ?> <div class=”navigation”> <?php posts_nav_link(); ?></div><?php else : ?> Explicatii<div class=”navigation”> porneste o cutie invizibila numita navigare si care inconjoara zona de linkuri Next si Previous.post_nav_link – invoca linkurile Next si Previous

</div> - inchide cutia invizibila numita navigare (navigation)Salvam fisierul index.php si apoi dam refresh in browser sa vedem linkurile Next si Previous. Implicit daca nu este decat un post, nu va aparea nimic.Cum imbunatatim functia php posts_nav_link() : ? La fel ca la postmetadata poti sa-i dai acestei functii un set de trei valori care poate fi orice doresti sa fie afisat intre, dupa si inainte de Next si Previous. Va arata cam asa:<?php posts_nav_link('in between', 'before', 'after'); ?> Sidebar-ul Pentru inceput, sidebar-ul arata destul de infricosator, dar nu este deloc asa. Odata ce i-ai inteles si utilizat structura, esti gata sa-l codifici foarte repede. Inainte de a incepe, sa revedem index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

9

<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?><?php wp_head(); ?>

</head><body>

<div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1><?php bloginfo('description'); ?></div>

<div id="container"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="entry"><?php the_content(); ?><p class="postmetadata">

<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>

</p>

10

</div></div>

<?php endwhile; ?><div class="navigation">

<?php posts_nav_link(); ?></div>

<?php else : ?><div class="post">

<h2><?php _e('Not Found'); ?></h2></div>

<?php endif; ?></div></body></html>

Pasul 1 Scriem urmatorul cod sub container, in apropiere de tagul </body>:<div class=”sidebar”></div>adica va rezulta:

</div> (inchide tagul container)

</div class=”sidebar”></div></body></html>

Pasul 2 Deschidem o lista neordonata in cutia sidebar: <ul> - deschide o lista neordonata </ul> - inchide o lista neordonataPrin urmare vom avea urmatorul segment de cod:<div class=”sidebar”><ul></ul></div>

Pasul 3 Adaugam o lista de itemi (LI) inauntrul listei neordonate (UL) si punem un sub-heading (h2) inauntrul listei de itemi (LI) :<ul> <li> <h2> <?php_e('Categories'); ?> </h2> </li></ul>

11

Explicatii: <li> - deschide lista de itemi <h2> - deschide sub-heading <?php_e('Categories'); ?> - afiseaza cuvantul Categories </h2> - inchide sub- heading </li> - inchide lista de itemiSalveaza index.php si da refresh in browser. Ar trebui sa vezi sub-headingul Categories.

Pasul 4 Adauga urmatorul cod in lista itemilor:<ul><li> <h2> <?php_e('Categories'); ?></h2></ul><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?></ul></li></ul>

Explicatii: <?php wp_list_cats(); ?> - invoca lista de linkuri ale categoriilorSalveaza si da refresh.Categoria ta implicita este Uncategorized. Alte explicatii:sort_column=name – lista alfabetica a categoriilor

optioncount=1 – arata numarul de postari din fiecare categorieshierarchical=0 nu adauga subcategorii& - de fiecare data cand adaugi un nou atribut trebuie sa scrii semnul & inainte de a-l separa de alte atribute. Spre exemplu & sta intre sort_column si optioncount.Cand ne raportam la sidebar, liste neorodonate si itemi, trebuie sa tinem cont de regula care spune ca trebuie sa inchidem toate tagurile in ordinea in care le-am deschis.

Lectia numarul 8 Page – Link ListingVom continua sa lucram cu Sidebar. Sa vedem cum putem adauga widget-uri in Sidebar. Pasul 1 Adaugam urmatorul cod in varful (top) blocului Categories:<?php wp_list_pages(); ?> adica va rezulta:

<ul> <?php wp_list_pages(); ?> <li><h2><?php_e('Categories'); ?></h2> <ul> <?php wp_list_cats('---=----- </ul>

12

</li></ul> Implicit, ai doar o singura pagina link. Eu am adaugat mai multe pagini si pagini-copil blogului meu offline. Din acesta cauza am pastrat nivelurile la page linkuri. In screen-shot-ul alaturat, Pages title pentru lista nu se potriveste cu dimensiunea Categories title din lista categories-link. Ca sa o potrivesc adaug 'title_li=<h2>Pages</h2>' la wp_list_pages().Voi avea:<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>Salvam si dam refresh sa vedem schimbarile.title_li este un atribut folosit la imbunatatirea aspectului listei de Page-link.ImbunatatiriIn exemplul meu am patru niveluri de Page link-uri. Unele sabloane nu pot manipula atat de multe niveluri de link-uri in sidebar. Ca sa limitam numarul de link-uri in lista, adaugam atributul depth la wp_list_pages() si il setam la 3. Astfel, va rezulta urmatorul segment de cod:<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>Semnul & este aici ca sa separe depth de title_li.

Lectia numarul 9 Get Archives and LinksPasul 1 Adaugarea linkului arhiva Scriem urmatorul cod in zona Sidebar, sub lista Categories:<li><h2><?php _e('Archives'); ?></h2><ul><?php wp_get_archives('type=monthly');?></ul></li>Salvam fisierul index.php si dam refresh in browser. Explicatii:Utilizam functia PHP wp_get_archives() cu atributul type si valoarea monthly pentru a invoca link-ul de arhiva lunara.

Pasul 2 Adaugam link-ul blogroll: Scriem urmatorul cod sub lista de linkuri Archives:<?php get_links_list(); ?> adica vom avea:<li><h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?>---- </ul></li><?php get_links_list(); ?>

Salvam si dam refresh.

13

Lectia numarul 10 Search Form and CalendarPasul 1 Adaugarea searchDeschidem un nou fisier pe care-l lasam gol dar il salvam cu numele searchform.php in acelasi folder tutorial in care se gaseste si index.php. Copiem in el codul urmator:<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"><div>

<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" /><br />

<input type="submit" id="searchsubmit" value="Search" /></div></form>

Dupa ce am copiat, salvam fisierul cu numele searchform.php. Asta e tot! In index.php scriem urmatorul cod in varful (top) listei din interiorul Sidebar:<li id=”search”><?php include(TEMPLATEPATH.'/searchform.php'); ?></li>Deci vom avea:<ul><li id=”search”><?php include(TEMPLATEPATH.'/searchform.php'); ?></li><?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> -------- ----------- ------------- Salvezi si dai refresh. Explicatii:<li id=”search”> - porneste o lista de itemi si un id numit searchinclude – include orice fisier pe care-l vrei. In acest caz este codul continut in fisierul searchform.php.TEMPLATEPATH – locatia foderului temei tale, wp-content/themes/tutorial

'/searchform.php' – locatia si numele fisierului (searchform.php)

Punctul . Dintre TEMPLATEPATH si '/searchform.php' conecteaza tema cu wp-content/themes/tutorial/searchform.php

Pasul 2 Adaugare calendar Scriem urmatorul cod sub Search form sau Page-listing block:<li id=”calendar”><h2><?php _e('Calendar'); ?></h2><?php get_calendar(); ?></li>Prin urmare vom avea ceva de forma:<li id=”search”>

14

<?php include(TEMPLATEPATH.'/searchform.php'); ?></li><li id=”calendar”><h2><?php _e('Calendar'); ?></h2><?php get_calendar(); ?></li>Explicatii: <li id=”calendar”> - deschide o lista de itemi cu id-ul numit “calendar”

<?php _e('Calendar'); ?> - afiseaza cuvantul Calendar

get_calendar() - invoca calendarul utilizand functia PHP get_calendar()

Pasul 3 Adaugarea metaScriem urmatorul cod sub get_links_list() :<li><h2><?php _e('Meta'); ?></h2><ul><?php wp_register(); ?><li><?php wp_loginout(); ?> </li><?php wp_meta(); ?></ul></li>Salvam si dam refresh.

Lectia numarul 11: Widgetarea sidebar-ului Widgetarea inseamna simplu sa faci Sidebarul gata pentru plug-in-uri. Acestea te ajuta sa rearanjezi sidebarul.Pasul1: Crearea fisierului functions.phpDeschizi un nou fisier, il lasi gol initial, dar il salvezi cu numele functions.php. Copiezi in el fisierul functions.txt care este:<?phpif ( function_exists('register_sidebar') ) register_sidebar();?>Salvezi fisierul in acelasi director cu index.php (din tema tutorial).

Pasul 2 Widgetizarea sidebarului Scrie urmatorul cod dupa primul tag <ul> din zona sidebar:<?php if(function_exists('dynamic_sidebar')&&dynamic_sidebar()):else: ?> deci vei avea:<ul><?php if(function_exists('dynamic_sidebar')&& dynamic_sidebar()): else ?> <li id = “search”> <?php include(TEMPLATEPATH.'/searchform.php'); ?> </li>

15

------- ----------Apoi scrie <?php endif; ?> imediat inainte de tagul </ul> : deci vei avea:<?php endif; ?></ul></div></body></html>Pasul 3 Salvezi index.php. Nu vei vedea nicio schimbare in pagina web pana cand nu vei instala pluginurile Widget. O vom face mai tarziu.

Lectia numarul 12 Footer Aceasta lectie e usoara. Vom adauga un DIV sub div-ul Sidebar unde vom scrie copyright-ul. Pasul1 Adaugarea DIV-ului Scrie urmatorul cod sub div-ul Sidebar: <div id=”footer”> </div>adica vei avea: </div> (sfarsitul sidebarului)

<div id=”footer”> </div> </body> </html>

Pasul 2 Adauga textul footer inauntrul tagului paragraf. Pentru asta poti sa scrii orice vrei. Mai jos e mesaju meu:<p>Copyright© 2007<?php bloginfo('name'); ?></p>adica vei avea:<div id=”footer”><p>Copyright © 2007 <?php bloginfo('name'); ?></p></div>

Explicatii: © - codul pentru copyright Aminteste-ti ca functia bloginfo() se utilizeaza cand pui impreuna header-ul. O folosim si pentru footer.'name' – invoca titlul blogului

16

Lectia numarul 13 Style.cssCea mai buna cale sa inveti css este sa “sapi” direct in fisier. Invers decat la xhtml si PHP, in CSS nu ai nevoie sa te atingi de miezul fisierului sablonului. Nu trebuie sa intelegi niciun concept de baza. Trebuie doar sa te “scufunzi” in el.

Pasul 1 Deschizi MAMP, theme folder, browser-ul Firefox, browser-ul Opera si style.cssPune ambele browsere la adresa http://localhost/wordpress. Aici este locul unde ai cu adevarat nevoie de ambele browsere ca sa iti testezi tema pentru ca browsere diferite interpreteaza codul CSS diferit. E bine sa testezi tema cu cat mai multe browsere si sisteme de operare.

Pasul 2 Scrie urmatorul cod in style.css :

body {margin:0;font-family: Arial, Helvetica, gerogia, Sans-serif;font-size: 12px;text-align: left;vetical-align: top;background: #ffffff;color: #000000;}Salveaza style.css si da refresh in ambele browsere.

Explicatii:body { } - eticheta si orice se afla intre cele doua acolade sunt valori si atribute

: - doua puncte inseamna pornirea iar punct si virgula inseamna oprireaInainte de a merge mai departe, motivul pentru care folosim body{} (este un selector CSS) este acela ca vom lucra la stiluri in body. Nu stilizam <header> pentru ca aici nu avem ce stiliza.margin: 0; - este spatiul de margine (implicit este zero). Daca vrei ca marginea sa fie mai mare schimbi valoarea in 10px, 20px etc font – family: Arial, Helvetica, Georgia, Sans-serif; - selecteaza fontul utilizat in pagina web. Primul font este Arial. Daca utilizatorul siteului tau nu are Arial, trece la Helvetica si tot asa.font-size: 12px; – dimensiunea fontului

text-align: left; - alinierea textului

vertical-align: top; - asigura-te ca totul incepe de la varf

background: #ffffff; - inseamna culoarea alb a fondului

color: # 000000; - inseamna culoarea neagra a textului

Lectia numarul 14 Hex Codes si Styling links

17


Codul hexadecimal– precedat de semnul diez (#) fiecare cod de culori are sase numere. Acestea merg de la #ffffff (alb) pana la #oooooo (negru).

Pasul 1 Scrie urmatorul cod sub selectorul body{ } :a : link, a : visited {text-decoration: underline;color: #336699;}Ce iseamna asta? Te asiguri ca toate linkurile sunt subliniate (text-decoration: underline;) si

albastre (color: #336699;)a: link este pentru stilizarea linkului; cand transformi un cuvant in link folosesti taguriele <a> si </a> deci A in a: linka: visited este pentru stilizarea linkurilor apsate, deci visted este a: visited

Pasul 2 Scrie urmatorul cod sub a: link, a:visited} :a: hover {text-decoration: none;}Acest lucru te asigura ca linkul subliniat dispare cand treci peste el. Daca vrei ca linkul sa apara colorat scrii:a: hover {text-decoration: none;color: #ffoooo;}

Lectia numarul 15 Widths si FloatsPrimul lucru pe care-l ai de pus la punct este sa stabilesti ce vrei sa faci cu tema ta. Folosesti 750px (fiecare 100 pixeli are un inch). Tema ta depinde de spatiul de vizitare al fiecarui utilizator. Este interzis sa folosesti o tema de 900 px pentru o audienta care foloseste o rezolutie de 800x600 pixeli; asta inseamna ca tema depaseste cu 100 de pixeli ecranul! Cum limitezi la 750 de pixeli latimea? Pentru asta ai nevoie ca tot ceea ce se afla in site sa aiba 750px in DIV. Totul, incluzand aici header, contents, sidebar si footer.

Pasul 1Adauga: <div id=”wrapper”> dupa <body>Adauga: </div> inainte de </body>Scrie urmatoarele in style.css:#wrapper {margin: 0 auto 0 auto;width: 750px;text-align: left;}In css, in special in style.css, semnul # arata cum te adresezi unui DIV si id. Punctul arata cum

18

adresezi un DIV cu o clasa. Pentru o clasa de exemplu, daca codul este <div class=”wrapper”> atunci folosesti .wrapper in loc de #wrapper DIV.Salveaza-le pe ambele, index.php si style.css. Da refresh in ambele browsere.

Pasul 2 Mergi in style.css si schimba text-align: left; inauntrul lui body{} cu text-align:center;

Pasul 3 Fa headerul la stanga cu o latime de 750 pixeli astfel:#header {float: left;width:750px;}

Pasul 4Fa containerul la stanga cu o latime de 500px:#container{float: left;width: 500px;}

Pasul 5Fa sidebarul la stanga cu o latime de 240px pe fundal gri:.sidebar{float: left;width: 240px;background: #eeeeee;}(Tine minte ca nu am folosit semnul # pentru adresa DIV-ului sidebar ci un punct . )

Pasul 6Fa footer-ul la stanga de 750 pixeli latime:#footer{clear: both;float: left;width: 750px;}

Care e diferenta dintre stilizarea header si footer? Raspunsul este prezenta lui clear: both; in footer{}. Acesta este pentru a fi siguri ca footer nu are nimic pe langa el precum sidebar sau container.Slaveaza style.css si da refresh.

Pasul 7Adauga cei 10 pixeli ramasi la sidebar folosind marginea. Codul sidebar style va arata asa:

19

.sidebar{float: left;width: 240px;background: #eeeeee;margin: 0 0 0 10px;}Specificare: margin:0 0 0 10px; inseamna 0 top, 0 right, 0 bottom si 10-x left.

Pasul 8Acest pas este in cazul in care pui o margine de 20 pixeli in loc de 10. O margine de 20 de pixeli iti sparge sablonul si iti arunca sidebarul in partea de jos a paginii pentru ca o margine de 20 pixeli face cat suma latimilor Containerului si Sidebarului egala cu 760 si nu 750. Acesta este ceea ce se cheama un bug in I.E.Pentru a fixa bug-ul adauga display: inline; la sidebar. Sidebarul ar trebui sa arate astfel:

.sidebar{float: left;width: 240px;background: #eeeeee;margin: 0 0 0 10px;display: inline;}

Si iata cum ar trebui sa arate in acest moment fisierul index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">






bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

20

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?><li id="search">

<?php include(TEMPLATEPATH . '/searchform.php'); ?></li><li id="calendar"><h2><?php _e('Calendar'); ?></h2>

<?php get_calendar(); ?></li><?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?><li><h2><?php _e('Categories'); ?></h2>

<ul><?php

wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?></ul>

</li><li><h2><?php _e('Archives'); ?></h2>

<ul><?php wp_get_archives('type=monthly'); ?>

</ul></li><?php get_links_list(); ?><li><h2><?php _e('Meta'); ?></h2>

<ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li><?php wp_meta(); ?>

</ul></li>

<?php endif; ?></ul></div><div id="footer"><p>Copyright © 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p></div></div></body></html>

si style.css:

/*

22

Theme Name: TutorialTheme URI: http://www.wpdesigner.comDescription: This is my theme for a tutorial.Version: 1.0Author: Small PotatoAuthor URI: http://www.wpdesigner.com/*/body{

margin: 0;font-family: Arial, Helvetica, Georgia, Sans-serif;font-size: 12px;text-align: center;vertical-align: top;background: #ffffff;color: #000000;

}a:link, a:visited{

text-decoration: underline;color: #336699;

}a:hover{

text-decoration: none;}#wrapper{

margin: 0 auto 0 auto;width: 750px;text-align: left;

}#header{

float: left;width: 750px;

}#container{

float: left;width: 500px;

}.sidebar{

float: left;width: 240px;background: #eeeeee;margin: 0 0 0 10px;

23

display: inline;}#footer{

clear: both;float: left;width: 750px;

}

Lectia numarul 16 Formatarea postarilor si Miscellaneous

Deschidem style.css

Pasul 1Curatam marginile si padding-urile ( umplutura) scriind urmatorul cod mai sus de body{} in style.css:body, h1, h2, h3, h4, h5, h6, blocquote, p {margin: 0;padding: 0;}Am notat margin:0; in loc de margin: 0 0 0 0; pentru ca atunci cand valoarea e aceiasi peste tot folosesti o singura cifra.Salvezi si dai refresh.

Pasul 2Stilizezi cu h1. Scrii urmatorul cod sub body{} :h1{font-family: Georgia, sans-serfi;font-size: 24px;padding: 0 0 10px 0;}Explicatii:font-family: Georgia, sans-serif; schimbi titlul H1 din Arial in Georgia

font-size: 24px; - trebuie notat ca atunci cand setezi dimensiunea de la 12px la 24px inauntrul body{}, tagurile H1 si H2 nu mai au valabilitate. Aceasta pentru ca tagurile heading isi urmeaza propriile reguli. Ca sa le controlezi trebuie sa le stilizezi special pe ele.padding: 0 0 10px 0; - inseamna 10 pixeli in josul padding-ului. Aceasta este pentru a adauga sptiu intre titlul blogului si descriere.

Pasul 3Scrie urmatorul cod sub #container{} :.post{padding: 10px 0 10px 0; (adaugi 10px sus si jos la paddingul fiecarui DIV)

}

24

.post h2 {font-family: Georgia, Sans-serif;font-size: 18px;}.entry{lin-height: 18px; (cresti dimensiunea intre linii inauntrul intrarilor DIV)

}

Pasul 4 Scrie urmatorul cod sub a:hover{} :p{padding: 10px 0 0 0 ;}

Pasul 5 Scrie sub .entry{} :p.postemetadata {border-top: 1px solid#ccc; (poti aplica stilizare la postmetadata)margin: 10px 0 0 0 ;}

Pasul 6Scrie sub p.postmetadata{} :.navigation{padding: 10px 0 0 0 ;font-size: 14px;font-weight: bold;line-height: 16px;}

Lectia numarul 17 Stilizarea sidebarului

Pasul 1 Scrii urmatorul cod sub .sidebar{} :.sidebar ul {list-style-type: none;margin: 0;padding: 0 10px 0 10px;}Ceea ce ai stilizat este lista neordonata parinte (UL) in sidebar. Toti “copiii” mostenesc acelasi stil.Spre exemplu:<ul> <li>

<ul>

25

<li></li> </ul> </li></ul>Al doilea nivel (sau nested) UL mosteneste stilul primului UL. Daca aplici o margine primului UL, al doilea UL va avea de asemenea o margine. Salveaza si da refresh.

Pasul 2 Scrie sub .sidebar ul{} :.sidebar ul li{padding: 10px 0 10px 0;}De ce nu am adaugat 10 pixeli tagului UL de prima data? Pentru ca ai nevoie sa separi un LI de altul.

Pasul 3 sub .sidebar ul li{} scrii:.sidebar ul li <h2> {font-family: Georgia, Sans-serif;font-size: 14px;}

Pasul 4Scrie sub .sidebar ul li <h2> {} urmatoarele:.sidebar ul li{padding: 0;}

Lectia numarul 18 Footer si divizarea indexuluiSa impartim index.php in mai multe fisiere mai mici. Avem nevoie de style.css mai tarziu. Dupa aceea vom lucra cu index.php pentru a crea noi fisiere.Deschidem index.php si style.css

Pasul1Adaugam 10 pixeli in varful (top) DIV-ului footerPasul 2Dam o valoare de 18 pixeli tagului P inauntru footer (adica #footer p{})Pasul 3Cream un fisier numit header.php. In index.php copiem de la sfarsitul DIV-ului header tot ceea ce urmeaza in nou creatul fisier header.php. Adica vom avea:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">

26






bloginfo('rss_url'); ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php

bloginfo('atom_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_get_archives('type=monthly&format=link'); ?><?php //comments_popup_script(); // off by default ?><?php wp_head(); ?>

</head>

<body><div id="wrapper"><div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1><?php bloginfo('description'); ?></div>Pasul 4Tot ceea ce ai copiat in header.php din index.php inlocuiesti cu:<?php include(TEMPLATEPATH . '/header.php'); ?>Salvezi si dai refresh.

Pasul 4 (bis)Facem acelasi lucru ca mai sus doar ca pentru sidebar. Cream fisierul sidebar.php. De la inceputul DIV-ului sidebar pana la sfarsit copiem in fisierul nou creat sidebar.php.Apoi, in index.php, inlocuim acest pasaj cu<?php get_sidebar(); ?>Salvam si dam refresh; nu se observa schimbari.Deci vom avea fisierul sidebar.php:<div class="sidebar"><ul><?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<li id="search"><?php include(TEMPLATEPATH . '/searchform.php'); ?>

</li>

27

<li id="calendar"><h2><?php _e('Calendar'); ?></h2><?php get_calendar(); ?>

</li><?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?><li><h2><?php _e('Categories'); ?></h2>

<ul><?php

wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?></ul>

</li><li><h2><?php _e('Archives'); ?></h2>

<ul><?php wp_get_archives('type=monthly'); ?>

</ul></li><?php get_links_list(); ?><li><h2><?php _e('Meta'); ?></h2>

<ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li><?php wp_meta(); ?>

</ul></li>

<?php endif; ?></ul></div>

Pasul 5 Repetam pentru footer.php. Cream fisierul si in el copiem DIV-ul footer din index.php. Deci vom avea fisierul footer.php:<div id="footer"><p>Copyright © 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p></div></div></body></html>

Lectia 19 Fisierele sub-templates

28

Pasul 1 Cream un fisier archive.phpCopiem tot ceea ce este in index.php in in archive.phpSalvam archive.phpIn fisierul archive.php schimbam the_content in the_excerpt.Salvam din nou.Acuma, dam refresh la pagina arhiva; rezultatul ne va da o prescurtare si nu tot articolul. Facem asta pentru a preveni Google sa ne penalizeze pentru duplicat de continut. Daca una din paginile din arhiva si front page-ul deschid acelasi continut, acesta este un continut duplicat.Pasul 2Cream un nou fisier search.php Copiem tot ceea ce este in archive.php in search.phpSalvam fisierul search.phpAcuma toate cautarile vor returna prescurtari.Pasul 3Cream fisierele page.php si single.php Copiem tot ceea ce este in index.php in page.php si single.php (In acest moment cele doua fisiere sunt la fel).Salvam ambele fisiere si le inchidem.Pasul 4Exista diferente intr o Pagina si o pagina? page.php customizeaza aparitia Pages.Prima data in page.php scriem urmatorul cod sub <?php the_content(); ?> :<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?><?php edit_post_link('Edit','<p>','</p>'); ?>A doua oara stergem codul postmetadata din page.php. Aici avem codul fara postmetadata:<div class=”entry”> <?php the_content(); ?> <?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?> <?php edit_post_link('Edit','<p>','</p>'); ?></div>A treia oara, stergem posts_nav_link() sau blocul de navigare din page.php<?php endwhile; ?> <div class= “navigation”> <?php .posts_nav_link(); ?> (astea doua boldate dispar)

</div><?php else: ?>Ce s-a intamplat? Prima linie a codului fost pentru a arata linkurile in sub-pagina. Salvezi page.php si inchizi.Pasul 5In single.php scrii sub <?php the_content() ?> urmatoarele:

<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>(Este aceiasi linie ca mai inainte)In al doilea rand, in zona postmetadata sterge <?php comments_popup_link(); ?> si tagul <br/> de dupa el. Nu sterge toate postmetadata.In al treilea rand, inlocuieste <?php posts_nav_link(); ?>cu:

29

<?php previous_post_link('«%link'); ?><?php next_post_link('%link»'); ?>Salvezi si inchizi

Lectia numarul 20 Comentarii

Pasul 1Cream un nou fisier comments.php si copiem in el urmatorul cod:<?php // Do not delete these linesif ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');if (!empty($post->post_password)) { // if there's a password

if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie?><h2><?php _e('Password Protected'); ?></h2><p><?php _e('Enter the password to view comments.'); ?></p><?php return;

}}

/* This variable is for alternating comment background */$oddcomment = 'alt';?>

<?php if ($comments) : ?><h3 id="comments"><?php comments_number('No Responses', 'One Response',

'% Responses' );?> to “<?php the_title(); ?>”</h3><ol class="commentlist"><?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>"><div class="commentmetadata"><strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php _e('Said:'); ?> <?php edit_comment_link('Edit Comment','',''); ?> <?php if ($comment->comment_approved == '0') : ?>

<em><?php _e('Your comment is awaiting moderation.'); ?></em> <?php endif; ?></div><?php comment_text() ?>

</li>

30

<?php /* Changes every other comment to a different class */if ('alt' == $oddcomment) $oddcomment = '';else $oddcomment = 'alt';

?><?php endforeach; /* end for each comment */ ?>

</ol><?php else : // this is displayed if there are no comments so far ?><?php if ('open' == $post->comment_status) : ?>

<?php else : // comments are closed ?>

<p class="nocomments">Comments are closed.</p><?php endif; ?>

<?php endif; ?><?php if ('open' == $post->comment_status) : ?>

<h3 id="respond">Leave a Reply</h3><?php if ( get_option('comment_registration') && !$user_ID ) : ?>

<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p><?php else : ?><form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"><?php if ( $user_ID ) : ?><p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p><?php else : ?><p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" /><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p><p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" /><label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p><p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" /><label for="url"><small>Website</small></label></p><?php endif; ?><!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?> <?

31

php echo allowed_tags(); ?></small></p>--><p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p><p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p><?php do_action('comment_form', $post->ID); ?></form><?php endif; // If registration required and not logged in ?><?php endif; // if you delete this the sky will fall on your head ?>Salvam.Pasul 2Copiem urmatorul fisier (comments-template.css) in style.css:.comments-template{

margin: 10px 0 0;border-top: 1px solid #ccc;padding: 10px 0 0;

}.comments-template ol{

margin: 0;padding: 0 0 15px;list-style: none;

}.comments-template ol li{

margin: 10px 0 0;line-height: 18px;padding: 0 0 10px;border-bottom: 1px solid #ccc;

}.comments-template h2, .comments-template h3{

font-family: Georgia, Sans-serif;font-size: 16px;

}.commentmetadata{

font-size: 12px;}.comments-template p.nocomments{

padding: 0;}.comments-template textarea{

font-family: Arial, Helvetica, Georgia, Sans-serif;

32

font-size: 12px;}Pune-l la sfarsitul lui style.css ori chiar deasupra lui #footer.Pasul 3Scrii urmatorul cod sub DIV-ul entry in fisierul single.php:<div class=”comments-template”><?php comments_template(); ?></div>Pasul 4 (necesar validarii codului)Validarea off-line:mergi la codul sursa al paginiicopiezi tot codulmergi la validatoradaugi in cutie (box) coduldai check

33

Crearea Unei Teme WordPress

Documents

Transcript of Crearea Unei Teme WordPress