định dạng bài đăng - làm thế nào để chuyển đổi hộp meta khi thay đổi định dạng?

Vấn đề

Sau khi nhận ra rằng các định dạng bài đăng khá phổ biến, nhưng chỉ là một khái niệm cực kỳ thô sơ, tôi thấy rằng người dùng sẽ gặp phải các bẫy có thể.

Định dạng bài viết ...

• sử dụng các trường meta bài & người dùng không nhớ tên khóa meta chính xác.
• lấy liên kết / nhúng / bất cứ đối tượng nào từ trình chỉnh sửa bài đăng và người dùng nhập dữ liệu sai.

Cả hai đều là ví dụ về các bẫy có thể có mà người dùng có thể gặp phải.

Ý tưởng

Định dạng bài đăng có một hộp meta tùy chỉnh chỉ cho phép nhập dữ liệu dự kiến.

Ý tưởng tự nó không tệ, nhưng vẫn còn vấn đề mà người dùng sẽ phải

• đưa dữ liệu vào hộp meta chính xác
• sau đó chọn định dạng bài theo.

Câu hỏi

Những gì tôi đang tìm kiếm là

• một giải pháp chuyển đổi (ajax) hộp meta (hoặc chỉ nội dung của nó) dựa trên lựa chọn mà người dùng thực hiện bên trong hộp meta định dạng bài đăng

HOẶC LÀ...

• sử dụng tab ajax / jquery-ui bên trong hộp meta để chuyển nội dung hộp meta và lưu định dạng bài đăng theo 'save_post'

Lưu ý:
Tôi không tìm kiếm nội dung hộp meta chính xác. Điều thú vị nhất của tôi là nhìn thấy "môi trường xung quanh" trong các codeví dụ khác nhau .

Cảm ơn bạn!

Tôi đã làm một cái gì đó như thế này một lần, nhưng khi bạn nhấp vào một danh mục nhất định (về cơ bản là giống nhau) Nó chắc chắn không phải là một giải pháp ajax thực sự, nó chỉ ẩn và tiết lộ div với các cài đặt, nhưng đó là một giải pháp hoạt động. Bạn chắc chắn sẽ phải sửa đổi điều này cho nhu cầu của mình, nhưng nếu bạn đã hiểu về jQuery, tôi chắc chắn bạn sẽ có thể sửa đổi điều này cho nhu cầu của mình. Nếu bạn cụ thể hơn một chút về nhu cầu của mình, tôi rất vui lòng chỉnh sửa nó cho phù hợp với những gì bạn đang tìm kiếm chính xác hơn.

Mật mã:

Tôi đã sử dụng cái này trong một plugin, nhưng bạn chỉ có thể đặt cái này vào hàm.php của chủ đề.

function customadmin_testimonial() {
    if ( is_admin() ) {
        $script = <<< EOF
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('#testimonial-information').hide();
        $('#in-category-3').is(':checked') ? $("#testimonial-information").show() : $("#testimonial-information").hide();
        $('#in-category-3').click(function() {
            $("#testimonial-information").toggle(this.checked);
        });
    });
</script>
EOF;
        echo $script;
    }
}
add_action('admin_footer', 'customadmin_testimonial');

Về cơ bản những gì bạn có ở đây là một tập lệnh jQuery ban đầu ẩn một hộp meta mà tôi đã thiết lập. ID của hộp là # thông tin chứng thực. Sau đó, nó kiểm tra xem hộp của danh mục cụ thể có được chọn hay không và nếu có, hiển thị nó. Sau đó, nó lắng nghe một nhấp chuột vào hộp của danh mục cụ thể và bật tắt khả năng hiển thị của nó.

Kết quả:

Một hộp meta chỉ hiển thị khi người dùng đã chọn một danh mục cụ thể. Tất cả những gì bạn cần làm là thiết lập metaboxes của bạn và nhận tất cả ID của các yếu tố bạn cần. Bạn sẽ cần ID của metaboxes cũng như các hộp kiểm được đề cập. Sau đó, tất cả những gì bạn cần làm là làm theo công thức này để có được những gì bạn đang tìm kiếm.

Nếu bạn đã thiết lập mọi thứ nhưng đang gặp khó khăn khi viết javascript, chỉ cần cung cấp cho tôi ID của metaboxes và các hộp kiểm tương ứng và tôi rất vui lòng viết nó cho bạn.

Đây là chức năng javascript cuối cùng. Nó nên được móc vào admin_footerhook.

/**
 * jQuery show/hide for meta box, post editor meta box
 * 
 * Hides/Shows boxes on demand - depending on your selection inside the post formats meta box
 */
function wpse14707_scripts()
{
    wp_enqueue_script( 'jquery' );

    $script = '<<< EOF
    <script type="text/javascript">
        jQuery( document ).ready( function($)
            {
                $( "#post_format_box" ).addClass( "hidden" );

                $( "input#post-format-0" ).change( function() {
                    $( "#postdivrich" ).removeClass( "hidden" );
                    $( "#post_format_box" ).addClass( "hidden" );
                } );

                $( "input:not(#post-format-0)" ).change( function() {
                    $( "#postdivrich" ).addClass( "hidden" );
                    $( "#post_format_box" ).removeClass( "hidden" );
                } );

                $( "input[name=\"post_format\"]" ).click( function() {
                    var mydiv = $(this).attr( "id" ).replace( "post-format-", "" );
                    $( "#post_format_box div.inside div" ).addClass("hidden");
                    $( "#post_format_box div.inside div#"+mydiv).removeClass( "hidden" );
                } );
            }
        );
    </script>
    EOF';

    return print $script;
}
add_action( 'admin_footer', 'wpse14707_scripts' );