【第11回】Wordpress自作テーマ練習。ヘッダー・フッター設定をパーツ化
Wordpress自作テーマの練習の続きをやっていきます。
前回までの内容はこちら↓
↓こちらの参考書を参考にしながら自作テーマの練習をしています。
本日の内容
ヘッダー・フッター設定をパーツ化する
今日の内容はとても簡単です。
やることは「index.php」に書いてあったheaderタグとfooterタグを「header.php」と「footer.php」というファイル内にまとめてしまってそれを「index.php」から呼び出すような設定を行うだけです。
※↓イメージ図
「ヘッダーファイル」と「フッターファイル」を作成する
まずは「header.php」と「footer.php」というファイル名で「mythema」のフォルダに保存します。
そして、「header.php」には「index.php」に書いてあったheaderタグを全て切り取って貼り付けます。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>
<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="siteinfo">
<div class="container">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div>
</div>
</header>※<!DOCTYPE html>なども含めて切り取ります。
続いて、「footer.php」に「index.php」に書いてあってfooterタグを全て切り取って貼り付けます。
footer.php
<footer>
<div class="container">
<small>Copyright © <?php bloginfo( 'name' ); ?></small>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>「index.php」に「header.php」と「footer.php」を呼び出す関数を記述する
続いて「index.php」に以下の記述を行います。
<?php get_header(); ?>：header.phpを呼び出す関数
<?php get_footer(); ?>：footer.phpを呼び出す関数
index.phpは以下のようになります。
index.php
<?php get_header(); ?>
<div class="container">
<!-- カテゴリーの表示 -->
<?php if(is_category()):?>
<h1 class="archive-title"><i class="fa fa-folder-open"></i>【<?php single_cat_title();?>】に関する記事です。</h1>
<?php endif; ?>
<!-- 月別ページの表示 -->
<?php if(is_month()):?>
<h1 class="archive-title"><i class="fa fa-clock-o"></i>【<?php echo get_the_date('Y年n月');?>】に投稿した記事です。</h1>
<?php endif; ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<article <?php post_class(); ?>>
<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>
<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( ', ' ); ?>
</span>
</div>
<?php the_content(); ?>
<?php if( is_single() ): ?>
<div class="pagenav">
<span class="old">
<?php previous_post_link(
'%link',
'<i class="fa fa-chevron-circle-left"></i> %title'
); ?>
</span>
<span class="new">
<?php next_post_link(
'%link',
'%title <i class="fa fa-chevron-circle-right"></i>'
); ?>
</span>
</div>
<?php endif; ?>
<?php comments_template(); ?>
</article>
<?php endwhile; endif; ?>
<?php if ( $wp_query->max_num_pages > 1 ): ?>
<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div>
<?php endif; ?>
<div class="blogmenu">
<ul>
<?php dynamic_sidebar()?>
</ul>
</div>
</div> <!-- container -->
<?php get_footer(); ?>これで以下のように「index.php」から「header.php」と「footer.php」を呼び出せていることになります。
「page.php」にも同じことを行う
「page.php」に以下の記述を行います。
<?php get_header(); ?>：header.phpを呼び出す関数
<?php get_footer(); ?>：footer.phpを呼び出す関数
page.phpは以下のようになります。
page.php
<?php get_header(); ?>
<div class="container">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<article <?php post_class(); ?>>
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>
<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( ', ' ); ?>
</span>
</div>
<?php the_content(); ?>
</article>
<?php endwhile; endif; ?>
</div> <!-- container -->
<?php get_footer();?>以上で、「ヘッダー」と「フッター」の設定をパッケージ化して「index.php」と「page.php」から呼び出すことができました。
このようにヘッダー・フッターの設定をまとめておくことで同じホームページ内で同じヘッダー・フッターの仕様を使うことができて、とても便利です。
見た目は特に何も変わっていませんが、設定ミスがあると正しく表示されていない場合があるので最終確認はしておきましょう。
Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）
この記事が気に入ったらサポートをしてみませんか？