Adauga in WordPress body class, date despre browser-ul si os-ul vizitatorilor

In momentul in care dezvolti o tema wordpress, vei avea de cele mai multe ori anumite informatii legate de utilizatorii site-ului cum ar ce browser folosesc pentru a va accesa site-ul si deasemenea, ce sistem de operare foloseste fiecare utilizator care va acceseaza site-ul. Pentru aceasta insa vom avea anumiti pasi de urmat. Cu ajutorul acestor date pe care le vei colecta, vei putea modifica cu usurinta anumite aspecte ale jQuerry sau CSS.

Ei bine, daca poti colecta toate aceste date, wordpress va face aproape toata treaba asa ca sa incepem. Cum implementezi codul necesar in wordpress body class?

Default, wordpress va genera de fiecare data mai multe clase css, fiecare diferita in functie de fiecare sectiune de pe site-ul tau. Mi mult decat atat, el va pune la dispozitie si anumite filtre ce ii vor ajuta foarte mult pe toti dezvoltatorii de plugin-uri si teme wordpress. Astfel, cu ajutorul acestor filtre, ei vor fi capabili sa isi genereze propriile clase.

Modificarile despre care am vorbit vor fi efectuate cu ajutorul filtrului body_class. Vom aduga informatii despre sistemul de operare si browserul pe care il foloseste utilizatorul in forma CSS class.

Mergeti pentru inceput la fisierul functions.php din tema la care lucrati si adaugati urmatorul cod:

function mv_browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = ‘lynx’;
elseif($is_gecko) $classes[] = ‘gecko’;
elseif($is_opera) $classes[] = ‘opera’;
elseif($is_NS4) $classes[] = ‘ns4’;
elseif($is_safari) $classes[] = ‘safari’;
elseif($is_chrome) $classes[] = ‘chrome’;
elseif($is_IE) {
$classes[] = ‘ie’;
if(preg_match(‘/MSIE ([0-9]+)([a-zA-Z0-9.]+)/’, $_SERVER[‘HTTP_USER_AGENT’], $browser_version))
$classes[] = ‘ie’.$browser_version[1];
} else $classes[] = ‘unknown’;
if($is_iphone) $classes[] = ‘iphone’;
if ( stristr( $_SERVER[‘HTTP_USER_AGENT’],”mac”) ) {
$classes[] = ‘osx’;
} elseif ( stristr( $_SERVER[‘HTTP_USER_AGENT’],”linux”) ) {
$classes[] = ‘linux’;
} elseif ( stristr( $_SERVER[‘HTTP_USER_AGENT’],”windows”) ) {
$classes[] = ‘windows’;
}
return $classes;
}
add_filter(‘body_class’,’mv_browser_body_class’);

Din script, prima parte va detecta ce browsere folosesc utilizatorii iar informatiile vor fi adaugate in $classes. Partea a doua va face acelasi lucru cu informatiile despre sistemul de operare al utilizatorilor.

Acum, va trebui sa adaugi body class la tagul HTML
<body> din fisierul header.php al temei. Linia body va trebui sa o inlocuiesti cu:

<body <?php body_class(); ?>>

Daca vei lucra cu o tema underscore, pentru starteri sau co o tema bine codata in frameworks cum ar fi Genesis, ele vor avea deja implementata functia body class in body tag. Imediat ce codul este implementat, vei putea vedea informatiile referitoare la browsere si sisteme de operare in sursa HTML.

Tags: , , , , ,

Structura Heading pentru blogul tau

Structura heading pentru paginile tale este una din cele mai importante aspecte a SEO on-page. Defineste ce parti din continutul tau sunt importante si cum sunt interconectate. Deoarece au scopuri diferite, un articol singular are nevoie de o alta structura heading decat cea a paginii principale a site-ului.

5 Principii de baza despre HTML headings

Haideti sa intelegem mai bine asta, inainte sa incepem orice modificare:

1. Cel mai important heading de pe o pagina ar trebui sa fie H1.

2. De obicei, este doar un H1 pe fiecare pagina in parte.

3. In cazul sub-headings ar trebui sa folosim H2 iar in cazul sub-sub headings H3 (si asa mai departe).

4. Fiecare heading ar trebui sa cuntina cuvinte cheie de calitate, altfel este degeaba

