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

2022.4.13(Wed)

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

前回の記事に引き続き、テンプレートファイルをご紹介していきます。

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

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

page.phpのページ別テンプレートファイル

前回、紹介し損ねたので、ご紹介します。

page.phpは固定ページのテンプレートファイルですが、「page-ページスラッグ.php」（※「ページスラッグ」の部分には固定ページのスラッグ名が入ります。）とファイル名を付けることで、つけたスラッグ名の固定ページの固有のテンプレートファイルにすることができます。

使い回すためのテンプレートファイルですが、固有にしてしまったら意味ないと思われるかもしれませんが、一部固定ページのみレイアウトを変えたい時や、特殊なPHP処理を挟みたい時などには便利です。

前回の制作データをVisualStudioCodeで開いてください。

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

●page-company.php

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

会社案内ページのみサイドバーを消して、1カラムのレイアウトにしてみました。

これで保存して、「localhost:8888/wp_test/company/」を開いてみてください。

下記のようにサイドバーが消えていれば成功です。

試しに固定ページを新しく作って、そのページにアクセスしてみてください。

そちらはpage.phpのテンプレートが読み込まれているため、サイドバーは表示されていると思います。

category.php、tag.php

続いて、カテゴリー記事一覧ページとタグ記事一覧ページのテンプレートファイルです。

カテゴリー記事一覧ページはcategory.phpで、タグ記事一覧ページはtag.phpです。

現在archive.phpが記事一覧ページのテンプレートを担っていますが、category.phpとtag.phpを作ることができます。

また、先ほどのpage-スラッグ名.phpと同じように、「category-カテゴリースラッグ.php」「tag-タグスラッグ.php」とすることで、カテゴリー・タグで固有のテンプレートファイルを作ることも可能です。

index.phpと同階層にcategory.phpとtag.phpを作成しましょう。

●category.php

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1><?php single_cat_title(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<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>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

●tag.php

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1><?php single_tag_title(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<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>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

もし、カテゴリーやタグごとでレイアウトを変えたい場合はいじってみてください。

また、タグ機能が追加されたので、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_tag()) : //追記
		echo single_tag_title(); ?>　//追記
	<?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>

echo single_tag_title();

上記関数で現在ページのタグ名を出力ができます。

search.php、searchform.php

続いては、検索フォームと検索結果ページのテンプレートファイルです。

WordPressではキーワード検索機能を簡単に実装することが可能です。

そのテンプレートも用意されています。

検索フォームがsearchform.php、検索結果ページがsearch.phpになります。

index.phpと同階層にsearchform.phpとsearch.phpを作成してください。

●searchform.php

<form action="<?php bloginfo('url'); ?>" class="search">
	<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="キーワード検索" />
	<input type="submit" id="searchsubmit" value="検索" />
</form>

下記関数はサイト情報を出力する関数です。

引数に入れた情報を持ってくることができるので、「’url’」を入れるとWP管理画面内の「設定」で設定されているサイトURLを取得します。

bloginfo('url');

サイトURLをformのaction属性に入れます。

下記関数でサイト内検索を行ったときのクエリ文字列を取得することができます。

get_search_query();

検索後に検索キーワードをinputのvalue属性に入れます。

●search.php

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1>検索結果：<?php echo get_search_query(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<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>
							</article>
						<?php
						endwhile;
					else :
						?>
						<p>記事がありません。</p>
					<?php endif; ?>
				</div>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

下記関数で検索フォームに入力したキーワードを取得することができます。

h1タイトルにセットしましょう。

get_search_query();

また、ぱんくずにも検索したキーワードが出るようにしましょう。

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_tag()) :
		echo single_tag_title(); ?>
	<?php elseif (is_single()) : ?>
		<?php $cat = get_the_category();
		echo get_category_parents($cat[0], true, ' > '); ?>
		<?php the_title(''); ?>
	<?php elseif (is_search()) : ?> //追記
		検索結果：<?php echo get_search_query(); ?></h1> //追記
	<?php else : ?>
		<?php the_title(); ?>
	<?php endif; ?>
</ul>

これで完了です。

用意したsearchform.phpのテンプレートファイルをフッターあたりでで呼び出しましょう。

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

	<footer>
		<?php get_search_form(); ?> //追加
		フッター
	</footer>
</body>

</html>

上記追加部分がsearchform.phpの内容を表示する関数になります。

これでファイルを保存し、ページを確認してください。

下記のように、フッター部分にキーワード検索窓が設置されていればOKです。

試しに「お知らせ」とキーワードを入れて検索をかけてみましょう。

検索結果が下記のように表示され、投稿ずみの2記事が表示されればOKです。

date.php

WordPressでは、月別アーカイブページのテンプレートファイルもあります。

日付の絞り込み検索などの検索結果ページのテンプレートファイルになります。

日付別一覧ページのテンプレートファイルはdate.phpです。

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

●date.php

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1><?php echo get_the_date('Y年n月'); ?>の記事</h1>
		<div class="content_wrap">
			<div class="main">
				<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>
							</article>
						<?php
						endwhile;
					else :
						?>
						<p>記事がありません。</p>
					<?php endif; ?>
				</div>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

下記関数で表示しているページの年・月を取得することができます。

get_the_date('Y年n月');

ぱんくずリストでも、年・月を表示させたいので、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_tag()) :
		echo single_tag_title(); ?>
	<?php elseif (is_date()) : //追記
		echo get_the_date('Y年n月'); ?> //追記
	<?php elseif (is_single()) : ?>
		<?php $cat = get_the_category();
		echo get_category_parents($cat[0], true, ' > '); ?>
		<?php the_title(''); ?>
	<?php elseif (is_search()) : ?>
		検索結果：<?php echo get_search_query(); ?>
	<?php else : ?>
		<?php the_title(); ?>
	<?php endif; ?>
