- Вопрос или проблема
- Установите заголовок столбца админки
- Установите значение столбца админки
- Подключите ваш скрипт на странице списка записей.
- Зарегистрируйте функцию обработки AJAX-ответов только для админки
- Обработайте событие клика и AJAX-запрос
- Результат
- Ответ или решение
- Ответ на Ваш Вопрос по Настройке Пользовательского Поля "Изображение в Рубрике"
- 1. Установка заголовка столбца
- 2. Отображение значения в столбце
- 3. Подключение JavaScript
- 4. Создание AJAX-обработчика
- 5. Реализация JavaScript для обработки нажатия на кнопку
- 6. Отображение изображений в фронтенде
- Заключение
Вопрос или проблема
При отображении всех записей в админ-панели у меня есть пользовательский столбец “Изображение для анонса”. Этот столбец имеет значение YesOrNO.
Чтобы установить название столбца: у меня в файле functions.php:
function set_column_heading($defaults) {
$defaults['featured_image'] = 'Изображение для анонса';
return $defaults;
}
add_filter('manage_posts_columns', 'set_column_heading');
Чтобы установить значение столбца, у меня есть:
function set_column_value($column_name, $post_ID) {
if ($column_name == 'featured_image') {
$post_featured_image = get_featured_image($post_ID);
if ($post_featured_image) {
echo 'YesOrNO';
}
}
}
function get_featured_image($post_ID) {
$post_thumbnail_id = get_post_thumbnail_id($post_ID);
if ($post_thumbnail_id) {
$post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');
return $post_thumbnail_img[0];
}
}
add_action('manage_posts_custom_column', 'set_column_value', 10, 2);
Да, я получаю название столбца и значение (т.е. YesOrNo), как и ожидал. В фронтенде WordPress я хочу показать изображения для анонса записей с условием. Условие таково: мне нужен обработчик кликов на значении столбца (т.е. YesOrNo), чтобы я мог переключать его как выбранное или не выбранное и хотел бы показывать только изображения анонсов от выбранных.
Как я могу это сделать?
Я понимаю, что это уже почти 2 года спустя, но надеюсь, что это все еще будет полезно для некоторых людей, которые здесь ищут ответ.
Отказ от ответственности: это не лучший пример по проектированию админки WordPress, но на самом деле это удобно использовать в экстренной ситуации.
Вставьте следующее в файл functions.php вашей темы
Установите заголовок столбца админки
function set_column_heading( $defaults ) {
$defaults['featured_image'] = 'Изображение для анонса';
return $defaults;
}
add_filter( 'manage_posts_columns', 'set_column_heading' );
Установите значение столбца админки
Это изменилось, чтобы обрабатывать текущее состояние того, отображается ли изображение для анонса, получая метаданные записи. Это также обрабатывает nonce.
function set_column_value( $column_name, $post_ID ) {
if ( 'featured_image' === $column_name ) {
$post_featured_image = get_featured_image( $post_ID );
if ( $post_featured_image ) {
$featured_image_display = get_post_meta( $post_ID, 'show_featured_image' );
$show_class="show";
$show_text="Отобразить изображение для анонса";
if ( $featured_image_display ) {
$show_class="hide";
$show_text="Скрыть изображение для анонса";
}
echo '<button class="' . esc_attr( $show_class ) . '" data-nonce="' . esc_attr( wp_create_nonce( 'my_display_featured_image_' . $post_ID ) ) . '">' . esc_html( $show_text ) . '</button>';
}
}
}
function get_featured_image( $post_ID ) {
$post_thumbnail_id = get_post_thumbnail_id( $post_ID );
if ( $post_thumbnail_id ) {
$post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'featured_preview' );
return $post_thumbnail_img[0];
}
}
add_action( 'manage_posts_custom_column', 'set_column_value', 10, 2 );
Подключите ваш скрипт на странице списка записей.
Это довольно просто. Убедитесь, что путь к вашему скрипту правильный и jQuery является зависимостью.
add_action( 'admin_enqueue_scripts', 'my_enqueue_admin_scripts' );
function my_enqueue_admin_scripts( $hook ) {
if ( 'edit.php' !== $hook ) {
return;
}
wp_enqueue_script( 'set_featured_image', get_template_directory_uri() . '/js/set-featured-image.js', array( 'jquery' ), '1.0.0', true );
}
Зарегистрируйте функцию обработки AJAX-ответов только для админки
Этот ответ на AJAX-запрос, который у нас в нашем JavaScript, set-featured-image.js
. Это обновляет метаданные записи, чтобы отразить состояние. Это также обрабатывает проверку nonce.
add_action( 'wp_ajax_my_display_featured_image', 'my_display_featured_image' );
function my_display_featured_image() {
if ( ! isset( $_POST['featuredImage'], $_POST['postID'] ) ) {
wp_send_json_error( array( 'isset' ) );
wp_die();
}
if ( ! is_numeric( $_POST['postID'] ) ) {
wp_send_json_error( array( 'checks' ) );
wp_die();
}
$post_id = intval( $_POST['postID'] );
check_ajax_referer( 'my_display_featured_image_' . $post_id );
$set_featured_image = wp_validate_boolean( $_POST['featuredImage'] );
update_post_meta( $post_id, 'show_featured_image', $set_featured_image );
wp_send_json( array( 'featuredImage' => $set_featured_image ) );
wp_die();
}
Вставьте следующее в новый скрипт, который вы подключаете,
set-featured-image.js
Обработайте событие клика и AJAX-запрос
Когда вы нажимаете кнопку, правильные данные собираются, обрабатываются изменения интерфейса и отправляются данные в наш обработчик AJAX-ответов на PHP, my_display_featured_image()
. Как только мы получаем ответ, оно обновляет статус кнопки, чтобы отразить правильное значение, которое мы сохранили в метаданных записи.
(function($) {
$('.featured_image button').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var display = false;
if($button.hasClass('show')) {
display = true;
}
var postID = $button.parents('tr').attr('id').replace(/post-/g, '');
$button.attr('disabled', true);
var data = {
action: 'my_display_featured_image',
featuredImage: display,
postID: postID,
_wpnonce: $button.data('nonce')
};
$.ajax({
type: "POST",
url: ajaxurl,
data: data,
success: function(response) {
$button.removeAttr('disabled');
console.log(response);
if (response.featuredImage) {
$button.text('Скрыть изображение для анонса');
$button.attr('class', 'hide');
} else {
$button.text('Отобразить изображение для анонса');
$button.attr('class', 'show');
}
}
});
});
})(jQuery);
Результат
Столбец админки появляется с кнопками для каждой записи, у которой есть изображение для анонса. Текст кнопки отражает, установлены ли метаданные записи для отображения изображения для анонса. Когда вы нажимаете на кнопку, она переключает состояние этого значения метаданных записи.
В ваших шаблонах вам просто нужно получить эти метаданные записи и использовать их, чтобы условно отобразить изображение для анонса.
$featured_image_display = get_post_meta( get_the_ID(), 'show_featured_image' );
if ( $featured_image_display ) {
// Отобразить изображение для анонса.
}
Ответ или решение
Ответ на Ваш Вопрос по Настройке Пользовательского Поля "Изображение в Рубрике"
Для того чтобы в админ-панели WordPress у вас появился пользовательский столбец "Изображение в Рубрике" и чтобы можно было управлять его значением, мы можем использовать комбинацию PHP и jQuery вместе с AJAX. Давайте разберем, как это можно сделать пошагово.
1. Установка заголовка столбца
С помощью функции set_column_heading
, вы добавляете новый столбец в список постов. Добавьте следующий код в ваш functions.php
файл:
function set_column_heading( $defaults ) {
$defaults['featured_image'] = 'Изображение в Рубрике';
return $defaults;
}
add_filter( 'manage_posts_columns', 'set_column_heading' );
2. Отображение значения в столбце
Значение в столбце будет назначаться функцией set_column_value
. Эта функция будет проверять наличие метаполя, чтобы определить, должно ли изображение отображаться или нет.
function set_column_value( $column_name, $post_ID ) {
if ( 'featured_image' === $column_name ) {
$featured_image_display = get_post_meta( $post_ID, 'show_featured_image', true );
$show_class = $featured_image_display ? "hide" : "show";
$show_text = $featured_image_display ? "Скрыть изображение" : "Отобразить изображение";
echo '<button class="' . esc_attr( $show_class ) . '" data-nonce="' . esc_attr( wp_create_nonce( 'my_display_featured_image_' . $post_ID ) ) . '">' . esc_html( $show_text ) . '</button>';
}
}
add_action( 'manage_posts_custom_column', 'set_column_value', 10, 2 );
3. Подключение JavaScript
Чтобы обрабатывать нажатия на кнопки и взаимодействия с AJAX, требуется подключить скрипт. Добавьте следующий код в ваш functions.php
файл:
add_action( 'admin_enqueue_scripts', 'my_enqueue_admin_scripts' );
function my_enqueue_admin_scripts( $hook ) {
if ( 'edit.php' !== $hook ) {
return;
}
wp_enqueue_script( 'set_featured_image', get_template_directory_uri() . '/js/set-featured-image.js', array( 'jquery' ), '1.0.0', true );
}
4. Создание AJAX-обработчика
Теперь мы создадим функцию, которая будет обрабатывать AJAX-запросы для обновления статуса изображения в рубрике.
add_action( 'wp_ajax_my_display_featured_image', 'my_display_featured_image' );
function my_display_featured_image() {
if ( ! isset( $_POST['featuredImage'], $_POST['postID'] ) || ! is_numeric( $_POST['postID'] ) ) {
wp_send_json_error();
wp_die();
}
$post_id = intval( $_POST['postID'] );
check_ajax_referer( 'my_display_featured_image_' . $post_id );
$set_featured_image = wp_validate_boolean( $_POST['featuredImage'] );
update_post_meta( $post_id, 'show_featured_image', $set_featured_image );
wp_send_json( array( 'featuredImage' => $set_featured_image ) );
wp_die();
}
5. Реализация JavaScript для обработки нажатия на кнопку
Теперь добавьте скрипт set-featured-image.js
в папку js
вашей темы, чтобы управлять взаимодействием с кнопками.
(function($) {
$('.featured_image button').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var display = $button.hasClass('show');
var postID = $button.parents('tr').attr('id').replace(/post-/g, '');
$button.attr('disabled', true);
var data = {
action: 'my_display_featured_image',
featuredImage: display,
postID: postID,
_wpnonce: $button.data('nonce')
};
$.ajax({
type: "POST",
url: ajaxurl,
data: data,
success: function(response) {
$button.removeAttr('disabled');
if (response.featuredImage) {
$button.text('Скрыть изображение').attr('class', 'hide');
} else {
$button.text('Отобразить изображение').attr('class', 'show');
}
}
});
});
})(jQuery);
6. Отображение изображений в фронтенде
После того как вы настроили админ-панель, вы можете использовать следующее условие для отображения изображений в фронтенде:
$featured_image_display = get_post_meta( get_the_ID(), 'show_featured_image', true );
if ( $featured_image_display ) {
// Здесь код для отображения изображения
}
Заключение
Теперь у вас есть функционал для управления отображением изображений в рубрике через панель администратора WordPress. Пользователь может установить или снять отображение изображения просто нажимая на соответствующую кнопку, которая обновляет статус изображения с помощью AJAX.