Iniţiere în coding #3 – Formatarea sidebar-ului

Dacă aţi pierdut începutul tutorialului de iniţiere, uitaţi-vă la #1 şi #2

A mai trecut o săptămână. Sper că aţi reuşit să creaţi header-ul de la partea a doua. Dacă nu, puteţi pune întrebări oricând.

Astăzi vom merge mai departe. Vom stiliza sidebar-ul, astfel încât să arate ca cel din versiunea .psd

Din fericire, de data asta aţi scăpat de copiat din Photoshop si adăugat în themă. În cazul sidebarului nostru, toate modificările vor fi făcute în style.css, sidebar.php şi functions.php. Nu vă speriaţi, ştiu că în thema voastră nu apare niciun functions.php, îl vom adăuga noi astăzi.

Începem! Dacă în cazul header-ului ne băgam direct în style.css ca să modificăm ceea ce avem nevoie, de data asta va trebui să dăm întâi sidebar-ului forma pe care o dorim. După cum vedeţi, thema făcută la partea întâi a tutorialului are un singur sidebar. Nouă, după cum arată thema din Photoshop ne trebuie 3, nu?

Vom declara partea cu bannerele direct în sidebar.php, urmând să facem cele două coloane sidebar-uri dinamice (adică să puteţi adăuga widget-uri pe ele).

Deschidem un fişier nou în notepad în care scriem:

<?php
if ( function_exists('register_sidebar') )
{
register_sidebar(array('name'=>'Stanga',
		'before_title' => '<h2>',
		'after_title' => '</h2>',     
		));
register_sidebar(array('name'=>'Dreapta',
		'before_title' => '<h2>',
		'after_title' => '</h2>',     
		));
	}
?>

Vom salva fişierul drept functions.php şi îl vom pune în folderul themei. Ce-am făcut noi a fost să definim sidebarurile în aşa fel încât să îndeplinească aceleaşi atribuţii. După cum observaţi, înainte de titlul fiecărui widget, WordPress va adăuga automat tag-ul „h2”, iar după titlu, acesta va fi închis.

Pentru cei noi în domeniu e bine de ştiut că tag-ul h2 aparţine HTML-ului şi seteză o anumită mărime textului. Dacă încă sunteţi nelămuriţi, găsiţi aici tot ce aveţi nevoie.

E bine de ştiut că tot în functions.php mai puteam adăuga, pe lângă before_title şi after_title şi sintagme ca before_widget şi after_widget. Eu le foloseam deobicei când aveam un sidebar mai complex care avea nevoie o stilizare aparte bazată pe div-uri, nu doar pe title tag-uri.

Acum, că avem setate cele două sidebar-uri în functions.php, va trebui să modificăm sidebar.php astfel încât, în secţiunea de Widgets din cadrul meniului Appearance a blogului tău să apară noile sidebar-uri, aşa cum le-am creat noi.

Vom începe prin a seta sidebar-ul cu bannerele, adică cel care nu este dinamic, pentru că el va apărea primul pe pagină. Am adăugat fix la început codurile în cauză, astfel încât prima parte a sidebar-ului meu arată aşa:

<div class="sidebar">
<ul>

<h2>Bannere</h2>

<center>
<a target="_blank" href="http://www.floreacristian.ro" target="_blank" title="Blogul lui Grim Cris"><img src="http://www.cristianflorea.ro/grim125x125.gif" alt="Blogul lui Grim Cris" /></a>
<a target="_blank" href="http://www.floreacristian.ro" target="_blank" title="Blogul lui Grim Cris"><img src="http://www.cristianflorea.ro/grim125x125.gif" alt="Blogul lui Grim Cris" /></a>
</center>

Observaţi? E un simplu cod HTML, deci nimic foarte complicat.

Trecem mai departe şi modificăm. Vom căuta sintagma:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

Acum, o vom înlocui cu:

<div id="sidebar_dreapta"><?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Dreapta') ) : else : ?>

Jos de tot (rândul 43 în cazul meu), vom găsi următoarea funcţie:

<?php endif; ?>

Va trebui să închidem div-ul care se ocupă cu sidebar-ul din dreapta, deci funcţia de mai jos va arăta aşa:

<?php endif; ?></div>

Observaţi că tocmai i-am dat nume sidebar-ului nostru, acelaşi nume pe care l-am declarat şi în functions.php şi l-am încadrat într-un div, pentru a-l putea stiliza separat.

Vom trece la pasul următor în care vom crea sidebarul din stânga, după care vom trece la stilizarea propriu-zisa. După ce am închis div-ul sidebar-ului din dreapta, pe rândul următor, vom adăuga sidebar-ul din stânga, astfel încât avem:

<?php endif; ?></div>

<div id="sidebar_stanga">
		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Stanga') ) : else : ?>
	<?php endif; ?>
	</div>

</ul>

</div>

Prima linie de cod afişată aici este închiderea sidebar-ului din dreapta. Voi o aveţi scrisă, deci dacă veţi copia ce v-am dat eu, va trebui să o înlocuiţi.

Ultimele două linii de cod reprezintă sfârşitul fişerului sidebar.php. Şi pe astea le aveţi scrise, şi vor trebui înlocuite.

Acum, că am terminat de declarat sidebar-urile, trebuie să le stilizăm. Dacă încercaţi să vedeţi template-ul în forma de pe web, aproape nimic nu e schimbat. Şi ce s-a schimbat arată total aiurea. Vom repara asta, nu vă faceţi griji.

Suntem nevoiţi să lăţim sidebar-ul pentru a încăpea cele două bannere unul lângă celălalt, nu unul sub altul. Avem două variante:

1. Lăţim sidebar-ul şi micşorăm div-ul pentru conţinut
2. Lăţim întreg layout-ul şi mărim atât sidebar-ul cât şi partea pentru conţinut.

Aş merge pe metoda a doua pentru că este mai practică şi pentru că oferă mai multă uşurinţă în momentul în care cineva vrea să citească un articol de-al tău (e mai simplu să citească de pe un rând de 18-20 de cuvinte decât de pe unul de 10, nu?).

Aşadar, modificăm style.css. Începem cu #wrapper şi #header:

#wrapper{
	margin: 0 auto 0 auto;
	width: 940px;
	text-align: left;
}

#header{
	float: left;
	width: 940px;
	height: 108px;
	background: #7d9c1f url('img/headbg.gif') repeat-x;
	color: #FFFFFF;
}

Am ales 940 de pixeli pentru că asta folosesc eu pe blogul personal şi, zic eu, e ok. Continuăm. Setăm lăţimea div-ului în care apare textul articolelor:

#container{
	float: left;
	width: 600px;
}

600 de pixeli e foarte ok după părerea mea. Iar acum, setăm lăţimea sidebar-ului în sine:

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

Dacă observaţi, 320+600=920. Adică 20 pixeli rămân liberi. Deobicei îi las drept toleranţă.

Dacă ţineti minte, când am declarat cele două sidebar-uri noi (Stânga şi Dreapta) le-am încadrat în două div-uri (sidebar_dreapta şi sidebar_stanga). Momentan, aceste div-uri sunt inexistente în style.css. Deci va trebui să le declarăm. În style.css adăugăm:

#sidebar_dreapta {
float:right;
width:150px;
}

#sidebar_stanga {
float:left;
width:150px; 
}

Acum va trebui să adăugăm acel contur în jurul sidebar-ului:

.sidebar{
	float: left;
	width: 320px;
	background: #D7D39A;
	margin: 10px 0 0 10px;
	display: inline;
	border:2px solid #C1BD7C;
}

Acum va trebui să stilizăm textul şi link-urile din sidebar, astfel:

.sidebar h2 {
font-family: Georgia, Sans-serif;
font-size: 18px;
color: #4C6B0D;
}

.sidebar a {
color: #5D5B35;
text-decoration: none;
}
.sidebar a:hover {
color: #color: #5D5B35;
text-decoration: underline;
}

Iniţial mă gândeam să opresc tutorialul aici, văzând că sidebar-ul arată exact ca cel din template-ul .psd, dar m-am gândit că încă o modificare nu strică. În plus, va fi mai uşor data viitoare.

Vom colora şi partea unde apare conţinutul în themă, ca să arate mai bine pentru data viitoare. Vom crea un nou div în header.php şi îl vom închide în footer.php. Facem asta pentru ca div-ul în cauză să cuprindă toată thema, începând de la header şi terminând cu sidebar şi footer. Altfel, dacă veţi încerca să setaţi culoarea doar pentru #container, veţi observa că footerul şi sidebar-ul rămân neatinse.

În consecinţă, deschidem header.php şi adăugăm la sfârşit:

<div id="content-wrapper">

Pasul următor, întrăm în footer.php şi adăugăm, înainte de tag-ul body, codul care să închidă div-ul. Deci footerul nostru va arăta aşa:

<div id="footer">
<p>
Copyright © 2007
</p>
</div>
</div>
</div>
</body>
</html>

Acum, că am creat noul div, va trebui să-l „anunţăm” şi în style.css. Deci, adăugăm:

#content-wrapper {
background: #EAE8C6;
clear:both;
padding: 0px;
overflow:hidden;
}

