「WordPress（ワードプレス）を使ってオリジナルブログを作成してみたいけれど、難しそう・・。」そう思っている人は多いことと思います。
WordPressは、HTMLやCSSの他に、PHPというプログラミング言語を使っているため、少し敷居が高く感じてしまうことがあります。
しかし、PHPがわからなくても、ある程度のHTMLとCSSの知識があれば、初心者でも簡単に既存のテーマをカスタマイズできたり、オリジナルテーマを作成したりできるのが、WordPressが人気の理由のひとつなのです。
今回は、PHPが全くわからないWordPress初心者でも、オリジナルテーマを作成できるようになるための手順を、参考記事やオススメの書籍と共にまとめています。
この記事を読めば、WordPressでオリジナルテーマを作成するための全体的な流れをつかみ、すぐにでもテーマ作成やカスタマイズができるようになるはずです。
（尚、WordPressテーマ作成手順に絞って流れをまとめているので、HTMLやCSSについてはあまり触れていません。）
WordPressの準備編
WordPressでオリジナルテーマを作成する最初のステップは、ファイルをダウンロードしてインストールするところから始まります。
WordPressファイルのダウンロード
早速WordPress本体のファイルをダウンロードしましょう。
本体ファイルは、WordPressの公式サイト（日本語）から最新版がダウンロードできます。
ファイルのダウンロードが完了したら解凍して、フォルダにはわかりやすいように好きな名前を付けておきましょう。
ローカル環境を構築してWordPressをインストール
WordPressは、PHPでできている為そのままブラウザでひらいても見ることができません。
PHPファイルをブラウザで確認するためには、PHPとデータベースを動かすためにApacheやMySQLが必要になります。
オリジナルテーマを作成するために、まずはPHPを動かすことができるローカル環境を自分のPCに構築して、ローカルで作成をしていきます。
ローカル環境を構築し、WordPressをインストールして動かすには、MAMPというソフトの利用がおすすめ。
»初心者必見！ローカル環境でWordPressを動かす方法（MAMP）
ローカル環境の構築は、他にも様々な方法がありますが、初心者のうちはMAMPなどを使った方法が一番簡単、かつ手軽です。
WordPressによるオリジナルテーマ作成編
ローカル環境を構築して、ブラウザでWordPressファイルが見られるようになったら、早速オリジナルテーマ作成を進めていきます。
オリジナルテーマ作成
基本的な制作の流れとしては、
1.デザイン
2.HTML＋CSSによるコーディング
3.WordPress用にテーマを作りかえる
4.サーバーにアップする
というのが一番作成しやすいと思います。
慣れてきたら、HTML＋CSSによるコーディングとWordPress化を、同時に進めることができるようになりますが、最初は構造を理解する為にも順序立てて作成したほうがいいでしょう。
WordPressでWebページが生成される仕組み
WordPressは、読み込むファイルを部分ごとに作ることができます。
なのであらかじめ、Webサイトのパーツごとのファイルを呼び出すことで１つのWebページが表示されます。
基本的な構成ファイルとしては
- index.php
- header.php
- sidebar.php
- footer.php
- function.php
上記の５つのファイルから構成されます。
これらのファイルが組み合わさって１つのWebページを制作することができます。
これらはそれぞれ
- index.php:トップページに表示されるファイル
- header.php：metaタグや、title、ヘッダーなどの情報が入っている
- sidebar.php：サイドバーの情報が入っている
- footer.php：フッター情報が入っている
- function.php：プラグインやダッシュボードなどの設定をする
以上のような情報が記述されています。
呼び出すコードをみる
それでは各ファイルを呼び出して見ましょう。以下のコードで各ファイルを呼び出すことができます。
- <?php get_header(); ?>：header.phpを呼び出す
- <?php get_footer(); ?>：footer.phpを呼び出す
- <?php get_sidebar(); ?>：sidebar.phpを呼び出す
また自分で名前をつけたファイルは
- <?php get_template_part(‘ファイル名.php’); ?>：ファイル名.phpを呼び出す
を使うことで呼び出すことが可能です。
ファイル構造としては以下のようになっています。
テーマファイル
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── function.php
└── style.css
ファイルは全て同じディレクトリ上にあります。
本当に呼び出せるのか確認してみる
さてでは先ほどコードが正しいのかシンプルなコードを見て確認してみましょう。
index.php
<?php get_header(); ?> <div id="main"> <p>メインコンテンツ</p> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
header.php、<head>などの情報も記述されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" >
<title> <?php bloginfo('name'); ?> </title>
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
sidebar.php
<div id="sidebar"> <p>サイドバー</p> </div>
footer.php
<div id="footer"> <p>フッター</p> </div> </body> </html>
style.css
#header,#sidebar,#main,#footer{
border:solid 1px #000;
margin:10px;
}
実際に実行してみると、下の画像のようになります。
これを見てもらうと、実際にヘッダーやフッターがindex.phpに呼び出されたことを確認していただけたと思います。
トップページを作ってみる(index.php)
各ファイルが呼び出し方が、おわかりいただけましたでしょうか？
さて今度は先ほどの内容を踏まえて、よりWordpressらしいページを解説していきたいと思います。
以下の画像のページについてご説明いたします。
このページのコードは先ほど全く違うコードになります。
なのでindex.php、header.phpなどの各ファイルを、１つずつ確認していきたいと思います。
index.php
まずindex.phpの内容から
<?php get_header(); ?> <div id="main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div > <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
さて見てみるとなにやら「訳のわかないコードがいっぱいだ…」と思う方もいっらしゃるかと思いますが、１つ１つ解説していきます。
まずはコードの中央にあるものから見ていきましょう。
- <?php the_permalink(); ?>：個別記事へのリンク
- <?php the_title(); ?>：個別記事のタイトル
- <?php the_content(); ?>：個別記事の本文
このようになっています。
そして次に
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> //さっき説明したもの省略 <?php endwhile; endif; ?>
先ほど説明をしたものを抜いて、残ったこれらのコードについてご説明いたします。
これらのコードは中央にある内容を、
「Wordpressにある記事数分だけ表示する」
という内容です。中央にあるものは記事のタイトルと本文なので、コード全体の意味は
WordPressにある記事のタイトルと本文を全て表示する
ということです。
ここまでがindex.php内のメインコンテンツ部分の説明でした。
次にヘッダーを制作しましょう。
header.php
こちらもまず全体のコードを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
<title>
<?php bloginfo('name'); ?>
</title>
</head>
<body>
<div id="page">
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<img src="<?php bloginfo('template_url'); ?>/top.png" width=1024px>
</div>
さて、こちらのコードも普段のhtmlでは見られないものが多くありますね。
見慣れないコードとそれぞれに意味をまとめています。
- <?php bloginfo(‘name’); ?>：ブログのトップページのurl
- <?php bloginfo(‘description’); ?>：ブログのサブタイトル
- <?php bloginfo(‘template_url’); ?>：テーマのアドレス
このようになっています。
１つ注意点を言っておくと画像やテーマを引用する際は<?php bloginfo(‘template_url’); ?>でテーマのアドレスを指定してその後に画像があるディレクトリを指定する必要があるので注意して下さい。
footer.php
<div id="footer"> <p>Copyright © Uetani Ryota All Rights Reserved.</p> </div> </div> </body> </html>
今回のfooterに関しては、普通のhtmlと同様のものです。特にWordpress独特の内容はありませんね。
サイドバーについて
さてサイドバーですが、ダッシュボードのウィジェットの設定を反映させるようにしてみましょう。
まず初めにダッシュボードウィジェットを表示させるためfunction.phpに以下を記述する必要があります。
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
これでダッシュボードでウィジェットが表示されます。
次にウィジェットの内容をsidebar.phpに表示させます。
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li>
<h3>Categories</h3>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<div id="clearfix"></div>
これでウィジェットの設定がsidebar.phpに反映されるようになりました。
style.cssについて
最後に解説しているページのcssソースを掲載しておきます。
@charset "utf-8";
/*
Theme Name: Original
*/
#page{
width:680px;
margin:0 auto;
}
#header{
margin-bottom:10px;
background:#fff;
}
#main{
width:500px;
float:left;
}
#main div{
width:500px;
height:100px;
background:#fff;
margin-bottom:5px;
}
#main div h2{
margin-bottom:10px;
}
#main div p{
margin-bottom:10px;
}
#sidebar{
width:170px;
float:right;
background:#fff;
}
#footer{
margin-top:0px;
text-align: center;
background:#fff;
}
ul,li{
list-style-type:none;
}
li h2{
text-align: center;
border-bottom:solid 1px #eee;
margin:5px 0;
}
li{
margin:2px 0;
}
#clearfix{
content:".";
display:block;
clear:both;
}
body {
font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;
font-size:15px;
background:#f2f2f2;
color:#1f1f1f;
}
a{
text-decoration: none;
color:#0000ff;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
form,input,p,blockquote,th,td {
margin:0;
padding:0;
}
img {
border:0;
vertical-align: top;
}
見ていただくと基本的には普通のcssであるということがわかります。
ですが、Wordpressのstyle.cssを記述する時は１つだけ注意点があります。
style.cssの冒頭に以下のコメントアウトがあります。
/* Theme Name: Original */
ここではWordpressのテーマの名前を記述します。
ここを記述しておかないとWordpressのテーマの名前が制作に反映されなかったり、プラグインに不具合が起こったりしますので、必ず記述するようにしてください。
ちなみにここまご説明しましたが、ざっと、どういう風に作っていけばいいのかは、Stocker.jpさんの記事が非常にわかりやすいです。
おそらく最もわかりやすいWordPressテーマ制作チュートリアル | Stocker.jp / diary
上記の記事を読んで実行するだけで、基本的なブログは完成するはずです。
ここまででも、良いのですが、自分が使いやすいようにカスタマイズしたり、オリジナルな機能をつけたりするために、もう少しだけ深い部分も知っておくと便利なので紹介します。
条件分岐やテンプレートタグ＆テンプレートファイルを理解する
WordPressでは、「条件分岐」を使うことにより自由にカスタマイズすることが可能になります。
条件分岐は、プログラミングをかじったことがある人なら、とても基本的なものですが、初めて触る人には、ちょっとむずかしいかもしれません。
WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
また、WordPressには「テンプレートタグ」や「テンプレートファイル」というものがあり、とても簡単に欲しい機能や欲しいページを作ることができるのも、初心者でも運用しやすい点です。
テンプレートタグ
テンプレートタグは、記事のタイトルやリンクを表示させたり、記事一覧やカテゴリー一覧を表示させたりするのに使うWordPress専用のタグです。
テンプレートタグを使用すれば、本来PHPでプログラムを書かないとできないことが、タグを書くだけで簡単にできてしまうのです。
ただ、数がかなりあるので覚えるのが大変です。なので、初めのころは必要に応じて調べてコピペ、というのでも良いでしょう。
よく使うものについては、徐々に覚えていきます。
WordPressテンプレートタグ集｜初心者即実践＆仕事で使えるコピペ用
テンプレートファイル
WordPressには、テンプレートファイルというものがあり、CSSファイル（style.css）や記事ページ（single.php）など、必要なページを作成するために使用するファイルです。
基本的なファイルについては、WordPressをダウンロードしたファイルの中に並んでいます。
テンプレートファイルを上手に使えば、柔軟性の高い便利なサイトを作ることができるので、是非理解しておきたい知識のひとつです。
WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
作成したテーマを公開する
さて、ここまでである程度自由にWordPressでブログが作成できるようになるはずです。
ここからは、ローカル環境で構築したWordPressをサーバーにアップし、公開する手順をまとめます。
ドメインの取得とサーバーを借りる
せっかく自分のブログを作るわけですから、独自ドメインもとっておきたいところですね。また、WordPressを動かす為には、対応したサーバーをレンタルする必要があります。
WordPressを運営するにあたって、オススメのレンタルサーバーとドメイン会社を、わかったブログさんがわかりやすくまとめてくださっています。
よくよく考えて選びましょう。
»WordPressならこれが安心！おすすめのレンタルサーバーと選ぶ際のポイント
ちなみに、当サイトではレンタルサーバーに「エックスサーバー」、ドメインは「お名前.com」を利用させていただいています。
サーバーにテーマをアップロードして公開する
さて、サーバーが借りれたらいよいよファイルをアップロードしましょう。
少し書き換える必要のあるファイルがあったりしますが、下記の通りにやれば問題なくアップロードができるはずです。
WordPress オリジナルテーマをアップロードする | Webクリエイターボックス
以上で、特に問題がなければ自分で作ったオリジナルテーマが選択可能になっているはずです。
作成したテーマを選んで、有効化すれば、晴れてオリジナルテーマブログの完成です。
公開前に、少し設定しておいたほうがいいこともあるので、下記を参考に設定してください。
▷忘れずにやっておきたい！WordPressでサイトを公開する前に設定しておくべき8つのチェック項目
プラグインの導入
WordPressには様々な機能を簡単に実装することのできる「プラグイン」というものが存在します。
といっても、たくさんありすぎてどれを入れればいいのかわからないと思いますので、以前当サイトにて紹介した、おすすめのWordPressプラグインの記事を参考にインストールしてみましょう。
他にも「こんな機能欲しいな。」と思ったものは、大抵プラグインが存在するので、必要に応じて探してみましょう。
注意点としては、便利だからとプラグインをインストールしすぎると、サイトの表示が遅くなったり、プラグイン同士が競合してバグが出たりする点です。
また、バージョンアップなどの際にも、問題ないかどうかチェックしてからアップしましょう。
WordPress初心者にオススメの書籍
さて、ここまでWordPressでブログを構築する手順を、様々な記事と共にまとめてきましたが、やはり体系立てて理解する為には書籍に目を通しておくこともオススメします。
WordPressに関する書籍はたくさん出ていますが、その中でも特に、解説が丁寧で尚且つ上記で紹介してきたことが網羅されているオススメの書籍を紹介しておきます。
とりあえず、下記の書籍があれば間違いないでしょう。
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)
インプレス
売り上げランキング: 5,807
基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)
SBクリエイティブ
売り上げランキング: 27,832
Webサイトやコーポレートサイトを作る
WordPressでは、ブログ以外にもコーポレートサイトなどのWebサイトも簡単に制作することができます。
むしろ、最近のコーポレートサイトは大体WordPressを使用しているといっても過言ではないでしょう。
（参考→WordPressで作られたとても参考になる秀逸なWebサイト10選）
ブログじゃないWebサイトを作成する為には、少しコツがいったり、新しい知識も必要になりますが、Webデザインレシピさんが大変わかりやすい内容の記事を書いてくださっていますので、是非参考にしましょう！
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
また、より本格的にコーポレートサイトを作りたい方は、下記の書籍以外の選択肢はないのではないかというほどの良書があるので紹介します。AmazonのWordPressカテゴリでもずっとランキング上位の書籍です。
WordPressは初心者にもおすすめ
いかかでしたでしょうか？
WordPressは一見敷居が高いように見えますが、案外簡単にできてしまいますので、この機会に挑戦してみてはいかがでしょうか？
記事中で紹介したブログは、どれもWordPressを理解するにあたって参考になる記事をたくさん書いてくださっているので、行き詰まった時は是非チェックしてみてください！
最後に、ブログを本格的に運営したい人は絶対に読んでおくべき書籍を紹介します。
ちなみに、テーマ制作を含めたプログラミングを学ぶならtech boost(テックブースト)がおすすめ。学習の目的に合わせてオーダーメイドでカリキュラムを組んでくれます。
無料カウンセリングを行っているので是非チェックしてみてください。
【その他WordPressに関して読んでおくとよいオススメ記事】
▷WordPressのパーマリンク設定における基礎知識とオススメの設定
▷WordPressのログイン方法＆ログインできない時の対処方法
【ブログ運営のために必読の記事】
▷必ず設定したい！Googleアナリティクスを導入したら最初に行うべき基本設定
