Chỉnh sửa nhanh mô tả (Excerpt) trên wp-admin/edit.php

Mình đang dùng website wordpress và muốn chỉnh sửa nhanh phần mô tả (Excerpt) của toàn bộ bài viết trực tiếp trên trang quản trị bài viết (wp-admin/edit.php) mà không cần phải mở từng bài viết để chỉnh sửa. Mình đã thử tìm hiểu một số plugin hỗ trợ nhưng vẫn chưa đáp ứng được nhu cầu hoặc gây ra các vấn đề xung đột. Có plugin Admin Columns thì lại bắt trả phí 74$ mới dùng được tính năng này nên mình, trong khi những tính năng cao cấp khác mình không dùng đến thì quá lãng phí. Nên mình quyết định can thiệp cách tùy chỉnh mã nguồn.

Cụ thể, mình mong muốn:

1. Hiển thị Excerpt dưới dạng một ô nhập liệu (textarea) ngay trên danh sách bài viết trong trang quản trị.
   
2. Cho phép chỉnh sửa trực tiếp nội dung Excerpt từ ô này.
   
3. Nội dung Excerpt tự động lưu lại khi mình hoàn tất chỉnh sửa mà không cần tải lại trang.
   

Nếu mọi người có cách nào thực hiện bằng cách tùy chỉnh mã nguồn thì chia sẻ mình nha, mình rất mong nhận được sự hỗ trợ.

Cảm ơn mọi người rất nhiều!

Chào bạn, mình hiểu yêu cầu của bạn và đã từng thực hiện tính năng này trước đây. Dưới đây là hướng dẫn chi tiết giúp bạn chỉnh sửa nhanh phần Mô tả ngắn (Excerpt) trực tiếp trên trang quản trị bài viết:

Demo:

Cách chỉnh sửa nhanh phần mô tả (Excerpt) trực tiếp trên trang quản trị bài viết

Bước 1: Thêm đoạn mã này vào file functions.php trong theme đang sử dụng

Mã: Chọn tất cả

// Thêm cột Excerpt vào danh sách bài viết
function add_excerpt_column($columns) {
    $columns['excerpt'] = __('Mô tả ngắn', 'mh-magazine-lite');
    return $columns;
}
add_filter('manage_posts_columns', 'add_excerpt_column');

// Hiển thị nội dung Excerpt trong cột
function show_excerpt_column_content($column_name, $post_id) {
    if ($column_name === 'excerpt') {
        $excerpt = get_post_field('post_excerpt', $post_id);
        echo '<textarea class="inline-excerpt" data-post-id="' . esc_attr($post_id) . '" style="width: 100%; height: 50px;">' . esc_textarea($excerpt) . '</textarea>';
    }
}
add_action('manage_posts_custom_column', 'show_excerpt_column_content', 10, 2);

Bước 2: Tích hợp chỉnh sửa nhanh bằng AJAX
Thêm đoạn mã này để xử lý sự kiện chỉnh sửa và lưu lại nội dung Excerpt khi bạn thoát khỏi ô nhập liệu.

Mã: Chọn tất cả

// Thêm script để xử lý inline editing
function add_excerpt_inline_edit_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const excerpts = document.querySelectorAll('.inline-excerpt');
            let timeout = null;

            excerpts.forEach(function (excerptField) {
                excerptField.addEventListener('blur', function () {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        const postId = this.dataset.postId;
                        const excerptValue = this.value;

                        const data = new FormData();
                        data.append('action', 'save_excerpt_inline');
                        data.append('post_id', postId);
                        data.append('excerpt', excerptValue);

                        fetch(ajaxurl, {
                            method: 'POST',
                            body: data,
                        })
                        .then(response => response.json())
                        .catch(error => {
                            console.error('AJAX Error:', error);
                        });
                    }, 300);
                });
            });
        });
    </script>
    <?php
}
add_action('admin_footer', 'add_excerpt_inline_edit_script');

Bước 3: Lưu Excerpt qua AJAX
Xử lý lưu nội dung Excerpt khi AJAX gửi yêu cầu:

Mã: Chọn tất cả

// Lưu Excerpt qua AJAX
function save_excerpt_inline() {
    if (!empty($_POST['post_id']) && isset($_POST['excerpt'])) {
        $post_id = intval($_POST['post_id']);
        $excerpt = sanitize_text_field($_POST['excerpt']);

        if ($post_id) {
            wp_update_post(array(
                'ID' => $post_id,
                'post_excerpt' => $excerpt,
            ));
            wp_send_json_success();
        }
    }
    wp_send_json_error();
}
add_action('wp_ajax_save_excerpt_inline', 'save_excerpt_inline');

Hoặc bạn có thể dùng luôn đoạn code tổng hợp này nếu ngại copy từng đoạn:

Mã: Chọn tất cả

// Thêm cột Excerpt vào danh sách bài viết
function add_excerpt_column($columns) {
    $columns['excerpt'] = __('Mô tả ngắn', 'mh-magazine-lite');
    return $columns;
}
add_filter('manage_posts_columns', 'add_excerpt_column');

// Hiển thị nội dung Excerpt trong cột
function show_excerpt_column_content($column_name, $post_id) {
    if ($column_name === 'excerpt') {
        $excerpt = get_post_field('post_excerpt', $post_id); // Lấy nội dung Excerpt
        echo '<textarea class="inline-excerpt" data-post-id="' . esc_attr($post_id) . '" style="width: 100%; height: 50px;">' . esc_textarea($excerpt) . '</textarea>';
    }
}
add_action('manage_posts_custom_column', 'show_excerpt_column_content', 10, 2);

// Thêm script để xử lý inline editing bằng AJAX
function add_excerpt_inline_edit_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const excerpts = document.querySelectorAll('.inline-excerpt');
            let timeout = null; // Dùng để giới hạn số lần gọi AJAX

            excerpts.forEach(function (excerptField) {
                excerptField.addEventListener('blur', function () {
                    clearTimeout(timeout); // Xóa timeout cũ nếu có
                    timeout = setTimeout(() => { // Chỉ gọi AJAX sau khi người dùng dừng nhập liệu
                        const postId = this.dataset.postId;
                        const excerptValue = this.value;

                        const data = new FormData();
                        data.append('action', 'save_excerpt_inline');
                        data.append('post_id', postId);
                        data.append('excerpt', excerptValue);

                        fetch(ajaxurl, {
                            method: 'POST',
                            body: data,
                        })
                        .then(response => response.json())
                        .then(result => {
                            if (!result.success) {
                                console.error('Đã xảy ra lỗi khi lưu Excerpt.');
                            }
                        })
                        .catch(error => {
                            console.error('AJAX Error:', error);
                        });
                    }, 300); // Gọi AJAX sau 300ms
                });
            });
        });
    </script>
    <?php
}
add_action('admin_footer', 'add_excerpt_inline_edit_script');

// Lưu Excerpt qua AJAX
function save_excerpt_inline() {
    if (!empty($_POST['post_id']) && isset($_POST['excerpt'])) {
        $post_id = intval($_POST['post_id']);
        $excerpt = sanitize_text_field($_POST['excerpt']);

        if ($post_id) {
            wp_update_post(array(
                'ID' => $post_id,
                'post_excerpt' => $excerpt,
            ));
            wp_send_json_success(); // Không trả về thông báo
        }
    }
    wp_send_json_error();
}
add_action('wp_ajax_save_excerpt_inline', 'save_excerpt_inline');

Kết quả:

• Cột "Mô tả ngắn" sẽ xuất hiện trong danh sách bài viết.
  
• Bạn có thể chỉnh sửa nội dung trực tiếp trong ô nhập liệu.
  
• Nội dung tự động được lưu khi bạn rời khỏi ô nhập liệu, không cần tải lại trang.
  

Nếu có vấn đề gì trong quá trình thực hiện, bạn có thể phản hồi lại, mình sẽ hỗ trợ thêm!

Chuẩn luôn rồi bác ơi, em đã test. Có thể chỉnh sửa nhanh trực tiếp phần "tóm tắt" của bài viết trên trang quản trị. Nó cũng tự động lưu luôn khi nhập dữ liệu mà không cần phải bấm xác nhận hay thao tác nào khác. Đúng ý em rồi. Em cảm ơn bác nhiều nhé!

Nếu bạn muốn hiển thị dòng thông báo sau mỗi lần nhập dữ liệu trong ô mô tả ngắn (tóm tắt) thì dùng code này. Mỗi lần dữ liệu nó sẽ báo "Excerpt đã được lưu thành công!" và bạn sẽ cần bấm vào nút "Ok" để tắt nó đi và tiếp tục nhập dữ liệu vào trong ô mô tả ngắn tiếp theo.

Mã: Chọn tất cả

// Thêm cột Excerpt vào danh sách bài viết
function add_excerpt_column($columns) {
    $columns['excerpt'] = __('Mô tả ngắn', 'mh-magazine-lite');
    return $columns;
}
add_filter('manage_posts_columns', 'add_excerpt_column');

// Hiển thị nội dung Excerpt trong cột
function show_excerpt_column_content($column_name, $post_id) {
    if ($column_name === 'excerpt') {
        $excerpt = get_post_field('post_excerpt', $post_id); // Lấy nội dung Excerpt
        echo '<textarea class="inline-excerpt" data-post-id="' . esc_attr($post_id) . '" style="width: 100%; height: 50px;">' . esc_textarea($excerpt) . '</textarea>';
    }
}
add_action('manage_posts_custom_column', 'show_excerpt_column_content', 10, 2);

// Thêm script để xử lý inline editing bằng AJAX
function add_excerpt_inline_edit_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const excerpts = document.querySelectorAll('.inline-excerpt');

            let timeout = null; // Dùng để giới hạn số lần gọi AJAX

            excerpts.forEach(function (excerptField) {
                excerptField.addEventListener('blur', function () {
                    clearTimeout(timeout); // Xóa timeout cũ nếu có
                    timeout = setTimeout(() => { // Thêm timeout mới
                        const postId = this.dataset.postId;
                        const excerptValue = this.value;

                        const data = new FormData();
                        data.append('action', 'save_excerpt_inline');
                        data.append('post_id', postId);
                        data.append('excerpt', excerptValue);

                        fetch(ajaxurl, {
                            method: 'POST',
                            body: data,
                        })
                        .then(response => response.json())
                        .then(result => {
                            if (result.success) {
                                alert('Excerpt đã được lưu thành công!');
                            } else {
                                alert('Đã xảy ra lỗi khi lưu Excerpt.');
                            }
                        })
                        .catch(error => {
                            console.error('AJAX Error:', error);
                        });
                    }, 500); // Chỉ gọi AJAX sau 500ms
                });
            });
        });
    </script>
    <?php
}
add_action('admin_footer', 'add_excerpt_inline_edit_script');

// Lưu Excerpt qua AJAX
function save_excerpt_inline() {
    if (!empty($_POST['post_id']) && isset($_POST['excerpt'])) {
        $post_id = intval($_POST['post_id']);
        $excerpt = sanitize_text_field($_POST['excerpt']);

        if ($post_id && !empty($excerpt)) {
            wp_update_post(array(
                'ID' => $post_id,
                'post_excerpt' => $excerpt,
            ));
            wp_send_json_success('Excerpt saved successfully!');
        }
    }
    wp_send_json_error('Failed to save Excerpt.');
}
add_action('wp_ajax_save_excerpt_inline', 'save_excerpt_inline');

Em cần đoạn code ở trên, như này là quá chuẩn rồi bác ạ!