Красивая кнопка читать далее для WordPress без плагина

Приветствую вас читатели блога Osxit.ru! Сегодня как обычно зашел в интернет для поиска чего то новенького для своего сайта, смотрел различные блоги порталы и наткнулся на такую особенность большинства других блогов, то что у них ссылка на полную статью с анонса красиво оформлена, а не то что у меня просто текст «читать далее». Решил я сделать так же! И рассказать вам как я это сделал. Для написания данной статьи мне понадобится плагин подсветки синтаксиса — где взять его и как установить я рассказывал в пред идущей статье. Естественно речь пойдет о WordPress.

Результат сегодняшней статьи вы можете посмотреть на главной странице.

wordpress читать далее

Конечно есть плагин читать далее для WordPress, но использовать его я не советую так как каждый плагин это лишний запрос к серверу, лишняя нагрузка, увеличение скорости загрузки страниц, тем более все можно прекрасно сделать с помощью css!

Приступим к украшению кнопки «читать далее»

Первое что нам нужно сделать это отключить стандартную функцию «Читать далее» (read more)

  • Заходим в консоль далее редактор и выбираем для редактирования файл Функции темы (functions.php) и добавляем данный ниже код в самый конец файла прям перед  ?>
    function remove_more_link() { return ''; }
    add_filter('the_content_more_link', 'remove_more_link');
    Сохраняеv, больше к этому файлу мы не вернемся.
  • Далее добавляем стиль кнопки в наш style.css открываем его тут же в редакторе и добавляем в любое место, желательно в раздел content или post у кого как, вообщем в то место которое отвечает за вывод index.php и single.php — Вот этот код:

.read_more {

float: right; /* Отвечает за выравнивание кнопки право или лево */

width: 180px; /* Ширина кнопки */

height: 25px; /* Высота кнопки */

border: 2px solid #fff; /* Толщина обводки */

border-radius: 7px; /* Радиус */

box-shadow: 0px 0px 5px #007dab; /* Отвечает за тень кнопки */

background: #007dab; /* Цвет Фона кнопки */

font: normal 12px/25px Arial, sans-serif; /* Настойки шрифта, размер, стиль */

text-align: center; /* Выравнивание текста */

color: #ffffff;

margin-right: 160px; /* Смещение вправо */

margin-bottom: 25px; /* Смещение вниз */

margin-top: -15px; /* Смещение вверх */
}
Это стиль моей кнопки, вы можете его редактировать как вам нужно, Но если вы мало понимаете в CSS то советую поменять только цвета и расположение кнопки относительно контенту! Сохраняем и переходим к следующему шагу.

И завершающий этап вывод самой кнопки в анонсах наших статей, открываем тут же в консоли в редакторе файл index.php находим такой код:
<div class=»entry»>

</div> <?php the_content(‘Читать полностью »’); ?>

<!—/entry —>

</div>
У вас он возможно немного отличается но думаю понятно , если что спрашивайте в комментариях я помогу разобраться.

И добавляем после него наш код с выводом красивой кнопки:
<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»>

<div>Читать статью полностью</div></a>
Сохраняем и любуемся преображением вашего Блога!

Рекомендую использовать для редактирования файлов блокнот Notepad++ , редактор для wordpress. Потому что можно вернуть сделанные изменения в отличии от стандартного редактора. Я не стал рекомендовать это в начале статьи потому что мы только добавляли код а не редактировали существующий, поэтому необходимость возврата изменений не так велика.

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

wordpress кнопка читать далее

Рекомендую посмотреть и немного посмеяться, хороший «КВН Юмор» Уральские пельмени — Когда бабушке не спится :)