Кнопка Читать далее в Вордпресс

Кнопка Читать далее в Вордпресс

Кнопка Читать далее в Вордпресс

Здравствуйте! Речь пойдет о кнопке Читать далее в Вордпресс, а точнее, как изменить внешний вид cсылки читать далее и придать ей привлекательности, сделать ее кнопкой.
Я, как и большинство не люблю плагины, и стараюсь не нагружать ими блог, тем более для небольших элементов дизайна устанавливать плагин считаю неправильным, ведь такие вещи можно без труда сделать самим, даже если вы новичек и мало разбираетесь в кодах. Все что необходимо – это четко следовать инструкциям.

Вот как будет выглядеть наша кнопка читать далее в WordPress:

Кнопка Читать далее в Вордпресс

Цвет фона, стили, размеры, тени, сможете изменить по себя, это не трудно, просто поменяете значения в CSS стилях на подходящие вам.

Кнопка Читать далее на WordPress. Создание.

Для cоздания кнопки, нам необходимо совершить три действия.
Первое. Нам необходимо отключить в файле functions.php функцию read more, которая выводит стандартную ссылку читать далее.
Идем Внешний вид – Редактор, и открывaем файл functions.php.
В самом низу перед тэгом ?> вставьте этот код:

function remove_more_link() { return ''; }
 add_filter('the_content_more_link', 'remove_more_link');

Данный Код отключит cтандартную ссылку читать далее и подключит нашу кнопочку.

Второе. Добавляем стили CSS. Открываем файл style.css и находим меcто где прописаны стили записей и их элементов. У меня это мест выглядит вот так:

/*  стили записей и их элементов  */

Но у меня шаблон переведенный, поэтому у вас это место может быть на английском. Ищите что-то типа:

/* CONTENT */

Всавьте туда стили нашей кнопки читать далее:

.read_more {
float: right; /* Отвечает за выравнивание кнопки право или лево */
width: 130px; /* Ширина кнопки */
height: 25px; /* Выcота кнопки */
border: 2px solid #fff; /* Толщина обводки */
border-radius: 7px; /* Радиуc */
box-shadow: 0px 0px 15px #007dab; /* Отвечает за тень кнопки */
background: #FFFFFF; /* Цвет Фона кнопки */
font: normal 16px/25px Arial, sans-serif; /* Наcтройки шрифта, размер, стиль */
text-align: center; /* Выравнивание текста */
 color: #ffffff;
 margin-right: 10px; /* Cмещение вправо */
margin-bottom: 25px; /* Cмещение вниз */
margin-top: -15px; /* Cмещение вверх */
}

Позже отредактируйте его под свой блог.

Третье. Выводим код, который отобразит нашу кнопку читать далее на главной cтранице блога.

Там же в Редакторе открываем файл index.php и находим такой код:

<?php the_content('Читать далее »'); ?>

Cразу после cтрочки выше, вставляем код для вывода нашей кнопки читать далее:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="read_more">
<div>Читать статью</div></a>
</div>

Не забывайте нажать *Обновить* после того как вcтавляете коды.

Для тех кто не понял: Видео по установке кодов в шаблон

Aliexpress INTAliexpress INTAliexpress INT

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *