【WordPress】自作テーマ編① – WordPressでホームページを作ろう

2022.4.11(Mon)

テーマフォルダ作成の準備

まず、前回の準備編でWordPressをダウンロードしたディレクトリを丸っとエディタで開きましょう。

今回はVisualStudioCodeを使います。

エディタで開いたら、「wp-content」＞「themes」の直下に新しくディレクトリを作成してください。

フォルダ名は任意ですが、今回制作するサイトのテーマファイルとわかるような名称にしてください。
※今回は「my_theme」というフォルダ名にしました。

そうしたら、作成したフォルダ内にindex.phpファイルを作成してください。

index.phpには一旦下記のように記述してください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>

<body>
	<header>
		ヘッダー
	</header>
	<main>
		<?php echo the_content(); ?>
	</main>
	<footer>
		フッター
	</footer>
</body>

</html>

上記のようにとりあえずのhtmlソースの枠組みを記述します。

<?php echo the_content(); ?>

上記のPHPの関数はWPのページ編集内で入力したコンテンツ内容を出力する関数になります。

また、このindex.phpと同階層にstyle.cssを作成してください。

style.cssには下記のように記述してください。

@charset "utf-8";

/*----------------------------------
theme: My theme
site name: WPテストサイト
----------------------------------*/

上記の「theme」と「site name」には任意のテキストを入れてください。

今回はテーマ名を「My theme」、サイト名を「WPテストサイト」としました。

このstyle.cssはテーマファイルに必ず入れなければならない必須ファイルで、この中にcssのスタイルだったり、上記のようなテーマ情報を入力します。

しかし、今回はcssのスタイルはこのstyle.cssには記述せず、別ファイルに記述します。

それは後々説明します。

ここまでできたら、一旦準備は完了です。

テーマを適用してみる

続いて、ここまで作った仮テーマをWordPress側で適用してみましょう。

WordPressの管理画面に入り、左メニューの「外観」＞「テーマ」を開きましょう。

そうすると下記のように、先ほど作成したテーマがあるので、これを有効化しましょう。

その後、左メニューの「固定ページ」を開き、すでにある「サンプルページ」は削除しましょう。

そして、「新規追加」をクリックして、新規固定ページを作成します。

下記のように、タイトルを「HOME」、コンテンツ部分には「これはTOPページです。」と入力しましょう。

スラッグ名は「home」にしておきましょう。

これで「公開」を押します。

続いて、この作成したHOMEページをこのサイトのTOPページに設定したいので、左メニューの「設定」＞「表示設定」を開きます。

下記のようなページになるので、ラジオボタンを「固定ページ」の方にして、ホームページのプルダウンメニューを先ほど作成した「HOME」に設定しましょう。

「変更を保存」を押します。

ここまでできたら、「localhost:8888/wp_test/」にアクセスして、ページを確認してみましょう。

下記のように表示されていたらOKです。

テンプレートファイルの作成

ここまでできたら、続いて、ページやパーツを使いまわせるようにするためのテンプレートファイルを作成していきます。

WordPressではヘッダー、フッター、サイドメニューなどの部品や固定ページテンプレート、投稿ページテンプレートなどをテンプレートファイルとして使い回しできるようになっています。

下記はWordPressのテンプレートタグがまとまっているドキュメントになります。

テンプレートタグ
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0

header.php、footer.php

まず、ヘッダーとフッターのテンプレートファイルを作成していきます。

先ほど作成したindex.phpと同階層にheader.phpとfooter.phpを作成しましょう。

この中には先ほどindex.php内のヘッダー部分とフッター部分をそれぞれ移植していきます。

index.phpの移植箇所は削除しておきます。

●header.php

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>

<body>
	<header>
		ヘッダー
	</header>

●footer.php

<footer>
	フッター
</footer>
</body>

</html>

●index.php

<?php get_header(); ?>　//header.phpを呼び出す関数
<main>
	<?php the_content(); ?>
