2013年02月18日 category : WordPress tags :

たった32行で作れる!ワードプレスの自作オリジナルテーマ

このエントリーをはてなブックマークに追加

wordpress-original-theme

”WordPressの自作・オリジナルテーマの作成手順です。6ファイルの最小構成で作成します。”

ワードプレスでは沢山の無料・有料テーマが配布されていますが、自分だけのオリジナルテーマ、自作テーマを作成してみませんか?自由に改造できますし、幅や高さだって思いのままです。何より愛着度がぐっと増します。

当ブログではワードプレスのカスタマイズはよく紹介していますが、オリジナルテーマ自体の作成方法の手順を紹介をしていなかったのでちょっと作成手順を紹介してみようと思います。このブログもオリジナルテーマで運用しています。

余分なものは外して最低限の構築方法を紹介します。これから自作テーマを作ってみたいという方や、HTML、CSSの勉強中の方、WEBまったく分からない!っていう人でもこうやって動いているのか、の入り口になればと思います。

01 . まずは環境構築

ワードプレスはPHPで動いていますので表示確認する環境が必要です。レンタルサーバがあるなら直接WEB上で作っていってもいいと思いますが、まずはローカル(ネットに繋がっていない)にワードプレスの環境を作る方法の紹介です。

過去にMACでローカル環境構築については記事にしていますので参照ください。
図解!MacにWordPressのテスト環境を構築できるMAMPの設定手順 | ごすてっぷ
ワードプレスのテスト環境をローカルに作成できるMac用アプリケーションMAMPの設定方法です。 当ブログはWordPressで作成しているのですが、レイアウト変更など都度本番サーバで行なっていました …

WindowsではXAMPPというソフトが定番のようです。環境が出来上がってしまえばあとのファイル構成は同じですのでまずは環境を作ってしまいましょう。

02 . オリジナルテーマ作成手順

1.オリジナルテーマを作成する
2.テーマフォルダにファイルをアップロード
3.テーマを適用する
4.確認、修正(あとは1.2.4を繰り返す)

これだけの手順で作成することができます。ではさっそく作り始めてみます。

まずはワードプレスに標準で入っている「twentyeleven」のテーマフォルダをみてみます。ここには色々な処理が書かれたファイルがたくさんあります。

wordpress-01

いきなり息が詰まる方もおられるかもしれませんが、このファイル全てを作成する必要はありません。最低限必要なファイルを「6つ」に絞りましたのでその6ファイルだけ作成すれば大丈夫です。

各ファイル内も数行に抑えてありますので全てコピペしたら数秒で出来上がるボリュームです。順を追って進めて行きましょう。

03 . どうやって表示しているの?

ワードプレスではindex.phpというファイルがメインファイルになります。ここからヘッダー部分(header.php)、サイドバー部分(sidebar.php)、フッター部分(fotter.php)をそれぞれ呼び出し、1画面で表示させています。

wordpress-02

WEB画面を例にするとこんな感じです。

wordpress-03

なんとなくイメージできましたか?それぞれのパーツ(テンプレートファイル)が組み合わされて出来ているのです。

今回作成するのは今上げた4ファイル(index.php, header.php, sidebar.php, footer.php)にCSSファイル、個別ページ用ファイルの計6つです。

04 . header.php

まずはどこでもいいのでフォルダをひとつ作成します。「mytheme」とか名前を付けておいてください。これから作成するファイルは全てこの「mytheme」に保存していきます。ではheader.phpからみていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head><!--/head-->
<body <?php body_class(); ?>>
<header>
	<div><?php bloginfo('title'); ?></div>
	<div><?php bloginfo('description'); ?></div>
	<nav><?php wp_page_menu('show_home=1'); ?></nav>
</header>

以上です。HTML5形式で記述しています。XHTMLで書く場合は多少異なりますが、ここではワードプレスに関する箇所だけ簡単に説明しておきます。

