Acum cateva zile am grupat informatia acumulata pana acum pe BloggerIn.ro in cadrul paginii Blog ABC astfel incat sa fie de cat mai mare folos bloggerilor incepatori. Deja pagina atrage vizitatori, dar pentru a-i creste vizibilitatea am hotarat sa schimb culoarea elementului de meniu corespunzator din meniul principal.

In Thesis, acest lucru se face usor datorita structurii CSS a meniului care arata ca in imaginea de mai jos.

Cunoscand pozitia unui element de meniu, modificarea se poate face in fisierul custom.css din directorul thesis/custom prin adaugarea urmatorului cod CSS:

Rezultatul este cel pe care il vedeti mai jos si, incepand de azi, in meniul principal.

Acum doua zile am aratat cum se poate modifica modul in care se afiseaza comentariile facute de catre autorul articolului in Thesis, iar reactia a fost una pozitiva. Nici nu stiam ca atat de multa lume foloseste Thesis  Asa ca voi continua sa scriu scurte tutoriale despre customizarea Thesis. Astazi, despre cum se poate modifica footer-ul. 

#1: Se deschide custom_functions.php

Se downloadeaza si se deschide fisierul custom_functions.php care se gaseste in directorul /wp-content/themes/thesis_17/thesis_17/custom pentru versiunea 1.7 (inca nu am facut upgrade la 1.8).

#2 Se adauga un Action Hook pentru footer

Se adauga urmatoarea linie de cod chiar dupa <?php in fisier:

add_action('thesis_hook_footer', 'custom_footer');

#3 Se creaza functia custom_footer si se adauga codul HTML dorit

Dupa linia de cod adaugata mai sus se adauga si functia custom_footer care contine codul HTML ce se va afisa. Codul de mai jos afiseaza ceva de genul: ”Copyright © 2010 NumeleBloguluiTau.ro. All rights reserved.”

function custom_footer() {
?>
    <p>Copyright &copy 2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All rights reserved.</p><br/>
<?php
}

#4: Se uploadeaza fisierul custom_functions.php

Ultimul pas presupune uploadarea fisierului custom_functions.php in directorul /wp-content/themes/thesis_17/thesis_17/custom.

Concluzie

Pentru cei care nu sunt familiarizati cu PHP si HTML poate sa para complicat, dar daca umariti cu atentie pasii de mai sus nu ar trebui sa aveti probleme. Pentru ceilalti ar trebui sa fie floare la ureche

Thesis vine cu un stil default pentru comentariile facute de catre autor. Culoarea de fond este una nu foarte inspirata, un albastru spalacit. Mi-a luat ceva timp sa gasesc o modalitate de a modifica aceasta culoare pentru a se potrivi mai bine cu culorile folosite pentru celelalte elemente de design. Mai jos descriu cum se face acest lucru (e foarte simplu).

Se deschide fisierul custom.css si se adauga urmatoarea secventa de cod:

/*-- Highlight admin comment --*/
.custom dl#comment_list dt.bypostauthor,children dd.comment, .custom dl#comment_list dd.bypostauthor {background: #B7E8FE; }

Culoarea #B7E8FE poate fi schimbata in functie de necesitati. Rezultatul arata cam asa:

De asemenea este posibila separarea titlului comentariului de textul propriu zis prin folosirea unui cod css ca cel de mai jos:

/*-- Highlight admin comment --*/
.custom dl#comment_list dt.bypostauthor,children dd.comment, .custom dl#comment_list dd.bypostauthor {background: #f1f1f1; }
.custom dl#comment_list dt.bypostauthor {background: #eaf2fa; }

Bineinteles, se pot incerca si alte variante care sa se potriveasca cat mai bine cu restul design-ului.

Sper ca acest scurt tutorial sa va fie de ajutor!

