将特征图像背景链接到标题背景答案

【问题标题】：Linking feature image background to header background将特征图像背景链接到标题背景
【发布时间】：2015-12-22 10:33:22
【问题描述】：

复杂的问题。在我的 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' ); ?> ...

content-single.php

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

header-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 的背景。

或者也许是实现此目的的更好方法。

【问题讨论】：

标签： php html css wordpress

【解决方案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">
                    ...

【讨论】：

@user3550879 您也可以使用上面的代码在您的header-int.php 文件中获得feature image，因为当您运行单个帖子页面时，您的custom header 文件已经获得post id。
我可以把它放在哪里让它成为jumbotron的背景？]
抱歉，我对 wordpress 不是很精通。任何地方？我如何将它链接到标题 jumbo tron
你能复制你的标题 jumbo tron html 吗？
另外还要提到你需要把特征图作为背景图放在哪里？