5. In articolele foarte lungi, importanta headings este de a oferi utilizatorului sa mearga direct la partile pe care vrea sa le citeasca.

Headings pentru Pagina Principala

Structura paginii principale a site-ului tau ar trebui sa fie de genul:

H1: numele blogului

H2: toate articolele recente ar trebui sa aiba H2

H3: pentru articolele mai vechi

H4: continut relevant in sidebar

H5: continut nu atat de relevant in sidebar si footer

Structura Heading pentru pagini/articole singulare

H1: titlul articolului/ paginii

H2 si H3: subheadings si sub-subheadings

H4: Numele blogului si posibil, widget-uri relevante

H5: la fel ca mai sus, sidebar, etc.

Structura headings pentru paginile cu categorii si tag-uri

Daca vrei sa rank-ezi cu paginile categoriilor sau ale tag-urilor, insemnand ca fiecare categorie si tag in parte ofera continut relevant, structura ar trebui sa fie urmatoarea:

H1: titlul categoriei/tag-ului

H2: tiltul articolelor

H3: numele blogului

Restul: la fel ca la pagina principala

E timpul sa te apuci de schimbari. Foloseste W3 Validator pentru a verifica starea blog-ului tau si pentru a vedea care sunt toate modificarile pe care trebuie sa le faci.

Tags: , , , , ,

Iata un mod rapid de a avea mai multi abonati

Sunt surprins de faptul ca foarte multe afaceri online nu isi construiesc o lista de mail-uri.

Toata lumea e focusata pe social media si aducerea a acat mai mult trafic pentru site-ul lor. Asta e minunat insa ce se intampla in continuare? Utilizatorii vin pe site-ul tau, citesc si pleaca.

Cercetarile arata faptul ca aproximativ 70% din persoanele care parasesc site-ul tau, nu se mai intorc niciodata. Asta inseamna ca marea majoritate a eforturilor tale de promovare vor fi la un moment dat in van. Esti multumit cu asta?

Ei bine, eu unul nu sunt. Cautand pe internet am gasit o metoda prin care site-ul WPBeginner si-a crescut abonatii cu 600%. Da, au ajuns de la 70 abonati noi in fiecare zi la peste 440 abonati noi in fiecare zi, cu acelasi trafic.

Toate acestea au fost realizate cu ajutorul unui nou plugin WordPress numit OptinMonster. Cum lucreaza acest plugin?

Ei bine, iti permite sa inregistezi gesturile mouse-ului utilizatorului in timp ce navigheaza pe site-ul tau. Asta iti permite sa afisezi un mesaj targetat pentru utilizator, exact in momentul in care se pregateste sa plece.

Acest concept foloseste principiile din viata de zi cu zi. Gandeste-te la cineva care iti paraseste caminul; nu il inviti sa revina? De ce nu ai face acelasi lucru si pentru vizitatorii unui site?

OptinMonster ia mai putin de 10 minute pentru instalare si activare. Daca ai un website ar trebui sa incepi sa folosesti OptinMonster chiar acum, pentru a-ti construi o lista de mail-uri.

De-a lungul anilor, retelele de socializare au venit si au plecat. Prima data a fost friendfeed, apoi Digg, mai apoi Myspace, Plurk etc. Ce va ramane sunt abonatii tai. Incepe sa-ti construiesti lista de mail cu OptinMonster.

Nu mai astepta; experti in industrie ca Search Engine Journal, Chris Brogan si altii folosesc OptinMonster pentru a-si creste abonatii.

Tags: , , ,

Programe de compresia a imaginilor pentru bloggeri

In articolul de aici ati observat diferenta dintre fiecare tip de compresie. Mai jos, veti putea citi despre cum puteti salva imaginile pentru web si despre cum va puteti mari viteza site-ului. Sunt cateva softuri pe care le puteti folosi in acest sens.

Adobe Photoshop

Adobe Photoshop este un software premium care vine inclusiv cu o optiune de salvare a imaginilor optimizate pentru web. Doar deschideti imaginea si dati click pe File > Save for Web & Device.

Se va deschide un ecran de salvare. In dreapta puteti observa diferite formaturi de imagini. Pentru formatul JPEG vei vedea diferite optiuni de calitate. Cand selectezi una din ele, vei vedea deasemenea si marimea fisierului in coltul din dreapta jos.

Nota: Stim ca Photoshop este un soft destul de scump asa ca recomandam GIMP ca o alternativa gratuita. Si alte softuri Adobe pot face aceasta treaba. Un exemplu este Adobe Fireworks.

TinyPNG

TinyPNG este o aplicatie web ce foloseste o tehnica desteapta de compresie ce reduce marime fisierelor PNG. Tot ce trebuie sa faci este sa mergi pe site-ul lor si sa incarci imaginile. Softul va compresa imaginile si va oferi link de download.

Pentru developeri exista si un API ce converteste imaginile in mod automat.

JPEG Mini

JPEGmini foloseste o tehnologie de recompresie ce reduce semnificativ marimea imaginilor fara sa afecteze calitatea imaginilor. Puteti folosi gratuit versiunea web sau puteti cumpara programul pentru a-l folosi pe calculator/laptop. Si ei au un API pe care daca il cumparati, il puteti folosi automat pe server-ul site-ului vostru.

ImageOptim

ImageOptim este un soft pentru Mac. Acesta permite compresia imaginilor fara a pierde calitatea imaginii. Softul gaseste cei mai buni parametri de compresie si indeparteaza profilele de culoare inutile.

Alternativa Windows pentru acest software se numeste Trimage.

Asa dupa cum puteti observa, sunt o multime de tool-uri pe care le puteti folosi pentru compresia imaginilor. Folositi-le pentru a mari viteza site-ului.

Tags: , , , ,

Mareste-ti viteza site-ului: Cum sa salvezi imagini optimizate pentru web

Salvezi imaginile gresit? Majoritatea incepatorilor nu stiu cum sa salveze imaginile corect, fapt ce poate avea un impact major asupra vitezei unui site. In acest articol va vom arata cum sa salvati imaginile optimizate pentru web.

Orice expert in blogging va va spune ca imaginile ajuta la optimizare si la cresterea numarului de vizitatori. Oricum, ceea ce nu spun e ca imaginile neoptimizate pentru web iti pot incetini site-ul. Conform unei cercetari marca StrangeLoop, o intarziere de o secunda te poate costa 7% din vanzari, 11% mai putine pagini vizitate si 16% scadere in ce tine de satisfacerea clientilor.

Strangeloop Speed Case Study

Cum sa salvezi imaginile corespunzator?

In momentul in care salvezi imagini, trebuie sa iei in considerare doua lucruri: formatul imaginii si compresia. Prin alegerea combinatiei perfecte, poti micsora marimea unei imagini de pana la 5 ori.

Pentru cei mai multi dintre noi, singurele doua tipuri de imagini care conteaza sunt JPEG si PNG. Pentru a tine lucrurile simpe, foloseste JPG-urile pentru fotografii sau imagini cu o multime de culor si PNG-urile pentru imaginile simple sau cand ai nevoie de imagini transparente.

Pentru cei care nu stiu diferenta, imaginile in format PNG nu sunt compresate, fapt ce inseamna ca sunt de o calitate superioara. Minusul este faptul ca sunt mai mari. Pe cealalta parte, JPG este un format compresat ce reduce foarte putin calitatea imaginii si foarte mult marimea fisierului in sine.

Urmatorul lucru este compresia, fapt ce inseamna folosirea unui tool pentru a salva imagini optimizate pentru web. Compresia poate si face diferenta.

Programe de compresia a imaginilor pentru bloggeri

Adobe Photoshop

Este un software premium care vine cu o optiune speciala ce iti permite sa salvezi imagini pentru web. Deschideti imaginea si apoi dati click pe File-Save for Web % Devices.

Aceasta actiune va deschide un ecran de salvare. In dreapta aveti diferite tipuri de formate pentru imagine. Pentru formatul JPEG, veti vedea optiuni diferite de calitate. Cand iti selectezi optiunea, Photoshop-ul va afisa in coltul din dreapta jos, marimea imaginii.

Citeste in continuare despre:

Programe de compresia a imaginilor pentru bloggeri

Tags: , , ,

Selectarea temei perfecte pentru WordPress

