ポートフォリオサイト公開中

【index.phpを分割する】自作ワードプレステーマの最低限を作る②

wp自作テーマの最低限

前回まで

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る①

現在のテーマ構造

bone/
├ index.php/
├ style.css/
└ functions.php/

今回変更するファイル

  • index.php
  • style.css
  • functions.php

今回新しく作るファイル

  • header.php
  • footer.php
  • sidebar.php

functions.phpの設定

スタイルシートをstyle.cssに書き込み、functions.phpでそのスタイルシートを読み込んでいきます。

style.css

前回記事のindex.phpのline:8~67をカット&ペーストしましょう

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る①
/*
theme Name: tomowarkar
*/


/*2カラムデザイン*/

body {
  margin: 0;
  background: lightgray;
}

header, footer {
  background: gray;
  height: 100px;
}

.content {
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  width: 1236px;
  margin: auto;
}

.main-content, .side-content {
  background-color: #fff;
  padding: 9px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
}

.main {
  width: 860px;
}

.sidebar {
  width: 356px;
}

@media screen and (max-width:1023px) {
  .content {
    display: block
  }
  div.main, div.sidebar {
    display: block;
    margin: 10px;
    width: auto
  }
  .main {
    width: 860px
  }
  .sidebar {
    width: 356px
  }
}

@media screen and (max-width:1240px) {
  .content {
    width: auto;
  }
  .main, .sidebar {
    margin: 0 .5%
  }
  .main {
    width: 67%
  }
  .sidebar {
    width: 30%
  }
}

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'base_style', get_stylesheet_directory_uri() . '/style.css' );
}

 

index.phpを分割する

index.phpを分割する前に、WordPressに必要な情報を設定できるように、wp_head()とwp_footer()を挿入していきます。

wp_head()は</head>の前に、wp_footer()は</body>の前に入れていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title></title>
<?php wp_head(); ?>
</head>
<body>
  <header></header>

<div class="content">
  <div class="main">
    <div class="main-content" style="height:60vh;"></div>
  </div>
  <!--/main-->

  <div class="sidebar">
    <div class="side-content" style="height:40vh;"></div>
  </div>
  <!--/sidebar-->

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

それではindex.phpを分割していきます。

  • header.php
  • footer.php
  • sidebar.php

以上の新しい3つのファイルを作成し、index.phpを含め4つのパーツに分割します。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title></title>
<?php wp_head(); ?>
</head>
<body>
  <header></header>

footer.php

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

sidebar.php

<div class="sidebar">
  <div class="side-content" style="height:40vh;"></div>
</div>

index.php

四つに分けたファイルを繋げるために、get_header()とget_footer(), get_sidebar()を挿入します。

get_header()とget_footer(), get_sidebar()はそれぞれheader.phpとfooter.php, sidebar.phpを読み込んでくれます。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content" style="height:60vh;"></div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

今回はここで完成です。

テーマを再度アップロードしてみましょう。

見た目は変わっていませんが、それぞれパーツに別れて表示されています。

この時点でのファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
└ footer.php/

自作ワードプレステーマの最低限を作るシリーズ一覧

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です