Theme making.1
index.phpをヘッダーとフッターに分割します。
分割個所を見極める
ヘッダーとフッターとなる共通箇所を探して、それぞれのファイルに分割します。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<?php if( is_single() ): ?>
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="article">
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:description" content="<?php echo esc_attr( wp_strip_all_tags( get_the_excerpt() ) ); ?>">
<?php if( has_post_thumbnail() ): ?>
<?php $myimg = get_post_thumbnail_id(); ?>
<meta property="og:image" content="<?php echo esc_url( wp_get_attachment_url( $myimg ) ); ?>">
<meta property="og:image:width" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['width'] ); ?>">
<meta property="og:image:height" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['height'] ); ?>">
<?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div class="MyGroundwork">
<?php if( has_nav_menu( 'primary' ) ): ?>
<nav class="MyNavigation">
<?php wp_nav_menu( array( 'rheme_location' => 'primary', ) ); ?>
</nav>
<?php endif; ?>
<header class="MyHeader">
<?php if( has_site_icon() ): ?>
<figure><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( get_site_icon_url( 64 ) ) ?>"></a></figure>
<?php endif; ?>
<p class="MyHeader-name"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<p class="MyHeader-description"><?php bloginfo( 'description' ); ?></p>
</header>
footer.php
<footer class="MyFooter">
© 1995 EasyWork-SYStem
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>ヘッダーファイルの読み込み
<?php get_header(); ?>フッターファイルの読み込み
<?php get_footer(); ?>
