[WordPress] добавить кнопку в стиле Темы на страницу

Как на страницу WordPress
добавить кнопку в стиле Темы

Чтобы в WordPress добавить кнопку, используя стиль Темы, необходимо условие — наличие элемента-ссылки в самом шаблоне. Например, для перенаправления со страницы анонсов на полный текст статьи с анкором «Читать далее». В результате получите аналогичный атрибут перехода на другую страницу сайта или внешнего ресурса.

Wordpress: добавить кнопку Темы

Метод хорош тем, что отпадает необходимость прописывать стиль (цвет, тень, закругление углов, изменение при клике, id и пр.). Все параметры уже есть в Теме. Вместо объемного, вы используете код из 1-2 строк. Внеся минимальные изменения в шаблонный скрипт, вставите кнопку на любой странице в 3 клика.

Примечание: Если в Теме нет элемента-образца по-умолчанию, можно создать картинку-ссылку. Перенаправление происходит при клике на изображение кнопки (без использования кода). Подойдет тем, кто не дружит с редактором wordpress Gutenberg, в котором можно создать разные виды кнопок.

Как добавить кнопки на других страницах

WordPress, в том числе, используемая на сайте Тема — дистрибутивы с открытым исходным кодом. Нужный скрипт находится на html странице. Внешний вид задан в style.css. Алгоритм создания таков:

Скопировать HTML код кнопки на странице.
Удалить атрибут скрипта (продолжение текста): #moreхх и title
Подставить свои значения: ссылку и анкор.
Преобразованный вариант вставить в текст (редактор WP).

Обратите внимание: Если в Теме wordpress кнопки анимированные по-умолчанию, стиль сохранится в созданном вами элементе. Например, при клике меняется цвет, анкорная ссылка содержит стрелку и пр.

Вид кнопки Темы на странице WordPress

Шаг1. Скачать HTML код кнопки

Перейдите на сайт, где находятся анонсы — это Главная или Домашняя вебстраница. Нажмите Ctrl+U (или опция контекстного меню: Просмотр кода страницы). Откроется HTML запись. В поле поиска (Ctrl+F) введите фразу «Читать далее» или ту, которая используется у вас. Эти слова выделят желтым цветом. Окружающий код — скрипт вывода кнопки. Как правило обрамляется тегами: <p…>….</p>.

HTML-код кнопки Темы

Шаг 2. Изменение кнопки Темы по-умолчанию

Скопируйте html-код элемент. Разместите в каком-либо редакторе на ПК или офисе для дальнейшей корректировки. Вместо имеющихся значений (ссылка и анкор) подставьте свои данные. Смотрите, как изменен скаченный образец на скриншоте.

Изменение кода кнопки по-умолчанию

В примере: ссылка — синяя; анкор — красная запись; класс =«more-link« — идентификатор заданного элемента — кнопки. У вас этот атрибут может именоваться иначе. К нему привязаны параметры в файле style.css Темы. Удаляете из кода лишнее, подставляя свои значения:

class=»more-link-box» — можно убрать, оставив тег <p>
вместо http://test-wp.ru/2020/12/30/%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b0/ — это длинный код кириллической ссылки и #more274» title=»кнопка, вставляете нужную ссылку.
вместо анкора Читать далее прописываете подходящее название.

Важно: Не забудьте про двойные кавычки. Ими обрамляется класс «more-link« и сама ссылка. В строке кода не должно быть пробелов.

Шаг 3. Добавить кнопку на страницу

Чтобы вставить созданный вариант кода в статью при публикации, рекомендую перейти в классический редактор WordPress. В нем работать проще и быстрее, чем в Gutenberg, который иногда глючит. В любом случае дополнительный инструмент не помешает. Запустить его — дело 2-х минут.

Для этого в Админке WP перейдите: Плагины — Добавить новый — введите название Classic Editor — Установить — Активировать. Между редакторами можно легко переключаться, выбирая удобный способ размещения статей. Поэтому вы ничего не теряете. После смены редактора не забудьте сохранить изменения.

Смена редакторов в WordPress

Как добавить кнопку — классический редактор WordPress

Добавить кнопку - Classic Editor

Установите курсор на строке, где должна отображаться кнопка-ссылка.
Перейдите в режим ТЕКСТ (html).
Вставьте код.

HTML-код текста - вставка кода кнопки

Сохраните документ.
Вернитесь в Визуальный режим публикации.
Если необходимо, переместите видимую ссылку в центр или вправо.
Проверьте результат, как выглядит элемент на сайте.

Вид кнопки-ссылки в редакторе

Обратите внимание: Сама кнопка в редакторе отображается, как простая анкорная ссылка. Только при просмотре вебстраницы увидите внешний вид элемента полностью.

Как добавить кнопку в стиле Темы — блоковый редактор WordPress

Wordpress: Добавить кнопку - блоковый редактор

В Гутенберг классическая панель (блок) не содержит опции переключения между визуальным отображением и Текстовым форматом (HTML). Поэтому там это реализовывается по-другому.

Нажмите на знак +.
Выберите блок HTML код.
Введите подготовленный код.
Проверьте результат на вебстранице.

Кнопка на веб-странице

Особенность заключается в том, что по-умолчанию ссылка будет находиться слева. Если необходимо ее переместить в центр или вправо, положение нужно указать в скрипте. Тогда вставляемый код будет выглядеть так:

Код кнопки в центе (справа) на странице

элемент фона, оформления сайта Рекомендую проводить эксперименты на локальном сайте. Когда убедитесь, что метод работает, проделайте то же самое в интернете. Это гарантия, что избежите ошибок на чистовом проекте.

Заключение: Вариантов, как сделать кнопку в WordPress, много. Например, элемент можно создать в специальной программе. Полученный код, включающий стиль, вставить на страницу. Но в некоторых онлайн сервисах включают ссылку на свой сайт. Что не является хорошим решением.

Функциональную кнопку, работающую на каждой странице, типа Звонок по телефону (Click-to-Call) или Прокрутка вверх (to top) вставляют при помощи плагинов. Подходящий вариант расширения подбирайте в репозитории WordPress, ориентируясь на количество скачиваний.

В новом редакторе WordPress Gutenberg есть удобная возможность создания кнопок. Одинарных, двойных, тройных — это вкладка Паттерны. Но чтобы использовать стиль Темы, работают с заданным классом элемента. Стиль связан именно с этим атрибутом html.