Реально работающая Кнопка Бабло в мире криптовалют - Apitrade.pro

  Web дизайн        11 июля 2013        445         30

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

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


Обсуждение: 30 комментариев
  1. Спасибо за статью. Сейчас занимаюсь оформлением сайта. Ваша статья очень помогла.

  2. Luna:

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

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

  3. Дмитрий:

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

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

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

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

    <a href="» title=»»>

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

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

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

  6. Вот бился бился, наконец-то, что-то получилось. Большое спасибо.

  7. Да, сложновато конечно новичку, весь день просидела, но главное, что всё получилось.

  8. А не проще картинку в фотошопе нарисовать?

  9. Дмитрий:

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

  10. Анна:

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

  11. Юрий:

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

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

     

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

  12. metr250:

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

  13. Юрий:

    Код не отображается, вот ссылка на мой индекс — https://yadi.sk/d/MexmAWiibhrjE

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

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

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

  16. Дмитрий:

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

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

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

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

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

  20. Дмитрий:

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

  21. Здравствуйте! Все сделал как вы описывали, но у меня почему-то кнопка не появилась а слово «читать далее» вообще- влево уползло! Хрень какая-то! В чем проблема? И как вам отправить скриншот?

  22. Здравствуйте! сделала все по пунктам, но кнопка не отображается(
    Единственное, у меня тема Clipper и я не могу понять где мне в стиле css вставлять код. я вставила после слов
    content:»;
    content:none;

    А в файле content.php у меня такая надпись
    <?php the_content( '’ . __( ‘Читать далее »’, APP_TD ) . » ); ?>

    после нее я вставила код
    <a href="» title=»»>

    Читать статью полностью
    верно?

  23. Интересный вариант — надо попробовать

  24. Решил немного освежить дизайн своего сайта — вот нашел вашу статью , спасибо

  25. 1 год назад Я победил в этом онлайн-казино

  26. 1 год назад Я победил в этом
    любимом онлайн-клубе

  27. Позавчера Я выиграл кэш в этом лучшем казино

  28. Александр:

    Есть видео? Так новичкам было бы понятнее!!!

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

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

Я использую
Биржи криптовалют:
Binance Подробнее
Облачный майнинг:
HashFlare Подробнее
Биржи контента:
Text.ru Подробнее
HashFlare