1

Cum alegi o tem Wordpress pentru site sau blogul tu?

Vrei s-i faci un site i vrei s-i pui haine frumoase ca sa spargi gura trgului? Hainele trebuie sa fie in tendine, zici, dar ce inseamn asta pentru un site?

Daca nu esti un webdesigner, atunci nu-i rmne altceva de fcut dect s-i alegi o tem (theme), aa se numete haina pentru Wordpress. Tema va comunica cititorilor ti cine eti, adic va constitui punctul de plecare ctre branding, att personal ct i de companie.

O hain are mai multe scopuri: s acopere corpul cu funcia de aprare mpotriva factorilor externi dar i de a aduce valoare persoanei tale, prin calitatea materialului, croial i culorile potrivite ie. Haina pe care o mbraci poate fi

2

potrivit dimineaa sau seara i depinde de context. Deci i alegi haina pe care o mbraci n funcie de locul i scopul activitilor dintr-o zi.

n schimb, site-ul va avea o singur hain i de aceea e bine s-i plac mai nti ie, iar ca s tii ce funcii s ndeplineasc trebuie s tii ce vrei s faci cu site-ul tu. De multe ori am avut clieni care mi spuneau s fac site-ul c-mi spun ei dup ce e gata dac le place sau nu, fr s-mi dea nimic concret despre coninut. Tu ai putea s faci un costum fr s tii cui i se potrivete? Ei bine, nici eu.

Gsete subiectul pe care vrei s-l dezbai n site i apoi planific coninutul. ncepe cu alegerea a 10 titluri de articole, apoi caut imagini la ele i atunci i vei da seama dac este ceea ce vrei. Dac ai reuit s i scrii 2-3 articole din cele 10 titluri propuse, este i mai bine, nseamn c eti pe drumul cel bun i poi trece la alegerea temei.

nainte de a instala o tem, uit-te la ea cu un ochi critic. Vezi partea demo a temei i ce are n ea: partea de sus, font-urile folosite, poziionarea coninutului, imaginile utilizate. Dup aceea compar ce vezi cu ce ai tu. Ce i lipsete?

Structura informaiei este alta dect a temei demo, tema are dou meniuri iar tu nu te-ai gndit dect la unul singur. Iar cel mai important este coninutul, n tema demo titlurile sunt incitante, dar textul este Lorem ipsum... i se potrivesc perfect n ptrelele din prima pagin. Apoi imaginile sunt att de frumoase n site-ul demo, tu de unde poi alege imagini gratuite la rezoluii bune, te ntrebi.

nainte de a-i spune cum s alegi o tem, i descriu pe scurt elementele unei pagini dintr-un site. De ce fac acest lucru? La cursurile pe care le-am inut, am avut surpriza ca unii cursani s nu tie denumirea, mai ales in englez, a unor elemente standard dintr-o pagin web. i, pentru c ar fi mai bine s avem un limbaj comun, mai jos am grupat structura i elementele unei pagini web.

3

Structur pagin n diagrama de mai jos am evideniat unele dintre elementele unei pagini web ca s tii cum sunt denumite i ce s caui la o tem.

4

1. Header sau partea de sus a unei pagini, conine: logo, meniul secundar cel de sus, meniul principal cel de sub logo, sloganul site-ului (tagline) si reclama (ad). n header sunt amplasate elementele care definesc site-ul. Cine intr pe site vede mai nti logo-ul i sloganul i ce mai ncape pe ecran meniu i o parte din coninut. Tot ce se vede pe monitor (above the fold tradus n partea superioar, vizibil) ar trebui s l fac pe vizitator s neleag ce tematic dezbate site-ul. Dac n testul de 5 secunde, vizitatorul nu nelege despre ce este site-ul, i va fi greu s gseasc ce are nevoie sau va cuta n alt parte.

2. Slider sau rotatorul de imagini se afl imediat sub meniu i este parte din coninutul paginii. Slider-ul este un element n micare ce conine imagini sugestive i text cu link ctre un articol, serviciu sau produs. Nu este obligatoriu s ai un slider n site-ul tu, dar dac vrei s promovezi anumite produse, servicii sau articole ntr-un mod dinamic, atunci l poi lua n considerare.

