В данной статье я расскажу про плагин "Like Dislike Counter”, который позволяет создавать кнопку Like на страницах сайта.

1. Добавим плагин, жмем кнопку "Добавить новый” или "Add new”.

В поле поиска вбиваем название плагина ”Like Dislike Counter”, жмем  Поиск. Устанавливаем плагин.

Соглашаемся с установкой нового плагина.

И активируем сразу его.

Создаем кнопку на странице

Заходим в свою тему, находим что-то типа single.php и выбираем его.

Добавляем следующий код в место где хотите видеть кнопку

<?php if(function_exists('like_counter_p')) { like_counter_p(''); } ?>

Если хотите видеть кнопку похожую на мою, то оберните данный код в тег div с классом singlebox-like.

И добавьте следующие стили в style.css или другой файл со стилями.

.singlebox-like {display:block;width:100%;float:left;padding:0 0 0 3px;}
.singlebox-like .ul_cont {
display: inline;float: left;
padding: 1px 2px;
background-color: #EAEAEA;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#EAEAEA));
background-image: -webkit-linear-gradient(top, white, #EAEAEA);
background-image: -moz-linear-gradient(top, white, #EAEAEA);
background-image: -ms-linear-gradient(top, white, #EAEAEA);
background-image: -o-linear-gradient(top, white, #EAEAEA);
background-image: linear-gradient(top, white, #EAEAEA);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid #CCC;
border-bottom-color: #AAA;
border-radius: 2px;
color: #555;
vertical-align: middle;
cursor: pointer;
margin: 6px 10px 2px 7px;
}
.singlebox-like .ul_cont:hover {
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(#ffffff));
background-image: -webkit-linear-gradient(top, #EAEAEA, #ffffff);
background-image: -moz-linear-gradient(top, #EAEAEA, #ffffff);
background-image: -ms-linear-gradient(top, #EAEAEA, #ffffff);
background-image: -o-linear-gradient(top, #EAEAEA, #ffffff);
background-image: linear-gradient(top, #EAEAEA, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EAEAEA, endColorstr=#ffffff);
}
.singlebox-like .ul_cont img {width: 13px;}
.singlebox-like .ul_cont span{padding: 2px;}

Так же можете взять оформление отсюда.

Редактирование плагина

Может потребоваться изменить картинку, надпись, убрать счетчик и тд. Для этого нужно отредактировать плагин, заходим в список установленных плагинов, находим  ”Like Dislike Counter” и жмем Редактировать.

В выделенном фрагменте я показал исходную часть которую закомментил и нижнею которую изменил.

В данном случае я убрал текст и счетчик, счетчик переместил в title кнопки, т.е. при наведении будет показываться количество Лайков.

Пример с изменениями.