【WordPress】ブログ用のオリジナルテーマの作り方をざっくり解説

必要な知識

  • HTML&CSS(簡単なホームページを1つでも作ったことがある程度)
  • PHP(HTMLへの埋め込みや、ifなどの基本的な文法が分かる程度)

必要な開発環境

ローカルで作業するのをおすすめします(WEB上だとCSSの変更が反映されるまで時間がかかるので、非常にわずらわしいです)。

WordPressをローカルで使えるようにするには、XAMPPがおすすめです。

完成イメージ

一般的なブログによくある感じで作っていきます。

テーマを作る際の基本的な考え方

ページ間で共通する部分をまとめておくというのが基本的な考え方です。そのほうが、修正・管理がラクだからですね。

今回は「ヘッダー」「サイドバー」「フッター」を共通で使う部分とします。

WordPressの仕組みとしては、「ページにアクセスされる⇒対応したファイルが呼ばれる⇒ヘッダー・サイドバー・フッターなどの共通部分が呼ばれる⇒データベースに保存されているデータが呼ばれる」といった感じです。

functions.phpの作成

まずはfunctions.phpという名前のファイルを作り、その中に下のコードをコピーします。

※functions.phpはテーマに関わるいろいろな設定を書いておくためのファイルです。

<?php

// サムネイルを使えるように
add_theme_support('post-thumbnails');

// ヘッダー用のメニューを管理画面から管理できるように
function menu_setup() {
	register_nav_menus(array(
		'header' => 'ヘッダー'
	));
}
add_action('after_setup_theme', 'menu_setup');

// サイドバー用のウィジェットを管理画面から管理できるように
function custom_widgets_init() {
	register_sidebar(array(
		'name' => 'サイドバー',
		'id' => 'side',
		'before_widget' => '<div class="widget">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>'
	));
}
add_action('widgets_init', 'custom_widgets_init');