</main>
<?php get_footer(); ?>　//footer.phpを呼び出す関数

この内容で保存したら、再度「localhost:8888/wp_test/」にアクセスしてみてください。

変わらず、下記のように表示されていればOKです。

ヘッダーとフッターをテンプレート化することができました。

page.php、front-page.php

続いてはトップページのテンプレートと固定ページのテンプレートも作っておきましょう。

index.phpと同階層にpage.phpとfront-page.phpを作成してください。

page.phpが固定ページ用のテンプレートファイルで、front-page.phpがトップページ用のテンプレートファイルになります。

●page.php

<?php get_header(); ?>
<main>
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
</main>
<?php get_footer(); ?>

page.phpは下層ページになりますので、ページタイトルをh1で出力します。

<?php the_title(); ?>

上記関数で、ページタイトルを出力できます。

●front-page.php

<?php get_header(); ?>
<main>
	<?php the_content(); ?>
</main>
<?php get_footer(); ?>

その後、WP管理画面の固定ページから新規追加で下層ページを追加してみましょう。

とりあえず「会社案内」ページを作成します。

スラッグは「company」にしましょう。

ここまでできたら、ブラウザで「localhost:8888/wp_test/company/」にアクセスしてみてください。

下記のように表示されたらOKです。

single.php、archive.php

続いては、WP内の投稿機能に関するテンプレートファイルを作成しましょう。

投稿詳細ページのテンプレートファイルがsingle.php、投稿一覧ページのテンプレートファイルがarchive.phpファイルになります。

index.phpと同階層にsingle.php、archive.phpを作成しましょう。

●single.php

<?php get_header(); ?>
<main>
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
</main>
<?php get_footer(); ?>

single.phpに関しては、page.phpなどと内容は同じです。

●archive.php

<?php get_header(); ?>
<main>
	<h1>
		<h1><?php single_cat_title(); ?></h1>
	</h1>
	<div class="archive-list">
		<?php
		if (have_posts()) :
			while (have_posts()) : the_post();
		?>
				<article>
					<p><a href="<?php echo the_permalink(); ?>"><?php echo $post->post_title; ?></a></p>
					<time><?php echo get_post_time('Y.n.j(D)'); ?></time>
				</article>
			<?php
			endwhile;
		else :
			?>
			<p>記事がありません。</p>
		<?php endif; ?>
	</div>
</main>
<?php get_footer(); ?>

archive.phpでは投稿した記事の一覧を表示するカテゴリーページごとのテンプレートです。

下記関数でカテゴリータイトルを出力しています。

<?php single_cat_title(); ?>

下記の部分で、ループを回し、記事を取得、出力しています。

記事がない場合は、「記事がありません。」とテキスト表示されるようになっています。

		<?php
		if (have_posts()) :
			while (have_posts()) : the_post();
		?>
				<article>
					<p><a href="<?php echo the_permalink(); ?>"><?php echo $post->post_title; ?></a></p>
					<time><?php echo get_post_time('Y.n.j(D)'); ?></time>
				</article>
			<?php
			endwhile;
		else :
			?>
			<p>記事がありません。</p>
		<?php endif; ?>

<?php echo the_permalink(); ?>　//記事へのパーマリンクを出力
<?php echo $post->post_title; ?>　//記事のタイトルを出力
<?php echo get_post_time('Y.n.j(D)'); ?>　//記事の投稿日時を出力

これでファイルを保存します。

WP管理画面から記事を投稿してみましょう。

まず、デフォルトのカテゴリーをお知らせにしておきます。

左メニューの「投稿」＞「カテゴリー」からデフォルトである「未分類」のカテゴリーを「お知らせ」にしておきましょう。スラッグ名は「news」にします。

その後、左メニューの「投稿」＞「新規追加」をクリックします。

下記のように「お知らせ１」という投稿をしましょう。

