Улучшим дизайн комментариев в wordpress

Если поковырятся в коде, то можно всегда улучшить что нибудь в своём блоге или на своём сайте. Вот последние примеры с файлами PSD :

1. Зелёный

comment2

Что бы реализовать то что мы задумали, нам понадобится плагин gravatar и три картинки: часы, градиент и растровые строки, которые мы можем экспорировать из PSD.

Для начала отредактируем файл  “comments.php” вашей темы:

<ol class="commentlist">
&lt; ?php foreach ($comments as $comment) : ?&gt;
	<li>id="comment-&lt; ?php comment_ID() ?&gt;"&gt;
<cite>
<img src="&lt;?php gravatar(" alt="" />" alt="" /&gt;
<span class="author">&lt; ?php comment_author_link() ?&gt;</span>
<span class="time">&lt; ?php comment_time() ?&gt;</span> on <a href="#comment-&lt;?php comment_ID() ?&gt;">&lt; ?php comment_date('F jS, Y') ?&gt;</a> &lt; ?php edit_comment_link('edit','  ',''); ?&gt;
</cite>
<div class="commenttext">&lt; ?php comment_text() ?&gt;</div>
&lt; ?php if ($comment-&gt;comment_approved == '0') : ?&gt;
<em>Your comment is awaiting moderation.</em>
&lt; ?php endif; ?&gt;</li>
&lt; ?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?&gt;
&lt; ?php endforeach; /* end for each comment */ ?&gt;</ol>


Кроме рисунков остальная часть редактируется с помощью :

ol.commentlist {
	margin:0;
	padding:0;
	}
 
.commentlist li {
	list-style:none;
	margin-bottom:14px;
	}
 
.commentlist cite {
	padding: 7px;
	display:block;
	font-style:normal;
	background:url(http://www.yoursite.com/images/bg_comments2_cite.gif);
	border-top:1px solid #d6e4c1;
	border-bottom:1px solid #779d42;
	color:#596e3b;
	}
 
.commentlist a:link, .commentlist a:visited {
	color:#596e3b;
	}
 
.commentlist a:hover, .commentlist a:active {
	color:#8ec343;
	}
 
.commentlist cite img {
	padding:1px;
	border:1px solid #aab59a;
	float:left;
	margin-right:9px;
	}
 
.commentlist .author {
	font: small-caps bold 1.2em Georgia, "Times New Roman", Times, serif;
	text-decoration:underline;
	}
 
.commentlist .time {
	background: url(http://www.yoursite.com/images/bg_clock.gif) no-repeat 1px;
	padding-left:13px;
	}
 
.commenttext {
	background: #9bc561 url(http://www.yoursite.com/images/bg_comments2_text.jpg) repeat-x bottom;
	border-top:1px solid #c5f386;
	padding: 0 20px 10px 20px;
	color:#fafcf6;
	}

downloadjpgpu5
Имейте ввиду что в этом css используются размер шрифта с помощью ems? поэтому вам прийдётся в своём css что то поменять.

2.Тёмный цитатник

comment1
Для этого стиля потребуется скобки цитаты, а код для шаблона будет выглядеть вот так:

<ol class="commentlist">
&lt; ?php foreach ($comments as $comment) : ?&gt;
	<li>id="comment-&lt; ?php comment_ID() ?&gt;"&gt;
<div class="quote">&lt; ?php comment_text() ?&gt;</div>
&lt; ?php if ($comment-&gt;comment_approved == '0') : ?&gt;
<em>Your comment is awaiting moderation.</em>
&lt; ?php endif; ?&gt;</li>
<cite>&lt; ?php comment_author_link() ?&gt; on <a href="#comment-&lt;?php comment_ID() ?&gt;">&lt; ?php comment_date('F jS, Y') ?&gt; at &lt; ?php comment_time() ?&gt; &lt; ?php edit_comment_link('edit','  ',''); ?&gt;</a></cite>
&lt; ?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?&gt;
&lt; ?php endforeach; /* end for each comment */ ?&gt;</ol>

И соответственно CSS:

.commentlist .quote {
	background:url(http://www.yoursite.com/images/bg_quote.gif) no-repeat top right;
	}
 
.commentlist li {
 	padding: 5px 18px 22px 18px;
	margin-top:15px;
	background:#454545 url(http://www.yoursite.com/images/bg_commentlist.gif) bottom no-repeat;
	color:#e4edee;
	}
 
.commentlist cite {
	display:block;
	font-style:normal
	}
 
.commentlist cite a:link, .commentlist cite a:visited {
	color:#88e5f0;
	text-decoration:none;
	}
 
.commentlist cite a:hover, .commentlist cite a:active {
	color:#FFF;
	text-decoration:underline;
	}

downloadjpgpu5

3. Чередование стрелок.

comment_arrows
Я иногда использую “.alt” class для комментариев и это как раз тот случай что бы поставить стрелочки и использовать альтернативные цвета.
Код темплета:

<ol class="commentlist">  
<?php foreach ($comments as $comment) : ?>  
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">  
<div class="commenttext">  
<cite><?php comment_author_link() ?></cite>  
<?php comment_text() ?>  
<span class="date"><img src="/images/commentlink.gif" alt="" /> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_time() ?> on <?php comment_date('n/j/y') ?></a></span> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?>  
</div>  
<?php if ($comment->comment_approved == '0') : ?>  
<em>Your comment is awaiting moderation.</em>  
<?php endif; ?>  
</li>  
<?php  
/* Changes every other comment to a different class */  
$oddcomment = ( emptyempty( $oddcomment ) ) ? 'class="alt" ' : '';?>  
<?php endforeach; /* end for each comment */ ?>  
</ol>


CSS:

ol.commentlist {  
    margin:0;  
    padding:0;  
    }  
 
.commentlist li {  
    margin-bottom:8px;  
    background: #60360b url(http://www.yoursite.com/images/comment_arrows.gif) bottombottom no-repeat;  
    color:#FFF;  
    list-style:none;  
    width:413px;  
    }  
 
.commentlist .commenttext {  
    background:url(http://www.yoursite.com/images/bg_paint.gif) no-repeat;  
    padding:22px 22px 50px 22px;  
    }  
 
.commentlist cite {  
    display:block;  
    color:#FFF;  
    font-weight:bold;  
    text-transform:uppercase;  
    font-style:normal;  
    background:url(http://www.yoursite.com/images/bg_cite_arrows.gif) bottombottom repeat-x;  
    padding-bottom:12px;  
    font-size:1.1em;  
    }  
 
.commentlist a:link, .commentlist a:visited {  
    color:#fff9b9;  
    }  
 
.commentlist a:hover, .commentlist a:active {  
    color:#FFF;  
    }  
 
.commentlist .date {  
    background:#930e27;  
    padding:3px;  
    }  
 
li.alt {  
    background:#836241 url(http://www.yoursite.com/images/comment_arrows_alt.gif) no-repeat bottombottom;  
    }  
 
li.alt .commenttext {  
    background:url(http://www.yoursite.com/images/bg_paint_alt.gif) no-repeat;  
    }     
 
li.alt .date {  
    background:#67421c;  
    padding:3px;  
    }

downloadjpgpu5


Также читай на cooledit.org.ua:
.

загрузка...

Если вам понравилось, подпишись на наш RSS

Читать в Яндекс.Ленте Add to Google Reader or Homepage

3 комментария

  1. Ой спасибо! Все перерыл, не могу найти!

оставить комментарий

Ваш комментарий отправлен на модерацию админу, не надо заново его набирать.