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