index.phpを分割する

2020年1月17日 (更新日:2020年4月15日)

index.phpを分割する:index.phpを分割する どうでしょ...


index.phpを分割する

どうでしょう。
ここまでちゃんとトップページが表示できたでしょうか。
ここまで表示出来たら次のsingle.phpを想定してindex.phpを分割します。
現在のindex.phpの中身は

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>
      <?php the_custom_logo(); ?>
      <?php
      if( display_header_text() ) {
        ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
        <?php
      } ?>
    </h1>
    <nav>
      <?php wp_nav_menu( array('menu' => 'Menu 1' )); ?>
    </nav>
  </header>

  <!-- header + nav -->
  <!-- .eye-catch -->

  <div class="eye-catch" style="background-image: url(<?php bloginfo('template_url'); ?>/images/eye-catch.jpg">
    image
  </div>

  <!-- .eye-catch -->
  <!-- main -->

  <main class="home clearfix">
    <h2>Contents</h2>

    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

        <div class="box1">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
        </div>

      <?php endwhile; ?>
      <?php else : ?>

        <div>
          <h6>記事が投稿されていません</h6>
        </div>

      <?php endif; ?>

    </main>

    <!-- main -->
    <!-- footer -->

    <footer>
      <p>Copyright (C) <?php echo date("Y"); ?> tatsuya-lab.com. All Rights Reserved.</p>
    </footer>

    <!-- footer -->
    <?php wp_footer(); ?>
</body>
</html>

これになります。
そしてこの内容を分けていきます。
分け方は大まかにタイトルとナビゲーションとコンテンツとフッターとに分けていきます。
これはウェブサイトのデザイン上タイトル周りとフッターはどのページでもデザインが共通のものが多く、phpではそのタイトル周りとフッターを分解してどのページでも同じデザインで表示させます。
まずheader.phpという名前でファイルを新規で作ります。

もう1つfooter.phpも同じように作ります。
index.phpの下記の部分を

header.phpにコピペ。

ほんとに上半分をコピー削除しますので最初は不安になりますが大丈夫です。
index.phpでコピーした部分は削除します。

続けてfooterの下記の部分を

footer.phpにコピペ。

そしてindex.phpのそれぞれ削除した部分に下記のコードを記述します。

まずはタイトル周りの部分に

 

<?php get_header(); ?>

と記述。
フッターの部分に

 

<?php get_footer(); ?>

と記述します。

ブラウザでプレビューしてみて崩れてないかチェックをして下さい。
崩れてなければ成功です。

最終的なファイルの中身です。

index.php

 

<?php get_header(); ?>

<!-- .eye-catch -->

<div class="eye-catch" style="background-image: url(<?php bloginfo('template_url'); ?>/images/eye-catch.jpg">
  image
</div>

<!-- .eye-catch -->
<!-- main -->

<main class="home clearfix">
  <h2>Contents</h2>

  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

      <div class="box1">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
      </div>

    <?php endwhile; ?>
    <?php else : ?>

      <div>
        <h6>記事が投稿されていません</h6>
      </div>

    <?php endif; ?>

  </main>

  <!-- main -->
  
<?php get_footer(); ?>

header.php

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>
      <?php the_custom_logo(); ?>
      <?php
      if( display_header_text() ) {
        ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
        <?php
      } ?>
    </h1>
    <nav>
      <?php wp_nav_menu( array('menu' => 'Menu 1' )); ?>
    </nav>
  </header>

<!-- header + nav -->

footer.php

 

<!-- footer -->

    <footer>
      <p>Copyright (C) <?php echo date("Y"); ?> tatsuya-lab.com. All Rights Reserved.</p>
    </footer>

    <!-- footer -->
    <?php wp_footer(); ?>
  </body>
  </html>