1. TOP
  2. wordpress
  3. ワードプレス header footer sidebar.phpを作ってみる

ワードプレス 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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です