3. Coninutul din prima pagin este dispus pe 3 coloane i evideniaz anumite articole sau explic despre ce este vorba n site. Coloanele se obin cu ajutorul shortcode-urilor ce se gsesc n anumite teme, mai ales cele premium.

4. Footer sau partea de jos, conine un meniu utilitar i formularul pentru newsletter. De asemenea, poate conine ultimele articole, formularul de cutare n site, linkuri ctre reelele sociale, categorii importante, galerie foto, copyright. Este bine ca atunci cnd vizitatorul a terminat de citit coninutul s aib ceva de fcut ca s nu ias din site i atunci va da peste coninutul din footer ce ndeamn la aciune.

Cnd planifici coninutul site-ului ia n considerare i structura paginilor, ca s nu te trezeti la final c imaginile sunt prea mari pentru slider i tu nu ai imagini de calitate, c lipsete paginaia n blog, c titlurile sunt prea mari sau prea mici i c nu-i ncape logo n header.

Toate aceste mici modificri te-ar costa ceva dac apelezi la un webdesigner. Aa c de ce s nu alegi din prima ceea ce ai nevoie.

Mai departe i voi prezenta elementele dintr-o pagin, de care e bine s ii cont cnd alegi o tem.

5

Elemente de pagin Am fcut o alt diagram cu pagina de blog i anumite elemente la care s te uii cnd alegi o tem.

6

Coninutul este mprit acum n dou: n partea principal (2) sunt dou articole, iar n partea dreapt (3) este bara lateral, denumit i sidebar.

Sidebar sau bara lateral aceasta poate fi n stnga sau n dreapta, sau pot exista dou bare laterale. n bara lateral este inserat coninutul secundar ce ajut la navigarea prin site meniu vertical, formular cutare, ultimele articole, ultimele comentarii, sau la evidenierea altor elemente formular newsletter, link ctre reelele sociale, caset Facebook like, etc.

Locaii meniuri un element principal de navigare este meniul. Acesta este format din link-uri ctre pagini, categorii sau chiar articole. O tem are cel puin o locaie pentru meniu, alte teme au chiar 4 locaii.

La ce ajut aceste locaii ? Wordpress permite crearea meniurilor personalizate (custom menus), iar acestea trebuie sa fie poziionate n site ca s fie vizibile. Temele care se respect au mai multe poziii care pot fi vzute n tema demo.

n diagrama pe care am facut-o sunt 3 locaii pentru meniurile personalizate, i anume: meniul secundar n partea de sus, meniul principal sub logo i al treilea meniu n footer. Meniurile secundare se mai numesc i utilitare deoarece au link-uri ctre paginile de contact, hart site, ajutor, autentificare, co de cumprturi, contul meu, termeni i condiii, .a.

Breadcrumb este un alt element navigaional format din link-uri care se afieaz n pagini, categorii sau articole, imediat sub meniu. Aceste link-uri ne arat unde ne aflm n site la un moment dat i sunt de mare ajutor dac se ajunge mai greu la anumite pagini sau articole.

n diagrama de mai sus am pus ca breadcrumb Acasa > Blog, dar ar fi putut fi > Cursuri > Video > Cum instalez Wordpress, ultima secven fiind titlul articolului. Dac vreau s m ntorc la categoria video, dau click pe link-ul Video i se vor afia toate cursurile video din site. Cred c acum nelegi de ce e bine ca tema s aib implementat acest element.

Typography sau redactarea coninutului se refer la fonturile utilizate (familia de caractere), mrimea titlurilor i subtitlurilor (headings), aspectul listelor ordonate (numerotate) sau neordonate (cu bulei sau icoane), stilul tabelelor, poziionarea paragrafelor unele fa de altele i fa de imagini, stilul mesajelor de atenionare, de informare sau de eroare.

7

Post-meta este coninutul de sub titlul unui articol, afiat pe o singur linie. Post-meta conine denumirea autorului care a scris articolul, data publicrii, categoriile i tag-urile asociate cu acest articol. Acest element poate fi stilizat prin adugarea de mici imagini (icoane), stilizarea datei i poziionarea n margine, mutarea categoriilor i tag-urilor n partea de jos a articolului.

Figura 1 - Post-meta cu icoane

Figura 2 - Post-meta cu data i comentariile aliniate pe vertical n stnga articolului

Paginarea este important la nivel de blog. Wordpress nu ofer paginare numeric ci doar te anun, printr-un link, c exist articole mai vechi. Ca s implementezi paginarea trebuie s instalezi un plugin i apoi s integrezi codul n tem. Eu nu cred c vrei aa ceva. De aceea acord atenie paginrii numerice n arhive sau n listele de categorii i tag-uri din tema aleas.

Figura 3 Paginare numeric

Figura 4 - Paginare numeric i clasic

8

Temele premium au toate aceste elemente stilizate, astfel nct s se integreze perfect n design. Descoper-le n temele care i-au plcut i vezi diferena fa de tema implicit Wordpress.

Template de pagin n demo-urile temelor premium poi s vezi n meniu Pages, cu submeniurile Full Width Page pageLeft Sidebar Page, Contact Us ca n imaginea de mai jos, iar n altele mai multe stiluri ale paginii Home, Blog, Site Map, Landing page, Portfolio, Testimonials, .a.

Figura 5 - Template pagini

Acestea sunt template-uri (abloane) pentru paginile care au un anumit scop, ca de exemplu pagina de Contact.

Dac creezi o pagin i i asociezi tipul de template Contact, atunci nu-i mai rmne de fcut dect s introduci o adres de email i gata pagina ta de contact. Dac i se cere i o adres a companiei nseamn c vei avea i o hart dinamic n aceast pagin, cu locaia companiei.

9

Ca s tii ce abloane de pagin ai la dispoziie, du-te ntr-o pagin i n partea dreapt trebuie s ai Page Attributes, Template.

n figur sunt abloanele din tema mea Genesis:

Archive este hart site, Blog i Landing.

Blog este pagina asociat blogului. Cu Genesis ai posibilitatea s filtrezi categoriile ce apar n Blog, deci poi crea un meniu dintr-o categorie, fr ca articolele acesteia s apar i n blog.

Landing este o pagin ce nu are meniu, este mai ngust i este utilizat pentru a promova un serviciu sau un produs.

Te sftuiesc s caui template-urile de pagini n temele premium i s vezi ce i se ofer.

Alte elemente cu care se insereaz coninut n pagin Shortcodes sunt coduri cu care poi insera n pagin butoane, formulare, produse sau poi scrie textul pe mai multe coloane. Aceste coduri sunt afiate ntre paranteze ptrate i insereaz n pagin o funcie anume.

Toate temele din ultimele luni au implementate shortcode-uri cu care poi construi uor pagini deosebite fr a ti cod HTML i CSS.

Ca s-i dau un exemplu, i pot spune c majoritatea temelor premium au shorcode-uri care te ajut s scrii textul pe mai multe coloane n editor:

[one-third-first] Acest curs te introduce in lumea WordPress si este adecvat

celor care doresc sa-si faca singuri un blog sau un site de prezentare.

Cursul cuprinde tot ce trebuie sa stii pentru a lua startul, de la

planificare la utilizare. [/one-third-first] [one-third] Ai deja un site

WordPress simplu si doresti sa-l extinzi cu functionalitati noi? Acest curs

este ceea ce-ti trebuie. Invata ce este un plugin, un widget si shortcode.

Adauga galerie de imagini, video si formular pentru captare email. [/one-

third] [one-third] Ai ajuns in punctul in care consideri ca e timpul sa-ti

Figura 6 - Template pagin n Genesis

10

analizezi site-ul pentru a ajunge in prima pagina, dar nu stii cum. Vei afla

ce este SEO, cum sa monitorizezi site-ul tau si ce tactici si instrumente sa

folosesti. [/one-third]

n pagin rezultatul va fi acesta:

Figura 7 - Text pe 3 coloane ntr-un articol

Poate c te ntrebi de ce ai nevoie de toate aceste elemente suplimentare, care i vor da dureri de cap pn le nvei.

Ai dreptate, cu ct o tem este mai complicat, cu att durata de a nva cum s lucrezi cu ea este mai mare. Dar rezultatul va fi un site sau un blog cu un aspect profesionist, uor de navigat i care scoate n eviden coninutul.

Odat ce ai nvat elementele temei, te poi concentra mai departe pe crearea de coninut nou.

nc nu am terminat, cu toate c acum tii pe ce s pui accent cnd caui o tem. Vreau s te mai nv ceva: de unde iei teme gratuite i imagini de calitate. La coninut nu am cum s te ajut, trebuie scris doar de tine sau angajezi un profesionist s le scrie.

