Na štai kaip ir žadėjau įrašo “WordPress: gražiname komentarų formą!” pabaigoje, atėjo metas parašyti įrašą kaip pagražinti komentarų pateikimą ir pridėti gravatar įskiepį. Taigi pradedame:

1. Parsisiunčiame gravatar įskiepį ir jį įdiegiame.

Eikite į http://en.gravatar.com/site/implement/wordpress, tai nuoroda į gravatar įskiepį WordPress turinio valdymo sistemai.

Parsisiuntę išarchivuokite ir įkelkite į /wp-content/plugins/. Įkėlę prisijunkite prie administratoriau panelės, eikite į “Plugins” ir aktyvuokite “Gravatar”.

2. Redaguojame “comments.php” failą. (prireiks minimalių programavimo žinių)

Prisijungę prie administratoriaus panelės eikite į “Design” -> “Theme editor” -> “comments.php”

Atsidarę .php failą redagavimo lauke įkelkite šį scriptą į “<div class=”comments”>”

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite>
<img src="<?php gravatar(" mce_src="<?php gravatar("", 32, "Paveikslėlio adresas kuris bus rodomas vartotojams kurie neturės nuotraukos"); ?>" alt="" />
<span class="author"><?php comment_author_link() ?></span>
   <span class="time"><?php comment_time('G:i') ?></span> | <?php comment_date('l, M j, Y') ?> | <?php edit_comment_link('redaguoti','  ',''); ?>
</cite>
<div class="commenttext"><?php comment_text() ?></div>

<?php if ($comment->comment_approved == '0') : ?>
<i>Jūsų komentaras laukia patvirtinimo.</i>
<?php endif; ?>
</li>

<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

3. Redaguojame “style.css” išvaizdą.

#content .post .comments {
			font: normal 12px/19px Arial, Verdana;
			color: #bebebe;
			width: 613px;
		}

		#content .post .comments ol.commentlist {
	margin:0;
	padding:0;
	}

		#content .post .comments .commentlist li {
	list-style:none;
	margin-bottom:14px;
	}

		#content .post .comments .commentlist cite {
	padding: 7px;
	display:block;
	font-style:normal;
	background: #181818 url(images/xxx-virsus.jpg) no-repeat;
	color:#181818;
	}

		#content .post .comments .commentlist a:link, .commentlist a:visited {
	color:#181818;
	}

		#content .post .comments .commentlist a:hover, .commentlist a:active {
	color:#181818;
        text-decoration: none;
	}

		#content .post .comments .commentlist cite img {
	padding:1px;
	border:1px solid #181818;
	float:left;
	margin-right:9px;
	}

		#content .post .comments .commentlist .author {
	font: bold 12px Arial, Verdana;
	text-decoration:none;
	}

		#content .post .comments .commentlist .time {
	background: url(images/laikrodis.png) no-repeat;
	padding-left:17px;
	}

		#content .post .comments .commenttext {
	background: #181818 url(images/xxx.jpg) repeat-x;
	border:1px solid #000;
	padding: 0 20px 10px 20px;
	color:#fafcf6;
	}

4. Viskas. Galite džiaugtis naujai atrodančia komentarų pateikimo forma. :)

Nesenai grįžęs atgal į BLOG’inimo ligą supratau, kad reikia turputėli atsinaujinti, jeigu tiksliau tai “pasišlifuoti”, todėl pakeičiau savo dizaino icon’as, sutvarkiau reklamą ir kitokius menkniekius. Šiandiena užsimaniau “papimpinti” savo komentavimo formą (vizualine prasme), todėl iš tokios:

tapo į dabartinę esančią (nuotraukos nedėsiu, patestuokit gyvai).

Norėdami turėti kažką panašau savo tinklaraštyje turite išmanyti minimaliai CSS ir PHP programavimo kalbą.

1. Pagrindiniame dizaino CSS susiraskite “#commentform” divą.

2. Tada pridėkite (taip parašyta pas mane):

#content .post #commentform #author {
font: normal 12px/19px Arial, Verdana;
color: #fff;
border: 1px solid #000;
background: #181818 url(http://domenas.lt/images/paveikslėlis.jpg) no-repeat center;
width: 180px;
height: 20px;
}

#content .post #commentform #email {
font: normal 12px/19px Arial, Verdana;
color: #fff;
border: 1px solid #000;
background: #181818 url(http://domenas.lt/images/paveikslėlis.jpg) no-repeat center;

width: 180px;
height: 20px;
}

#content .post #commentform #url {
font: normal 12px/19px Arial, Verdana;
color: #fff;
border: 1px solid #000;
background: #181818 url(http://domenas.lt/images/paveikslėlis.jpg) no-repeat center;
width: 180px;
height: 20px;
}

#content .post #commentform textarea {
font: normal 12px/19px Arial, Verdana;
color: #fff;
border: 1px solid #000;
background: #181818;
width: 500px;
}

#content .post #commentform .button {
border: 1px solid #000;
background: #181818 url(http://domenas.lt/images/paveikslėlis.jpg) no-repeat center;
repeat: no-repeat;
margin-bottom: -5px;
width: 100px;
}

3. Atlikę 2 veiksmą atsidarykite “comments.php” susiraskite “sumbit” eilutę ir pakeiskite ją šią. :)
<input name="submit" type="submit" id="submit" tabindex="5" value="" class="button"/>

4. Susikelkite paveikslėlius į talpyklą ir susidėliokite į CSS arba palikite vienspalvius fonus

5. Sveikinu, Jūsų forma atrodo modernesnė.

Šiam kartui tiek. :)

Greitu metu parašysiu kaip pakeisti komentaro stilių ir prie jo pridėti “gravatar” įskiepį.