In cadrul activitatilor de imbunatatire a blogului am ajuns la pagina de arhiva. Aceasta pagina este utila pentru ca ofera vizitatorilor nou veniti posibilitatea de a gasi si citi articole mai vechi si ofera o imagine de ansamblu asupra continutului blogului. Voi arata in continuare cum se realizeaza o pagina de arhiva in Thesis, tema pe care o folosesc pentru BloggerIn.ro.

Am ales sa structurez pagina in doua coloane, prima cu link-uri catre fiecare categorie si pentru fiecare luna, iar cea de a doua continand link-uri catre ultimele 50 de articole publicate. Bineinteles, acest lucru se poate modificat pentru a tine seama de nevoile fiecarui blog.

Mai intai trebuie creata o noua pagina si trebuie retinut id-ul ei. Apoi se editeaza custom_function.php si se adauga codul de mai jos:

remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_after_post', 'custom_sitemap');

function custom_sitemap() {
if (is_page('761')) { ?>
<div class='archive'>
<div class='archivel'>
 <h3>Pe categorie:</h3>
 <ul>
 <?php wp_list_categories('sort_column=name&title_li='); ?>
 </ul>
 <h3>Pe luna:</h3>
 <ul>
 <?php wp_get_archives('type=monthly'); ?>
 </ul>
 </div>
<div class='archiver'>
 <h3>Ultimele 50 de articole:</h3>
 <ul>
 <?php wp_get_archives('type=postbypost&limit=50'); ?>
 </ul>
</div>
</div>
<?php } }

In linia 4 trebuie inlocuit ’761′ cu id-ul paginii create mai devreme. Pentru a customiza modul de afisare a arhivei se pot adauga urmatoarele clase in fisierul custom.css.

/*-----archives-----*/
.custom .archive h3 {margin-top: 0;}
.custom .archive ul {font-size: .85em; }
.custom .archivel { float: left; width: 40%;}
.custom .archiver { float: right; float: left; width: 60%;}

Dupa ce pagina e gata se poate face publica si se poate include in meniul principal: Thesis->Site Options->Navigation Menu->Pages.

Rezultatul se poate vedea mai jos sau accesand pagina Arhiva:

Daca un cititor intra pe blogul tau si incearca sa acceseze o pagina care nu exista va primi un mesaj de eroare cu codul 404. Mesajul standard de eroare 404 in Thesis este urmatorul:

Din moment ce pagina standard nu capteaza deloc atentia cititorului si nu il face sa isi doreasca sa afle mai multe, este foarte probabil sa iti doresti sa schimbi mesajul ce apare aici. Modificarea acestei pagini de eroare poate fi o unica  sansa de a transforma un cititor “ratacit” intr-un cititor fidel al blogului ajutand astfel la scaderea Bounce Rate-ului.

Iata pasii necesari pentru a schimba pagina de eroare 404 in Thesis:

Pasul 1: Deschide fisierul custom_functions.php din directorul thesis/custom. Menirea acestui fisier este de a-ti permite sa aduci modificarile dorite fara a afecta nucleul temei.

Pasul 2: Inlocuirea titlului paginii de eroare. In acest fisier, imediat sub <?php introdu codul de mai jos. Remove_action va inlatura numele inital al paginii in timp ce add_action va insera noul nume al paginii de eroare.

remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'custom_thesis_404_title');

Pasul 3: Schimbarea adresei URL a paginii de eroare. In continuare va trebui sa inserezi sub add_action codul de mai jos. Acest cod iti va modifica adresa URL a paginii de eroare si iti va insera numele paginii.

function custom_thesis_404_title() {
?>
PUNE AICI TITLUL PAGINII DE EROARE
<?
}

Pasul 4: Adaugarea continutul paginii de eroare. Dupa codul inserat la pasul 3 va trebui sa inserezi codul de mai jos. Remove_action iti va inlatura continutul vechi al paginii in timp ce add_action va insera continutul dorit de tine.

remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_thesis_404_content');

Pasul 5: Crearea continutului paginii de eroare. La acest pas trebuie creata efectiv pagina de eroare. Pentru aceasta se va insera codul urmator:

function custom_thesis_404_content() {
?>
<p>INSEREAZA AICI CONTINUTUL PAGINII</p>
<?
}

Pasul 6: Uploadeaza fisierul custom_functions.php pe server si vei putea vedea rezultatul introducand o adresa catre o pagina invalida a blogului tau.

Pentru a vedea noua pagina de eroare a BloggerIn intra pe urmatorul link http://BloggerIn.Ro/Pagina_Care_Nu_Exista.

Incearca sa fii cat mai creativ in crearea paginii de eroare. Nu exista reguli clare cu ce ar trebui sa contina aceasta pagina. Poate fi comica sau serioasa, complexa sau foarte simpla. Principalul obiectiv e sa captezi atentia cititorilor pentru a-i determina sa ramana in continuare la tine pe blog.

Codul fisierului custom_functions.php pe care il folosesc pentru BloggerIn.ro il puteti gasi aici.

In aceste zile, DIYthemes sarbatoresc doi ani de la lansarea Thesis, una din cele mai populare teme WordPress comerciale. Cu aceasta ocazie a fost lansata si versiunea 1.7 care este cea mai eficienta si cea mai customizabila de pana acum.

Noua versiune are cateva functionalitati foarte importante:

• Options Manager permite salvarea si reincarcarea diferitelor setari, lucru care este foarte util atunci cand lucram la design-ul blogului.
• Permite optimizarea avansata pentru motoarele de cautare, la orice nivel al blogului (pagina, articole, categorii, arhiva, etc.).
• Imbunatatitirile de performanta sunt semnificative atat pe blog cat si pe partea de administrare.
• Include librarii Javascript ca jQuery, jQuery UI, Prototype, MooTools si care pot fi folosite cu un sigur click.
• Sistem flexibil de management al comentariilor.
• Redirectari 301 pentru link-urile de afiliati.

Mai multe informatii despre Thesis 1.7 puteti gasi aici: http://diythemes.com/thesis/version-17-features/

Pentru ca pe BloggerIn.ro folosesc Thesis, voi posta din cand in cand cate un mic tutorial pentru cei care folosesc aceasta excelenta tema WordPress. Pentru ca schimbarea culorii de background este una din cele mai eficiente metode de a schimba look-ul unui blog, voi prezenta in continuare cum se face acest lucru in Thesis. 

Thesis este echipat din start cu o structura foarte usor de folosit pentru schimbarea background-ului sau fundalului (in limba romana). Sunt implicate trei elemente HTML si anume:

<body class="custom">
<div id="container">
<div id="page">

Adica exista 3 layer-e pe care le putem modifica pentru definirea background-ului.

Iata pasii care trebuie parcursi:

Pasul 1: Deschide custom.css folosind orice editor de texte, ca de exemplu Notepad. Fisierul il gasesti in directorul thesis_16/custom. Acest fisier este special creat pentru a permite customizarea designului in Thesis si permite schimbarea fontului, dimensiunii textului, culoarea de background etc.

Pasul 2: Adauga culoarea de background inserind urmatorul cod in fisier:

body.custom {
    background: #44443f;
}

.custom #container {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0.3em;
    background: #33332f;
    border: 0.4em solid #3e3e3a;
}

.custom #page {
    background: #fff;
}

Din poza de mai sus iti poti da seama foarte usor ce face fiecare linie de cod.

Pasul 3: Schimbarea culorii de background In codul de mai sus sunt 4 culori pe care le poti schimba. Codul culorilor este in format hexadecimal. Pentru a afla care este codul culorii dorite in hexadecimal poti folosi unul din urmatoarele doua site-uri:
http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html
http://www.colorschemer.com/online.html

Pasul 4: Uploadeaza fisierul custom.css pe server dupa care ar trebui sa poti vedea efectul modificarilor.

Daca urmezi cei patru pasi anteriori vei vedea ca e foarte usor sa iti schimbi culoarea fundalului in Thesis Theme chiar daca nu esti foarte familiarizat cu HTML si CSS.