Cum adaugati sectiunea “Despre autor” pentru fiecare articol de pe blog

Exista mai multe metode de a adauga aceasta sectiune pe blog, dar in acest articol am ales o abordare in care  ne folosim de o parte din functionalitatile pe care Wordpress le are deja implementate.

De obicei pe majoritatea blogurilor, sau cel putin cate am descoperit eu pana acum, articolul este urmat fie de o sectiune de “Articole asemanatoare”, fie direct de sectiunea “Comentarii”.

Recomandarea mea este de a insera “Despre autor” la sfarsitul fiecarui articol, inainte de orice alta sectiune.

Si acum hai sa vedem cum se face.

Pasul 1:

Intrati in sectiunea de administrare a blogului WordPress. In meniul din stanga selectati Utilizatori -> Profilul tau. Completati datele dvs. la sectiunea “Numele va fi afisat astfel” si ” Informatii biografice”.

Important: Sectiunea de “Informatii biografice” trebuie compelata cu tot cu linkuri. Urmariti imaginea de mai jos pentru detalii.

Salvati modificarile.

Pasul 2:

Aici aveti nevoie de cunostinte minime de PHP, CSS si HTML. Deci sa scriem un pic de cod. :)

Datele autorului in scriptul PHP sunt preluate astfel:

  • Numele autorului se preia folosind functia <?php the_author (); ?>
  • Informatiile biografice se preiau in mod similar folosind functia <?php the _author_description(); ?>

Aceste functii trebuie apelate in fisierul single.php aflat in folder-ul cu tema WP pe care o folositi.

De exemplu pentru a adauga informatiile “Despre autor” exact la sfarsitul articolului,  deschideti fisierul single.php si cautati functia <?php the_content(); ?>. Exact dupa aceasta linie adaugati urmatorul cod:

<!--begin despre-autor-->
<div id="despre-autor">
	<h6>Despre autor</h6>
	<img src="<?php bloginfo('url'); ?>/wp-content/themes/tema_dvs/images/toc75x75.png" alt="Despre TOC" />
	<h4><?php the_author(); ?></h4>
       <?php the_author_description(); ?>
</div>
<!--end despre-autor-->

Pasul 3:

In momentul acesta aveti datele despre autor preluate in pagina articolului. Pentru afisarea acestor date intr-o forma mai eleganta, este nevoie sa adaugati un stil pentru elementele  folosite.

Deschideti fisierul style.css (sau fisierul .css pe care il folositi) si adaugati urmatorul cod:

#despre-autor { border: 1px solid #ddd; margin-top:20px; padding-left:25px; background-color:#f5f5f5; }
#despre-autor h4 { font-size: 14px; margin: 0 0 3px 0; }
#despre-autor h6 {
 font-size: 1.6em; margin-top:10px;
 margin-bottom: 10px; font-family:Arial, Helvetica, sans-serif;
 font-weight:normal; color:#464646; text-align:left;
 }
#despre-autor img { float: left; width: 75px; padding: 2px; border: 1px solid #cccccc; margin: 5px 15px 0 0; }
 

Salvati fisierul.

Probabil o sa fie nevoie sa va mai jucati putin prin codul css pentru a potrivi stilul cu designul dvs., insa acest cod cred ca este un punct de pornire.

Rezultatul codului este acesta:

Asta a fost tot. ;)

Daca aveti intrebari sau intampinati dificultati in implementarea codului, lasati un comentariu in continuare si voi incerca sa va raspund in timp util.

Etichete:, , , , ,
Despre autor:

T.O.C. Despre T.O.C.

Facebook   |   Twitter


admin [at] prosoftdesign.ro

Ai mai putea fi interesat de ...

Lasă un comentariu