Unde gseti imagini gratuite, de calitate, pentru site-ul tu Un site fr imagini este plictisitor i se spune c o imagine valoreaz ct o mie de cuvinte, dar de unde iei imagini bune pe care s le poi utiliza n mod gratuit fr s fii sigur c proprietarul acord permisiunea de a le folosi? Nu cred c vrei s te implici ntr-o poveste de utilizare ilegal a imaginilor din site care s-i zdruncine reputaia i buzunarul.

nainte de a-i spune de unde s iei imagini gratuite, i voi descrie puin ce nseamn licena imaginilor sau a altor creaii (texte, video) de pe web.

11

Licena CreativeCommons d permisiunea s se utilizeze opera creat, ca de exemplu imaginile, n anumite condiii:

Aceast licen permite distribuirea, adaptarea, modificarea si utilizarea n scopuri comerciale a creaiei originale, att timp ct cei

care utilizeaz creaia original menioneaz autorul. Se utilizaz pentru diseminarea materialelor i utilizarea licenelor.

Aceast licen permite adaptarea, modificarea si utilizarea n scopuri comerciale a creaiei originale, att timp ct cei care utilizeaz creaia

original menioneaz autorul i liceniaz noile creaii n termeni identici.

Aceast licen permite redistribuirea n scopuri comerciale i non-comerciale a creaiei originale, att timp ct cei care utilizeaz creaia

original menioneaz autorul i nu modific originalul. Aceast licen permite adaptarea, modificarea si utilizarea n scopuri non-comerciale a creaiei originale, att timp ct cei care utilizeaz

creaia original menioneaz autorul, dar nu sunt obligai s pun licena noilor creaii n aceiai termeni.

Aceast licen permite adaptarea, modificarea si realizarea de noi creaii bazate pe cea original, n scopuri non-comerciale, att timp ct

cei care utilizeaz creaia original menioneaz autorul i pun licena noilor creaii n termeni identici.

Aceasta este cea mai restrictiv licen i permite doar descrcarea i distribuirea operei, att timp ct se menioneaz autorul, dar nu pot

modifica originalul i utiliza comercial.

Termenii Share Alike sunt de luat n considerare deoarece toate imaginile ce au aceast restricie nu pot fi utilizate fr permisiunea proprietarului. Dac ai permisiunea, le poi utiliza i comercializa.

Imaginile Royalty Free se cumpr o singur dat i pot fi utilizate ntr-un produs comercial sau personal, fr creditarea autorului. Aceast licen poate fi temporar

http://creativecommons.org/choose/?lang=ro

12

sau permanent i poate avea restricii specifice, pe care le afli de pe site-ul de unde le cumperi.

Imaginile din Domeniul Public (Public Domain CC0) sunt cele care au un copyright abandonat sau sunt pur i simplu date spre folosire public fr restricii.

Marca nregistrat (trademark) a unei companii este o treab foarte serioas i dac este utilizat impropriu se poate ajunge la judecat pe termen lung i nu vei ctiga niciodat.

Acum c tii cum s foloseti imaginile de pe web, s-i spun i unde le gseti pe cele gratuite.

Un motor de cutare este chiar de pe site-ul http://search.creativecommons.org/. De aici poi gsi imagini la rezoluii foarte bune pe http://pixabay.com, flickr.com sau google images.

O alt resurs, cu imagini la rezoluii mari, artistice este http://unsplash.com. La fiecare 10 zile apar 10 imagini noi, care pot fi descrcate i folosite fr licen.

Un alt site este http://www.sxc.hu/, dar aici trebuie s-i faci cont pentru a descrca imagini i s te uii bine la licen.

Ultimul site pe care vreau s i-l prezint este http://www.morguefile.com/ de unde poi descrca imagini la rezoluii mari, gratuit.

http://search.creativecommons.org/http://pixabay.com/http://unsplash.com/http://www.sxc.hu/http://www.morguefile.com/

13

Teme gratuite Am ajuns la final i acum i voi spune de unde s iei teme gratuite pentru site-ul tu.

tiu c majoritatea celor care nva s-i fac un site sau un blog, in foarte mult la cum va arta site-ul i nu la ce va conine. Asta este o mare capcan n care cad foarte muli nceptori.

