下記のようにindex.phpをheader.phpとfooter.phpとsidebar.phpに分割していきます。
分割することで、ファイルを共通化して効率よくメンテナンス・更新ができるようになります。
まずは、空のheader.phpとfooter.phpとsidebar.phpを新規作成してください。
上記のテンプレートはindex.php側(呼び出し側のファイル)で、以下の関数で呼び出すことができます。
各テンプレートの呼び出し方
- header.phpを「get_header();で呼び出します
- footer.phpを「get_footer();で呼び出します
- sidebar.phpを「get_sidebar();で呼び出します
目次
header.phpを作成してindex.phpに読み込ませる
まずはheader.phpを作っていきます。ここではヘッダー画像までを共通化したいので、index.phpから下記の部分を切り取り(削除して)、header.phpに貼り付けます。
■header.php (index.phpから切り取ってheader.phpに貼り付けするコード)
<head>
<meta charset="utf-8" />
<title>オリジナルテーマ</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css" />
<!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>
<?php wp_head(); ?>
</head>
<body>
<header class="bg-secondary-subtle">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">オリジナルテーマ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="top-vg" class="container-fluid">
<img src="<?php echo get_template_directory_uri(); ?>/image/top.jpg" alt="トップページ画像" />
</div>共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
次に、index.php上部(切り取りした部分)に<?php get_header(); ?>を追記して分割したheader.phpを読み込む設定をします。
■index.phpに追記するコード<?php get_header(); ?>
<?php get_header(); ?>
<!-- 上記が追記するコード -->
<section id="content">
...get_header()はWordPress独自の関数で、header.phpを読み込む処理をしてくれます。
footer.phpを作成してindex.phpに読み込ませる
つづけて、footer.phpを作成します。ここでは、<footer>から</html>までを切り取って(削除して)、footer.phpに貼り付けます。
■footer.php(index.phpから切り取ってfooter.phpに貼り付けするコード)
<footer>
<div class="container">
<p class="text-center mb-0">Copyright © PAM All Rights Reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
次に、index.phpの最終行(切り取りした部分)に<?php get_footer(); ?>を追記して分割したfooter.phpを読み込む設定をします。
■index.phpに追記するコード <?php get_footer(); ?>
...
</section>
<!-- 下記が追記するコード -->
<?php get_footer(); ?>get_footer()はWordPress独自の関数で、footer.phpを読み込む処理をしてくれます。
sidebar.phpを作成してindex.phpに読み込ませる
最後にsidebar.phpを作成します。ここでは、<div id=”sidebar” class=”col-md-3″>タグの中身を切り取って、sidebar.phpに貼り付けます。
■sidebar.php(index.phpから切り取ってsidebar.phpに貼り付けするコード )
<section>
<h2>ホームページ作成</h2>
<p><img src="<?php echo get_template_directory_uri();?>/image/banar.jpg" alt="バナー画像" /></p>
</section>
<section>
<h2>TikTok配信中</h2>
<p><img src="<?php echo get_template_directory_uri();?>/image/tiktok.jpg" alt="Tiktokサンプル画像" /></p>
</section>
</div>
</div>
</section>共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
つぎに、index.phpの<div id=”sidebar” class=”col-md-3″>タグの中に(切り取りした部分)に<?php get_sidebar(); ?>を追記して分割したsidebar.phpを読み込む設定をします。
■index.phpに追記するコード <?php get_sidebar(); ?>
...
<div id="sidebar" class="col-md-3">
<?php get_sidebar(); ?>
<!-- 上記が追記するコード -->
</div>
...get_sidebar()はWordPress独自の関数で、sidebar.phpを読み込む処理をしてくれます。
最後に表示がうまくいっているかを確認しましょう。トップページを表示してこれまで通り画面が正常に表示されていれば完了です。
チェックテスト
チェックテストを確認する
オンラインテキスト記載の通り、index.phpをheader.phpとfooter.phpとsidebar.phpに分割し、githubへpushしリモートリポジトリのリンクをdiscordで共有ください。
※リモートリポジトリ名は「wordpress」とし、オリジナルテーマフォルダのみをpushしてください。