Selectarea temei perfecte pentru site-ul tau wordpress va determina viitorul lui. O tema buna nu doar face o impresie buna in randul utilizatorilor ci te si ajuta din punct de vedere SEO. Da, structura unui design joaca un rol important in optimizarea pentru motoarele de cautare. In acest articol vom discuta despre alegerea unei astfel de teme.

1.Alege o tema potrivita pentru industria ta

Alegerea unei tema care sa aiba o oarecare legatura cu nisa, industria si/sau businessul tau este cel mai evident si printre cele mai importante puncte de urmat. Daca ai un blog in care vorbesti despre politica, nu folosi o tema ce a fost creata pentru site-uri de web hosting. Pentru cei mai multi bloggeri, optiunea este foarte simpla, alegand o tema foarte generica si folosing un logo personalizat. Aceasta alegere s-ar putea sa nu fie o optiune chiar atat de rea pentru cineva ce incepe cu un buget mic.

2.Mergi spre simplicitate

Sunt o multime de teme wordpress pe piata care au o multime de facilitati complexe. Ar putea arata foarte bine din punct de vedere al design-ului insa ca functionalitate, ar putea sa nu fie chiar cele mai bune alegeri. Daca vrei o tema cu o multime de functionalitati, alege una custom pentru ca numai asa te poti asigura de functionalitatea ei. Sugeram sa nu mergeti pe design-uri elaborate ci mai degraba spre ceva foarte simplu deoarece este mai usor de modificat si compatibil cu mai toate browser-ele.

3.Verifica daca tema e compatibila cu majoritatea browser-elor

Intotdeauna asigura-te ca tema ta este compatibila cu mai toate browser-ele. Este bine ca tema aleasa sa fie valida w3 si sa fie compatibila cu mai toate browser-ele intrucat asa te asiguri ca nu lasi nimic in urma. Unii ar putea sugera ca nu e neaparat necesara o compatibilitate cu browser-ul Internet Explorer. Poate ca asa si e.

Cum sa-ti creezi singur propriul site

Mediul online a devenit unul mai mult decat propice pentru promovare oricarei afaceri, pentru socializare, pentru petrecere a timpului liber. Daca esti bun intr-un domeniu, daca ai o idee prea putin exploatata in online sau pur si simplu ai o afacere mica pe care o vrei in online, afla ca iti poti creea singur propriul website.

In primul rand va trebui sa te gandesti daca il vrei pe o platforma gratuita. Daca da, poti alege wordpress.com sau blogspot.ro insa ai grija ca link-ul site-ului tau va fi de forma: numesite.wordpress.com, numesite.blogspot.ro.

Daca e vorba doar de un blog pe care sa scrii in timpul liber, aceasta alegere nu este deloc una gresita. La urma urmei, nimeni nu vrea sa mai si plateasca doar pentru placerea de a-si exprima anumite pareri, nu prea des.

Daca vrei sa devii un blogger activ, sa-ti promovezi afacerea, produsul etc. ai nevoie de un site cu domeniu propriu. Domeniul reprezinta numele + o extensie. Sa presupunem ca vrei ca site-ul tau sa se numeasca Mihaita. Extensiile pot fi .com, .eu, .ro, .info.

Era o vreme cand conta mai mult alegerea extensiei. Astazi insa, poti promova la fel de bine un site cu aproape orice extensie. Sa cumperi un domeniu .ro e un pic mai scump insa il comperi pe viata. Domeniile pe .com, .info, .org etc. sunt platite anual iar pretul este relativ mic (3-10 euro).

Dupa ce ai cumparat un domeniu ai nevoie de un serviciu de hosting unde sa-ti tii site-ul. Poti alege serviciile unei firme romanesti cu cele mai mici pachete intrucat un simplu blog sau site nu are nevoie de tone de resurse. Si aici, poti gasi preturi incepand cu 2-3 E pe luna.

Dupa ce ai rezolvat si cu hostingul mai ramane doar sa stabilesti toate conexiunile (DNS-uri etc) si sa incarci pe site platforma mondiala wordpress, una din cele mai folosite CMS (content managment system), intuitiva si usor de folosit.

Despre WordPress si instalarea lui pe un site vom vorbi in zilele urmatoare.

Tags: , , ,