まずは6行目ですが、ここでCSSファイル(あとで作成)を読み込んでいます。次に7行目ですが属にいう「おまじない」です。/headタグの直前に書きます。9行目も同様にページごとにbody要素を変更するための「おまじない」です。

11,12行目はブログのブログ名と概要を表示するタグです。13行目はナビゲーションを表示しています。その他の項目は必要に応じて後で追加していく必要がありますが、基本形としてはこのような感じです。

いま出てきた「おまじない」という言葉ですが、コンピュータ言語の説明をするときによく用いられる常套句です。C言語で言う#include <stdio.h>です。書く必要があるものの、説明すると敷居が高く感じてしまうような箇所です。

これに関しては「おまじない」でいいと思っています。後々触っていく中でどこかのタイミングで「自分で調べること」。そのタイミングの時には今以上に内容が理解できる筈です。それが本当の意味での「おまじない」だと思っています。

話が少し逸れましたが文字コードをUTF-8、名前を「header.php」としてファイルを保存しておいてください。

05 . sidebar.php

サイドバー部分です。ここにはブログで言えば「よく読まれている記事」などが表示されていたり、タグやアーカイブなどのウィジェットを表示していたりする部分です。今回はその枠だけ確保しておきます。書くのは次の1行です。

<div id="sidebar"><p>SIDE</p></div>

「よく読まれている記事」の表示方法などはまた別途調べて後に追加する必要がありますが、各ブログによってサイドバーの使用用途は異なるのでここでは枠だけ確保して「sidebar.php」と名前をつけて保存します。

06 . footer.php

これもサイドバーと同様に、枠だけ確保します。

<footer><p>FOOTER</p></footer>
</body>
</html>

もう3ファイル完成しました。あと半分です。

2013年2月24日:body, htmlタグの閉じが抜けていたため追記しました。

07 . index.php

いよいよメインになるindex.phpを作成します。メインと言っても、これまで同様これもワードプレスとして必要な箇所だけを書いていますので数行で完成です。固くならず、まずはファイルを見てみましょう。

<?php get_header(); ?>
<div id="container">
	<div id="main">
		<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
				<h1><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h1>
				<?php the_content(); ?>
				<?php the_category(' ') ?><?php the_time('') ?>			
			<?php endwhile; ?>
		<?php else : ?>
		<p>NOT FOUND</p>
		<?php endif; ?>
	</div><!--/main-->
	<?php get_sidebar(); ?>
	</div><!--/container-->
<?php get_footer(); ?>

1行目に「get_header()」とあります。名前の通りここで「header.php」を呼び出しています。ですので実際にWEBページになったときは2行目の上にはheader.phpに書かれた内容が表示されることになります。

同様に14行目ではsidebar.phpを、16行目ではfooter.phpを呼び出しています。

そして4行目から12行目が投稿記事があれば表示するという処理です。記事がない場合は11行の「NOT FOUND」が表示されます。8行目では「twentyeleven」に合わせてカテゴリーと投稿日時を表示させてみました。

このように表示させたい項目をどんどん追加していけば更にオリジナルなテーマが出来上がっていきます。逆にカテゴリー、投稿日時が要らない場合は8行目をまるっと消してあげればいいのです。

09 . style.css

実はこれまでの作業である程度、自作テーマ・オリジナルテーマの作成は完成しています。これまでの段階をWEBブラウザで見るとこんな感じです。

wordpress-04

SIDE、FOOTERという文字列はそれぞれsidebar.php,footer.phpに書いた内容ですね。それぞれのファイルを呼び出し、表示していることがわかります。

今から作る「style.css」というファイルはサイドバーの場所を「横」に持ってきたり、背景の色を変えたり、文字の大きさを変えたりとCSSの処理を書く装飾系のファイルです。

サイドバーの位置を変更し、それぞれの枠がわかりやすいように背景の色を変えてみます。ここでは各CSS要素の説明は省きますが名前から何となく処理が分かると思います。まずはこのままコピーし「style.css」と名前をつけ保存。

