web-dev-qa-db-fra.com

Comment puis-je afficher correctement l'image sélectionnée dans mes publications individuelles?

Voici ce que j'ai essayé:

1) Ajout de add_theme_support('post-thumbnails'); dans functions.php.

2) Ajout de <?php the_post_thumbnail(); ?> à l'intérieur de single.php qui ressemble à ceci:

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>


        <div id="primary">



            <div id="content" role="main">

                    <?php the_post_thumbnail(); ?>
                <?php while ( have_posts() ) : the_post();  ?>
                    <?php get_template_part( 'content-single', get_post_format()  ); ?>

                <?php endwhile; // end of the loop. ?>

            </div>
        </div>

<?php get_footer(); ?>

Mon image sélectionnée est ajoutée, mais au-dessus de l'article et non à l'intérieur de l'article, comment elle devrait être.

Pour mieux comprendre, voici une photo du problème que je rencontre:enter image description here

Comment puis-je faire en sorte que cette image apparaisse sous l'article "Test post"? Comme ici par exemple:

Merci d'avance!

post-thumbnails
4
user44148

Comme mentionné par Rahil Wazir, retirez cet extrait de code <?php the_post_thumbnail(); ?> de single.php. Mettez ce qui suit dans votre functions.php (en bas)

add_filter('the_content', 'put_thumbnail_in_posting');
function put_thumbnail_in_posting($content) {
global $post;
if ( has_post_thumbnail() && ( $post->post_type == 'post' ) ) { the_post_thumbnail( '', array( 'style' => 'float:left;margin:15px;' ) ); }
return $content;
}

Changez la marge en quelque chose et/ou ajoutez-y un autre css et vous avez terminé. Pas besoin de mettre aucun dans un autre fichier.
(en passant, il flotte dans l’emperceur gauche à côté de votre contenu et l’a testé avec une installation "vierge" de vingt.)

Ajouter:
Si vous le souhaitez, la même chose sur les pages change cette partie du code $post->post_type == 'post' en suivant le $post->post_type == 'post' || 'page'.
Si vous voulez un peu plus de flexibilité et n’avoir le code CSS que dans votre style.css?
Changer la suite du code array( 'style' => 'float:left;margin:15px;'
dans array( 'class' => 'thumbnail-layout' et ajoutez au bas du fichier style.php une nouvelle classe.
Utilisez le même nom de classe: (bien sûr, vous pouvez changer le nom de votre choix, assurez-vous simplement que, dans votre code de fonction et le style.css, la même classe doit être utilisée.

.thumbnail-layout { 
float:left;
display:inline;
margin:15px;
}

Bien sûr, vous pouvez modifier la marge si vous le souhaitez, ajouter un rembourrage si vous le souhaitez, etc. Bonne chance.

1
Charles

Selon le codex wordpress, la fonction the_post_thumbnail () doit être appelée entre les boucles, voir link the_post_thumbnail afin de déplacer "the_post_thumbnail ()" dans le modèle à contenu unique pour obtenir le placement correct de l'image.

0
Webloper

Testé sur le thème Twenty Twelve.

Voici un autre moyen d'ajouter une image sélectionnée à des publications uniques et de la styler à partir de votre fichier style.css de thèmes enfants.

Cette méthode aussi lie la miniature de publication à la publication Permalink .

Ce code PHP se trouve à la fin de votre fichier functions.php de thèmes enfants.

add_filter( 'the_content', 'single_post_featured_image' );

function single_post_featured_image($content) {

global $post;

if ( is_singular( 'post' ) && has_post_thumbnail() ) {  

the_post_thumbnail( '', array( 'class' => 'post-image' ) ); 

printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute(  

    'echo=0' ), $img ); 

}

return $content;


}

Voici un exemple de code CSS:

.single .post-image {
float:left; 
margin: 20px 20px 0 0;
width: 200px;
height: 200px;
}

Vous pouvez également ajouter une prise en charge d'une image sélectionnée dans votre fichier de fonctions de thèmes enfants, mais il est probablement préférable de les rogner/redimensionner manuellement avant d'ajouter:

//* Add new image sizes
add_image_size( 'post-image', 200, 200, true );

Source http://wpsites.net/web-design/display-featured-image-before-or-aent-entry-title-on-single-posts-pages/

0
Brad Dalton

Comme Rahil l'a dit dans les commentaires, vous devrez ajouter le bloc the_post_thumbnail(); au fichier content-single.php:

        <div class="entry-content">

if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} 
            <?php the_content(); ?>
            <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->

Vous devrez peut-être aussi attribuer un style à la vignette en display:inline; et float:left; dans le fichier CSS pour l’afficher correctement.

0
Wrought_steel