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

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

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

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

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

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

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

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

Шаг 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

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

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

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

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

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

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

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

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

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

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

Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео

Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress, чтобы улучшить вид страниц сайта. Внести кардинальные правки с минимальными знаниями кода. Предлагаю два способа. ...

Не работает визуальный редактор (editor) в WP: 10 способов, как исправить

Решение, если не работает визуальный редактор в wordpress: кнопки не активны, иконок нет, текст не виден, есть и даже не одно. Ситуация, когда не отображается ...

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

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

Где скачать бесплатный шаблон wordpress на русском

2019 Где скачать бесплатный шаблон wordpress на русском? Ответ однозначный: на официальном сайте. Объясню пошагово, как его найти, на что обратить внимание, чтобы выбрать действительно, ...

7 способов: Как убрать и сделать ссылку в подвале сайта WP

На вопрос: как убрать ссылку из футера (подвала) сайта на WP, однозначного ответа не существует, зато сделать свой копирайт очень просто. Разнообразие способов написания кодов ...

4 способа, как изменить Read More на «Читать далее» в wordpress

Предлагаю 4 способа, как изменить Read More на "Читать далее" в wordpress. Перевести надпись на русский или переименовать кнопку сможет даже новичок, делающий первый сайт ...