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

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

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

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

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

 

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

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

  1. Скопировать HTML код кнопки на странице.
  2. Удалить атрибут скрипта (продолжение текста): #moreхх и title
  3. Подставить свои значения: ссылку и анкор.
  4. Преобразованный вариант вставить в текст (редактор 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать сайт wordpress

[WordPress] добавить кнопку в стиле Темы на страницу
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress, чтобы улучшить вид страниц сайта. Внести кардинальные правки с минимальными знаниями кода. Предлагаю два способа. ...
[WordPress] добавить кнопку в стиле Темы на страницу
Не работает визуальный редактор (editor) в WP: 10 способов, как исправить
Решение, если не работает визуальный редактор в wordpress: кнопки не активны, иконок нет, текст не виден, есть и даже не одно. Ситуация, когда не отображается ...
[WordPress] добавить кнопку в стиле Темы на страницу
Как выбрать бесплатную Тему для сайта на WordPress
Следуя рекомендациям, как выбрать бесплатную Тему для сайта на wordpress, избавитесь от части ошибок, препятствующих продвижению в топ. Считается, что современные шаблоны адаптивны, но это ...
[WordPress] добавить кнопку в стиле Темы на страницу
Где скачать бесплатный шаблон wordpress на русском
2019 Где скачать бесплатный шаблон wordpress на русском? Ответ однозначный: на официальном сайте. Объясню пошагово, как его найти, на что обратить внимание, чтобы выбрать действительно, ...
[WordPress] добавить кнопку в стиле Темы на страницу
7 способов: Как убрать и сделать ссылку в подвале сайта WP
На вопрос: как убрать ссылку из футера (подвала) сайта на WP, однозначного ответа не существует, зато сделать свой копирайт очень просто. Разнообразие способов написания кодов ...
[WordPress] добавить кнопку в стиле Темы на страницу
4 способа, как изменить Read More на «Читать далее» в wordpress
Предлагаю 4 способа, как изменить Read More на "Читать далее" в wordpress. Перевести надпись на русский или переименовать кнопку сможет даже новичок, делающий первый сайт ...

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

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