Кнопка в wordpress Читать далее без плагина
Опубликовано: 05.09.2018
Добрый день, уважаемые читатели моего блога
Очень рад Вас видеть снова! Этой статьёй я продолжу тему Блогостроения .
Не так давно немного пошаманил над своим Интернет-ресурсом.
Давно хотел установить себе кнопку в wordpress Читать далее вместо обычной ссылки на главной странице.
Функция кнопки в вордпресс Читать далее
Для тех, кто не знает, что это за кнопка в Вордпресс читать далее и зачем она нужна, перейдите на главную страницу моего блога и нажмите на нее. Правда, я назвал ее по-другому: «Читать статью».
Как сделать и установить на блог, кнопку Читать далее
Кликните на неё, и вы сразу поймете её главную функцию. Неправда ли, такая красивая кнопка смотрится гораздо лучше, чем стандартная ссылка шаблона
Для того чтобы осуществить задуманное, я начал искать в поисковике информацию о том, как создать кнопку в WordPress Читать далее . Посмотрел несколько блогов.
Как добавить кнопку в Wordpress
Большинство авторов предлагали сделать кнопку при помощи плагина . Это мне сразу не подходило.
Я не люблю плагины, потому как они излишне перегружают ресурс , а также некоторые из них не часто обновляются.
На одном из блогов мне понравилась статья на тему создания кнопки. Однако, применив информацию на практике, я был неприятно удивлен тем, что эта кнопка просто напросто не отображается.
Мне пришлось еще немного попотеть, чтобы найти ошибку в коде. По этой причине я решил написать статью о том, как создать кнопку читать далее для блога, работающего на системе WordPress .
Прочитав ее, Вы сможете быстро создать на своем Интернет-ресурсе такую же.
Кнопка читать далее в WordPress. Как её создать?
Внимание! Советую Вам прочитать мою предыдущую статью о резервном копировании блога , перед тем как приступать к действиям.
Итак, начнем. Кнопка читать далее в wordpress. Как же её создать? Сначала необходимо отключить функцию read.more в файле functions.php, которая выводит стандартную ссылку «читать далее».
Для этого зайдите в административную панель своего ресурса и перейдите по вкладкам Внешний вид—>Редактор. Из предложенных с правой стороны файлов шаблона для редактирования выберите functions.php. Теперь скопируйте вот этот код:
function remove_more_link() { return ''; } add_filter('the_content_more_link', 'remove_more_link');Вставьте этот код в самый конец файла functions.php перед закрывающим тегом ?>
Затем нажимаем внизу кнопку «Обновить” для сохранения кода в файле.
После этого нужно добавить специальный код, который будет отображать внешний вид самой кнопки. Для этого в том же редакторе файлов шаблона нажимаем на другой файл — style.css.
После его открытия добавляем код, который я пропишу ниже в то место, где выводятся стили для контента. То есть после вот такой надписи в файле :
/* CONTENT */
У Вас он может называться несколько иначе, но суть одна и та же. А вот и сам код:
.read_more { float: right; /* Отвечает за выравнивание кнопки право или лево */ width: 130px; /* Ширина кнопки */ height: 25px; /* Высота кнопки */ border: 2px solid #fff; /* Толщина обводки */ border-radius: 7px; /* Радиус */ box-shadow: 0px 0px 15px #007dab; /* Отвечает за тень кнопки */ background: #FFFFFF; /* Цвет Фона кнопки */ font: normal 16px/25px Arial, sans-serif; /* Настойки шрифта, размер, стиль */ text-align: center; /* Выравнивание текста */ color: #ffffff; margin-right: 10px; /* Смещение вправо */ margin-bottom: 25px; /* Смещение вниз */ margin-top: -15px; /* Смещение вверх */ }Предоставленный мною код Вы можете отредактировать, для того чтобы Ваша кнопка в wordpress Читать далее подходила по внешнему виду к дизайну Вашего блога.
После всех изменений файла не забудьте нажать кнопку «Обновить» для сохранения изменений.
Потом переходим к следующему этапу. Теперь нам нужно ввести специальный код, который будет отображать Вашу кнопку на главной странице блога.
Для этого там же в Редакторе своей темы нажимаем на файл index.php, чтобы его открыть. В нем нужно найти подобную строчку:
<?php the_content('Читать далее »'); ?>Сразу после этой строчки кода необходимо добавить код для вывода самой кнопки:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <div class="read_more"> <div>Читать статью</div></a> </div>Не забываем обновить файл для вступления изменений в силу.
Теперь можно обновить главную страницу своего блога и посмотреть на улучшения.
Как я уже говорил, Вам придется немного поработать с файлом style.css, для того, чтобы подогнать внешний вид кнопки Читать далее к дизайну своего блога.
Ну, вот и всё. Результат, как видите, налицо.
Если у Вас возникли трудности, тогда задавайте мне вопросы в комментариях. И не забудьте подписаться на обновления моего блога, чтобы получать свежие статьи на свою почту.
До новых встреч, друзья! Надеюсь, был Вам полезен. Пока.
Успехов Вам и Удачи С Уважением,
Другие интересные статьи:
