Desi temele WordPress se pot realiza simplu, din HTML pur si tabele (adica <table></table>), ele sunt gandite in asa fel incat sa se poata realiza mai usor prin CSS (mai mult, o tema WordPress fara fisierul style.css nici nu se poate activa).

CSS, adica Cascading Style Sheet este o tehnologie care se foloseste de multi ani si ajuta mult webdesignerii. Inchipuiti-va daca ar trebui sa stabiliti de 10 ori cum sa arate titlul unui articol… dupa care ganditi-va cat de usor e sa stabiliti o clasa in CSS prin care stabiliti cum sa arate titlul respectiv, iar cand doriti sa-l folositi sa spuneti doar ca acest titlu apartine clasei X…

Stylesheet – fisierul style.css – este inclus in tema prin header.php, cu ajutorul randului:

<link rel=”stylesheet” type=”text/css” href=”http://domeniul_tau/wp-content/themes/nume_tema/style.css” />

care se gaseste intre tagurile <head></head> (eu il pun de obicei dupa <META>).

Sa vedem atrunci un style.css de baza pentru tema noastra demonstrativa.

In primul rand trebuie sa identificam tema noastra WordPress:

/*
Theme Name: YourBLOG Demo Theme // Denumirea temei
Theme URI: http://www.yourblog.ro // Adresa web a temei
Description: Demo theme de YourBLOG.ro // Descrierea temei
Version: 0.1 // Versiunea temei
Author: YourBLOG // Autorul
Author URI: http://www.yourblog.ro // Adresa autorului
*/

Marcajele /* si */ inseamna ca e vorba de insemnari care nu vor fi luate in considerare din punct de vedere a designului. Platforma WordPress citeste datele de identificare a temei din aceasta portiune a fisierului style.css:

themedataNota: Toate temele WordPress trebuie sa aiba aceasta sectiune in style.css!

Sa incepem prin a stabili anumite lucruri globale pentru tema noastra: culoarea fundalului, culoarea textului, tipul de litere, etc. Acest lucru se face prin folosirea entitatii CSS body:

body {
background: #eee;
color: black;
font-family: Arial, sans-serif;
font-size: 11;
}

Prin aceste randuri am stabilit culoarea fundalului (#eee, un gri deschis), culoarea textului (negru), tipul de litere (Arial sau alt tip de litere fara carlig) si marimea literelor afisate (11 pixeli).

Linkurile (legaturile) tot albastre sunt (pe Windows orice browser afiseaza asa – e standard), dar mie nu-mi place. Vreau sa fie gri inchis, dar cand mouse-ul ajunge deasupra lor, sa fie albe pe fundal negru. Acest lucru se face asa:

a:link {
color: #404040;
}

a:visited {
color: #404040;
}

a:hover {
color: #FFF;
background: black;
}

a:link stabileste cum sa arate o legatura in mod normal, a:hover stabileste cum sa arate legatura respectiva atunci cand cursorul se afla deasupra lui, iar a:visited stabileste cum sa arate un link care a fost vizitat inainte.

Prin CSS se poate stabili aspectul tuturor elementelor HTML. Pentru detalii vezi specificatiile CSS pe w3.org.

Sa ne apucam atunci de ce ne intereseaza mai mult in acest caz: aranjarea temei noastre WordPress.Pentru a-mi usura munca, fiecare element a temei va avea un chenar negru de 1 pixel.

Elementele globale sunt de doua feluri: unice si repetitive. Cele unice sunt chemate prin ID=”nume_element” si apar o singura data pe pagina, iar cele repetitive sunt chemate prin CLASS=”nume_element” si pot sa apara de mai multe ori.

Din moment ce fiecare pagina, subpagina si articol in WordPress are un singur header, un singur footer, un singur sidebar (sau mai multe, dar fiecare apare o singura data), aceste elemente sunt considerate unice:

#wrapper

#container

#header

#footer

#sidebar

Wrapper va fi “chenarul” temei, adica un container in care sunt incluse toate partile (header, footer, sidebar, etc), iar container va fi partea in care apar doar articolele.

Sa stabilim si latimea efectiva a temei noastre. Sa fie (sa zicem) 760 de pixeli, ceea ce se poate afisa fara scroll orizontal la rezolutia de 800×600 pixeli. Astfel header, footer si wrapper vor avea latime de 760 pixeli. Sidebar-ul il fac de 200 pixeli latime, astfel pentru container imi raman 560 pixeli.

Ei bine, mie mi-ar placea sa am o tema centrata, cu sidebar in partea dreapta.

In primul rand voi centra toata tema prin stabilirea marginilor elementului #wrapper:

#wrapper {
width: 760;
margin-left: auto;
margin-right: auto;
}

