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>
関連記事
テンプレートタグ
single.phpを作る
WordPress5.5アップデートは新機能追加で新リリース
検索結果用のページsearch.php
WordPress Popular Postsがウィジェット保存できない原因
【独学で充分 CMS】single.phpのカテゴリー別で表示する条件分岐
サイト内検索をつくる
CMSにおけるWordPressの役割
ワードプレス おすすめ簡単スライダー【プラグイン】
ワードプレスのテンプレートをDIY【CMS カスタマイズ】
【ワードプレス ウィジェット】純正カレンダー日曜日から始まるようにする
ワードプレス固定ページ【テーマ オリジナル】
WordPressを使ってみる
いよいよWordPressインストール
CSSの中でphpコードを使う【アイキャッチ背景画像】