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

опубликовано: Designer в 09/4/09 • категория wordpress

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

1. Зелёный

Что бы реализовать то что мы задумали, нам понадобится плагин 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>

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

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;
        }

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

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

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

<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;
        }

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

Я иногда использую “.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;  
    }

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

загрузка...

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

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

Egor
15.05.2010 • 17:33

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

Ответить
- Суслик
  08.06.2011 • 08:01
  
  А как сделать вложенные комментарии?
  
  Ответить
  - Саша
    31.01.2012 • 08:11
    
    вот так

cooledit