У плагина TablePress нет опции по умолчанию для размещения кнопки в строке или столбце, но есть несколько приемов для того,чтобы разместить кнопки в таблице Tablepress.
Чтобы поместить кнопку в TablePress, мы должны поместить некоторый HTML и CSS код в TablePress.
Мы можем добавить кнопку тремя способами:
Встроенные стили кнопок
Это самый простой способ поместить кнопку в TablePress.
Большинство тем WP поставляются со встроенными в тему стилями кнопок, которые мы можем применить к обычной ссылке, переключившись в режим просмотра HTML в редакторе публикации или страницы и добавив к ссылке специальный CSS-стиль темы, называемый “class”, который также известен как тег привязки.
Ссылка должна выглядеть следующим образом:
<a class="button" href="https://foxyforex.ru/">Кнопка</a>
Если мы поместим такую ссылку в строку таблицы TablePress, ссылка появится в виде кнопки. Стиль кнопки отличается в зависимости от настройки темы.
В популярной теме Astra кнопка будет выглядеть как кнопка в первом столбце таблицы.
CSS-код для ссылки
CSS-код показал разработчик плагина TablePress, Тобиас Батге, в ответе на странице поддержки TablePress. Код простой и полезный.
Что вам нужно сделать:
- Перейдите на панель управления WordPress
- Перейдите на вкладку TablePress
- Перейдите в раздел «Опции»
- Поместите приведенный ниже фрагмент кода в область «Пользовательский CSS:» в разделе «Параметры интерфейса:
CSS пользователя» - Перейдите в свою таблицу и поместите ссылку в столбец, который был определён в коде.
.tablepress-id-1 .column-3 a {
border: 1px solid #000000;
white-space: nowrap;
color: red;
font-size: 12px;
font-weight: bold;
padding: 10px;
border-radius: 10px;
background-color: #ffff00;
}В этом коде:
- -id-1 ─ это идентификатор таблицы, в которой вы хотите разместить код. Измените идентификатор таблицы на идентификатор своей таблицы
- .column-3 ─ это определённый столбец таблицы, в котором вы должны поместить простую привязку.
Привязка к кнопке может быть такой:
<a href="https://careofweb.com/"> Кнопка </a>
Ссылка появится в виде кнопки в столбце.
- Border: определите границу кнопки, вы можете изменить ширину, изменив значение в px (в пикселях), а также цвет границы, изменив цветовой код html
- Colour: это цвет текста
- Font-size: это размер шрифта текста в кнопке
- Font-weight: это вес шрифта текста в кнопке
- Padding: пустое пространство, окружающее текст
- Border-radious: радиус границы кнопки
- Background colour: цвет кнопки
Найдите пример в третьем столбце таблицы…
Изображение кнопки со ссылкой
Мы можем преобразовать изображение в кнопку для TablePress. Выберите для этого изображение кнопки.
Что вам нужно сделать:
- Загрузите изображение кнопки / images в свою медиа-библиотеку WordPress
- Откройте редактор в сообщении / на странице
- Добавьте изображение
- Вставьте ссылку назначения
- Перейдите в редактор HTML
Вы найдёте примерно такой код:
<figure class="wp-block-image size-large is-resized"><img src="https://wp.careofweb.com/wp-content/uploads/2020/04/Book-Now-Button-Transparent-PNG.png" alt="" class="wp-image-202" width="118" height="41"/></figure>
Скопируйте код и поместите в строку TablePress там, где вам нужна кнопка.
Если это подходит для вас, тогда всё в порядке! Если дополнительные пробелы вас беспокоят, вы можете добавить немного CSS, чтобы настроить пространство вокруг кнопки.
Вы можете настроить дополнительное пространство с правой стороны кнопки, отрегулировав ширину столбца, в котором размещаются кнопки. Также выровняйте содержимое по центру.
Перейдите в «Опции» плагина и введите код:
.tablepress-id-1 .column-5 {
text-align: center;
width: 100px;
}Если вы вставляете кнопки более, чем в один столбец, и хотите настроить все столбцы, то следуйте коду. В этом коде настройка также затронула столбец №1 и столбец №3
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-1,
.tablepress-id-1 .column-3 {
text-align: center;
width: 100px;
}Найдите пример кнопки в пятом столбце таблицы
Надеемся, статья поможет вам разместить красивые кнопки в таблицах TablePress.
Страницы в тему:
