Здравствуйте, сегодня рассмотрим следующий вопрос – как сделать кнопку Читать далее в wordpress, вместо обычной ссылки.
Кнопку сделаем красивой – при наведении на которую будет виден эффект нажатия на кнопку – все очень просто и красиво!


Скачать исходники для статьи можно ниже

Для создания кнопки нам понадобиться изображение и CSS код кнопки.
Для кнопки будем использовать спрайт, то есть изображение, в котором содержаться картинки кнопки в разных ее состояниях: в состоянии покоя и в состоянии наведения на кнопку курсора мыши:

А также нам понадобиться CSS код, который нужно поместить в файл стилей вашей темы на wordpress (админка wordpress – в левом меню выбираем пункт “Внешний вид”, его подпункт “Редактор” и справа в списке шаблонов выбираем файл style.css):

.tarif-more{width:126px;height:60px;display:block;margin-left:85px;background:url("https://mnogoblog.ru/wp-content/uploads/2015/01/more.png")}
.tarif-more:hover{background-position:100% 0}

Здесь https://mnogoblog.ru/wp-content/uploads/2015/01/more.png – путь до спрайта (изображения кнопки) – можете загрузить его к себе на сайт и прописать свой путь до спрайта.

То есть в данном коде мы прописали два состояния кнопки:
класс tarif-more – состоянии кнопки в покое
класс tarif-more:hover – состояние кнопки в момент наведения на нее курсора мыши – вот здесь самое интересное, в чем и заключается суть спрайта – фон кнопки берется из изображения https://mnogoblog.ru/wp-content/uploads/2015/01/more.png, но со сдвигом вправо на 100% (то есть на ширину кнопки 126px).

И последнее нужно вставить в нужном месте сайта сам код кнопки:

<a href="http://mnooblog.ru" class="tarif-more"></a>

Для того чтобы вставить данную кнопочку вместо ссылки “Читать далее” на сайте wordpress нужно следующее – буду разбирать на основе стандартной темы wordpress – Twenty Twelve:

1. Заходим в файл стилей – style.css и вставляем следующий код в самый низ:

.more-link{width:126px;height:60px;display:block;margin-left:85px;background:url("https://mnogoblog.ru/wp-content/uploads/2015/01/more.png")}
.more-link:hover{background-position:100% 0}

Здесь все просто за отображение ссылки “Читать далее” у нас отвечает класс more-link.

2. Наша кнопка появилась, но ссылка “Читать далее” сама по себе не исчезла, поэтому делаем следующее – просто поставим размер шрифта этой ссылки в 0px, а также уберем верхний регистр и подчеркивания – то есть в файл стилей (style.css) нам нужно вставить следующий код (вместо того, который приведен в пункте 1):

.more-link{text-decoration: none;text-transform: uppercase;font-size: 0px;width:126px;height:60px;display:block;margin-left:85px;background:url("https://mnogoblog.ru/wp-content/uploads/2015/01/more.png")}
.more-link:hover{background-position:100% 0;font-size: 0px;text-decoration: none; text-transform: uppercase;}

На этом все! Красивых вам сайтов!

PS: Можно также пойти по сложном пути, а именно: редактировать шаблон сайта, удаляя ссылку “Читать далее”:
Заходим в шаблон content.php и ищем в нем код вывода кнопки more (можно воспользоваться поиском браузера и в строку поиска ввести “the_content”):

Найдется вот такая строчка:

<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

И меняем ее на:

<?php the_content( __( '<span class="meta-nav"></span>', 'twentytwelve' ) ); ?>

На этом все!