Titre du post de la couche au-dessus de l'image Wordpress en vedette miniature
J'essaie actuellement de superposer un titre de publication sur l'image de publication sélectionnée, mais tout ce que je vois pour le moment est ");"> " de l'image.
Le code que j'utilise est le suivant:
<div style="width:609px;height:364px;background-image:url(<?php the_post_thumbnail(); ?>);"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2></div>
Et voici le CSS pour le style H2
article h2 a{
background-color:#bf0c08;
color:#fff;
width:auto;
font-size:30px;
text-decoration:none;
padding:8px;
max-width:479px;
line-height:60px;}
Une idée où je vais mal? Aussi une solution serait géniale :)
Vous pouvez le voir sur www.ridermagazine.co.uk
the_post_thumbnail() ne retourne pas le chemin de votre image. Au lieu de cela, il renvoie le balisage HTML complet pour cette image.
Vous pouvez utiliser ceci à la place:
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) ); echo $image[0];
Si vous voulez une taille spécifique, vous pouvez passer un paramètre supplémentaire:
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); echo $image[0];
Vous pouvez soit utiliser un mot clé pour la taille (thumbnail, medium, large ou full), une taille que vous avez définie avec add_image_size, ou transmettre un tableau de la taille souhaitée, comme suit: array( 100, 200 )
the_post_thumbnail fera écho à la balise d'image entière. Vous pouvez le voir dans la source de votre site:
<div style="width:609px;height:364px;background-image:url(<img width=" 609"="" height="364" src="http://ridermagazine.co.uk/wp-content/uploads/2012/11/featuretest.jpg" class="attachment-post-thumbnail wp-post-image" alt="featuretest" title="featuretest">);"><h2><a href="http://ridermagazine.co.uk/?p=1">‘Gill’ promotes underage driving to young motorcycle enthusiast</a></h2></div>
Vous avez besoin de l'URL seulement. Utilisez plutôt get_attachment_thumb_url . Cela ne fait pas écho alors modifiez votre code pour le faire-- `url (ID); ?>);