Aspectul este important, dar nu dus la extrem. Degeaba ai un site poleit cu aur dac nu spune nimic sau dac nu este actualizat permanent.

Prima surs de teme gratuite este wordpress.org/themes. De aici poi descrca orice tem i place i se potrivete cu subiectul pe care vrei s-l abordezi. Din pcate, aceste teme nu au un aspect spectaculos, chiar dac sunt programate bine i sunt admise de echipa wordpress.

O tem care mi-a plcut este Responsive i am utilizat-o n site-ul femeiacocheta.ro ca tem de blog personalizat. Aceast tem are n prima pagin un banner cu imagine, text i buton de aciune i 3 zone de text cu imagini, ce se pot modifica din widget-uri.

Ca locaii de meniuri personalizate are 3 n partea de sus, sub logo i n partea de jos. Documentaia este alt punct forte al acestei teme, care nu se prea gsete la temele gratuite.

Teme gratuite bune, sunt n general oferite de ctre companiile care asta fac creeaz teme Wordpress.

Woothemes.com are un modul de magazin online Woocommerce i ofer i cteva teme gratuite. Acestea au mai multe combinaii de culori ca s poi alege ce ai nevoie.

Figura 8 - Teme gratuite de la Woothemes.com pentru Woocommerce

http://www.woothemes.com/

14

De pe site-ul wpexplorer.com poi descrca cteva teme gratuite dac i faci cont. Aceste teme sunt potrivite pentru site-urile de portofoliu, business i reviste online.

Figura 9 - Teme gratuite de la wpexplorer.com

Un alt site de luat n considerare este yithemes.com. n fiecare lun apare o tem nou gratuit.

Figura 10 - Teme gratuite de la yithemes.com

15

Graph Paper Press este o alta companie care ofera teme Wordpress dedicate, in special, fotografilor i celor care doresc un portofoliu. Cele cteva teme gratuite pot fi accesate de aici: http://graphpaperpress.com/wordpress-theme-prices/free/.

Figura 11 - Teme pentru fotografi de la Graph Paper Press

Peste 20 de teme gratuite, de tip blog sau business, poi gsi i pe site-ul S5Themes, de unde le poi descrca doar dac i faci cont.

http://graphpaperpress.com/wordpress-theme-prices/free/http://www.s5themes.com/

16

F-i temele n concluzie, ce teme trebuie s faci pentru a avea un site prezentabil i funcional?

S alegi subiectul site-ului S-i planifici coninutul text, imagini i video S faci o schi pe hrtie cu elementele de care ai avea nevoie S caui tema gratuit cea mai apropiat de viziunea ta S citeti documentaia temei, dac are S instalezi tema i s o activezi S faci toate setrile ca s arate ca n demo S scrii articolele sau textul din pagini S dai sfoar-n ar c ai un site nou vezi Facebook, Google+, Linkedin, .a

Gata, acum ai o responsabilitate mare: s creti site-ul i s te faci cunoscut.

Dac te poticneti pe undeva, intr pe site-ul cursuriwordpress.ro i cere ajutor. Acest site este nc la nceput, dar am pregtit o serie de cursuri care se vor desfura la sal n Bucureti, conform calendarului din site.

tim c cei care nu sunt din Bucureti se vor simi neglijai, aa c la sfritul lunii ianuarie, intenionm s lansm cursurile online, care vor fi cursuri de utilizare Wordpress pentru absolut nceptori, cursuri de extindere Wordpress cu noi funcionaliti, cursuri SEO (optimizare pentru motoarele de cutare), realizarea unui magazin online, crearea unei comuniti cu Wordpress i ce mai ai tu nevoie.

Ce ne-am dori de la tine ar fi s ne trimii un mesaj, prin intermediul formularului de contact, n care s ne spui toate problemele tale n legtur cu Wordpress i ce ai dori s aprofundezi.

i vom rspunde printr-un articol n site i prin cursurile video ce vor fi lansate n curnd.

Pn atunci, distreaz-te cu Wordpress i mai pune o crmid la fundaia abilitilor tale.

Cu drag,

Echipa cursuriwordpress.ro

Structur paginElemente de paginTemplate de paginAlte elemente cu care se insereaz coninut n paginUnde gseti imagini gratuite, de calitate, pentru site-ul tuTeme gratuiteF-i temele