</ul>

また、月別アーカイブのリンク一覧をサイドメニューに表示しようと思います。

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

<div class="sidebar">
	<?php dynamic_sidebar('sidebar'); ?>
	<!--追記-->
	<h3>月別アーカイブ</h3>
	<ul>
		<?php wp_get_archives(); ?>
	</ul>
	<!--/追記-->
</div>

月一覧を表示するには下記のような関数を使います。

wp_get_archives();

これでファイルを保存して、「localhost:8888/wp_test/company/」にアクセスしてみてください。

下記のようにサイドメニューに月別アーカイブが表示されていたらOKです。

「2022年4月」のリンクを踏んでみましょう。

下記のように、「2022年4月」の記事一覧が表示されたらOKです。

404.php

ページが見つからなかった際の404 Not Foundのページもテンプレートファイルとして用意することができます。

404ページのテンプレートファイルは404.phpです。

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

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1>404 Not Found</h1>
		<div class="content_wrap">
			<div class="main">
				<p>リクエストされたページは見つかりませんでした。</p>
				<p><a href="<?php echo site_url(); ?>">＞ホームに戻る</a></p>
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

404ページに関してもぱんくずで記述をしておきましょう。

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_tag()) :
		echo single_tag_title(); ?>
	<?php elseif (is_date()) :
		echo get_the_date('Y年n月'); ?>
	<?php elseif (is_single()) : ?>
		<?php $cat = get_the_category();
		echo get_category_parents($cat[0], true, ' > '); ?>
		<?php the_title(''); ?>
	<?php elseif (is_search()) : ?>
		検索結果：<?php echo get_search_query(); ?>
	<?php elseif (is_404()) : ?> //追記
		404 Not Found //追記
	<?php else : ?>
		<?php the_title(); ?>
	<?php endif; ?>
</ul>

ファイルを保存したら、存在しない適当なページにアクセスしてみてください。

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

ショートコード

続いて、ショートコードについてです。

ショートコードとは、WordPressで使えるコードの呼び出し機能です。

PHPで記述した内容をWP管理画面内の固定ページや投稿ページ内で呼び出すことができます。

このショートコードを使えば、例えばTOPに表示するお知らせ一覧などのパーツを簡単に呼び出すことができます。

まず、ショートコードファイルを作成する準備をします。

index.phpと同階層に「shortcode」というディレクトリを作成しましょう。

そして、このディレクトリの中にshortcode-post_list.phpというファイルを作りましょう。

そして、このファイルには下記のように記述しましょう。

●shortcode > shortcode-post_list.php

<?php
function post_list($atts)
{
	extract(shortcode_atts(array(
		'slug' => null,
		'per' => '3',
	), $atts));
	$paged = get_query_var('paged');
	$args = array(
		'posts_per_page' => $per,
		'paged' => $paged,
		'category_name' => $slug,
		'post_type' => 'post'
	);
	$the_query = new WP_Query($args);

	if ($the_query->have_posts()) :
		ob_start();
?>
		<ul class="post_list">
			<?php
			while ($the_query->have_posts()) :
				$the_query->the_post()
			?>
				<li><a href="<?php echo the_permalink(); ?>"><?php echo get_the_time('Y/m/d'); ?>　<?php echo the_title(); ?></a></li>
			<?php
			endwhile;
			wp_reset_postdata();
			?>
		</ul>
<?php
		return ob_get_clean();
	endif;
}
add_shortcode('post_list', 'post_list');

