Que yo sepa, no se puede usar una función de WordPress en el CSS y tampoco PHP.
No obstante, he encontrado una pregunta similar a la tuya en el hilo de otro foro que tal vez funcione (no lo he probado):
//this retrieve the full version of image
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
$image_url = $image_data[0];
echo '<li class="produkt" style="background: url('. $image_url .')">';
Tendrás que afinar los parámetros de «get_the_post_thumbnail».
Date cuenta que en el ejemplo está puesta la imagen en un «li». Podría ser, por ejemplo, «div style=»background…….»
Este es el hilo: https://wordpress.stackexchange.com/questions/221704/set-post-thumbnail-as-background
Hay unos cuantos más. Busca en google «background-image thumbnail» (sin las comillas).
Me olvidaba: eso no va en la hoja de estilos sino en el archivo del tema que corresponda.
Iniciador del debate
ozecai
(@ozecai)
Lo primero muchas gracias, había visto ese hilo pero tengo muchas dudas, soy un novato osado pero no sé mucho de php, ni de css, aunque con el método de prueba y error me apaño.
Según veo en ese hilo, lo que parece que hace es poner la imagen destacada de una categoría concreta («produkt»), yo lo que quiero es que en cada página ponga la imagen destacada de esa página de fondo, independientemente de la categoría de la página. Además ese fondo lo quiero en un sitio concreto, en la cabecera, algo que ya he ubicado pero en el css.
La página con la que estoy trabajando es esta: http://grupo.us.es/compoliticas/
Como se puede ver, poniendo el enlace en el CSS he logrado que en las páginas salga como fondo en la cabecera una imagen concreta: http://grupo.us.es/compoliticas/proyecto/
Así en todas las páginas menos en el home sale la misma imagen, en concreto esta: http://grupo.us.es/compoliticas/wp-content/uploads/2017/04/manifa.jpg
Lo que me gustaría es que ahí saliera en cada página la imagen destacada que le ponga a esa página. Por aclarar lo que quiero hacer.
Respecto a cómo hacerlo, realmente me hago un lío para saber en que plantilla tengo que poner el código php, por si sirve de algo estoy usando el tema Appointment red, pero no se si debo tocar el código en la plantilla «Fullwidth Plantilla de Página (fullwidth.php)» ya que las páginas están a ancho completo o en «Single Page (page.php)» o en algún otro sitio, tampoco sé exactamente en que lugar de esas plantillas poner el código ni si tengo además que poner algo en el CSS para que lo de poner la imagen destacada de fondo lo haga justo donde quiero. Al menos sé en que parte del CSS se hace, pues ya he logrado poner una imagen, aunque sea la misma para todas las páginas.
Quizás me estoy lanzando demasiado pero puede que con un poco de ayuda sea capáz de hacerlo 😉
Te digo algo en cuanto pueda. Mañana casi seguro.
De momento, te dejo esto para que no se me olvide:
<div class="page-title-section" style="background-image:'<?php echo $imgdestacada;?>'">
Iniciador del debate
ozecai
(@ozecai)
Gracias, sigo probando a ver…
1) Edita el archivo index-banner.php
2) Sustituye <div class="page-title-section">
por lo siguiente:
<?php
//this retrieve the full version of image
$image_data='';
$image_url='';
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
$image_url = $image_data[0];
?>
<?php if ($image_url='') : ?>
<div class="page-title-section">
<?php else : ?>
<div class="page-title-section" style="background-image:'<?php echo $image_url;?>'">
<?php endif ?>
Iniciador del debate
ozecai
(@ozecai)
A ver si lo entiendo, he sustituído lo que dices, solo esa línea dejando todo lo demás quedando el archivo index-banner.php así:
<!-- Page Title Section -->
<?php
//this retrieve the full version of image
$image_data='';
$image_url='';
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
$image_url = $image_data[0];
?>
<?php if ($image_url='') : ?>
<div class="page-title-section">
<?php else : ?>
<div class="page-title-section" style="background-image:'<?php echo $image_url;?>'">
<?php endif ?>
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="page-title"><h1><?php the_title(); ?></h1></div>
</div>
<div class="col-md-6">
<ul class="page-breadcrumb">
<?php if (function_exists('qt_custom_breadcrumbs')) qt_custom_breadcrumbs();?>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Page Title Section -->
<div class="clearfix"></div>
Me seguía saliendo la misma imagen que puse en el CSS, supongo que se imponía sobre el php de ese archivo, así que quité el parámetro background que había añadido, es decir este:
background-image:url(url_de_una_imagen_concreta);
Y ahora ya no sale esa imagen, pero tampoco la destacada de la página sino el fondo rojo que tenía predeterminado el tema, así: http://grupo.us.es/compoliticas/publicaciones/
Por supuesto me he asegurado de que esa página tiene una imagen destacada. ¿Algo he hecho mal?
-
Esta respuesta fue modificada hace 7 años, 9 meses por
ozecai.
Espera que estoy probando el código. De momento, he conseguido recuperar la URL de la imagen destacada pero tengo que seguir probando.
Ya lo tengo. Es que el código siempre hay que comprobarlo y hasta ahora no había tenido tiempo.
1) Edita el archivo index-banner.php
2) Sustituye <div class="page-title-section">
por lo siguiente:
<?php
//this retrieve the full version of image
$image_data='';
$image_url='';
$image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full', false );
$image_url = $image_data[0];
?>
<?php if ($image_url=='') : ?>
<div class="page-title-section">
<?php else : ?>
<?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
<?php endif ?>
Iniciador del debate
ozecai
(@ozecai)
FUNCIONAAAAA! Mil gracias compa, ha sido un placer!
Iniciador del debate
ozecai
(@ozecai)
Oye y ya por afinar aún más si puede ser, es posible hacer que en la página que muestra los post completos, en lugar de coger y poner ahí la imagen del post, coja la de una de las páginas?.
Por ejemplo tengo una página de «noticias» con su cabecera, es esta: http://grupo.us.es/compoliticas/noticias/
Pero luego si entro en una noticia, también coge la imagen de esa noticia para la cabecera, por ejemplo aquí: http://grupo.us.es/compoliticas/libro-videoactivismo-y-movimientos-sociales/ y claro no queda bien.
Lo ideal sería que en todas esas noticias mantuviera la cabecera de la página «noticias».
Voy haciendo pruebas a ver…