カテゴリーは「お知らせ」で選択しておきます。

同じように「お知らせ２」という記事も投稿しておきましょう。

投稿したら、パーマリンク設定もしておきましょう。

パーマリンク設定では、投稿記事のURLのリンク設定ができます。

パーマリンクはデフォルトだと「/年/月/日/投稿名」となっています。

これをシンプルに「/投稿ID/」に変えておきましょう。

「設定」＞「パーマリンク設定」を開きましょう。

上記のように、「post_id」に変更して、「変更を保存」を押します。

その後、「お知らせ」カテゴリーの一覧ページである、「localhost:8888/wp_test/category/news」にアクセスしてみましょう。

下記のように投稿一覧が表示されたらOKです。

その後、リンクを踏んで投稿詳細ページに飛んでみて、詳細ページも問題なく表示されていればOKです。

「お知らせ１」の詳細ページに行ってみて、下記のように問題なくタイトルとコンテンツが表示されていたら、問題ないです。

functions.php

WordPressではfunctions.phpというphpファイルがあります。

これは、WordPressの様々な設定をPHPでのソースコードとして、記述しておけるファイルになります。

今回、ヘッダーにナビゲーションを設置しようと思います。

WPの管理画面内にメニューの設定画面を追加するためにfunctions.phpに記述する必要があります。

また、WP管理画面内で設定したメニューの表示位置を設定できるようにするための記述もfunctions.php内に記述する必要があります。

index.phpと同階層にfunctions.phpを追加しましょう。

●functions.php

<?php
//WP管理画面にメニュー設定画面を追加
add_action('after_setup_theme', 'register_menu');
function register_menu()
{
	register_nav_menu('primary', __('Primary Menu', 'theme-slug'));
}

add_theme_support('custom-header', $custom_header_defaults);

//テーマの中で使われる位置設定
if (!function_exists('lab_setup')) {
	function lab_setup()
	{

		register_nav_menus(array(
			'global' => 'グローバルナビ',
		));
	}
}
add_action('after_setup_theme', 'lab_setup');

これで保存して、WP管理画面に入りましょう。

左メニューの「外観」に「メニュー」という設定画面が追加されていると思います。

この中で新たに「新規追加」で「ヘッダーメニュー」を追加しましょう。

そして、固定ページの「HOME」と「会社案内」を追加して、「メニューの位置」は「グローバルナビ」でチェックしましょう。

「メニューを保存」を押します。

続いて、header.phpを開きます。

header.phpに下記のように追記してください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>

<body>
	<header>
		ヘッダー
		<?php　//追記
		wp_nav_menu(array(
			'theme_location' => 'global',
			'container' => 'div',
			'menu_class' => 'global_nav'
		));
		?>
	</header>

追記部分では

wp_nav_menu()

という関数を使っていますが、これがWP管理画面内で設定されたメニューを出力する関数です。

関数の引数には各種設定項目を入れます。

theme_location・・・テーマの中で使われる位置。ユーザーが選択できるように register_nav_menu() で登録されている必要がある。
container・・・ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 div、nav。コンテナをなしにする場合は false。
menu_class・・・メニューを構成する ul 要素に適用するCSS クラス名。

※テンプレートタグ/wp nav menu
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

これで保存してください。

ブラウザにて「localhost:8888/wp_test/」にアクセスして、下記のようにヘッダーにWP管理画面で設定した「ヘッダーメニュー」と同じ内容のメニューが表示されていればOKです。

sidebar.php

続いて、サイドメニューにあたるテンプレートファイルを作成します。

サイドメニューのテンプレートファイルはsidebar.phpです。

sidebar.phpを作成する前に、WP管理画面内にウィジェット編集画面を追加するために、functions.phpにコードを追記します。

●functions.php

<?php
//WP管理画面にメニュー設定画面を追加
add_action('after_setup_theme', 'register_menu');
function register_menu()
{
	register_nav_menu('primary', __('Primary Menu', 'theme-slug'));
}

