Question

我在WordPress上为Twenty Seventeen主题创建了一个子主题。我在首页标题中添加了一个视频，我正在努力保留它。但是，我试图将每个其他页面的标题更改为400px的高度，调整宽度以覆盖任何监视器或浏览器的最大宽度，并且我想添加标题中心的文本（在前面的图像）将显示页面的标题。

到目前为止，我已经更改了header.php中的标头标签：

<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' ); ?>
            </div><!-- .wrap -->
        </div><!-- .navigation-top -->
    <?php endif; ?>

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

为：

    <header id="masthead" class="site-header" role="banner">
  <?php if ( has_post_thumbnail() && ( is_single() || ( is_home() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) ) : ?>
    <span class="has-header-image twentyseventeen-front-page home">
      <div id="page-header" class="custom-header">
        <div id="custom-header-media" class="custom-header-media" >
          <div id="wp-custom-header" class="wp-custom-header">
            <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
              $page_for_posts = get_option( 'page_for_posts' );
              echo get_the_post_thumbnail( $page_for_posts );
            } else {
              the_post_thumbnail( 'twentyseventeen-featured-image' );
            } ?>
          </div>
        </div>
        <div class="site-branding">
          <div class="wrap">
            <div class="site-branding-text">
              <h1 class="site-title">
                <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
                  $page_for_posts = get_option( 'page_for_posts' );
                  echo get_the_title( $page_for_posts );
                } else {
                  the_title();;
                } ?>
              </h1>
            </div>
          </div>
        </div>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
      </div>
    </span>
  <?php else : get_template_part( 'template-parts/header/header', 'image' ); endif;?>

  <?php if ( has_nav_menu( 'top' ) ) : ?>
    <div class="navigation-top">
      <div class="wrap">
        <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
      </div><!-- .wrap -->
    </div><!-- .navigation-top -->
  <?php endif; ?>

</header>

这会将我的精选图片更改为标题图片，在每个页面上都是全尺寸，但是首页。但是，我无法弄清楚如何使图像的宽度适应每个屏幕和/或浏览器的最大宽度，我也无法弄清楚如何在图像前添加文本。我不想只使用像Photoshop或pixlr这样的文本将文本添加到图像中，因为搜索引擎不会将其拾取。谁能告诉我如何实现这两件事？如果我从特色图片中拉出标题，是否可以这样做？

参考我正在努力实现的目标：

目前这是my site *注意：我的页面将在标题图片中显示“CONTACT”，并且我将使标题下方的当前标题透明，因为我不相信有办法在WordPress上完全删除它

this page上的标题图片就是我想要实现的目标

无法获取WordPress二十七主题的儿童主题页面的标题工作

0 个答案: