Сегодня мы осуществим, часто упускаемую из виду, особенность админ панели WordPress, назначения и отображения на страницах сайта рейтингов ссылок. Цель данного урока является создание системы рейтинга, основы которой будут заложены в панели управления. Рейтинг будет выводиться на экран в пятизвездочном формате. Но количество звёзд можно изменить или вообще сделать так, чтобы вместо них появлялся какой-нибудь другой значок.

Такая система поможет оказать больше внимания пользователей на Ваши любимые ссылки, и пусть читатели знают, на которые из них стоит потратить время. Да и для украшения самих ссылок это не помешает.

Пример конечного продукта, надеюсь, Вы уже видели(рисунок в самом начале статьи). Теперь, если Вы хотите, что бы что-то похожее появилось у Вас на сайте, перейдем к делу. Приятной стороной является то, что вставив код в файл шаблона, процессом можно управлять из админки. Во-первых, необходимо добавить саму ссылку, её описание и присвоить рейтинг. Для этого войдите в администраторскую часть и перейдите по ссылке «ссылки» -> «добавить новую». Перед Вами появятся поля, некоторые из которых необходимо заполнить. Вот пример:

И конечно, необходимо присвоить рейтинг нашей ссылке. Это можно сделать спустившись в конец страницы и указав значение на Ваше усмотрение.

Таким образом, ссылок можно добавить неограниченное количество. В нашем случае, мы заполнили четыре различных поля(имя, адрес, описание и рейтинг). Для наглядного представления, что чему будет соответствовать при выводе на страницах Вашего ресурса, ниже приводится рисунок:

Далее переходим к основному коду, который выложен ниже:

<div class="rating">		
<?php   
  $bookmarks = array();  
    $bookmarks = get_bookmarks(array(  
        orderby => 'rating',  
        order => 'DESC'  
    ));     
    if ($bookmarks[0] != '') { ?>  
       <ul class="linklist">  
           <h3>Рекомендуемые ссылки</h3>  
           <?php foreach ( $bookmarks as $bookmark ) { ?>  
                <li>  
                    <h4><a title="<?php echo $bookmark->link_name; ?>" href="<?php echo
					clean_url($bookmark->link_url); ?>" target="_blank"><?php echo $bookmark->link_name; 
					?></a></h4>  
                    <p><?php echo $bookmark->link_description ?></p>
                    <div class="link-rating">  
                    <?php  
                    $link_rating = $bookmark->link_rating;  
                    if ($link_rating >= 5){  
                      //If rating is five or greater, just assign a perfect score  
                      for ($i = 1; $i < 6; $i++){ ?>  
                      <img src="<?php bloginfo('template_directory'); ?>/images/star_48.png"/>  
                      <?php }  
                    }else{  
                      //If rating is under 5, display same number of stars.  
                      for ($i = 1; $i <= $link_rating; $i++){ ?>  
                      <img src="<?php bloginfo('template_directory'); ?>/images/star_48.png"/>  
                      <?php }  
                    } ?>  
                    </div>
                </li>  
          <? } ?>  
       </ul>  
   <?php } ?>
</div>

Данный код можно положить в любом файле шаблона. Как правило используется sidebar.php, то есть для показа в боковой части сайта.

В функции get_bookmarks () мы задаём аргументы для отсортировки значений рейтинга в порядке убывания. По другому, «лучшие» ссылки будут отображаться в верхней части списка. Если вам потребуется дополнительная информация об этой функции и других доступных элементах организации ссылок, Кодекс WordPress Вам поможет.

В контейнере <div> мы расположим рейтинговые звёзды. Наша система является пятизвездочной, но при желании она потдаётся расширению. Например, чтобы увеличить количество выводимых звезд до 6, просто поменяйте в коде 5 на 6 в ($link_rating >= 5), и 6 на 7 в ($i = 1; $i < 6; $i++) Но мне кажется и пяти достаточно.

Значок можно скачать бесплатно здесь. Он под названием star_48.png, его нужно будет поместить в папку с изображениями в теме Вашего сайта. Обычно это images.

Как пример могу предложить стили, которые Вы по мере необходимости смените.

/*Link Rating*/
.rating ul{padding:0;margin:0}
.linklist{clear:both; font-family:arial, sans-serif;}
.linklist li{clear:both; overflow:hidden; display:block; margin-bottom:5px; padding:10px; background:#F3F3F3; font-size:12px; border:1px solid #DDD;}
.linklist h3{margin-bottom:10px;}
.linklist h4{padding:0;margin:0}
.linklist h4 a{clear:both; font-weight:bold; color:#1c1259; text-decoration:none; color:#191919;}
.linklist h4 a:hover{text-decoration:none; color:red;}
.rating ul.linklist li p{padding:0 0 5px 0; margin:5px 0px; color:#333;}
.link-rating{clear:both; margin:0;}
.link-rating img{width:20px; height:20px; margin:0; padding:0;}

Теперь Вы обладаете гораздо более наглядным способом отображения рейтинга ссылок. Если есть интересные идеи для дальнейшего применения этой функции или я что-то пропустил? Обязательно сообщите мне об этом в комментариях ниже!