Сделай Сайт Сам
  • Карта сайта
  • Полезные программы
  • Словарь вебмастера
    • Словарь блогера
  • Обо мне
Лучшее

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

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

Как на страницу 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] добавить кнопку в стиле Темы на страницу
[2021] Установка WordPress на OpenServer 5.3.8 Запуск локального сайта на ПК
[WordPress] добавить кнопку в стиле Темы на страницу
Как сделать скриншот с прокруткой в chrome + редактор + функция видео-скриншот
[WordPress] добавить кнопку в стиле Темы на страницу
Установка WP на Денвер
[WordPress] добавить кнопку в стиле Темы на страницу
Сделай сайт сам
[WordPress] добавить кнопку в стиле Темы на страницу
Создание структуры сайта
[WordPress] добавить кнопку в стиле Темы на страницу
Лучшие статьи о WordPress
Предыдущая статья[WordPress] Что это такое простыми словамиЧто такое wordpressСледующая статья Как сделать скриншот с прокруткой в chrome + редактор + функция видео-скриншотscreenchots с прокруткой в браузере chrome

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

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

Copyright © 2019 * [Сделай Сайт Сам] Все права защищены