Июл 11

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

Web дизайн | Автор: Дмитрий | Опубликованно: 11. 07. 2013Комментировать

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

Всем спасибо за внимание жду ваших комментариев! Вступайте в нашу Группу ВК Инфобизнес | Блогинг | Успех

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

Узнавайте О Новых Статьях По Почте:
Делитесь статьями с друзьями в Соцсетях:

Отзывов (26) на «Красивая кнопка читать далее для WordPress без плагина»

  1. Владислав

    Спасибо за статью. Сейчас занимаюсь оформлением сайта. Ваша статья очень помогла.


  2. Luna

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

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


  3. Дмитрий

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

    < ?php the_content('Читать полностью »'); ?>
    Изменить на нужное

  4. Ash Grey

    «<a href="» title=»»>

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

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

    <a href="» title=»»>

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


  5. Ash Grey

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

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


  6. Роман

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


  7. Светлана

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


  8. Никита

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


  9. Дмитрий

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


  10. Анна

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


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

    […] Заходим в консоль далее редактор и выбираем для редактирования файл Функции темы(functions.php) и добавляем данный ниже код в самый конец файла прям перед  ?> ? […]


  12. Юрий

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

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

     

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


  13. metr250

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


  14. metr250


  15. Юрий

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


  16. Кирилл

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

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


  17. Дмитрий

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


  18. Дмитрий

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


  19. Артур

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

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


  20. Людмила Лао

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


  21. ринат

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


  22. Дмитрий

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


  23. Сергей

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


  24. Марина

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

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

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

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


  25. Андрей

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


  26. Андрей

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


Оставьте свой отзыв