Đ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