WordPress オリジナルテーマの作り方【まとめ】

はじめに

じろうです、仕事でWordPressのテーマを作ることになったので、色々と調べていると上手くまとまっている記事が無かったので書こうと思います。
個人的にはWordPressのテーマを作る仕事は好きですが(給料が良いため)WordPress自体あまり好きではありません。
そんなことより僕にコーディング案件をください。

1.HTML/CSSでサイトのデザインを作る

とりあえずWordPressのことは考えずにHTML/CSSでサイトのデザインを作っていきましょう

いつもの感じでディレクトリ構成はこんな感じ

index.html -> トップページ
single.html -> 記事が表示されるページ
css/ -> cssファイルを入れておくフォルダ
img/ -> 画像の素材を入れておくフォルダ

1-1トップページのデザインをする(index.html)

まずWordPressに必要なページはトップページです。
ざっとこんな感じ

ヘッダーにはカテゴリを取得してナビゲーションバーに表示したいのでいい感じにデザインしました。

トップページは記事のサムネイルとタイトルのみを表示するデザインにしました

サイドバーは記事のアクセスランキングを表示するためにデザインしました

フッターもシンプルに

1-2 記事を表示するページを作る(single.html)

次に記事を表示するページを作ります。

とりあえず<h2>と<h3>と<code>のスタイルだけかいておきました。

ちょっとめんどくさいのでコメントフォームとコメント一覧は作りませんでした。

2.WordPressテンプレート化する

大体デザインができたのでWordPressテンプレート化していく作業に入ります。
まずはディレクトリを整理します。

先程作ったindex.htmlとsingle.htmlをhtml/にコピーして、元のファイルをindex.phpとsingle.phpにリネームしておきます。
そして、ごちゃごちゃしてしまったcss/内のファイルをstyle.cssにまとめます。

いちいちstyle.cssにコピペするのはだるいので簡単にphpでスクリプトを書きます。

make.php

<?php
unlink('../style.css');
$dir = '../css/';
$files = array_diff(scandir($dir), array('..', '.','.DS_Store'));
foreach ($files as $file) {
$contents = file_get_contents($dir.$file);
file_put_contents('../style.css', $contents,FILE_APPEND);
}

※macなのでDS_Storeを殺しています
これをhtml/内に置いておいてターミナルから php make.php で実行すればcss/内の.cssファイルを全てstyle.cssにまとめてくれます。

これでstyle.cssも生成できたしもう使えるやろ！と思ったあなた、大間違いです

2-1 style.cssに決まり文句を書く

WordPressテーマとして使うにはstyle.css内に決まり文句を記述する必要があります。

/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Author: テーマの作者
Author URI: テーマの作者のURL
Description: テーマの説明
Version: テーマのバージョン
License: ライセンス
License URI: ライセンスのURL
*/

テーマの名前は最低限必要なので必ず書いておきましょう。(書いておかないとWordPressに起こられてテーマを使うことができません)

2-2 テーマを有効化していこう

まずはcssを読み込んでいる部分を変えていきましょう

<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/top.css">

となっている部分を

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

に変えます。
これはテンプレートタグと言って、WordPress側が色々やってくれるものです。

get_template_directory_uri … テンプレートのあるディレクトリ URI を取得します。つまりテーマディレクトリです。
get_stylesheet_uri … style.css の URI を取得します。

これでとりあえずWordPress側にアップロードすると使えるようになっています。

2-3 色々と分割してみよう

WordPressサイトなどの特徴として、ヘッダー、フッター、サイドバーなどを分割して別々のファイルとして保存して色々なところで読み込むことができます。
これをすることによって、ヘッダーのみを編集したいときなどに便利です。

ヘッダーはheader.php
フッターはfooter.php
サイドバーはsidebar.php

に中身を切り離して保存しました。

/切り離した画像/

2-4 分割したファイルを埋め込んでいこう

まずは分割したファイルたちを読み込んでいきます

ヘッダー
<?php get_header(); ?>
サイドバー
<?php get_sidebar(); ?>
フッター
<?php get_footer(); ?>

こいつらをそれぞれ元あった位置に記述してあげます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<title>reizou05</title>
</head>
<body>
<?php get_header(); ?>
<div class="content">
/* 省略 */
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
</body>
</html>

2-5 タイトルとかを表示してみよう

次はタイトルを表示してみましょう。

タイトルを表示するテンプレートタグは

bloginfo('name') … サイト名を表示する
bloginfo('description') … 紹介文を表示する
home_url() … トップページの URL を取得する

これを組み込んでいくと

index.php
<title><?php bloginfo('name'); ?></title>
header.php
<a href="<?php echo home_url('/'); ?>">
<h1><?php bloginfo('name'); ?></h1>
</a>

という感じになります。

とりあえず

とりあえずWordPressテンプレート自作入門基礎編はこんな感じです！
あとはてきとうに「wordpress サムネイル取得」とかでググったりして必要なものを埋め込んでいく作業です！今回つくった簡単なテンプレートはgithubにあげてあるので、必要になったら見てみてください！