ワードプレス header footer sidebar.phpを作ってみる
header.phpの作成
サンプル
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class=”page-header”>
<div class=”header-area”>
<div class=”panel-site-title”>
<p class=”site-title”><a href=”<?php echo esc_url( home_url() ); ?>”><?php bloginfo( ‘name’ ); ?></a></p>
<p class=”site-subtitle”><?php bloginfo( ‘description’ ); ?></p>
</div>
<?php if ( has_nav_menu( ‘global’ ) ) : ?>
<?php wp_nav_menu( array(
‘theme_location’ => ‘global’,
‘menu_id’ => ‘global-menu’,
‘container’ => ‘nav’,
‘container_class’ => ‘global-nav’,
) ); ?>
<?php endif; ?>
</div>
</header>
基本的には最初に「index.php」で書き出したコードの<!DOCTYPE HTML>~</header>までを切り取って貼り付ければOKです。
ここでCSSは充てていませんが<head></head>内にそのままスタイルシートを充てても問題ありません。
そして「index.html」には<?php get_header(); ?>を記述し「header.php」を読み込むように設定します
footer.phpの作成
サンプル
<footer class=”page-footer”>
<div class=”footer-widget-area”>
<?php if ( is_active_sidebar( ‘footer’ ) ) : ?>
<ul class=”footer-widgets”>
<?php dynamic_sidebar( ‘footer’ ); ?>
</ul>
<?php endif; ?>
<div class=”back-to-top”>
<a href=”#”><img src=”<?php echo esc_url( get_theme_file_uri() ); ?>/images/arrow-up.png” srcset=”<?php echo esc_url( get_theme_file_uri() ); ?>/images/arrow-up.png ” alt=””>TOP</a>
</div>
</div>
<div class=”copyright”>
<p>Copyright © Co., Ltd.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
こちらも「index.html」には<?php get_footer(); を記述し「footer.php」を読み込むように設定します。
index.htmlは<?php get_footer();
となっていて終了タグは省略しています。
また、ここでは「トップに戻る」設定も組み込まれています。
sidebar.phpの作成
サンプル
<?php if ( is_active_sidebar( ‘sidebar’ ) ) : ?>
<ul class=”side-column”>
<?php dynamic_sidebar( ‘sidebar’ ); ?>
</ul>
<?php endif; ?>
header footerともにどこまで切り出していくかは個人見解ではありますが、とりあえず<div></div>は合わせておかないと、あとでレイアウトが崩れる恐れがあります。
では続いて個別投稿ページである「single.php」を作成してみましょう。
Leave a comment