web-dev-qa-db-fra.com

Création d'un type de message personnalisé centré sur l'image?

Quelqu'un at-il des conseils pour créer un type de message personnalisé centré sur l'image?

Pour élaborer, mon blog contient des images d’en-tête en rotation, présentées ci-dessous:

Blog header showing random images

Les deux images en haut à gauche sont randomisées et existent en tant que pièces jointes à une page spécifique qui n'existe que pour contenir ces images. Je me demande s'il est possible de les stocker d'une manière différente en utilisant des types de publication personnalisés. J'ai créé un nouveau type de message, "header-image", et j'essaie de savoir où aller à partir de maintenant. Je voudrais que chaque en-tête-image "post" ait une image en pièce jointe. Au lieu de tirer des images aléatoires d'une page, je tirerais des publications aléatoires du type de publication header-image. Compte tenu de cela,

  1. Comment puis-je intégrer une interface simple au processus de pièce jointe disponible à partir de la page d'administration "Nouvelle image d'en-tête"?
  2. Puis-je supprimer les zones de saisie du titre et du contenu du message pour désencombrer cette page?

Les objectifs sont: créer une meilleure interface pour le processus de téléchargement en cours, et éventuellement être capable de créer une taxonomie pour marquer les images comme image de gauche/image de droite. (En regardant l'image ci-dessus, vous pouvez voir la photo de droite recouvre le visage de l'autre photo. Je pourrais éviter cela en marquant les photos pour qu'elles soient affichées à gauche et/ou à droite.) Ce dernier ne posera pas de problème si Je peux mettre en œuvre l'ancien.

Mise à jour: Sur la base d’une réponse donnée ici, j’ai pu implémenter cette configuration. Le code complet est affiché ci-dessous .

custom-post-typescustomizationimagesattachments
16
Annika Backstrom

la réponse initiale de goldenapple m'a donné le départ dont j'avais besoin pour terminer.

functions.php

Voici le code complet que j'utilise pour ajouter un nouveau type de message "header-image" et modifier les autres écrans d'administration en conséquence:

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

Captures d'écran de l'administrateur

Header Images post list

Header Images post editing

Code de modèle

$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) ) );
}
17
Annika Backstrom
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' );

Cela devrait enregistrer votre type de message avec rien, mais un champ pour une image sélectionnée. Voir le codex http://codex.wordpress.org/Function_Reference/register_post_type pour une liste des arguments à transmettre.

13
goldenapples