add_theme_support('custom-header', $custom_header_defaults);

//テーマの中で使われる位置設定
if (!function_exists('lab_setup')) {
	function lab_setup()
	{

		register_nav_menus(array(
			'global' => 'グローバルナビ',
		));
	}
}
add_action('after_setup_theme', 'lab_setup');

//WP管理画面にウィジェット設定画面追加　//追記
function sample_widgets()
{
	register_sidebar(array(
		'name' => '共通サイドバー',
		'id' => 'sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>'
	));
}
add_action('widgets_init', 'sample_widgets');

上記の追記した箇所がWP管理画面内にウィジェット編集画面を追加するコードになります。

関数の引数には各種設定項目を入れます。

name　→　ウィジェット名
id　→　ウィジェットのID名
before_widget　→　ウィジェットの前につけられる要素
after_widget　→　ウィジェットの後につけられる要素
before_title　→　ウィジェット各タイトルの前につけられる要素
after_title　→　ウィジェット各タイトルの前につけられる要素

※関数リファレンス/register sidebar
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar

WP管理画面内に入ると、左メニューの「外観」内に「ウィジェット」という項目が増えていると思います。

ただ、最新のウィジェット編集画面は使いづらいため（最新バージョンのWPのウィジェット編集がとんでもなく使いにくい、、、）、過去の使いやすかった編集画面に切り替えましょう。

プラグインを入れます。

左メニュー「プラグイン」＞「新規追加」から右上の検索窓に「Classic Widgets」と入れて検索し、出てきたプラグインをインストール、有効化しましょう。

その後、「外観」＞「ウィジェット」へ移動しましょう。

下記のように、とりあえず「固定ページ」と「カテゴリー」を追加しましょう。

タイトルはそれぞれ「ページ」、「カテゴリー」とします。

続きまして、index.phpと同階層にsidebar.phpを作成しましょう。

●sidebar.php

<div class="sidebar">
	<?php dynamic_sidebar('sidebar'); ?>
</div>

WP内管理画面で設定したウィジェットの内容を取得するには

dynamic_sidebar('sidebar');

上記関数で持ってくることができます。

このサイドバーテンプレートファイルを下層ページにて呼び出すことにしましょう。

page.phpを開いて、下記のように追記してください。

