下記のように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に貼り付けするコード)
<!DOCTYPE html>
<html lang="ja">
<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" />
<?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="#">WEBST8</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(); ?>/images/top.jpeg" 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 © Webst8 All Rights Reserved.</p>
</div>
</footer>
<?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(); ?>/images/webst8-banar.png" alt="バナー画像" /></p>
</section>
<section>
<h2>YouTubeチャンネル開設</h2>
<p><img src="<?php echo get_template_directory_uri(); ?>/images/webst8-youtube.png" alt="WEBST8のYouTubeチャンネル画像" /></p>
</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を読み込む処理をしてくれます。
最後に表示がうまくいっているかを確認しましょう。トップページを表示してこれまで通り画面が正常に表示されていれば完了です。
チェックテスト
チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。
