Июл 11

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

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

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


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

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

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

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

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

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

EXMO affiliate program

  • Заходим в консоль далее редактор и выбираем для редактирования файл Функции темы (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 кнопка читать далее

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

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


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