Brielle
Brielle
2015. dec 13

A következő WordPress segítségben arról lesz szó, hogyan is illeszthetjük be az egyes hozzászólások mellé az adott felhasználó avatarját, vagyis kis ikonját, amit regisztráció után lehet majd kiválasztani. Ennek a lehetőségnek a megoldásához egy WP bővítményre is lesz szükségünk, valamint némi kódismeretre, de csak a hozzászólások külsejének kialakításához.

Mit is tartalmaz a funkció?

Hogy őszintén eláruljam, sokat szórakoztam ezzel a dologgal, mire össze tudtam hozni működőképesen. Viszont teljességgel megérte, mert rendkívül jó lehetőségek tárulnak elénk ezzel a módszerrel:

  • Ha valaki nem regisztrált tag, és úgy szól hozzá, akkor az alapértelmezett ikon fog megjelenni a neve mellett.
  • Kiválaszthatod, mi legyen az alapértelmezett ikon
  • Minden felhasználó feltölthet magának egy tetszőleges avatart.
  • Te, mint az oldal tulajdonosa, megadhatod, mekkora lehet a maximum mérete egy avatarnak.
  • Ez a lehetőség nagyon jól feldobja a hozzászólások megjelenését.
  • Könnyedén elkülöníthetőek egymástól az azonos felhasználók hozzászólásai.

WP User Avatar Bővítmény telepítése

Első lépésként a Bővítmények » Új hozzáadása lehetőségnél keressünk rá a WP User Avatar elnevezésű bővítményre, majd telepítsük azt, és természetesen a megszokott módon aktiváljuk is.

Ha ezzel megvagyunk, akkor a bővítmény beállításaiban megadhatjuk az alap adatokat: például, hogy mi legyen az alapértelmezett avatar a nem regisztrált tagoknak, illetve azoknak, akik nem állítottak be ilyesmit maguknak, valamint a felhasználók által feltölthető avatar méretét is, egyebek.

Természetesen a bővítmény telepítésével minden felhasználó, még Te is megváltoztathatod az avatarodat a Vezérlőpultodban az Adatlapom szerkesztésénél. Ehhez csupán a látogatóknak is be kell lépniük a profiljukba (oldalad.hu/wp-login.php)

Kód beillesztése a comments.php-ba

Természetesen fontos kezdésnek, hogy az éppen használatban lévő WordPress témádban szerepeljen comments.php fájl. Ha nem szerepel, akkor töltsd le az oldalamról az egyik WP témámat, és abból nyugodtan használhatod. A pár pillanattal ezelőtt telepített bővítmény a kódokat is tartalmazza, amikre szükségünk lesz. Az avatart a következő kóddal jelenítheted meg:

<?php echo get_avatar($comment, 60); ?>

  • $comment » ez a kód adja meg azt, hogy az adott komment írójának jelenjen meg a saját avatarja, ha van neki. Ha nincs, akkor az alapértelmezett fog megjelenni.
  • 60 » a zárójelekben megjelenő számmal adhatod meg az avatar méretét pixelben.

A leírás teljessége érdekében persze arról is le szó, hogy pontosan hova illeszd be a kódot, ha nem értesz hozzá. Nos, a comments.php rendkívül sok bonyolult kódból áll első lépésre, így nagyon könnyű elrontani. A kód tartalmaz alapvető elemeket a hozzászólások megjelenítéséhez, amelyek nem törlődhetnek, így vigyázz, hogy semmi olyat ne törölj a kódból, amiről nem tudod, hogy mi!

A következő kép abban lesz a segítségedre, hogy előre kijelöltem neked a teljes hozzászólás táblázat kódját. Ez összesen egy 1 sorból és 2 cellából álló táblázatocska. Az első cella csak az avatart tartalmazza, míg a második a hozzászólás írójának, dátumának és szövegének kódját. A táblázat előtti és utáni kódokat ne változtasd meg, és semmiképpen ne töröld!

Természetesen itt van az én kódom is, amit a képen láthatsz, innen kimásolhatod, és akkor hasonlóan fog felépülni az egész, mint ahogy nálam láthatod.

<table cellspacing="0" cellpadding="0" width="700">
<tbody>
<tr>
<td valign="top" class="commentavatar">
<?php echo get_avatar($comment, 60); ?>
</td>
<td height="" class="commentcontent">
<a name="comment-<?php comment_ID() ?>"></a><a href="<?php echo $comment_author_url; ?>"target="blank"><?php comment_author_link() ?></a> | <?php comment_date('Y/m/d H:i') ?> <?php comment_date('H:i') ?> <?php edit_comment_link(__("Moder&aacute;l"), ' '); ?>
<?php comment_text() ?>
</td>
</tr>
</tbody>
</table>

A hozzá tartozó CSS-it is beillesztem, a HTML és e segítségével kialakíthatod a tetszésednek, és a designodnak megfelelő megjelenést.

.commentavatar{
background-color: #ffffff;
width: 50px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

.commentcontent{
background-color: #ffffff;
width: 680px;
padding-left: 10px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
text-align: justify;
color: #898989;
line-height: 18px;
}

Remélem, hasznosnak vélted a segítséget, és ezáltal Te is ki tudod majd alakítani a saját hozzászólás megjelenésedet. Nagyon kreatív elrendezést alkothatsz meg ezek által, így biztos vagyok benne, hogy nem lesz unalmas az oldalad. Ha bármi gondod, vagy kérdésed akadna, akkor azt nyugodtan felteheted. :) Köszönöm, hogy velem tartottál.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *