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

标题标记设置为获取每个页面的特色图像，并在该页面的标题中将其设置为完整大小。我将每个图像的高度设置为400px，宽度设置为100％。我现在正在尝试使页面标题显示在特色标题图像的中心。我可以获取页面标题并将其移到标题图像上并居中吗？我可以使页面标题文本透明并在标题图像上添加新的居中文本吗？如果是其中之一或两者都是，我该怎么做呢？

Here是我网站的链接，以及我目前正在处理的网页。

This是我想要实现的标题格式。

Answer 1

你可以为.entry-title class

添加一个css规则吗？

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

这是有效的规则应该适用于您的所有.entry-title，并且标题图片在每个页面中都是相同的维度

如何在Twenty Seventeen子主题中为自定义的WordPress标题添加文本？

1 个答案: