gpt4 book ai didi

css - 如何将文本添加到二十十七子主题中的自定义 WordPress header ?

转载 作者:行者123 更新时间:2023-11-28 04:18:18 25 4
gpt4 key购买 nike

这是我的 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是我想要实现的所需 header 格式。

最佳答案

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

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

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

关于css - 如何将文本添加到二十十七子主题中的自定义 WordPress header ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42362228/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com