Acum parcă a prins puţin contur thema noastră, nu? Aştept întrebări dacă nu vă descurcaţi.

Lasă un comentariu

24 comentarii

  • A.Dragos 4 Ian 2010, ora 08:07

    Felicitari si pentru ghidul asta, incet incet ajung sa-mi fac tema premium :))

    • Grim_Cris 9 Ian 2010, ora 13:25

      @A.Dragos, sa inteleg ca ti-a iesit? ;;)

  • Dezordonat 4 Ian 2010, ora 07:16

    Bravo ! Eu apreciezi ceea ce faci. Nu iti ia putin sa scrii un astfel de articol, mai ales sa pui si pozele.

    Mai tarziu, iti vor multumi foarte multi.

    • Grim_Cris 9 Ian 2010, ora 13:25

      @Dezordonat, ma bucur ca pot ajuta. cat imi ia un articol din asta nu cred ca mai conteaza

  • DragosI 4 Ian 2010, ora 08:21

    Cum faci sa ai sidebar simplu pentru 2 widgeturi, iar apoi sa ai sidebar dublu, asa cum ai tu? Ma refer la partea cu widgeturile de abonare, reclame si cautare. Caut chestia asta pe net de cateva zile.

    • Grim_Cris 9 Ian 2010, ora 13:26

      @DragosI, primul sidebar, ala pe doua coloane, unde sunt reclamele si cautare, nu e sidebar dinamic. il modific din cod. exact ce am facut si aici

  • seoslayer 4 Ian 2010, ora 10:24

    chiar ma bucur ca te tii de treaba… keep up the good work:);)

    • Grim_Cris 9 Ian 2010, ora 13:28

      @seoslayer, thanks!

  • Neamtu' 4 Ian 2010, ora 14:16

    Grim, pe bune ca ma stradui. NU intreb nimic, pana nu dau de probleme mari :) Atunci am sa te bat la cap. Deocamdata urmez pas cu pas…

    • Grim_Cris 9 Ian 2010, ora 13:29

      @Neamtu’, urmezi pas cu pas, dar iti iese ca in tutorial? poti intreba orice, fie ea si problema mica, daca nu poti s-o rezolvi

  • Zoly 4 Ian 2010, ora 21:14

    o sa imi bag si eu nasul pe acolo si daca il stric sa sti ca e din cauza ta >:P

    • Grim_Cris 9 Ian 2010, ora 13:51

      @Zoly, fa-ti backup inainte

  • Dexter 5 Ian 2010, ora 09:37

    Ar fi bine daca ai pune si fisierele arhivate cu tema care o faci.. step by step.

    • Grim_Cris 9 Ian 2010, ora 13:38

      @Dexter, ma gandeam sa pun fisierele la sfarsit. Ca asa multi s-ar putea sa downloadeze fisierele si sa nu mai faca nimic

  • PanTeraS 5 Ian 2010, ora 16:18

    Titlul nu pot sa spun ca e chiar corect, „Formatarea” deobicei se foloseste pentru a sterge sau inlocui ceva, mai degraba spuneai „Creare”.

    Si la faza cu : „320+600=920. Adică 20 pixeli rămân liberi. ” Deobicei, 20-30 px trebuie sa ramana liberi deoarece mai exista margin si padding care iti iau tot din dimensiunea totala a main-ului :). In rest e okei :). Mai sunt cateva greseli, dar nu mari :)

    • Grim_Cris 9 Ian 2010, ora 13:39

      @PanTeraS, pai de ce crezi ca i-am lasat liberi? ca sa ma simt eu bine?

  • BabBarDeL 7 Ian 2010, ora 21:06

    Foarte frumos, vad ca te tii de treaba. Or sa ajute pe multi aceste articole si poate asa ne mai dezvoltam si noi in acest domeniu.

    Felicitari

  • Ioana 8 Ian 2010, ora 09:02

    Multumesc, stii tu ptr ce :)

    • Grim_Cris 9 Ian 2010, ora 14:01

      @Ioana, ma cam lasa memoria :-: aminteste-mi ;;)

  • Macovei Cristi 9 Ian 2010, ora 14:05

    @Grim_Cris Ce plugin folosesti pentru codul PHP?

  • Macovei Cristi 9 Ian 2010, ora 14:10

    Merci mult

  • PanTeraS 9 Ian 2010, ora 20:14

    @Grim: Nu ma intelege gresit, dar uneori, cei care incearca sa faca o tema nustiu pt ce le trebuie 20 de px liberi…

    • Grim_Cris 9 Ian 2010, ora 22:13

      @PanTeraS, nu stiu cum naiba s-ar putea intampla asta. eu mi-am dat seama singur, pe pielea mea :-??