0
여기 내 header.php 코드입니다 :Twenty 17 Seventeen 하위 테마의 맞춤 WordPress 헤더에 텍스트를 추가하는 방법은 무엇입니까?
<?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은 내가 달성하고자하는 원하는 헤더 형식입니다.
에서 같은 차원이다 간단한 예제 jsfiddle를 만들거나 You site에 대한 링크를 붙여 넣으십시오. – htmlbrewery