如何让二十七岁的帖子和首页使用两个不同的标题图片

Posted 2023-03-05

【中文标题】如何让二十七岁的帖子和首页使用两个不同的标题图片

【英文标题】：How to make Twenty-Seventeen use two different header images for posts & front page

【发布时间】：2018-06-16 21:22:20

【问题描述】：

我在使用 27-17 主题时遇到的问题是，同一图像用于覆盖整个屏幕的首页和帖子/页面，仅显示约 20% 的图像。这使得首页和帖子标题看起来都不错。我需要将它们分开，以便首页获得一张图片，而帖子/页面获得另一张图片。我应该在哪里进行更改？

这是标题代码：

    <header id="masthead" class="site-header" role="banner">

    <?php get_template_part( 'template-parts/header/header', 'image' ); ?>

    <?php if ( has_nav_menu( 'top' ) ) : ?>
        <div class="navigation-top">
            <div class="wrap">
                <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
                    <?php if ( has_nav_menu( 'social' ) ) : ?>
                    <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
                    <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_class'     => 'social-links-menu',
                            'depth'          => 1,
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
                        ) );
                    ?>
                </nav><!-- .social-navigation -->
                <?php endif; ?>
            </div><!-- .wrap -->
        </div><!-- .navigation-top -->
    <?php endif; ?>

</header><!-- #masthead -->

get_template_part 中使用的标题模板：

<div class="custom-header">

    <div class="custom-header-media">
        <?php the_custom_header_markup(); ?>
    </div>

<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

【问题讨论】：

一个。我们不知道这个星球上的每一个主题，b。我们真的需要一个链接才能理解您所看到的 c.这纯粹是一个 html\css 问题。我们需要查看生成的 html\css 而不是 php

【参考方案1】：

与任何其他页面相比，在首页使用不同照片的方法就是这样：

if (is_front_page()) 
  // Code for front-page image
 else 
  // Code for all other template pages

我认为这就是您所追求的，但是，您的问题可以用很多不同的方式来解释，例如，我如何使用 Wordpress 管理员添加不同的图像，或者我应该使用什么 CSS/如何用它来获得预期的结果...

【讨论】：

所以我需要改变 使用您评论中的代码对吗？我相信该函数会在 div 中创建 。如果我成功了，我会尝试并报告。

是的，但是您必须在此处手动插入图像。您可以使用 wordpress 中的媒体上传器上传图像并将链接复制/粘贴到您的代码中，或者您可以将其放在主题中的 /images/ 文件夹中并使用以下示例代码：/images/YOURIMAGE.jpg">

我让它工作了，现在首页得到一个图像，另一个得到另一个，但由于某种原因，url 被不同的斜线搞砸了，如下所示：知道为什么会这样吗？

这是从wordpress函数自动生成的代码吗？该路径应该与您本地提供的安装路径相关 - 预期结果将类似于“localhost/wp/wp-content/themes/twentyseventeen/im‌​ages/headerbg.png”。我想这与您的 wordpress 环境设置或 xamp 配置设置有关。

get_template_directory_uri() 是我必须在本地环境中使用的。

【参考方案2】：

如果是背景图片（听起来像），您可以使用纯 CSS 来解决。只需使用

body 
  background-image: url('image_x.jpg');

对于常规页面和（按此顺序）

body.home 
  background-image: url('image_homepage.jpg');

对于主页（.home 类自动应用于主页的body 标签）

【讨论】：

不幸的是，the_custom_header_markup() 或其他东西会创建 而不是为 div 本身使用 css..