Красивая кнопка читать далее для 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 кнопка читать далее

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







Вам также может понравиться


Об авторе Дмитрий


24 комментария

  1. Добрый день!
    Помогите, пожалуйста, изменить на кнопке слова Read more на Читать дальше. Я перерыла весь код шаблона (HealthFitness), но нигде не могу найти этот код, чтобы его переписать…
    Где мне его искать?

    Заранее спасибо!

  2. Добрый день! Прошу прощения что долго не отвечал, изменил настройки что бы комментарии одобрялись автоматически и заплутал 🙂
    Так вот: Что бы изменить нужно зайти в single.php и в коде

    < ?php the_content('Читать полностью »'); ?>
    Изменить на нужное
  3. «<a href="» title=»»>

    Читать статью полностью»

    Не плохо было бы сделать ссылку на style.css в дивке, чтобы точно заработало:

    <a href="» title=»»>

    Читать статью полностью

  4. Отлично срезало:)
    a href= the_permalink() title=php the_title();

    div class=read_more (Читать статью полностью)

  5. Никита, нет конечно, css кнопка практически не добавляет веса странице, а вот нарисованная добавит, хоть и несколько килобайт если грамотно оптимизировать. CSS лучше и правильнее

  6. Дайте подсказку, как сделать окно с полосой прокрутки, как здесь сделано. В ТЕКСТЕ ЗАПИСИ.

  7. Здравствуйте.

    У меня индекс такого вида, куда вставить код?

     

    Спасибо.
    С уважением.

  8. Здравствуйте, у меня тоже другой index.php и куда вставить код? Вот мой индекс:

  9. Дмитрий, добрый день.

    Прошу помочь разобраться.
    К сожалению, не получается правильно добавить стиль кнопки в style.css, чтобы она красиво отображалась. Может быть не в то место вставляю, т.е. стиль не задается.
    В итоге получается, что текст пишет правильно, как прописано в index.php (требуемый плагин установлен).

  10. Приветствую! Подскажите, как изменить цвет стандартной кнопки в wordpress (Читать статью полностью) например синий.

  11. День добрый! Стандартной кнопки в стандартном шаблоне? В каждом шаблоне цвет меняется индивидуально.

  12. Интересная статья. А как можно выровнять эту кнопку на определённом месте? Потому что стандартный вордпрессовский шаблон пихает её как попало.

    Кстати, а что у вас за плагин в статье для выделения блока текста?

  13. Кнопка получилась красивая, но вставить в нужное место у меня не получилось. Она почему-то стала показываться только для одной статье, которая вообще не должна там была быть. В общем, проблема пока не решена.

  14. Почему то после установки, просто появилась надпись «читать статью полностью» и при изменения цвета или местоположения не чего не происходит. Или я что то не так сделал или стили прописаны не верно. Можете помочь?

  15. Да, вы сделали что то не так, проверьте все по пунктам

  16. А как сделать то же самое, но в дочерней теме?
    У меня там только два файла «style» и «functions».

  17. Нужно скопировать нужный файл в дочернюю тему из основной и он будет работать из нее.

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

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