Thêm chức năng đặt ảnh đại diện mặc định cho bài viết wordpress

Đoi khi chúng ta quên đặt ảnh đại diện khi viết một bài viết. dẫn đến sau khi đăng bài , không thấy ảnh đại diện trên blog gây mất mỹ quan cho blog. Hôm nay tôi sẽ cùng bạn phát triển tính năng tự động thêm ảnh đại diện khi lưu bài viết khi chưa chọn.

Ý tưởng

Trong phần giao diện quản trị, phần menu bài viết chúng ta thêm mục Default Thumbnail dẫn đến trang chọn ảnh. Tại đây chọn ảnh lấy làm thumbnail mặc định trong thư viện. Lưu vào Sau đó không cần lo lắng việc bài viết không có thumbnail nữa.

Code

Đầu tiên, tạo nơi lưu trữ id thumbnail

function register_options_default_featured_image() {
    add_option( 'default_featured_image' , '' );
    register_setting( 'lbk_default_featured_image_settings', 'default_featured_image');
}
add_action( 'admin_init', 'register_options_default_featured_image' );

Tiếp đến, tạo nơi menuitem và giao diện chọn ảnh

function add_default_featured_image_submenu() {
    add_submenu_page(
        'edit.php',
        __( 'Default feautured image', 'lbk' ),
        __( 'Default feautured image', 'lbk' ),
        'edit_posts',
        'default_featured_image_page',
        'default_featured_image_page_callback'
    );
function default_featured_image_page_callback() {
  ?>
  
<h2> Set default featured image</h2>

    
<div style="max-width: 800px;">
        
<form method="post" action="options.php">
            <?php settings_fields( 'lbk_default_featured_image_settings' ); ?>
             
            <input id="upload_image" type="text" size="36" name="default_featured_image" value="<?php echo get_option('default_featured_image') ?>" />
            <input id="upload_image_button" class="button" type="button" value="Upload Image" />
 
            
<div class = "w-100" style = "margin-top: 20px;">
                <img src = "<?php echo wp_get_attachment_url(get_option('default_featured_image')); ?>" style = "width: 100%; max-width: 400px"/>
            </div>

            <?php
                submit_button( __( 'Save Changes') );
            ?>
        </form>

        <script>
            jQuery(document).ready(function($){
            var custom_uploader;
 
            $('#upload_image_button').click(function(e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
            if (custom_uploader) {
                custom_uploader.open();
                return;
            }
 
            //Extend the wp.media object
            custom_uploader = wp.media.frames.file_frame = wp.media({
                title: 'Choose Image',
                button: {
                    text: 'Choose Image'
            },
                multiple: false
            });
 
            //When a file is selected, grab the URL and set it as the text field's value
            custom_uploader.on('select', function() {
                attachment = custom_uploader.state().get('selection').first().toJSON();
                $('#upload_image').val(attachment.id);
            });
 
                //Open the uploader dialog
                custom_uploader.open();
            });
        });
        </script>
    </div>

    <?php
    }
}
add_action( 'admin_menu', 'add_default_featured_image_submenu' );

Gắn thư viện js để chọn ảnh của wp

add_action('admin_enqueue_scripts', 'uploader_javaScript');
function uploader_javaScript() {
    if (isset($_GET['page']) && $_GET['page'] == 'default_featured_image_page') {
        wp_enqueue_media();
        wp_register_script('theme_options', bloginfo('template_directory').'/wp-content/themes/yourtheme/js/my-admin.js', array('jquery'));
        wp_enqueue_script('theme_options');
    }
}

Đặt ảnh đại diện khi lưu bài viết

add_action( 'save_post', 'wptuts_save_thumbnail' );
function wptuts_save_thumbnail( $post_id ) {
     
    // Get Thumbnail
    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
  
    // Verify that post is not a revision
    if ( !wp_is_post_revision( $post_id ) ) {
 
        // Check if Thumbnail exists
        if ( empty( $post_thumbnail ) ) {
            // get default image id
             $default_thumb_id = get_option('default_featured_image');
            // Add thumbnail to post
            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = $default_thumb_id );
        }
    }
}

Chúc các bạn thành công

Zalo
Messenger
Form liên hệ

Đăng ký nhận tư vấn

    Vui lòng để lại thông tin để chúng tôi trực tiếp tư vấn cho bạn.

    Họ tên
    Số điện thoại
    Ghi chú