<?php get_header(); ?>
<main>
	<div class="container">
		<h1><?php the_title(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<?php the_content(); ?>
			</div>
			<?php get_sidebar(); ?>　//追記
		</div>
	</div>
</main>
<?php get_footer(); ?>

サイドバーテンプレートを呼び出す関数は

get_sidebar();

上記で呼び出すことが可能です。

これで「localhost:8888/wp_test/company/」にアクセスしてみましょう。

下記のように、ウィジェットの内容が表示されたら成功です。

CSSで調整していないため、サイドバーが縦積みになっていますが、とりあえず出力することは成功しました。

CSSファイル、JSファイル

さて、次はcssファイルとjsファイルを用意しましょう。

cssはすでにあるstyle.cssに記述してもいいのですが、管理しやすくするためにcssやjsなどは別ディレクトリに分けておきましょう。

index.phpと同階層に「assets」フォルダを作成して下さい。

この中に「css」フォルダと「js」フォルダを作りましょう。

「css」フォルダ内にはmain.css、「js」フォルダ内にはmain.jsを入れてください。

今回は、先ほど作ったサイドバーに少しスタイルをつけてみようと思います。

main.cssを開いて、下記のように記述してください。

@charset "utf-8";

	.content_wrap {
		display: flex;
	}

	.sidebar {
		border: 1px solid #000;
		padding: 2%;
	}

上記の内容で保存します。

このcssファイルを読み込むためにheader.phpを開きましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
　<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/main.css">　//追記
</head>

<body>
	<header>
		ヘッダー
		<?php　//追記
		wp_nav_menu(array(
			'theme_location' => 'global',
			'container' => 'div',
			'menu_class' => 'global_nav'
		));
		?>
	</header>

main.cssの読み込みコードを追記しました。

<?php echo get_template_directory_uri(); ?>

上記でテーマファイル内のテンプレートの階層までのURLを出力することができます。

これで保存して、「localhost:8888/wp_test/company/」にアクセスしてみましょう。

下記のようにスタイルが反映されていたら、OKです。

また、今回はmain.jsに特に記述はしませんが、footer.phpに下記のように読み込みコードを書き込んで下さい。

<footer>
	フッター
</footer>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/main.js"></script>
</body>

</html>

なお、この「assets」フォルダ内の「css」「js」フォルダにはcommon.cssだったり、jqueryのファイルだったり、その他ライブラリのファイルなどを格納するディレクトリとしても利用しましょう。

bread.php

続いて、ぱんくずリストもテンプレート化します。

ぱんくずリストはbread.phpです。

index.phpと同階層にbread.phpに追加してください。

●bread.php

<ul class="bread">
	<a href="<?php bloginfo('url'); ?>">HOME</a>
	 > 
	<?php if (is_category()) : ?>　//投稿一覧ページぱんくず
		<?php $cat = get_the_category();
		echo $cat[0]->cat_name; ?>
	<?php elseif (is_single()) : ?>　//投稿詳細ページぱんくず
		<?php $cat = get_the_category();
		echo get_category_parents($cat[0], true, ' > '); ?>
		<?php the_title(''); ?>
	<?php else : ?>　//それ以外(固定ページ)
		<?php the_title(); ?>
	<?php endif; ?>
</ul>

今回、固定ページと投稿一覧ページと投稿詳細ページと3パターンあるので、それぞれでぱんくずを設定する必要があります。

$cat = get_the_category();
echo $cat[0]->cat_name;

投稿一覧ページではカテゴリー名を出力する必要があるので、上記コードで出力します。

テンプレートタグ/get the category
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_category

$cat = get_the_category();
echo get_category_parents($cat[0], true, ' > '); ?>

投稿詳細ページでは、記事タイトルの前にリンク付きのカテゴリー名を出力する必要があるため、上記コードで出力します。「get_category_parents()」関数は、リンク付きカテゴリーを出力することができ、引数で設定が可能です。

テンプレートタグ/get category parents
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_category_parents

ここまでできたら、page.phpを開いて、下記のように追記してください。

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>　//追記
		<h1><?php the_title(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<?php the_content(); ?>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

追記箇所でぱんくずテンプレートファイルを呼び出しています。

これは固定ページですので、single.phpにもarchive.phpにも追記しましょう。

TOPページはぱんくずは不要なので、front-page.phpには追記しなくていいです。

ここまでできたら、ファイルを保存し、ブラウザで「localhost:8888/wp_test/company/」にアクセスしてください。

下記のようにぱんくずが表示されていればOKです。

まとめ

今回は、WordPressの自作テーマ作成について、ご紹介しました。

次回は自作テーマ編の続きで、ショートコードやタグ・カテゴリー、キーワード検索テンプレートなどをご紹介します。

それでは今回はここまで。

お疲れ様でした。

ホームページ制作

【WordPress】自作テーマ編② – WordPress……
2022.4.13
ホームページ制作

【WordPress】プラグイン編 – WordPressで……
2022.4.23
ホームページ制作

【WordPress】Contact Form7の使い方をご……
2023.1.19
ホームページ制作

【Wordpress】All in one SEOの使い方を……
2023.1.31
ホームページ制作

【WordPress】準備編 - Wordpressでホーム……
2022.4.8

ホームページ制作

【WordPress】Contact F……

2023.1.19

ホームページ制作

【WordPress】準備編 - Wor……

2022.4.8

ホームページ制作

【Wordpress】All in on……

2023.1.31