Кнопки “Опубликовать”, “Сохранить черновик” и “Предпросмотр” не работают после перемещения с помощью jQuery.

Question

Я пытаюсь изменить макет страницы post-new.php, и частью этого изменения хочу переместить кнопки публикации, сохранения черновика и предпросмотра ниже формы, а не вправо.

Итак, в файле js моего плагина я использую jQuery.append(), чтобы переместить их в пользовательский

, который находится ниже основного

. Я перемещаю дивы: #save-action, #preview-action и #publishing-action.

Это работает с точки зрения макета. Однако теперь ни одна из кнопок, похоже, не выполняет свою задачу. Кнопка публикации просто добавляет текст к URL, кнопка предпросмотра просто обновляет страницу, а кнопка сохранения черновика ничего не делает. Полагаю, я что-то сломал, переместив их, потому что все остальные мои стили работают с их функциональностью.

Обращается ли WordPress к

, в котором они находятся, или что-то в этом роде, чтобы прикрепить действия к кнопкам?

Одним из решений было бы просто вызвать соответствующие функции wp_*_() самостоятельно на кнопках, но я не могу их найти в кодексе.

Возможно, другим решением было бы переместить их, сохраняя структуру

, которую WordPress должен сохранить для поддержания функциональности.

Я новичок в плагинах на бэкенде, поэтому, вероятно, делаю что-то не так. Буду благодарен, если кто-нибудь укажет мне правильное направление. Или поможет мне найти соответствующие функции wp_*_() для “пере-присоединения” к кнопкам.

Спасибо за ваше время.

Я уверен, что существует опция (на пользователя) для изменения макета страницы на одноколоночный, а затем перемещайте блоки, чтобы они соответствовали нужному вам порядку. Эта опция может быть найдена в верхней части страницы, доступна на вкладке Параметры экрана.

Обратите внимание, что, так как это на основе каждого пользователя, вам придется делать изменения для каждого вручную.

ИЗМЕНЕНИЕ: Поскольку это решение не соответствует требованиям автора, я бы предложил проверить, как используется метод $.append(). Как описано в документации (http://api.jquery.com/append/):

Если элемент, выбранный таким образом, вставляется в одно место в другом месте DOM, он будет перемещен в цель (не клонирован).

[…]

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

Клонирование означало бы, что ранее прикрепленные обработчики событий не будут связаны с новыми элементами, делая вход/кнопки бесполезными. Убедитесь, что вы только перемещаете контейнер, чтобы избежать клонирования элементов.

Также посмотрите этот тред о том, как использовать функцию $.detach(): https://stackoverflow.com/a/29462003/7392929

Одним из возможных способов будет установка параметров экрана по умолчанию, как описано в этом ответе.
Кнопки “сохранить” и “опубликовать” доступны в submitdiv
Так как вы просто хотите переместить их вниз экрана, переместите submitdiv из side в advanced в коде, предоставленном в указанном ответе. Вы можете настроить метабоксы, как вам угодно, используя тот же метод. Надеюсь, это помогло.

Ответ или решение

Чтобы решить возникшую проблему с кнопками "Опубликовать", "Сохранить черновик" и "Просмотр" после их перемещения с помощью jQuery на странице post-new.php, необходимо рассмотреть несколько ключевых аспектов. Вы уже правильно предположили, что перемещение этих элементов нарушает их функциональность, и это связано с механизмом работы JavaScript.

Причина проблемы

Когда вы используете метод jQuery.append() для перемещения элементов, они фактически вырезаются из текущего положения в DOM и вставляются в новое место. В результате любые привязанные к ним события (например, события клика) теряются. Это связано с тем, что обработчики событий часто зависят от конкретного DOM-узла, а при его перемещении он может потерять привязку событий.

Возможные решения

1. Использование метода $.detach()

Как было предложено, вы можете использовать метод jQuery.detach(), чтобы временно удалять элемент из DOM, сохраняя привязанные события и данные. Пример:

var saveAction = $('#save-action').detach();
var previewAction = $('#preview-action').detach();
var publishingAction = $('#publishing-action').detach();

$('#new-container').append(saveAction, previewAction, publishingAction);

2. Обновление события после перемещения

Если вы не хотите использовать detach(), можно переместить элемент и затем повторно привязать необходимые события:

$('#new-container').append($('#save-action'), $('#preview-action'), $('#publishing-action'));

// Восстановить обработчики событий
$('#publish-button').on('click', function() {
    // Вызов функции, осуществляющей публикацию
});

Альтернативные стратегии:

3. Использование WordPress внутренней логики:

Поскольку вы работаете с WordPress, вы можете использовать стандартные методы настройки интерфейса администратора:

Изменение настроек экрана: Проверьте возможность изменения пользовательских настроек экрана в разделе "Опции экрана", где можно изменить макет страницы на одностолбчатый, устраняя необходимость в ручном перемещении кнопок.
Настройка метабоксов: Используйте функции WordPress для изменения положения метабоксов. Переместите submitdiv из области side в область advanced, как описано в ссылках на WordPress StackExchange.

Заключение

Для устойчивого решения рекомендую максимально использовать встроенные средства WordPress для настройки интерфейса, что уменьшит потенциальные проблемы с функциональностью и производительностью. Выбирая подход к реализации, учитывайте, что правильная настройка интерфейса для любого пользователя создает более четкую и удобную структуру работы в админ-панели.

Убедитесь, что выбранный вами способ поддерживает масштабируемость и легкость обновления вашего решения в будущем. Если необходимо, рассмотреть дополнительные возможности оптимизации, упомянутые во внутренней документации WordPress.