// ページネーション
function pagination($pages = '', $range = 2) {
	$showitems = ($range * 2)+1;

	global $paged;
	if (empty($paged)) $paged = 1;

	if ($pages == '') {
		global $wp_query;
		$pages = $wp_query->max_num_pages;
		if (!$pages) $pages = 1;
	}

	if (1 != $pages): ?>
		<div class="pagination">
			<?php if ($paged > 2 && $paged > $range && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link(1); ?>">&laquo;</a>
			<?php endif;
			if ($paged > 1 && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link($paged - 1); ?>">&lsaquo;</a>
			<?php endif;
			for ($i=1; $i <= $pages; $i++):
				if (1 != $pages && ( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )):
					if ($paged == $i): ?>
						<span class="current"><?php echo $i; ?></span>
					<?php else: ?>
						<a href="<?php echo get_pagenum_link($i); ?>" class="inactive"><?php echo $i; ?></a>
					<?php endif;
				endif;
			endfor;
			if ($paged < $pages && $showitems < $pages): ?>
			<a href="<?php echo get_pagenum_link($paged + 1); ?>">&rsaquo;</a>
			<?php endif;
			if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages): ?>
				<a href="<?php echo get_pagenum_link($pages); ?>">&raquo;</a>
			<?php endif; ?>
		</div>
	<?php endif;
}

ヘッダーの作成

共通部分のヘッダーを作ります。

header.phpという名前のファイルを作り、その中に下のコードをコピーします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<?php if (is_home() || is_front_page()): ?>
		<meta name="description" content="トップページです。" />
	<?php else: ?>
		<meta name="description" content="<?php the_excerpt(); ?>" />
	<?php endif; ?>

	<title><?php wp_title('|', true, 'right'); ?></title>

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

	<?php wp_head(); ?>
</head>

<body>
	<header id="header">
		<?php if (is_home()) echo '<h1>'; ?>
			<div id="logo">
				<a href="<?php echo home_url('/'); ?>">
					<img src="">
				</a>
			</div>
		<?php if (is_home()) echo '</h1>'; ?>

		<?php if (has_nav_menu('header')): // メニューがあれば ?>
			<nav id="nav">
				<?php wp_nav_menu(array( // メニューを表示
					'theme_location' => 'header',
					'container'      => false,
					'items_wrap'     =>'<ul>%3$s</ul>'
				)); ?>
			</nav>
		<?php endif; ?>
	</header>

サイドバーの作成

共通部分のサイドバーを作ります。

sidebar.phpという名前のファイルを作り、その中に下のコードをコピーします。

<aside id="sidebar">
	<?php dynamic_sidebar('side'); ?>
</aside>

フッターの作成

共通部分のフッターを作ります。

footer.phpという名前のファイルを作り、その中に下のコードをコピーします。

	<footer id="footer">
		<p id="copyright"><small>© サンプルサイト All rights reserved.</small></p>
	</footer>

	<?php wp_footer(); ?>
</body>
</html>

トップページの作成

共通部分は作り終わったので、次はトップページ用のファイルを作ります。

index.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<ul>
			<?php if (have_posts()): while (have_posts()): the_post(); // 最新記事の一覧を表示 ?>
				<li>
					<a href="<?php the_permalink(); // 記事のURL ?>">
						<?php the_post_thumbnail(); // サムネイル画像 ?>
						<div>
							<?php
								$category = get_the_category();
								foreach ($category as $c) {
									echo "<div>$c->cat_name</div>"; // カテゴリー
								}
							?>
						</div>
						<time><?php the_time('Y.m.d'); // 投稿日 ?></time>
						<p><?php the_title(); // タイトル ?></p>
						<p><?php the_excerpt(); // 内容の抜粋 ?></p>
					</a>
				</li>
			<?php endwhile; endif; ?>
		</ul>

		<?php if (function_exists('pagination')) pagination(); // functions.phpに書いたページネーションの呼び出し ?>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

トップページには最新記事の一覧を表示するようにしています。

トップページにアクセスがあるとindex.phpが呼び出され、その中でheader.phpやsidebar.phpなどが呼び出されてパズルのように組み合わさる感じです。

アーカイブページの作成

アーカイブページ用のファイルを作ります。

カテゴリー別・タグ別・月別の一覧ページを表示するためのファイルです。

archive.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<h1>「<?php the_archive_title(); ?>」の記事一覧</h1><?php // ページタイトル ?>

		<ul>
			<?php if (have_posts()): while (have_posts()): the_post(); // 最新記事の一覧を表示 ?>
				<li>
					<a href="<?php the_permalink(); // 記事のURL ?>">
						<?php the_post_thumbnail(); // サムネイル画像 ?>
						<div>
							<?php
								$category = get_the_category();
								foreach ($category as $c) {
									echo "<div>$c->cat_name</div>"; // カテゴリー
								}
							?>
						</div>
						<time><?php the_time('Y.m.d'); // 投稿日 ?></time>
						<p><?php the_title(); // タイトル ?></p>
						<p><?php the_excerpt(); // 内容の抜粋 ?></p>
					</a>
				</li>
			<?php endwhile; endif; ?>
		</ul>

		<?php if (function_exists('pagination')) pagination(); // ページネーションの呼び出し ?>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

index.phpとほとんど変わりませんが、<h1></h1>でタイトルを表示するようにしています。

検索結果ページの作成

サイトにウィジェットなどで検索フォームを設けるなら、検索結果ページ用のファイルが必要になります。

search.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<h1>検索結果「<?php the_search_query(); ?>」</h1><?php // ページタイトル ?>

		<?php if (get_search_query() && have_posts()): // 記事が見つかった場合 ?>

			<ul>
				<?php while (have_posts()): the_post(); // 最新記事の一覧を表示 ?>
					<li>
						<a href="<?php the_permalink(); // 記事のURL ?>">
							<?php the_post_thumbnail(); // サムネイル画像 ?>
							<div>
								<?php
									$category = get_the_category();
									foreach ($category as $c) {
										echo "<div>$c->cat_name</div>"; // カテゴリー
									}
								?>
							</div>
							<time><?php the_time('Y.m.d'); // 投稿日 ?></time>
							<p><?php the_title(); // タイトル ?></p>
							<p><?php the_excerpt(); // 内容の抜粋 ?></p>
						</a>
					</li>
				<?php endwhile; ?>
			</ul>

			<?php if (function_exists('pagination')) pagination(); // ページネーションの呼び出し ?>

		<?php else: // 記事が見つからなかった場合 ?>

			<p>検索キーワード「<?php the_search_query(); ?>」に該当する記事がありませんでした。</p>
			<form role="search" id="searchform" class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
				<input type="text" value="<?php get_search_query(); ?>" name="s" id="s" />
				<input type="submit" id="searchsubmit" value="検索"></input>
			</form>

		<?php endif; ?>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

記事が見つかった場合はその一覧を、見つからなかった場合は検索フォームを表示するようにしています。

記事ページの作成

いよいよ記事ページの作成です。

single.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<article>
			<?php if (have_posts()): while (have_posts()): the_post(); ?>

				<h1><?php the_title(); // 記事タイトル ?></h1>
				<div>
					<?php
						$category = get_the_category();
						foreach ($category as $c) {
							echo "<a href='".get_category_link($c->cat_ID)."'>$c->cat_name</a>"; // カテゴリー
						}
					?>
				</div>
				<time>
					<?php
						if (get_the_date('Y.m.d') != get_the_modified_date('Y.m.d')) the_modified_date('Y.m.d'); // 更新があれば最終更新日を
						else the_date('Y.m.d'); // なければ公開日を表示
					?>
				</time>
				<?php the_post_thumbnail(); // サムネイル画像 ?>
				<div>
					<?php the_content(); // 記事本文 ?>
				</div>

			<?php endwhile; endif; ?>
		</article>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

固定ページの作成

page.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<article>
			<?php if (have_posts()): while (have_posts()): the_post(); ?>

				<h1><?php the_title(); // 記事タイトル ?></h1>
				<time>
					<?php
						if (get_the_date('Y.m.d') != get_the_modified_date('Y.m.d')) the_modified_date('Y.m.d'); // 更新があれば最終更新日を
						else the_date('Y.m.d'); // なければ公開日を表示
					?>
				</time>
				<?php the_post_thumbnail(); // サムネイル画像 ?>
				<div>
					<?php the_content(); // 記事本文 ?>
				</div>

			<?php endwhile; endif; ?>
		</article>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

single.phpとほとんど同じです。違うのはカテゴリーがないことですね。

404ページの作成

存在しないページにアクセスしたときに呼び出されるファイルを作ります。

404.phpという名前のファイルを作り、その中に下のコードをコピーします。

<?php get_header(); // header.phpの呼び出し ?>

<div id="flex">
	<main id="main">
		<h1>お探しのページは見つかりませんでした。</h1>
		<form role="search" id="searchform" class="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
			<input type="text" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="検索"></input>
		</form>
	</main>

	<?php get_sidebar(); // sidebar.phpの呼び出し ?>
</div>

<?php get_footer(); // footer.phpの呼び出し ?>

CSSファイルの作成

CSSファイルの名前はstyle.cssにします。というのも、header.phpでのスタイルシートの読み込みに使っているget_stylesheet_uri()と対応させるためです。

また、CSSファイルには必ず書いておかなければならない情報があります。

テーマに関する情報で、下のコードをCSSファイルの最初の行に書いておきます。

(Sampleの部分は自由に変更してください。)

/*
Theme Name: Sample
*/

↓最低限必要と思われるCSSを書いておきました。

#nav > ul {
	display: flex;
}

#flex {
	display: flex;
	justify-content: center;
}

#main {
	width: 800px;
	margin-right: 50px;
}

#sidebar {
	width: 350px;
}

ファイルのアップロード

あとは全てのファイルをアップロードするだけです。

ファイルをアップロードする場所は、wp-contentフォルダ⇒themesフォルダへと進み、この中に任意の名前のフォルダを作って、その中に全てのファイルを入れればOKです。

ファイルのパスは「wp-content/themes/Sample/index.php」といった感じになるはずです。

以上!