Aceasta solutie nu este cu adevarat cross-platform, avand in vedere ca Internet Explorer ignora pur si simplu marginile. Acest lucru se poate rezolva printr-un “tweak”: in body introducem o linie “text-align: center”, iar in #wrapper “text-align: left” ca sa contracaram efectul primei alinieri.

Pana acum totul este in regula. Dar sidebar-ul ar trebui sa apara in dreapta articolelor. Pentru acest lucru trebuie sa facem #container-ul sa “traga” in stanga, iar #sidebar-ul la fel, sa apara una langa cealalta. Pentru a face acest lucru, adaugam o linie “float:left” la declaratia #container si #sidebar.

Tot ceea ce am stabilit prin style.css trebuie si aplicat documentului. Pentru acest lucru trebuie sa declaram care parte a documentului va avea care stil – si pentru acest lucru folosim declaratia <div></div> in felul urmator:

header.php - de la tagul <body> pana la sfarsitul continutului antetului va fi #header, iar tot continutul documentului de la <body> pana la </body> va fi inclus in #wrapper:

<body>

<div id=”wrapper”>

<div id=”header”>

[... continut ...]

</div>

footer.php - de la inceputul footerului pana la tagul </body> va fi #footer, si tot aici inchidem DIV-ul #wrapper

<div id=”footer”>

[... continut ...]

</div> // pentru #footer
</div>// pentru #wrapper
</body>

sidebar.php - tot continutul va fi #sidebar

<div id=”sidebar”>

[... continut ...]

</div>

index.php va arata in felul urmator:

<?php get_header() ?>
<div id=”container”> // contine articolele
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<h1><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1>
<?php _e(’Category&#58;’); ?><?php the_category(’, ‘); ?><?php the_time(’F jS, Y’) ?> <?php _e(’by’); ?>
<?php the_author(); ?><?php comments_popup_link(’No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?>
<?php the_content(’Read More…’); ?>
<?php endwhile; ?>
<?php endif; ?>
</div> // se inchide
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Nu uitati sa inchideti elementele <DIV> cu tagul </DIV>!

Si uite asa, am creat prima tema WordPress. E o tema de baza, fara nimic special, afiseaza doar articolele si anumite lucruri in sidebar. Dar e o baza foarte buna pentru orice tema.

Style.css arata in felul urmator:
/*
Theme Name: YourBLOG Demo Theme
Theme URI: http://www.yourblog.ro
Description: Demo theme de YourBLOG.ro
Version: 0.1
Author: YourBLOG
Author URI: http://www.yourblog.ro
*/

body {
background: #eee;
color: black;
font-family: Arial, sans-serif;
font-size: 11;
}

a:link {
color: #404040;
}

a:visited {
color: #404040;
}

a:hover {
color: #FFF;
background: black;
}

#wrapper {
width: 760;
margin-left: auto;
margin-right: auto;
}

#container {
width: 560;
float: left;
}

#header {
width: 760;
}

#footer {
width: 760;
}

#sidebar {
width: 200;
float: left;
}

= VA URMA =

Related posts:

  1. Anatomia unei teme WordPress [Partea II - header.php si footer.php]
  2. Anatomia unei teme WordPress [Partea I: index.php]
  3. Anatomia unei teme WordPress [Partea III - sidebar.php, searchform.php, widgets, functions.php]
  4. Anatomia unei teme WordPress [Partea III - sidebar.php, searchform.php, widgets, functions.php]
  5. Cum sa creezi o tema WordPress cu doua sidebaruri