ひとつずつ見ていきましょう。

	extract(shortcode_atts(array(
		'slug' => null,
		'per' => '3',
	), $atts));

まず、上記記述ですが、ここは固定ページや投稿ページでショートコードとして埋め込む際に、値を渡すことができるようにするための記述です。

今回は「slug」と「per」という値を渡せるようにしており、「slug」はカテゴリースラッグ名を指定することができ、「per」は表示記事数を指定することができます。

デフォルトではnullと3としています。

	$paged = get_query_var('paged');
	$args = array(
		'posts_per_page' => $per,
		'paged' => $paged,
		'category_name' => $slug,
		'post_type' => 'post'
	);
	$the_query = new WP_Query($args);

続いて、上記部分の記述ですが、ここでは表示する記事の設定をしている箇所になります。

posts_per_page　→　記事の総数
paged　→　ページ番号
category_name　→　カテゴリースラッグ名
post_type　→　投稿タイプ

これらの設定をすることで記事群を取得します。

	if ($the_query->have_posts()) :
		ob_start();
?>
		<ul class="post_list">
			<?php
			while ($the_query->have_posts()) :
				$the_query->the_post()
			?>
				<li><a href="<?php echo the_permalink(); ?>"><?php echo get_the_time('Y/m/d'); ?>　<?php echo the_title(); ?></a></li>
			<?php
			endwhile;
			wp_reset_postdata();
			return ob_get_clean();
			?>
		</ul>
<?php
	endif;
}

上記部分は、取得した記事群をループを回して記事一覧を表示させます。

表示する内容は今回はシンプルに投稿日時と投稿タイトルをリンク付きのliタグで出力するだけにしております。

add_shortcode('post_list', 'post_list');

上記部分は、ショートコードを登録する関数になります。

第一引数にショートコードとして使うショートコード名を任意で入れます。（今回は関数名と同じ「post_list」にしました。）

第二引数にはショートコードの設定を書いた自作の関数名を入れます。（今回はpost_list()という関数です）

続いて、「shortcode」ディレクトリ直下のファイルをfunctions.phpで読み込ませるようにしましょう。

functions.phpを開いて、最上部に下記のようにコードを追記してください。

<?php

//shortcodeディレクトリ内のファイルを全て呼び出し　//追記
foreach (glob(TEMPLATEPATH . "/shortcode/*.php") as $file) {
	require_once $file;
}

//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管理画面に移動し、固定ページ一覧にて、HOMEの編集画面を開いてください。

ビジュアルエディタモードからコードエディタモードにして、下記のようにコードを追記してみてください。

これはTOPページです。
<h2>お知らせ一覧</h2>
[post_list slug="news" per="10"]

これでページを公開して、「localhost:8888/wp_test/」にアクセスしてみてください。

下記のように、お知らせ一覧ページが表示されたら、OKです。

これでOKです。

ショートコード部分ですが、

[post_list slug="news" per="10"]

指定したカテゴリースラッグは「news」、最大記事数の「per」は10記事で設定しました。

カテゴリーを追加して、その別カテゴリーをslugに設定すれば、新しいカテゴリーの方の一覧になります。

また、slugには複数設定が可能でカンマ繋ぎで設定できます。

例えば「blog」というカテゴリーを追加したとしたら、

[post_list slug="news,blog" per="10"]

としたら、newsとblogの一覧が表示されます。

ページネーション

投稿記事が増えてきた際に、投稿一覧ページにページネーションを設けることで、ページ分けが可能です。

このページネーションに関しても、テンプレートファイル化させることが可能です。

index.phpと同じ階層に、pagenation.phpを作成してください。

●pagenation.php

<?php
$paginationhtml = get_the_posts_pagination(
	array(
		'mid_size' => 2,
		'prev_next' => true,
		'prev_text' => __('前へ'),
		'next_text' => __('次へ'),
		'type' => 'list',
	)
);
echo preg_replace('/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/ui', '', $paginationhtml);

ページネーションを呼び出す関数はWordPress側で用意がされており、それが下記になります。

