将要素图像背景链接到标题背景

时间:2015-12-22 10:33:22

标签: php html css wordpress

复杂的问题。在我的wordpress网站上,我有single.php页面显示从主页中选择的每个帖子。 single.php引入了一个自定义header-int.php(index.php的标题不同) 每篇文章(帖子)都包含此代码

在索引页面上放置每个“文章”(帖子)。每篇文章都有以下代码背景是特色图像(在索引页面上显示为缩略图)

article.php

<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?>>

  <div class="bg-img-LC" style="background-image:url('<?php echo $thumbnail_url ?>');">

   ... content of article/post ...

single.php带有

的content-single.php

single.php中

get_header('int'); ?>

<main role="main">

    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'single' ); ?> ...

内容的single.php

<div id="post-<?php the_ID(); ?>">  ... displays images and text from post

头-INT

<body id="skrollr-body" <?php body_class('container-fluid'); ?> >       

<?php
if (has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    echo $large_image_url[0]; // Image Url
}
?>

<div class="jumbotron row" style="border-radius:0px;">
    <header>
        <div class="navbar navbar-custom">
                    ...

我希望帖子中的'精选图片'成为自定义header-int.php文件中jumbotron的背景。

或perhapse是实现这一目标的更好方法。

1 个答案:

答案 0 :(得分:1)

如果您想从帖子中获取feature image,则可以使用以下代码显示feature image

$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
echo $large_image_url[0]; // Image Url

您可以根据需要将wp_get_attachment_image_src()的第二个参数更改为(thumbnail, medium, large, or full)

修改

您的header-int.php文件应为

<body id="skrollr-body" <?php body_class('container-fluid'); ?> >       

<?php
if (has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    echo $large_image_url[0]; // Image Url
}
?>

<div class="jumbotron row" style="border-radius:0px;background-image:url('<?php echo $large_image_url[0]; ?>');">
    <header>
        <div class="navbar navbar-custom">
                    ...