Кнопка Читать далее (more кнопка)


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


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

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

кнопка more

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

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

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

То есть в данном коде мы прописали два состояния кнопки:
класс tarif-more — состоянии кнопки в покое
класс tarif-more:hover — состояние кнопки в момент наведения на нее курсора мыши — вот здесь самое интересное, в чем и заключается суть спрайта — фон кнопки берется из изображения http://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("http://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("http://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' ) ); ?>

На этом все!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Кнопка Читать далее (more кнопка): 1 комментарий

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