たったこれだけ！超簡単WordPressテーマ自作手順（ホームページ編）

どうも、ハヤタコウヘイ(@hayatastic)です。

今回は宇宙一簡単なWordPressテーマの自作手順を説明します。

なぜこの記事を書こうと思ったかと言うと、僕自身初めてオリジナルWordPressテーマの作り方を調べた時に、初心者向けと謳っていても難しく感じる記事が多かったからです。

なので、ほんとに初めてWordPressテーマを自作するという方が見ても理解しやすいように、最低限これだけあれば機能するという部分だけをかいつまんで説明します。
さらに詳しくWordPressのことを勉強したい方はほかのブログを見てね。

というわけで、この記事を読めば初めての方でもあっという間にWordPressテーマを自作できるよ！

index.htmlとstyle.cssを作る

まずは元となるホームページをhtmlとcssで作りましょう。これがないと始まりません。

あ、あらかじめ言っておきますが、この記事はhtmlとcssは書けてWordPressも使ったことあるけど、テーマのカスタマイズや自作はしたことないという人向けの記事です。わからない人は勉強してね。

さて、ここで気をつけないといけないのは、WordPressはstyle.cssをテーマフォルダの直下に置かないと動作しないということです。
cssというフォルダを作ってその中に入れてはダメです。
ファイル名もcommon.cssでもbase.cssでもダメです。
必ずstyle.cssで作成してください。

html


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ホームページタイトル</title>
  <meta name="description" content="ここに説明が入ります。">
  <link rel="stylesheet" href="style.css">
  〜〜ここにいろいろ入ります。〜〜
</head>

<body>

  <header>
    <h1>ホームページタイトル</h1>
    <nav>
    ここにメニューが入ります。
    </nav>
  </header>

  <main>
  ここにメインコンテンツが入ります。
  </main>

  <aside>
  サイドバーがある場合はここにサイドバーの内容が入ります。
  </aside>

  <footer>
  ここにフッターの内容が入ります。
  </footer>

</body>

</html>

↑今回はサンプルとして上記の簡単なhtmlをWordPress化していきます。
サイドバーはないよ！って人はそこらへんは読み飛ばしてください。

style.cssにテーマの情報を記入する

さて、まず最初にstyle.cssにWordPressとして必要な情報を記入します。

css


/*
Theme Name: テーマの名前
*/

上記のコードを@charset “UTF-8”;の下に記入してください。
これでstyle.cssは完成です。
他にも

css


Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ
License: テーマのライセンス
License URI: テーマのライセンスのURI

などがありますが、必須ではないのでお好みでどうぞ。

header.phpを作る

それではindex.htmlを必要なパーツに切り分けていきます。
header.phpはその名の通りヘッダーの部分になります。
ぶっちゃけ切り分けなくてindex.phpだけでも動作するんですが、パーツ分けして管理しないとあんまりWordPressで構築する意味ないので、切り分けましょう。

まずはindex.htmlの1行目から共通ヘッダーとして使いまわしたい部分をカットして、新たにheader.phpとして保存します。
そして</head>の上に<?php wp_head(); ?>と記入してください。

なぜかって？そーゆーもんだからです。

次に<title>の部分は削除し、functions.phpに下記を追記してください。

php


function setup_theme() {
  add_theme_support( 'title-tag' );
}

そしてdescriptionの部分に<?php bloginfo(‘description’); ?>と記入、さらに<h1>の部分に<?php the_title(); ?>と記入します。

最期にstyle.cssの部分を<?php echo get_stylesheet_uri(); ?>に変えてください。

これでheader.phpは完成です。

php


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="<?php bloginfo('description'); ?>">
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  〜〜ここにいろいろ入ります。〜〜

  <?php wp_head(); ?>

</head>

<body>

  <header>
    <h1><?php the_title(); ?></h1>
    <nav>
    ここにメニューが入ります。
    </nav>
  </header>

↑こんな感じになってれば大丈夫です。
各タグの意味は使われてる場所を見ればわかると思うので、説明は省略します。

footer.phpを作る

次はフッターとして使いまわしたい部分をfooter.phpとして保存します。
普通は<footer>から</html>までだと思います。

そして</body>の直前に<?php wp_footer(); ?>を記入します。
これも<?php wp_head(); ?>と一緒で、かならず必要なものということだけ覚えていれば大丈夫です。

php


  <footer>
  ここにフッターの内容が入ります。
  </footer>

  <?php wp_footer(); ?>

</body>

</html>

↑footer.phpはこんな感じです。

sidebar.phpを作る

サイドバーがある方はsidebar.phpが必要です。
<aside>から</aside>までの部分をsidebar.phpとして保存しましょう。

php


  <aside>
  ここにサイドバーの内容が入ります。
  </aside>

↑一応こんな感じです。わざわざ説明するまでもないけど。

index.phpを作る

さて、いよいよ本体であるindex.phpを作ります。
いろいろパーツごとに切り分けたので、index.htmlの中身は<main>から</main>までしか残ってないはずです。
このままだと当然表示されないので、テンプレートタグと呼ばれるWordPressを動作させるためのタグを挿入していきます。
下記のようにテンプレートタグを挿入してください。

php


<?php get_header(); ?>

<main>
  ここにページの内容が入ります。
</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

↑こんな感じです。

以下、各タグの説明です。

<?php get_header(); ?>: header.phpを呼び出すタグ。
<?php get_sidebar(); ?>: sidebar.phpを呼び出すタグ。
<?php get_footer(); ?>: footer.phpを呼び出すタグ。

これでトップページができました。簡単ですね。

page.phpを作る

さて、最後に固定ページ用のテンプレートパーツであるpage.phpを作ります。
WordPressでサイトを運用する場合はこの固定ページを追加することで子ページを増やしていきます。
下記のような感じで作成してください。

php


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

<?php the_content(); ?>
  
<?php endwhile; endif; ?>
 
</main>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

↑たったこれだけです。チョーカンタンですね。

<?php if(have_posts()): while(have_posts()):the_post(); ?>: ざっくり言うと、ここに書いたWordPressの処理を実行するよー！というタグです。
これを書いてないと内容が表示されません。
<?php the_content(); ?>: 実際に固定ページの内容を表示するタグです。
ここに、ダッシュボードで編集した内容が表示されます。
<?php endwhile; endif; ?>: これもざっくり言うと、WordPressの処理はここで終わりだよー！というタグです。
これも忘れずに記述してください。

おわりに

以上、とりあえずこれだけあれば動くよ！という部分だけをかなりざっくりと説明してきました。
他にもいろいろあるんで、カスタマイズしていく中でちょっとずつ調べていけばいいと思います。

質問・ご意見・ご感想は@hayatasticまでお願いします！

では次回はブログ編を書きます。お楽しみに。