Cum sa adaugam profile info box pe WordPress?

Probabil detii un blog in care scriu mai multe persoane si ar fi foarte dragut sa creezi si posibilitatea respectivilor de a-si promova imaginea lor in comunitate, adaugand la sfarsitul articolului o mica casuta in care acesta poate scrie cateva cuvinte despre el sau isi poate promova proiectele personale.

WorldIT.info are deja un astfel de sistem implementat in blog, care , in opinia mea poate raspunde uneori la anumite intrebari ce vi le puteti forma in legatura cu cineva,cu ce a scris etc. 🙂 De asemenea, aveti la dispozitie si modalitatile de contact ale persoanelor respective pentru motive diverse.

Codul ce trebuie adaugat in tema

Pentru inceput va trebui sa cautati fisierul din tema blogului in care afisezi un articol , in general e single.php. Acesta trebuie sa contina la un moment dat functia the_content() sau ceva asemanator.In cazul in care doriti sa afisati casuta referitoare la informatiile utilizatorului respectiv deasupra continutului va trebui sa puneti codul de mai jos deasupra functiei, in caz contrar sub aceasta.

<?php if(get_the_author_description() != '') { ?>
 <div>
 <h4>Articol scris de : </h4>
 <?php echo "<img class=\"alignleft\" src=\"http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email())."&size=82&rating=G\" />"; ?>
 <div>
 <div> <strong><?php the_author_firstname(); ?> <?php the_author_lastname(); ?></strong> - Autorul a scris <strong><?php the_author_posts(); ?></strong> articole. Vezi articolele scrise de <a href="<?php bloginfo('url'); ?>/?author=<?php the_author_ID(); ?>"><?php the_author_lastname();?> <?php the_author_firstname(); ?></a>.</div>

 <div><?php echo str_replace(array('!__!','!/__!','///'),array('<div>','</div>','<br />'),get_the_author_description()); ?></div>
 </div>
 </div>
 <?php } ?>

Codul CSS

Pentru a stiliza casuta de info box ai nevoie de putin cod CSS, ce il vei adauga in fisierul style.css.Acest cod il puteti modifica dupa bunul plac, exemplul de mai jos fiind preluat din fisierul css al temei worldit, asadar va genera o casuta asemanatoare cu cea a blogului.

.postauthor {
  background-color: #D2E4F0;
  border: 1px solid #c5ced5;
  padding: 5px;
  margin: 5px 0;
  font-size:1.2em;
  min-height:135px;
  }

.postauthor h4 {
  margin: 0 0 5px 0;
  font-size:1.4em;
  }

.postauthor img {
  float: left;
  margin: 0 10px 4px 0;
}

Crearea unei descrieri

Pentru a crea descrierea unuia dintre autori va trebui sa editati contul persoanei respective( de asemenea o poate edita si singur ), mai exact Biographical Info si sa scrieti descrierea acestuia. De remarcat este faptul ca acea casuta nu permite crearea unor diviziuni de bloc (<div>) sau paragrafe (<p>) , precum nici adaugarea unei linii noi (<br />) de aceea in cazul in care doriti sa incadrati o parte din continutul descrierii intre paragrafe va trebui sa inlocuiti <div> , </div> si <br /> cu !__! , !/__! si respectiv ///.

Exemplu

Voi da ca exemplu descrierea profilului meu de mai jos, codul de mai jos reprezentand descrierea din casuta Biographical Info a contului meu.

!__!<strong><em>Contact</em></strong> | andrei@worldit.info | <a href="http://twitter.com/worldit">@worldIT</a> - <a href="http://twitter.com/AndreiAvadanei">@AndreiAvadanei</a></strong> !/__! ///

Fondator si redactor <strong>WorldIT</strong>, ma numesc <em>Andrei</em>, autodidact, sunt pasionat de programare , in special de algoritmica si web development. Daca ai nevoie de suport tehnic, informatii si sugestii privind diverse produse prezentate pe blog sau doriti sa ne ajutati la dezvoltarea acestui proiect va stau la dispozitie. Persoanele ce doresc sa-si promoveze produsele pe WorldIT le astept sa ma contacteze prin aceleasi metode.

Daca aveti intrebari, nu ezitati sa le puneti pentru ca stiu sigur ca este o operatiune mai finuta. Probabil curand voi crea un mic plugin pentru ca aceasta operatiune sa nu mai fie atat de dificila. 🙂