Tạo một loại bài tùy chỉnh hình ảnh trung tâm?


17

Có ai có bất cứ lời khuyên để tạo một loại bài đăng tùy chỉnh tập trung vào hình ảnh?

Để giải thích, blog của tôi có các hình ảnh tiêu đề xoay, được hiển thị bên dưới:

Tiêu đề blog hiển thị hình ảnh ngẫu nhiên

Hai hình ảnh ở trên cùng bên trái được chọn ngẫu nhiên và tồn tại dưới dạng tệp đính kèm vào một trang cụ thể chỉ tồn tại để chứa những hình ảnh này. Tôi tự hỏi liệu có khả thi để lưu trữ những thứ này theo một cách khác bằng cách sử dụng các loại bài đăng tùy chỉnh. Tôi đã tạo một loại bài đăng mới, "hình ảnh tiêu đề" và tôi đang cố gắng tìm ra nơi sẽ đi từ đây. Tôi muốn mỗi "bài đăng" hình ảnh tiêu đề có một tệp đính kèm hình ảnh. Thay vì kéo hình ảnh ngẫu nhiên từ một trang, tôi sẽ kéo các bài đăng ngẫu nhiên từ loại bài đăng hình ảnh tiêu đề. Đưa ra điều này,

  1. Làm cách nào tôi có thể kết hợp một giao diện đơn giản cho quy trình đính kèm có sẵn từ trang quản trị "Hình ảnh tiêu đề mới"?
  2. Tôi có thể xóa tiêu đề bài viết và hộp nhập nội dung để giải nén trang đó không?

Mục tiêu là tạo ra một giao diện tốt hơn cho quá trình tải lên hiện tại và cuối cùng có thể tạo một phân loại để gắn cờ hình ảnh dưới dạng hình ảnh bên trái / hình ảnh bên phải. (Nhìn vào hình trên, bạn có thể thấy ảnh bên phải che hết khuôn mặt trong ảnh khác. Tôi có thể tránh điều này bằng cách đánh dấu ảnh cho màn hình bên trái và / hoặc bên phải.) Cái sau sẽ không thành vấn đề nếu Tôi có thể thực hiện trước đây.

Cập nhật: dựa trên câu trả lời ở đây, tôi đã có thể thực hiện thiết lập này. Mã đầy đủ được đăng dưới đây .


2
Tôi sẽ đề nghị bạn cung cấp cho người đó câu trả lời đưa bạn đến nơi bạn cần đến tín dụng Chấp nhận Trả lời.
Ryan Gibbons

Câu trả lời:


18

Câu trả lời ban đầu của Goldenapple đã cho tôi bước khởi động mà tôi cần để hoàn thành việc này.

Hàm.php

Đây là mã hoàn chỉnh mà tôi đang sử dụng để thêm loại "hình ảnh tiêu đề" mới và sửa đổi màn hình quản trị khác cho phù hợp:

/**
 * Register the Header Image custom post type.
 */
function sixohthree_init() {
    $labels = array(
        'name' => 'Header Images',
        'singular_name' => 'Header Image',
        'add_new_item' => 'Add Header Image',
        'edit_item' => 'Edit Header Image',
        'new_item' => 'New Header Image',
        'view_item' => 'View Header Image',
        'search_items' => 'Search Header Images',
        'not_found' => 'No Header Images found',
        'not_found_in_trash' => 'No Header Images found in Trash'
    );

    $args = array(
        'labels' => $labels,
        'public' => false,
        'show_ui' => true,
        'supports' => array('thumbnail')
    );

    register_post_type( 'header-image', $args );
}
add_action( 'init', 'sixohthree_init' );

/**
 * Modify which columns display when the admin views a list of header-image posts.
 */
function sixohthree_headerimage_posts_columns( $posts_columns ) {
    $tmp = array();

    foreach( $posts_columns as $key => $value ) {
        if( $key == 'title' ) {
            $tmp['header-image'] = 'Header Image';
        } else {
            $tmp[$key] = $value;
        }
    }

    return $tmp;
}
add_filter( 'manage_header-image_posts_columns', 'sixohthree_headerimage_posts_columns' );

/**
 * Custom column output when admin is view the header-image post list.
 */
function sixohthree_headerimage_custom_column( $column_name ) {
    global $post;

    if( $column_name == 'header-image' ) {
        echo "<a href='", get_edit_post_link( $post->ID ), "'>", get_the_post_thumbnail( $post->ID ), "</a>";
    }
}
add_action( 'manage_posts_custom_column', 'sixohthree_headerimage_custom_column' );

/**
 * Make the "Featured Image" metabox front and center when editing a header-image post.
 */
function sixohthree_headerimage_metaboxes( $post ) {
    global $wp_meta_boxes;

    remove_meta_box('postimagediv', 'header-image', 'side');
    add_meta_box('postimagediv', __('Featured Image'), 'post_thumbnail_meta_box', 'header-image', 'normal', 'high');
}
add_action( 'add_meta_boxes_header-image', 'sixohthree_headerimage_metaboxes' );

/**
 * Enable thumbnail support in the theme, and set the thumbnail size.
 */
function sixohthree_after_setup() {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size(150, 100, true);
}
add_action( 'after_setup_theme', 'sixohthree_after_setup' );

Ảnh chụp màn hình quản trị

Danh sách bài đăng hình ảnh

Chỉnh sửa hình ảnh tiêu đề

Mã mẫu

$header_images = get_posts('post_type=header-image&orderby=rand&numberposts=2');

foreach( $header_images as $idx => $post ) {
    setup_postdata($post);
    the_post_thumbnail('post-thumbnail', array('class' => 'snapshot snapshot' . ($idx+1) ) );
}

Bạn đã làm rất tốt! Yêu nó!
John P Bloch

Và làm thế nào tôi có thể thêm một liên kết đến hình thu nhỏ? Cả trong quản trị và mẫu? Ưa nhìn!
Florescu Adrian

Điều này có thể được sửa đổi để gán một hình ảnh cho một trang?
Doidgey

13
function register_header_image() {
     register_post_type( 'header-image', 
                         array( 
                             'label'=>'Header Images',
                             'name'=>'Header Images',
                             'singular_name'=>'Header Image',
                             'public'=>true,
                             'show_ui'=>true,
                             'hierarchical'=>true,
                             'supports'=>array('thumbnail') ) );
}

add_action ('init','register_header_image');
add_theme_support( 'post-thumbnails' );

Điều đó sẽ đăng ký loại bài đăng của bạn không có gì ngoài một lĩnh vực cho một hình ảnh nổi bật. Xem codex http://codex.wordpress.org/Function_Reference/register_post_type để biết danh sách các đối số cần vượt qua.


1
Giá trị hỗ trợ của "hình ảnh nổi bật" mang lại cho tôi một màn hình trống khi tạo hình ảnh tiêu đề mới, nhưng "hình thu nhỏ" thêm một hộp meta mới có tên là "Hình ảnh nổi bật". Cảm ơn!
Annika Backstrom

Bạn đúng. Sai lầm của tôi về điều đó.
Goldenapples
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.