如何在二十十七 child 主题中向自定义 WordPress header 添加文本？

Question

这是我的 header.php:

的代码

 <?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<meta name="p:domain_verify" content="17fc715173fc8410e543997f613a71ce"/>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>

    <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>

    <?php
    // If a regular post or page, and not the front page, show the featured image.
    if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
        echo '<div class="single-featured-image-header">';
        the_post_thumbnail( 'twentyseventeen-featured-image' );
        echo '</div><!-- .single-featured-image-header -->';
    endif;
    ?>

    <div class="site-content-contain">
        <div id="content" class="site-content">

header 标签设置为获取每个页面的特色图片并使其在该页面的 header 中显示为全尺寸。我将每个图像的高度设置为 400px，宽度设置为 100%。我现在正在尝试使页面标题显示在特色 header 图像的中心。我可以将页面标题移到 header 图像上并居中吗？我可以使页面标题文本透明并在 header 图像上添加新的居中文本吗？如果其中一个或两个是，我该怎么做？

Here 是我网站的 link，也是我目前正在处理的页面。

This 是我想要达到的 header 格式。

Answer 1

你能为 .entry-title 添加一个 css 规则 class

.entry-title{
    position: absolute;
    top: -200px;
    text-align: center;
    width: 100%;
    left: 0;
    font-size: 50px;
    color: white;
}

这是有效的，该规则应适用于您的所有 .entry-title 并且每个页面中的 header 图像尺寸相同

如何在二十十七 child 主题中向自定义 WordPress header 添加文本？

How to add text to a customized WordPress header in Twenty Seventeen child theme?

css

wordpress

text

header

add