Criando um tipo de postagem personalizada centrada em imagem?


17

Alguém tem alguma dica para criar um tipo de postagem personalizada centrada em imagem?

Para elaborar, meu blog tem imagens rotativas de cabeçalho, mostradas abaixo:

Cabeçalho do blog mostrando imagens aleatórias

As duas imagens no canto superior esquerdo são randomizadas e existem como anexos a uma página específica que existe apenas para conter essas imagens. Gostaria de saber se é possível armazená-los de uma maneira diferente usando tipos de postagem personalizados. Eu criei um novo tipo de postagem, "header-image", e estou tentando descobrir para onde ir a partir daqui. Gostaria que cada "post" da imagem do cabeçalho tivesse um anexo de imagem. Em vez de puxar imagens aleatórias de uma página, eu puxaria postagens aleatórias do tipo de post de imagem de cabeçalho. Diante disso,

  1. Como incorporar uma interface simples ao processo de anexo disponível na página de administração "Nova imagem de cabeçalho"?
  2. Posso remover o título da postagem e as caixas de entrada de conteúdo para organizar a página?

Os objetivos são criar uma interface melhor para o processo de upload atual e, eventualmente, criar uma taxonomia para sinalizar imagens como imagem esquerda / imagem direita. (Olhando para a imagem acima, você pode ver a foto à direita encobrindo o rosto na outra foto. Eu poderia evitar isso marcando fotos para a exibição do lado esquerdo e / ou direito.) Esta última não será um problema se Eu posso implementar o primeiro.

Atualização: com base em uma resposta aqui, consegui implementar esta configuração. O código completo está publicado abaixo .


2
Sugiro que você dê à pessoa a resposta que o levou aonde você precisa ir para o crédito Aceitar resposta.
Ryan Gibbons

Respostas:


18

A resposta inicial de goldenapple me deu o impulso necessário para concluir isso.

functions.php

Aqui está o código completo que estou usando para adicionar um novo tipo de postagem "header-image" e modificar outras telas administrativas de acordo:

/**
 * 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' );

Imagens de administração

Lista de postagem de imagens de cabeçalho

Imagens de cabeçalho pós-edição

Código do modelo

$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) ) );
}

Bom trabalho! Adoro!
John P Bloch

E como eu adicionaria um link à miniatura? Tanto no administrador quanto no modelo? Nice Looking!
Florescu Adrian

Isso pode ser modificado para atribuir uma imagem a uma página?
Doidgey 28/09/2015

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' );

Isso deve registrar seu tipo de postagem com nada além de um campo para uma imagem em destaque. Veja o codex http://codex.wordpress.org/Function_Reference/register_post_type para obter uma lista dos argumentos a serem passados.


11
Um valor compatível com "imagem em destaque" fornece uma tela em branco ao criar uma nova imagem de cabeçalho, mas "miniatura" adiciona uma nova caixa de meta chamada "Imagem em destaque". Obrigado!
Annika Backstrom

Você está certo. Meu erro nisso.
goldenapples
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.