Установить и удалить значение настраиваемого поля

Вопрос или проблема

При отображении всех записей в админ-панели у меня есть пользовательский столбец “Изображение для анонса”. Этот столбец имеет значение 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.

Оцените материал
Добавить комментарий

Капча загружается...