最小構成で学ぶ!WordPressのブログテーマを自作する手順

勉強がてら、WordPressのテーマを自作してみました。せっかくなので手順を書いておきます。

WordPressのテーマの自作手順

自分がテーマを自作した際の手順は以下の通りです。

  1. まずHTMLでマークアップ
  2. HTMLをテンプレートタグに変換
  3. CSSで装飾
  4. テーマのインストール

1. まずHTMLでマークアップ

まずはどんなブログにしたいかの構想を練ります。自分は以下のようなブログにしようと考えました。

  • レスポンシブデザイン
  • 1カラム
  • なるべくシンプルに
  • HTML5/CSS3に準拠

構想が練れたら、早速HTMLでブログサイトを作成していきます。

ここで必要となるのはテキストエディタです。OSがWindowsであれば「メモ帳」や「ワードパッド」というテキストエディタが既にインストールされていますが、これらは低機能なのでオススメできません。ちなみに自分はフリーウェアの「サクラエディタ」というテキストエディタを使わせていただいております。

テキストエディタを用意したら、任意のフォルダに「index.html」というファイル名でテキストファイルを作って更新していきます。

構想に沿ってHTMLでマークアップしてみた結果が以下になります。HTML5に準拠することを意識してみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ブログタイトル</title>
<link rel="stylesheet" href="CSSのURL">
</head>
<body>
<header>
<h1><a href="ブログのURL">ブログタイトル</a></h1>
</header>
<nav>
<ul>
<li>カテゴリ1</li>
<li>カテゴリ2</li>
<li>カテゴリ3</li>
</ul>
</nav>
<main>
<article>
<h2><a href="記事のURL">記事のタイトル</a></h2>
<time>更新日 更新日時</time>
<div class="category">カテゴリ</div>
<div class="article"></div>
</article>
<div id="pager">
<div id="pager-prev">前の記事</div>
<div id="pager-next">次の記事</div>
</div>
</main>
<footer>
<small>© 2017 <a href="ブログのURL">ブログタイトル</a></small>
</footer>
</body>
</html>

こちらをブラウザで開いてみてください。何だか素っ気ないウェブサイトが表示されたと思います。しかしHTMLは文書の構造化を担当し、CSSは見た目を担当しているため、この段階ではこれで大丈夫です。

2. HTMLをテンプレートタグに変換

HTMLが完成したら、HTML内の実際の値が入る部分をWordPressのテンプレートタグに置き換えていきます。公式のリファレンスが充実しているので、逐次参考にしながら作業を進めると良いです。

テンプレートタグ – WordPress Codex 日本語版

自分の行った結果は以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php if ( is_home() ) { bloginfo(); } else {
wp_title(""); ?> | <?php bloginfo(); } ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<header>
<h1><a href="<?php echo home_url() ?>"><?php bloginfo() ?></a></h1>
</header>
<nav>
<ul>
<?php wp_list_categories("title_li="); ?>
</ul>
</nav>
<main>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<time><?php the_date(); ?> <?php the_time(); ?></time>
<div class="category"><?php the_category("") ?></div>
<div class="article"><?php the_content('[続きを読む]'); ?></div>
</article>
<?php endwhile; ?>
<div id="pager">
<div id="pager-prev"><?php previous_posts_link("前の記事"); ?></div>
<div id="pager-next"><?php next_posts_link("次の記事", ""); ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p><?php _e("記事が見つかりませんでした。"); ?></p>
<?php endif; ?>
</main>
<footer>
<small>© 2017 <a href="<?php echo home_url() ?>"><?php bloginfo() ?></a></small>
</footer>
</body>
</html>

タグを置き換えたら、ファイル名を「index.html」から「index.php」に名前を変更しておいてください。

3. CSSで装飾

テンプレートタグを実装し終わったら、いよいよCSSで見た目を良くしていきます。ファイル名は「style.css」となります。

なお、自分は「Google HTML/CSS Style Guide」に従うことを意識して作業しました。

@charset "utf-8";
/*
Theme Name: 〇〇〇
*/
/***** 全体の設定 *****/
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
color: #454545;
font: 15px 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
margin: auto;
width: 90%;
}
a {
color: #1487bd;
}
a:hover {
color: #0f5373;
}
a:visited {
color: #789dae;
}
/***** ヘッダ部 *****/
header {
margin: 50px;
text-align: center;
}
header a,
header a:visited {
color: #454545;
text-decoration: none;
}
/***** ナビゲーションバー *****/
nav ul {
list-style-type: none;
margin: 20px;
text-align:center;
}
nav ul li {
background: #aaa;
border-radius: 3px;
display: inline-block;
margin: 2px;
padding: 3px 5px;
}
nav ul li a,
nav ul li a:visited {
color: #fff;
font-size: 70%;
text-decoration: none;
}
/***** メイン部 *****/
article {
overflow: hidden;
}
h2 {
font-size: 150%;
margin: 1rem 0;
}
h2 a,
h2 a:visited {
color: #454545;
text-decoration: none;
}
time {
font-weight: bold;
margin: 1rem 0;
}
.category {
font-size: 80%;
margin: 1rem 0;
}
.category a {
background: #aaa;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 70%;
margin-right: 2px;
padding: 3px 5px;
text-decoration: none;
}
.article {
line-height: 2rem;
}
.article h3 {
border-bottom: solid 1px;
border-left: solid 20px;
font-size: 120%;
margin-top: 30px;
padding: 5px 5px 5px 15px;
}
.article p {
margin: 1rem 0;
}
.article blockquote {
border: 1px solid;
font-style: oblique;
padding: 0 10px;
margin: 0 10px;
}
.article ol li {
list-style: decimal;
margin-left: 30px;
}
.article ul li {
list-style: circle;
margin-left: 30px;
}
#pager {
margin: 1rem 0;
text-align: center;
}
#pager a {
background: #aaa;
border-radius: 3px;
color: #fff;
display: inline-block;
margin-right: 2px;
padding: 3px 5px;
text-decoration: none;
}
#pager:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
#pager-prev {
display: inline-block;
float: left;
text-align: left;
width: 45%;
}
#pager-next {
display: inline-block;
float: right;
text-align: right;
width: 45%;
}
/***** フッタ部 *****/
footer {
margin: 50px;
text-align: center;
}
footer small {
font-size: 80%;
}
footer a,
footer a:visited {
color: #454545;
text-decoration: none;
}

最低限の装飾ですが、こんなものでしょうか。WordPressのテンプレートタグが最終的にどんなタグに展開されるかが、この段階では分かりにくいと思いますのでわかる範囲で大丈夫です。

4. テーマのインストール

上記の「index.php」および「style.css」が完成した時点でテーマが動作するようになります。最小構成はこの2ファイルがあればいいということですね。

この2ファイルをテーマ名を冠したフォルダに入れてzip化したら準備は完了です。wordPressの管理画面にログインし、外観 > テーマから「新規追加」を押下後、「テーマのアップロード」ボタンで先ほどのzipファイルをアップロードすれば自作テーマのインストールができます。

あとは、URLにアクセスして実際に表示してみながらHTMLやCSSを調整していきます。外観 > テーマの編集 からHTMLやCSSを編集できます。

終わりに

最低構成ではありますが、今回でWordPressのブログの骨組み部分が完成しました。次回からは細かいパーツを作成してより使いやすいブログにしていこうと思います。あとはCSSにもこだわっていき、カッコいいブログにしていければいいなぁ。