<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>個別ページ &#8211; ケケンタの独学ITブログ</title>
	<atom:link href="https://kekenta-it-blog.com/tag/%E5%80%8B%E5%88%A5%E3%83%9A%E3%83%BC%E3%82%B8/feed/" rel="self" type="application/rss+xml" />
	<link>https://kekenta-it-blog.com</link>
	<description>プログラミングやWeb制作の情報を発信</description>
	<lastBuildDate>Tue, 18 Mar 2025 02:12:34 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png</url>
	<title>個別ページ &#8211; ケケンタの独学ITブログ</title>
	<link>https://kekenta-it-blog.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【WordPress】タグ一覧ページとタグ個別ページを作成する方法</title>
		<link>https://kekenta-it-blog.com/wp-tag-archive-single/</link>
					<comments>https://kekenta-it-blog.com/wp-tag-archive-single/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Mon, 24 Jun 2024 07:41:31 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[アーカイブページ]]></category>
		<category><![CDATA[タグ]]></category>
		<category><![CDATA[個別ページ]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=8501</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-tag-archive-single__8501-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>今回はこのようなお悩みをお持ちの方に向けて、WordPressで を作成する方法を解説します。 作業全体の流れ 【手順①】タグのアーカイブページ用のファイルを用意する 掲載するディレクトリはローカル上でのものになりますが [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-tag-archive-single__8501-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPressのオリジナルテーマを作成しているけどタグのアーカイブページや個別ページの作成方法が分からない……</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>今回はこのようなお悩みをお持ちの方に向けて、WordPressで</p>



<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li><strong>タグアーカイブページ</strong></li>



<li><strong>タグ個別ページ</strong></li>
</ul>



<p>を作成する方法を解説します。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong> この記事を読むと分かること</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>タグのアーカイブページを作成する方法</li>



<li>タグの個別ページを作成する方法</li>



<li>作成した各ページをリンクで繋ぐ方法</li>



<li>特定のタグ専用のアーカイブページを作成する方法</li>
</ul>
</div></div>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-cat-archive-single/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-cpt-arc-single/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】カスタム投稿タイプのアーカイブページと個別ページを作成</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-subloop-wq/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">作業全体の流れ</h2>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span>タグのアーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>タグのアーカイブページ用のファイルを用意する</li>



<li>タグの個別ページ用のファイルを用意する</li>
</ul>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは順番に解説していきます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<h2 class="wp-block-heading" id="tejun-three">【手順①】タグのアーカイブページ用のファイルを用意する</h2>



<p class="is-style-icon_info">掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境（本番サーバー）で作業をお進めください。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは早速ですが、実際にファイルを作成する手順をご説明します。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「tag.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">テーマディレクトリ直下にタグアーカイブ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>tag.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">ファイルを作成した様子</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="598" height="518" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-54.png" alt="tag.phpを作成" class="wp-image-8599" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-54.png 598w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-54-300x260.png 300w" sizes="(max-width: 598px) 100vw, 598px" /><figcaption class="wp-element-caption">tag.phpを作成</figcaption></figure>
</div>


<p class="is-style-big_icon_check"><strong>tag.php</strong>を作成することで、タグアーカイブページへアクセスしようとしたとき、WordPressが自動で判断してtag.phpを呼び出してくれます。</p>



<div class="wp-block-group is-style-big_icon_caution"><div class="wp-block-group__inner-container">
<p class="is-style-icon_info">もしも<strong>「特定のタグ専用」のアーカイブページ</strong>を作成したい場合は、ファイル名を以下のようにして下さい。</p>



<p class="has-text-align-center is-style-crease"><strong>tag-[タグのスラッグ].php</strong></p>



<p class="has-text-align-center is-style-balloon_box">（例）タグのスラッグが「sample」の場合</p>



<p class="has-text-align-center is-style-crease"><strong>tag-sample.php</strong></p>



<p>こうすることで、そのタグのアーカイブページへアクセスしようとしときには、「tag-[カテゴリーのスラッグ].php」が呼び出されるようになります。</p>
</div></div>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイルの中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;?php get_header(); ?&gt;

&lt;?php if ( have_posts() ) : ?&gt;
    &lt;!-- ループを回してタグの各記事を出力 --&gt;
    &lt;?php while ( have_posts() ) : the_post(); ?&gt;
        &lt;p&gt;
            &lt;!-- 個別ページへのリンク --&gt;
            &lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;
                &lt;!-- 記事タイトル --&gt;
                &lt;?php the_title(); ?&gt;
            &lt;/a&gt;
        &lt;/p&gt;
    &lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>
</div></div>
</div>



<p class="is-style-icon_pen">上記は「『リンク付きのタイトル』を箇条書きで出力するソースコード」です。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">【手順②】タグの個別ページ用のファイルを用意する</h2>



<p>【手順①】でタグアーカイブページが作成できました。</p>



<p class="is-style-bg_stripe">続いては、アーカイブページで生成している個別リンクから繋がる<strong>個別ページ</strong>を作成していきます。</p>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「single.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">個別ページ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>single.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">ファイルを作成した様子</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="705" height="477" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53.png" alt="single.phpを作成" class="wp-image-8573" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53.png 705w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53-300x203.png 300w" sizes="(max-width: 705px) 100vw, 705px" /><figcaption class="wp-element-caption">single.phpを作成</figcaption></figure>
</div>


<p class="is-style-big_icon_check">single.phpはWordPress上では<strong>「投稿」の個別ページ用ファイル</strong>として認識されます。<br>つまり、【手順①】で生成されたリンクがクリックされて個別ページへアクセスしようとすると、このsingle.phpが呼び出されます。<br><br><strong><span class="swl-marker mark_orange">※すでにsingle.phpが作成済みであれば、この【手順②】の作業は不要ということになります。</span></strong><br>（必要に応じて<strong>以下のSTEP２のソースコードに記載の「アーカイブページへのリンク」部分</strong>を既存のsingle.phpに追記してください）</p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイル（single.php）の中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP" data-line="10-21"><code>&lt;?php get_header(); ?&gt;

&lt;!-- タイトル --&gt;
&lt;?php the_title(); ?&gt;
	
&lt;!-- カスタム投稿本文 --&gt;
&lt;?php the_content(); ?&gt;
		
&lt;!-- アーカイブページへのリンク --&gt;
&lt;?php
    $posttags = get_the_tags();
    if ( $posttags ) {
        echo &#39;&lt;ul&gt;&#39;;
        foreach ( $posttags as $tag ) {
            echo &#39;&lt;li&gt;&lt;a href=&quot;&#39; . get_tag_link($tag-&gt;term_id) . &#39;&quot;&gt;&#39; . $tag-&gt;name . &#39;&lt;/a&gt;&lt;/li&gt;&#39;;
        }
        echo &#39;&lt;/ul&gt;&#39;;
    }
?&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>



<p class="is-style-icon_pen">ハイライト行（10～21行目）が<strong>タグアーカイブページへのリンク関連の記述</strong>になっています。</p>



<p class="is-style-big_icon_check">タグはひとつの記事に対して複数付いていることの方が多いため、このソースコードでは<strong>それらすべてのタグのアーカイブページへのリンクを生成</strong>しています。</p>
</div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上で<strong>個別ページの作成も完了</strong>です！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="is-style-big_icon_check">今回紹介したソースコードでは<strong>アーカイブページと個別ページ間を行き来できるよう両方にお互いのリンクを設置</strong>してみました。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">まとめ</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上が<strong><span class="swl-marker mark_yellow">タグのアーカイブページと個別ページを作成する方法</span></strong>でした！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>改めて大まかな手順を見てみましょう。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span>タグのアーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>タグのアーカイブページ用のファイルを用意する</li>



<li>タグの個別ページ用のファイルを用意する</li>
</ul>
</div></div>



<p>初めてタグのアーカイブページや個別ページを作成しようと思うと、「どうやればいいんだろう」と悩むかもしれません。</p>



<p>しかし、WordPressでは大枠の手順が決まっているため、一度経験してみると作成ルールが意外とシンプルなのがお分かりいただけたかと思います。</p>



<p>一度作成しただけでは慣れないかもしれませんが、２回、３回と繰り返す内に必ず慣れてきます。</p>



<p>この記事をご覧いただき、その一助となったなら幸いです。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは、最後までご覧いただきありがとうございました！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>当ブログではWordPressやWeb制作、PHPに関するお役立ち情報を発信しています。</p>



<p>ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cat-archive-single__8490-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-cat-archive-single/">【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する</a>
						<span class="p-blogCard__excerpt">WordPressのオリジナルテーマを作成しているけどカテゴリーのアーカイブページや個別ページの作成方法が分からない…… 今回はこのようなお悩みをお持ちの方に向けて、Wor&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cpt-arc-single__8275-1-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-cpt-arc-single/">【WordPress】カスタム投稿タイプのアーカイブページと個別ページを作成</a>
						<span class="p-blogCard__excerpt">カスタム投稿タイプのアーカイブページや個別ページの作成方法が分からない…… WordPressでカスタム投稿タイプを利用して カスタム投稿タイプのアーカイブページ カスタ&#8230;</span>					</div>
				</div>
			</div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-tag-archive-single/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する</title>
		<link>https://kekenta-it-blog.com/wp-cat-archive-single/</link>
					<comments>https://kekenta-it-blog.com/wp-cat-archive-single/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Fri, 21 Jun 2024 02:43:04 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[アーカイブページ]]></category>
		<category><![CDATA[カテゴリー]]></category>
		<category><![CDATA[個別ページ]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=8490</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cat-archive-single__8490-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>今回はこのようなお悩みをお持ちの方に向けて、WordPressで を作成する方法を解説します。 作業全体の流れ 【手順①】カテゴリーのアーカイブページ用のファイルを用意する 早速ですが、ここから実際に必要なファイルの作成 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cat-archive-single__8490-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPressのオリジナルテーマを作成しているけどカテゴリーのアーカイブページや個別ページの作成方法が分からない……</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>今回はこのようなお悩みをお持ちの方に向けて、WordPressで</p>



<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li><strong>カテゴリーアーカイブページ</strong></li>



<li><strong>カテゴリー個別ページ</strong></li>
</ul>



<p>を作成する方法を解説します。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong> この記事を読むと分かること</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>カテゴリーのアーカイブページを作成する方法</li>



<li>カテゴリーの個別ページを作成する方法</li>



<li>作成した各ページをリンクで繋ぐ方法</li>



<li>特定のカテゴリー専用のアーカイブページを作成する方法</li>
</ul>
</div></div>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-tag-archive-single/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】タグ一覧ページとタグ個別ページを作成する方法</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-subloop-wq/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-how-to-load-js/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">作業全体の流れ</h2>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span>カテゴリーのアーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>カテゴリーのアーカイブページ用のファイルを用意する</li>



<li>カテゴリーの個別ページ用のファイルを用意する</li>
</ul>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは順番に解説していきます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<h2 class="wp-block-heading" id="tejun-three">【手順①】カテゴリーのアーカイブページ用のファイルを用意する</h2>



<p class="is-style-bg_stripe">早速ですが、ここから実際に必要なファイルの作成を行っていきます。</p>



<p class="is-style-icon_info">掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境（本番サーバー）で作業をお進めください。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは実際にファイルを作成する手順をご説明します。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「category.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">テーマディレクトリ直下にカテゴリーアーカイブ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>category.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">ファイルを作成した様子</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="705" height="477" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-52.png" alt="category.phpを作成" class="wp-image-8571" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-52.png 705w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-52-300x203.png 300w" sizes="(max-width: 705px) 100vw, 705px" /><figcaption class="wp-element-caption">category.phpを作成</figcaption></figure>
</div>


<p class="is-style-big_icon_check"><strong>category.php</strong>を作成することで、カテゴリーアーカイブページへアクセスしようとしたとき、WordPressが自動で判断してcategory.phpを呼び出してくれます。</p>



<div class="wp-block-group is-style-big_icon_caution"><div class="wp-block-group__inner-container">
<p class="is-style-icon_info">もしも<strong>「特定のカテゴリー専用」のアーカイブページ</strong>を作成したい場合は、ファイル名を以下のようにして下さい。</p>



<p class="has-text-align-center is-style-crease"><strong>category-[カテゴリーのスラッグ].php</strong></p>



<p class="has-text-align-center is-style-balloon_box">（例）カテゴリーのスラッグが「sample」の場合</p>



<p class="has-text-align-center is-style-crease"><strong>category-sample.php</strong></p>



<p>こうすることで、そのカテゴリーのアーカイブページへアクセスしようとしときには、「category-[カテゴリーのスラッグ].php」が呼び出されるようになります。</p>
</div></div>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイルの中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;?php get_header(); ?&gt;

&lt;?php if ( have_posts() ) : ?&gt;
    &lt;!-- ループを回してカテゴリーの各記事を出力 --&gt;
    &lt;?php while ( have_posts() ) : the_post(); ?&gt;
        &lt;p&gt;
            &lt;!-- 個別ページへのリンク --&gt;
            &lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;
                &lt;!-- 記事タイトル --&gt;
                &lt;?php the_title(); ?&gt;
            &lt;/a&gt;
        &lt;/p&gt;
    &lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>
</div></div>
</div>



<p class="is-style-icon_pen">上記は「『リンク付きのタイトル』を箇条書きで出力するソースコード」です。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">【手順②】カテゴリーの個別ページ用のファイルを用意する</h2>



<p>【手順①】でカテゴリーアーカイブページが作成できました。</p>



<p class="is-style-bg_stripe">続いては、アーカイブページで生成している個別リンクから繋がる<strong>個別ページ</strong>を作成していきます。</p>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「single.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">個別ページ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>single.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">ファイルを作成した様子</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="705" height="477" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53.png" alt="single.phpを作成" class="wp-image-8573" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53.png 705w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-53-300x203.png 300w" sizes="(max-width: 705px) 100vw, 705px" /><figcaption class="wp-element-caption">single.phpを作成</figcaption></figure>
</div>


<p class="is-style-big_icon_check">single.phpはWordPress上では<strong>「投稿」の個別ページ用ファイル</strong>として認識されます。<br>つまり、【手順①】で生成されたリンクがクリックされて個別ページへアクセスしようとすると、このsingle.phpが呼び出されます。<br><br><strong><span class="swl-marker mark_orange">※すでにsingle.phpが作成済みであれば、この【手順②】の作業は不要ということになります。</span></strong><br>（必要に応じて<strong>以下のSTEP２のソースコードに記載の「アーカイブページへのリンク」部分</strong>を既存のsingle.phpに追記してください）</p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイル（single.php）の中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP" data-line="10-14"><code>&lt;?php get_header(); ?&gt;

&lt;!-- タイトル --&gt;
&lt;?php the_title(); ?&gt;
	
&lt;!-- カスタム投稿本文 --&gt;
&lt;?php the_content(); ?&gt;
		
&lt;!-- アーカイブページへのリンク --&gt;
&lt;?php 
 	$cat = get_the_category()[0];
    $cat_id = $cat-&gt;cat_ID;
?&gt;
&lt;a href=&quot;&lt;?php echo get_category_link( $cat_id ); ?&gt;&quot;&gt;カテゴリーアーカイブへのリンク&lt;/a&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>



<p class="is-style-icon_pen">ハイライト行（10～14行目）が<strong>カテゴリーアーカイブページへのリンク関連の記述</strong>になっています。</p>
</div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上で<strong>個別ページの作成も完了</strong>です！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="is-style-big_icon_check">今回紹介したソースコードでは<strong>アーカイブページと個別ページ間を行き来できるよう両方にお互いのリンクを設置</strong>しました。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">まとめ</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上が<strong><span class="swl-marker mark_yellow">カテゴリーのアーカイブページと個別ページを作成する方法</span></strong>でした！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>改めて大まかな手順を見てみましょう。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span>カテゴリーのアーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>カテゴリーのアーカイブページ用のファイルを用意する</li>



<li>カテゴリーの個別ページ用のファイルを用意する</li>
</ul>
</div></div>



<p>分からないときは難しく感じる作業も、このように手順が明確化するとハードルが下がります。</p>



<p>この記事をご覧いただき、その一助となったなら幸いです。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは、最後までご覧いただきありがとうございました！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>当ブログではWordPressやWeb制作、PHPに関するお役立ち情報を発信しています。</p>



<p>ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-tag-archive-single__8501-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-tag-archive-single/">【WordPress】タグ一覧ページとタグ個別ページを作成する方法</a>
						<span class="p-blogCard__excerpt">WordPressのオリジナルテーマを作成しているけどタグのアーカイブページや個別ページの作成方法が分からない…… 今回はこのようなお悩みをお持ちの方に向けて、WordPress&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cpt-arc-single__8275-1-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-cpt-arc-single/">【WordPress】カスタム投稿タイプのアーカイブページと個別ページを作成</a>
						<span class="p-blogCard__excerpt">カスタム投稿タイプのアーカイブページや個別ページの作成方法が分からない…… WordPressでカスタム投稿タイプを利用して カスタム投稿タイプのアーカイブページ カスタ&#8230;</span>					</div>
				</div>
			</div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-cat-archive-single/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】カスタム投稿タイプのアーカイブページと個別ページを作成</title>
		<link>https://kekenta-it-blog.com/wp-cpt-arc-single/</link>
					<comments>https://kekenta-it-blog.com/wp-cpt-arc-single/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Wed, 12 Jun 2024 06:31:32 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[CPT UI]]></category>
		<category><![CDATA[アーカイブページ]]></category>
		<category><![CDATA[カスタム投稿タイプ]]></category>
		<category><![CDATA[個別ページ]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=8275</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cpt-arc-single__8275-1-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>WordPressでカスタム投稿タイプを利用して を作成する方法を解説します。 作業全体の流れ CPT UIを使用してカスタム投稿タイプやそのアーカイブページ、個別ページを作成する方法を開設するにあたり、まずはザックリと [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cpt-arc-single__8275-1-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>カスタム投稿タイプのアーカイブページや個別ページの作成方法が分からない……</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>WordPressでカスタム投稿タイプを利用して</p>



<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>カスタム投稿タイプの<strong>アーカイブページ</strong></li>



<li>カスタム投稿タイプの<strong>個別ページ</strong></li>
</ul>



<p>を作成する方法を解説します。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong>この記事を読むと分かること</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>WordPressプラグイン「CPT UI」でカスタム投稿タイプを追加する方法</li>



<li>カスタム投稿タイプのアーカイブページを作成する方法</li>



<li>カスタム投稿タイプの個別ページを作成する方法</li>



<li>作成した各ページをリンクで繋ぐ方法</li>
</ul>
</div></div>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-tag-archive-single/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】タグ一覧ページとタグ個別ページを作成する方法</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-cat-archive-single/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-subloop-wq/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">作業全体の流れ</h2>



<p class="is-style-bg_stripe"><strong>CPT UI</strong>を使用してカスタム投稿タイプやそのアーカイブページ、個別ページを作成する方法を開設するにあたり、まずはザックリと<strong>全体の流れ</strong>をお伝えします。</p>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span>CPT UIを使用してカスタム投稿タイプの<br>アーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li><strong>CPT UI</strong>をインストールする</li>



<li>CPT UIでカスタム投稿タイプ作成する</li>



<li>カスタム投稿タイプのアーカイブページ用のファイルを用意する</li>



<li>カスタム投稿タイプの個別ページ用のファイルを用意する</li>
</ul>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは順番に解説していきます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p class="is-style-icon_pen">すでにカスタム投稿タイプの作成までお済の方は<br><a href="#tejun-three">【手順③】カスタム投稿タイプのアーカイブページ用のファイルを用意する</a><br>からご覧ください。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">STEP１　<strong>CPT UI</strong>をインストールする</h2>



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><span>CPT UIとは？</span></div><div class="cap_box_content">
<p><strong>CPT UI</strong>（正式名：<strong>Custom Post Type UI</strong>）は、WordPressプラグインのひとつで、<strong><span class="swl-marker mark_yellow">カスタム投稿タイプを簡単に追加できるようにするためのプラグイン</span></strong>です。</p>
</div></div>



<p>今回はこのCPT UIを使用してカスタム投稿タイプを作成し、そのアーカイブページや個別ページを作成する方法を解説していきます。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それではまずは<strong>CPT UI（<strong>Custom Post Type UI</strong>）をWordPressにインストール</strong>していきましょう。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「プラグイン」→「新規プラグイン追加」をクリックする</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">管理画面にある「プラグイン」→「新規プラグイン追加」をクリックします。</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="322" height="131" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-33.png" alt="「新規プラグインを追加」項目" class="wp-image-8291" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-33.png 322w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-33-300x122.png 300w" sizes="(max-width: 322px) 100vw, 322px" /><figcaption class="wp-element-caption">「新規プラグインを追加」項目</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「プラグインの検索」フォームに「CPT UI」と入力する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">以下の画像のように、画面右上にある「プラグインの検索」フォームに「CPT UI」と入力します。</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="872" height="158" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-34.png" alt="「プラグインの検索」フォームにCPT UIと入力" class="wp-image-8293" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-34.png 872w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-34-300x54.png 300w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-34-768x139.png 768w" sizes="(max-width: 872px) 100vw, 872px" /><figcaption class="wp-element-caption">「プラグインの検索」フォームにCPT UIと入力</figcaption></figure>
</div>

<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>すると、以下のような検索結果が表示されるかと思います。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-large"><img decoding="async" width="1024" height="499" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36-1024x499.png" alt="プラグイン検索結果" class="wp-image-8299" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36-1024x499.png 1024w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36-300x146.png 300w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36-768x374.png 768w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36-1536x748.png 1536w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-36.png 1713w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">プラグイン検索結果</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「今すぐインストール」をクリックする</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて、「<strong>Custom Post Type UI</strong>」の「今すぐインストール」をクリックします。</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="562" height="423" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-37.png" alt="「今すぐインストール」をクリック" class="wp-image-8301" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-37.png 562w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-37-300x226.png 300w" sizes="(max-width: 562px) 100vw, 562px" /><figcaption class="wp-element-caption">「今すぐインストール」をクリック</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「有効化」をクリックする</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">ボタンの表示が「有効化」に変わるので、それをクリックします。</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="567" height="428" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-38.png" alt="「有効化」をクリックする" class="wp-image-8303" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-38.png 567w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-38-300x226.png 300w" sizes="(max-width: 567px) 100vw, 567px" /><figcaption class="wp-element-caption">「有効化」をクリックする</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「今すぐリロードする」をクリックする</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">すると、画面上部に「今すぐリロードする」ボタンが表示されるため、それをクリックします。</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="735" height="105" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-39.png" alt="" class="wp-image-8306" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-39.png 735w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-39-300x43.png 300w" sizes="(max-width: 735px) 100vw, 735px" /><figcaption class="wp-element-caption">「今すぐリロードする」をクリックする</figcaption></figure>
</div>


<p class="is-style-icon_info">テーマによっては「今すぐリロードする」ボタンが表示されません。<br>その場合は、お使いのキーボードの「Ctrl + R」キーを押してページ更新を行ってください。</p>
</div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ここまで完了すると、以下のように管理画面の左メニューの下の方に「CPT UI」の項目が追加されます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="159" height="151" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-40.png" alt="管理画面の左メニューに「CPT UI」が追加される" class="wp-image-8309"/><figcaption class="wp-element-caption">管理画面の左メニューに「CPT UI」が追加される</figcaption></figure>
</div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">STEP２　CPT UIでカスタム投稿タイプ作成する</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>CPT UIをインストールできたら、続いて<strong>カスタム投稿タイプを作成</strong>していきます。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「CPT UI」→「投稿タイプの追加と編集」をクリック</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">まずは「CPT UI」→「投稿タイプの追加と編集」をクリックします。</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="322" height="219" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-41.png" alt="「CPT UI」→「投稿タイプの追加と編集」をクリック" class="wp-image-8316" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-41.png 322w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-41-300x204.png 300w" sizes="(max-width: 322px) 100vw, 322px" /><figcaption class="wp-element-caption">「CPT UI」→「投稿タイプの追加と編集」をクリック</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">投稿タイプ情報を入力する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">以下のような画面が表示されたら、続いて「投稿タイプ情報」を入力していきます。</p>



<p class="is-style-icon_info">画面左下の「投稿タイプを追加」ボタンはまだ押さないようにして下さい</p>



<figure class="wp-block-image size-full is-style-shadow size_s"><img decoding="async" width="888" height="708" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-42.png" alt="投稿タイプ情報の入力画面" class="wp-image-8318" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-42.png 888w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-42-300x239.png 300w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-42-768x612.png 768w" sizes="(max-width: 888px) 100vw, 888px" /><figcaption class="wp-element-caption">投稿タイプ情報の入力画面</figcaption></figure>



<p class="has-text-align-center is-style-balloon_box">（例）入力する情報</p>



<figure class="wp-block-table is-thead-centered"><table class="has-fixed-layout"><thead><tr><th>項目名</th><th>入力内容</th></tr></thead><tbody style="--tbody-th-color--bg:var(--color_main);--tbody-th-color--txt:var(--swl-text_color--white)"><tr><th>投稿タイプスラッグ</th><td>sample</td></tr><tr><th>複数形のラベル</th><td>サンプル</td></tr><tr><th>単数形のラベル</th><td>サンプル</td></tr></tbody></table><figcaption class="wp-element-caption">（例）入力する情報</figcaption></figure>



<p class="is-style-icon_pen"><strong>各項目は任意の分かりやすいもので大丈夫です</strong>。<br>※「投稿タイプスラッグ」はファイル名やソースコード上でも使用します。</p>



<p class="has-text-align-center is-style-balloon_box">入力後</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="887" height="608" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-43.png" alt="投稿タイプ情報入力後の状態" class="wp-image-8324" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-43.png 887w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-43-300x206.png 300w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-43-768x526.png 768w" sizes="(max-width: 887px) 100vw, 887px" /><figcaption class="wp-element-caption">投稿タイプ情報入力後の状態</figcaption></figure>
</div>


<div class="wp-block-group is-style-big_icon_caution"><div class="wp-block-group__inner-container">
<p class="is-style-bg_stripe"><strong>「投稿タイプを追加」ボタンは押さずに次のステップ</strong>へお進み下さい。<br>もし押してしまった場合は、画面上部にある以下の「投稿タイプを編集」タブを押してください。</p>


<div class="wp-block-image is-style-shadow size_s">
<figure class="aligncenter size-full"><img decoding="async" width="760" height="164" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-44.png" alt="「投稿タイプを編集」タブ" class="wp-image-8330" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-44.png 760w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-44-300x65.png 300w" sizes="(max-width: 760px) 100vw, 760px" /><figcaption class="wp-element-caption">「投稿タイプを編集」タブ</figcaption></figure>
</div></div></div>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「投稿タイプ」の「設定」内容を入力する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">次に、「投稿タイプ」でアーカイブページが出力されるように設定を行っていきます。</p>



<p>同じ画面のまま、下の方へしばらくスクロールしていくと「アーカイブあり」という項目が見えてきます。</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="703" height="151" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-45.png" alt="「アーカイブあり」項目" class="wp-image-8335" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-45.png 703w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-45-300x64.png 300w" sizes="(max-width: 703px) 100vw, 703px" /><figcaption class="wp-element-caption">「アーカイブあり」項目</figcaption></figure>
</div>


<p class="is-style-bg_stripe">デフォルトでは「False」になっているため、これを「True」に変更します。</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="710" height="120" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-46.png" alt="「True」に変更する" class="wp-image-8339" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-46.png 710w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-46-300x51.png 300w" sizes="(max-width: 710px) 100vw, 710px" /><figcaption class="wp-element-caption">「True」に変更する</figcaption></figure>
</div>


<p class="is-style-big_icon_check">この手順はスキップすることも可能ではあるのですが、WordPressの仕組み上、上記のように「True＝有効」にすることで、このあと作成するアーカイブ用ファイルの作成が楽になります。</p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「投稿タイプを保存」をクリックする</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">最後に、ページ最下部にある「投稿タイプを保存」ボタンをクリックします。</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="281" height="130" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-47.png" alt="「投稿タイプを保存」をクリックする" class="wp-image-8347"/><figcaption class="wp-element-caption">「投稿タイプを保存」をクリックする</figcaption></figure>
</div></div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p><strong>管理画面の左メニューに「サンプル」（STEP２で入力したラベル名）という項目が表示されていればここまでの手順は順調です。</strong></p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading" id="tejun-three">STEP３　カスタム投稿タイプのアーカイブページ用のファイルを用意する</h2>



<p class="is-style-bg_stripe">ここからは実際に必要なファイル作成を行っていきます。</p>



<p class="is-style-icon_info">掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境（本番サーバー）で作業をお進めください。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは実際にファイルを作成する手順をご説明します。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「archive-○○○○.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">テーマディレクトリ直下にアーカイブ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>archive-「CPT UIで設定した『投稿タイプスラッグ』」.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">（例）ファイル名</p>



<p class="has-border -border01">投稿タイプスラッグを「sample」とした場合、<br><strong>archive-sample.php</strong><br>にする。</p>



<p class="has-text-align-center is-style-balloon_box">（例）ファイルの作成</p>



<figure class="wp-block-image size-full is-style-shadow"><img decoding="async" width="514" height="471" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-48.png" alt="archive-○○○○.phpを作成" class="wp-image-8354" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-48.png 514w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-48-300x275.png 300w" sizes="(max-width: 514px) 100vw, 514px" /><figcaption class="wp-element-caption">archive-○○○○.phpを作成</figcaption></figure>



<p class="is-style-big_icon_check"><strong>archive-○○○○.php</strong>とすることで「『○○○○』というスラッグを持つ投稿タイプのアーカイブページ用ファイル」であることをWordPressに伝えることができます。<br>これにより、実際に<strong>「○○○○」のアーカイブページにアクセスしたときarchive-○○○○.phpが呼び出されます。</strong></p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイルの中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;?php get_header(); ?&gt;

&lt;div&gt;
    &lt;?php if ( have_posts() ) : ?&gt;
        &lt;?php while ( have_posts() ) : the_post(); ?&gt;
            &lt;!-- カスタム投稿個別ページへのリンク --&gt;
            &lt;p&gt;
              &lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
            &lt;/p&gt;
        &lt;?php endwhile; ?&gt;
    &lt;?php endif; ?&gt;
&lt;/div&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p><strong>ここまででいったんアーカイブページの作成は完了</strong>なのですが、実際の表示を見てみたいという方は以下の<strong>STEP３以降</strong>もお進めください。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">「【手順②】CPT UIでカスタム投稿タイプ作成する」で作成したカスタム投稿タイプにいくつかサンプル用の投稿記事を追加する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">通常の「投稿」と同じ要領で、先ほど作成したカスタム投稿タイプに記事を追加します。</p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">アーカイブページへアクセスしてみる</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">STEP３でサンプルの記事をいくつか追加できたら、実際にアーカイブページへアクセスしてみましょう。</p>



<p>アクセスする際は<strong>以下のURLをアドレスバーにご入力</strong>ください。</p>



<p class="has-text-align-center is-style-emboss_box"><strong>https://ドメイン/カスタム投稿タイプのスラッグ</strong></p>



<p class="has-text-align-center is-style-balloon_box"><strong>（例）アーカイブページのURL</strong><br>※カスタム投稿タイプのスラッグが「sample」の場合</p>



<p class="has-text-align-center"><strong>https://kekenta-it-blog.com/sample</strong></p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>すると、アーカイブページと共に追加したサンプル記事の一覧が表示されたかと思います。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<figure class="wp-block-image size-full is-style-shadow"><img decoding="async" width="221" height="103" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-49.png" alt="サンプル記事一覧" class="wp-image-8375"/><figcaption class="wp-element-caption">サンプル記事一覧</figcaption></figure>
</div></div>
</div>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">STEP４　カスタム投稿タイプの個別ページ用のファイルを用意する</h2>



<p>ここまでの手順でカスタム投稿タイプのアーカイブページが作成できました。</p>



<p class="is-style-bg_stripe">続いては、アーカイブページの個別リンクから繋がる個別ページを作成していきます。</p>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">テーマディレクトリ直下に「single-○○○○.php」を作成する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">個別ページ用のPHPファイル（テンプレートファイル）を作成します。</p>



<p>このとき、ファイル名は</p>



<p class="has-text-align-center is-style-crease"><strong>single-「CPT UIで設定した『投稿タイプスラッグ』」.php</strong></p>



<p>として下さい。</p>



<p class="has-text-align-center is-style-balloon_box">（例）ファイル名</p>



<p class="has-border -border01">投稿タイプスラッグを「sample」とした場合、<br><strong>single-sample.php</strong><br>にする。</p>



<p class="has-text-align-center is-style-balloon_box">ファイルの作成例</p>


<div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="514" height="471" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-50.png" alt="single-○○○○.phpを作成" class="wp-image-8379" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-50.png 514w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/image-50-300x275.png 300w" sizes="(max-width: 514px) 100vw, 514px" /><figcaption class="wp-element-caption">single-○○○○.phpを作成</figcaption></figure>
</div>


<p class="is-style-big_icon_check">アーカイブページのときと同様の理屈で、<strong>single-○○○○.php</strong>とすることで「『○○○○』というスラッグを持つ投稿タイプの個別ページ用ファイル」であることをWordPressに伝えることができます。<br>これにより、実際に<strong>「○○○○」の個別ページにアクセスしたときsingle-○○○○.phpが呼び出されます。</strong></p>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">作成したファイルの中にソースコードを記述する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">続いて作成したファイルの中に以下のソースコードを記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP" data-line="11"><code>&lt;?php get_header(); ?&gt;

&lt;!-- タイトル --&gt;
&lt;?php the_title(); ?&gt;
	
&lt;!-- カスタム投稿本文 --&gt;
&lt;?php the_content(); ?&gt;
		
&lt;!-- カスタム投稿アーカイブページへのリンク --&gt;
&lt;a href=&quot;&lt;?php echo esc_url(get_post_type_archive_link(&#39;カスタム投稿タイプのスラッグ&#39;)); ?&gt;&quot;&gt;アーカイブページ&lt;/a&gt;

&lt;?php get_footer(); ?&gt;</code></pre></div>



<p class="is-style-icon_pen">ハイライト行（17行目）は<strong>アーカイブページへのリンク</strong>になっています。<br>※<strong>get_post_type_archive_link(&#8216;カスタム投稿タイプのスラッグ&#8217;)</strong>と記述することで、指定したスラッグのアーカイブページのリンクを取得できます。<br><br>（例）スラッグが「sample」の場合<br><strong>get_post_type_archive_link(&#8216;sample&#8217;)</strong></p>
</div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上で<strong>個別ページの作成も完了</strong>です！<br>実際の表示を見てみたいという方は、<strong>アーカイブページにある個別ページリンクをクリック</strong>してみて下さい。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="wp-block-group is-style-big_icon_good"><div class="wp-block-group__inner-container">
<p>アーカイブページのソースコードにあった以下の部分が<strong>個別ページへのリンク</strong>になっています。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- カスタム投稿個別ページへのリンク --&gt;
&lt;p&gt;
  &lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
&lt;/p&gt;</code></pre></div>



<p class="is-style-bg_stripe"><strong>the_permalink()</strong>で個別ページのURLを出力しています。</p>
</div></div>



<h2 class="wp-block-heading">まとめ</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ここまでお疲れさまでした！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>記事で見ると工程が長めなので初めて作成した方などにとって大変な作業だったのではないかと思います。</p>



<p>しかし、改めて</p>



<p><strong>CPT UIを使用してカスタム投稿タイプのアーカイブページ・個別ページを作成する手順</strong></p>



<p>を見てみると、大枠としてはそれほど複雑でないことがお分かりになるかと思います。</p>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span>CPT UIを使用してカスタム投稿タイプの<br>アーカイブページと個別ページを作成する流れ</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>CPT UIをインストールする</li>



<li>CPT UIでカスタム投稿タイプ作成する</li>



<li>カスタム投稿タイプのアーカイブページ用のファイルを用意する</li>



<li>カスタム投稿タイプの個別ページ用のファイルを用意する</li>
</ul>
</div></div>



<p>何度か経験すればおおよその流れは掴めるかと思うので、今後もこの記事を参考にしていただけると嬉しいです。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>この記事が少しでもお役に立ったなら何よりです。<br>長い記事となりましたが、最後までご覧いただきありがとうございました！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>当ブログではWordPressやWeb制作、PHPに関するお役立ち情報を発信しています。</p>



<p>ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-tag-archive-single__8501-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-tag-archive-single/">【WordPress】タグ一覧ページとタグ個別ページを作成する方法</a>
						<span class="p-blogCard__excerpt">WordPressのオリジナルテーマを作成しているけどタグのアーカイブページや個別ページの作成方法が分からない…… 今回はこのようなお悩みをお持ちの方に向けて、WordPress&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-cat-archive-single__8490-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-cat-archive-single/">【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する</a>
						<span class="p-blogCard__excerpt">WordPressのオリジナルテーマを作成しているけどカテゴリーのアーカイブページや個別ページの作成方法が分からない…… 今回はこのようなお悩みをお持ちの方に向けて、Wor&#8230;</span>					</div>
				</div>
			</div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-cpt-arc-single/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