get_the_posts_pagination();

引数には各種設定を記述します。

mid_size　→　現在のページの左右にそれぞれ表示するページ番号の数。デフォルトは1。
prev_next　→　（オプション）リストの中に「前へ」「次へ」のリンクを含むかどうか。
prev_text　→　投稿の前のセットへのリンクテキスト。デフォルトは「Previous」。
next_text　→　投稿の次のセットへのリンクテキスト。デフォルトは「Next」。
type　→　戻り値の形式をコントロールします。

関数リファレンス/get the posts pagination
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/get_the_posts_pagination

関数リファレンス/paginate links
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/paginate_links

preg_replace('/\<h2 class=\"screen-reader-text\"\>(.*?)\<\/h2\>/ui', '', $paginationhtml);

上記の箇所ですが、get_the_posts_pagination()は自動でページネーションのh2タイトルが出てしまいます。

こちらは不要なことが多いので、削除したいのですが、公式的なやり方がないので、preg_replace()関数を用いて、削除処理を挟んでいます。

pagenation.phpができたら、一覧ページにて、このテンプレートファイルを呼び出してみましょう。

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

<?php get_header(); ?>
<main>
	<div class="container">
		<?php include('bread.php'); ?>
		<h1><?php single_cat_title(); ?></h1>
		<div class="content_wrap">
			<div class="main">
				<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>
				<?php include('pagenation.php'); ?> //追記
			</div>
			<?php get_sidebar(); ?>
		</div>
	</div>
</main>
<?php get_footer(); ?>

さて、早速サイト上で確認したいのですが、現在、「お知らせ１」と「お知らせ２」という2記事のみ投稿されている状態だと思います。

WPはデフォルトでは一覧ページの1ページでの表示件数は10件なので、このままではページネーションは表示されません。

ですので、確認のために一時的に一覧ページの1ページでの表示件数を1件にしましょう。

WP管理画面の左メニューから「設定」＞「表示設定」を開いてください。

その中の「1ページに表示する最大投稿数」を「1」にしてください。

そうしたら「変更を保存」を押して、その後「localhost:8888/wp_test/category/news/」にアクセスしてみてください。

下記のようにページネーションが表示されていればOKです。

確認が完了したら、一覧ページの記事の表示件数を10件に戻しておきましょう。

サンプルテーマご紹介

これまでご紹介したテーマファイル作成方法を踏まえて、簡単なサンプルデータを作ってみました。

下記のようなテーマです。

上記サンプルテーマは下記からダウンロードできます。
https://github.com/MikiyaYamaguchi/wp_test

※上記のサンプルテーマ内のスクリーンショットで使用している画像は下記になります。

・ロゴ
https://free-materials.com/%e3%83%ad%e3%82%b4a10/

・メインスライド画像
https://pixabay.com/ja/photos/%e6%97%a5%e6%b2%a1-%e3%83%93%e3%83%bc%e3%83%81-%e5%a5%b3%e6%80%a7-%e6%ad%a9%e3%81%8f-%e6%b5%b7-6990822/

・TOP下段背景画像
https://pixabay.com/ja/photos/%e6%b5%b7-%e3%83%93%e3%83%bc%e3%83%81-%e5%9c%b0%e5%b9%b3%e7%b7%9a-%e6%a1%9f%e6%a9%8b-5871912/

まとめ

今回は2回に分けてWordPressのテーマ作成のご紹介をいたしました。

ご紹介した手順で作業すれば、とりあえず簡易的なテーマを作成することが可能です。

あとは好きなようにカスタマイズしたり、コーディングしたりして、オリジナルテーマを作りましょう。

今回は基本的なところのみピックアップしてご紹介しましたが、WordPressはドキュメントも多く、数多くの人がWP関連の記事を上げておりますので、ぜひ色々と調べてみてください。

次回はおすすめのプラグイン紹介をしたいと思います。

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

お疲れ様でした！

ホームページ制作

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

【WordPress】準備編 - Wordpressでホーム……
2022.4.8
ホームページ制作

【WordPress】自作テーマ編① - WordPress……
2022.4.11
ホームページ制作

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

【Wordpress】All in one SEOの使い方を……
2023.1.31

ホームページ制作

【Wordpress】All in on……

2023.1.31

ホームページ制作

【WordPress】準備編 - Wor……

2022.4.8

ホームページ制作

【WordPress】自作テーマ編① -……

2022.4.11