body{ width: 700px; }
header{	
	background: #DDCCEE;
}
#main{
	width: 400px;
	height: 200px;
	margin: 0;
	float: left;
	background: #33FFEE;
}
#sidebar{
	width: 300px;
	height: 200px;
	margin: 0;
	float: right;
	background: #33FFAA;
}
footer{
	clear: both;
	height: 100px;
	background: #FFDDDD;
}

先ほどWEBブラウザでみたページがこのように変わります。

wordpress-05

10 . single.php

いよいよ6ファイル目の「single.php」ですが、これは個別の記事ページを表示するときに呼ばれるファイルです。トップページでは記事のタイトルにリンクがありますが、その記事に移動するとタイトルにリンクは不要ですよね?

その移動した先のページを表示するのが「single.php」です。トップページ(index.php)と見た目を変えてもいいですが、ヘッダー、サイドバー、フッターなどそのまま使えますので今回はindex.phpを流用します。

index.phpをそのままコピーして名前を「single.php」に変更し保存します。

<?php get_header(); ?>
<div id="container">
<p>SINGLE</p>
	<div id="main">
		<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
				<h1><?php the_title(); ?></h1>
				<?php the_content(); ?>
				<?php the_category(' ') ?><?php the_time('') ?>			
			<?php endwhile; ?>
		<?php else : ?>
		<p>NOT FOUND</p>
		<?php endif; ?>
	</div><!--/main-->
	<?php get_sidebar(); ?>
	</div><!--/container-->
<?php get_footer(); ?>

index.phpとsingle.phpどちらのページが表示されているかわかるように3行目に「SINGLE」と追加しました。もちろん不要ですので慣れれば消してもらってOKです。あとは7行目のタイトル表示部分のリンク処理を取りました。

以上で6ファイルすべて作成が終わりました。次のステップでは、いよいよ自作テーマとして確認してみます。

wordpress-06

11 . テーマフォルダに追加する

サーバまたはローカル環境の「/wp-content/themes/」に今作成した「mytheme」フォルダを置きます。これでワードプレスから今作成した自作テーマ・オリジナルテーマを使用することが出来るようになります。

12 . オリジナルテーマを使用する

ワードプレス管理画面にログインします。「外観」→「テーマ」を選択します。

wordpress-07

下の方に「利用可能なテーマ」があり、その中に「mytheme」が表示されています。「有効化」をクリックしてください。これでWEBでブログにアクセスすると今作ったオリジナルテーマでワードプレスが表示されます。完成です!

wordpress-08

13 . おまけ

如何でしたか?思っていたより簡単に出来たのではないでしょうか。あとは追加したい機能をそれぞれの位置に配置したり、CSSを使ってブログを彩っていけばこの世に一つしかないオリジナルなテーマが仕上がっていきます。

最後におまけです。ワードプレス管理画面の「利用可能なテーマ」があっさりしているのでここにもう少し情報を埋め込みます。

mythemeフォルダに「screenshot.png」という名前で画像ファイルを追加します。サイズは300×225です。すると「利用可能なテーマ」にイメージが表示されます。指定サイズで作った画像置いておきますので良ければ使ってください。

screenshot.png

次に作者情報などを埋め込みます。隣の「Twenty Ten」には作成者や「説明」をクリックするとそのテーマの説明が表示されますよね、これを追加します。style.cssの文頭に以下を貼り付けて下さい。名前などは変えてOKです。

/*
Theme Name: mytheme
Author: ごすてっぷ
Author URI: http://05step.com
Description: このテーマはブログ「ごすてっぷ」の「たった32行で作れる!ワードプレスの自作オリジナルテーマ」で作成したテーマです。
Version: 1.0
*/

wordpress-09

それっぽくなりました。あとはHTMLやCSS、ワードプレスのカスタマイズなどやりたいことを形にしていけばOKです。このブログでもカスタマイズ関係の記事を取り扱っていますのでよろしければまたお越し下さい。

HOME >>  WordPress > たった32行で作れる!ワードプレスの自作オリジナルテーマ