WordPressのパーツファイルとは？
こんにちはあっくんです。今日からアルバイトに行くことにしました。アルバイトは台湾カステラを製造するキッチンで今日はレクチャーを受けました。作り方はおそらく店によって違うと思うのとそもそも台湾カステラとは？というところから知りたいと思いました。まず、カステラと台湾カステラはどう違うかを調べてみようと思います。今回は、WordPressの個別投稿ページはsingle.phpでパーツファイルとは？をやっていきましょう。
パーツファイルとは？
パーツファイルとは、サイトのヘッダーやフッターやサイドバーを分けてテンプレートファイルにします。テンプレートファイルにパーツファイルを作ることで、ページ毎にヘッダーやフッターなどをテンプレートファイルのパスを通して記述することができます。
header.php
header.phpはheadタグの中だけ、パーツファイルにして、一括管理します。
header.phpを使ってパーツファイルにします。
中身をindex.phpのheadタグの中のコードを記述します。
header.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><?php the_title() ?></title>
<!-- Bootstrap core CSS -->
<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="<?php echo get_template_directory_uri(); ?>/vendor/fontawesome-free/css/all.min.css" rel="stylesheet"
type="text/css">
<link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link
href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="<?php echo get_template_directory_uri(); ?>/css/clean-blog.min.css" rel="stylesheet">
<?php wp_head(); ?>Code language: HTML, XML (xml)footer.php
footer.phpはbodyタグの下のJavaScriptの読み込みなどを記述します。
footer.php
<!-- Bootstrap core JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="<?php echo get_template_directory_uri(); ?>/js/clean-blog.min.js"></script>Code language: HTML, XML (xml)header.phpを呼び出すテンプレートタグは<? php get_header();?>を使います。
footer.phpの呼び出すテンプレートタグは<?php get_footer();?>を使います。
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<?php get_header(); ?>
</head>
<body>
<?php get_template_part('includes/header') ?>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog <?php echo date('Y') ?></h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-preview">
<a href="<?php the_permalink(); ?>">
<h2 class="post-title">
<?php the_title(); ?>
</h2>
<h3 class="post-subtitle">
<?php the_excerpt(); ?>
</h3>
</a>
<p class="post-meta">Posted by
<a href="#"><?php the_author(); ?></a>
<?php the_time('Y/m/d') ?>
</p>
</div>
<hr>
<?php endwhile; ?>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
<?php else : ?>
<p>記事が見つかりませんでした。</p>
<?php endif; ?>
</div>
</div>
</div>
<hr>
</body>
<?php get_template_part('includes/footer') ?>
<?php get_footer(); ?>
<?php wp_footer(); ?>
</html>Code language: HTML, XML (xml)テーマのディレクトリのURLを取得
テーマのディレクトリのURLを取得するにはget_template_directory_uri()を使います。
テーマのディレクトリを取得をするので、ディレクトリ名やドメインが変更しても設定に沿って出力されます。
ヘッダーやフッター以外もパーツ化
ヘッダーやフッター以外のナビゲーションやフッターを任意のパーツ化します。
新しいフォルダでincludesと作りheader.phpやfooter.phpを配置してナビゲーションとフッターを格納します。
パーツ化したヘッダーやフッターの呼び出しは、get_template_part()を使います。
ここまで読んでいただいてありがとうございます。
使い回すことのできるコードはテンプレートファイルや任意のファイルを作ることで、コードの記述量が減らすことができますね。