Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Улучшение редактирования произвольных полей в таксономии / WordPress

Обновлено: 15.12.2023
0 комментариев

При работе с произвольными полями в таксономии, частенько появляется неудобство их наполнения. Хорошо когда несколько полей типа строк итд, то нет проблем. Но когда мы создаем сайт со сложным набором полей, например с изображениями, таблицами итд, то возникает неудобство связанное с фиксированной шириной всех полей в таксономии, например Рубрики или созданной категории для произвольных типов записей.

Посмотрите на пример выше. Ширина блоков фиксированная, и если мы добавим произвольное поле состоящее из нескольких колонок, то все будет узко и неудобно. Для решения проблемы, есть вариант которые многие используют бездумно именно для этого т.е через плагин Advanced Custom Fields: Extended . Это плагин расширяет возможности плагина Advanced Custom Fields (ACF) и в свою очередь добавляет некоторые удобства при редактировании таксономии с произвольными полями.

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

#edittag {
  max-width: 100%;
  background: #fff;
  padding: 20px;
  margin-top: 15px;
}

#edittag h2 {
  background: #eee;
  padding: 10px;
}

Данный код, позволяет растянуть колонку при редактировании таксономии, ну и осветлить итд. Что приводит к удобному результату, на изображении ниже

Страница стала более светлая, во всю ширину и удобная. Это позволяет спокойно наполнять произвольные поля без узких пространств.

Но куда добавлять код спросите вы. Тут есть различные способы, но лучше воспользоваться самым простым, через любой плагин произвольных css который может применять его в администратиной части, например Simple Custom CSS and JS . или Custom CSS, JS & PHP

Вот так легко и просто с помощью стилей, мы улучшили свой рабочий процесс по наполнению нашего сайта.

Если этого не достаточно!

Возможно мы хотим не просто удобно редактировать таксономии, но и создавать их более удобно. Опять неудобство состоит в том, что наш экран узкий, разделен на 2 половины, а иногда есть желание раздвинуть на 100%. Вот для этого я написал скрипт и стили, которые добавляют кнопку по нажатию которой делают ширину в 100%.

Для реализации вставки кнопки, пишем js скрипт и вставляем уже как "произвольный js" в плагине указанном выше.

jQuery('.edit-tags-php #col-left .form-wrap').before('<div class="button taxhide">100% -></div>');

jQuery('.taxhide').click(function() {
	jQuery('body.edit-tags-php').addClass('tax-open');
});

Ну и дополнительные стили прописываем, как делали раньше

.edit-tags-php .col-wrap { position: relative; }
.tax-open #col-left, .tax-open #col-right  { width:100%;}
.button.taxhide {  position: absolute;  right: 5px; }
#addtag {  background: #fff;  padding: 20px;  margin-top: 15px;}
.edit-tags-php .col-wrap h2 {  border: 1px solid #9f9d9d;  padding: 4px 5px 6px 20px;  margin-bottom: -8px !important;  border-radius: 3px;}

На этом точно все! Мы сделали удобным не только редактирование таксономии, но и их создание и просмотр.

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

0 комментариев

Оставьте первый комментарий