ワードプレスオリジナルテーマ作り方⑧　固定ページ作成 | 福岡のホームページ制作はマリオ君にお任せ

為にならないブログ

見出しおじさん

BLOG

ワードプレスオリジナルテーマ作り方⑧　固定ページ作成

2023年05月25日

ワードプレスオリジナルテーマ作り方⑧　固定ページ作成

固定ページの作り方

今回は固定ページを作成して行きたいと思います。
固定ページの作り方は何種類かああります。

①管理画面で編集page.php

ワードプレスの管理画面の固定ページに投稿した記事を
page.php
ファイルで出力する方法

②スラッグを合わせて特定の固定ページ作成

そのほかには好きな
page-好きな名前のスラッグ.php
でファイルをつくって
ワードプレスの管理画面の固定ページで投稿するときにスラッグを同じにするやり方で読み込ませる方法①よりこっちの方が読み込み優先度が高いです。

③カスタムテンプレートファイルで固定ページ作成

カスタムテンプレートファイルを作って
ワードプレスの管理画面の固定ページで投稿するときにテンプレートを選ぶ方法
後で説明します
①よりこっちの方が優先度が高い
管理画面の固定ページの投稿欄は空欄（ファイルに記述されているものが表示される）

があります。

3つの違いを簡単に説明すると

page.phpで作るやり方は、使いまわしはしやすいですが、細かい指定がめんどくさい・大変や

編集を管理画面でやるか、ファイルの中でやるかが違います。

個人的には管理画面で編集するのはかなりめんどいです。パスの差し替えも大変ですし、改行すら若干おっくうになるレベルです。

ほかには、サイト内検索にひかかるかひかからないかもあります。

ぼくは、特に理由はないですが、管理がしやすいので、③のカスタムテンプレートファイルを使って固定ページを作っています。

②でもほとんど変わりませんが、使いましの可能性の観点などから③のカスタムテンプレートファイルで作っています。

制作の段階で決めますが、上司からの指定やクライアント様のご要望にそえなくなる場合以外はカスタムテンプレートファイルで固定ページを作っています。検索窓口を作るとき以外で使用したことはほぼありません。
もう一度言いますが特に理由はありません。

では③のカスタムテンプレートファイルで固定ページを作っていきます。


ファイルの作りは方はとっても簡単

ぺージ最上部に

<?PHP 
/*
Template Name:ここに好きな名前
*/
?>

を入れるだけです。

ファイル名は何でもいいです、

早速ホームページ制作のぺージの固定ページを作ります。

作る見本はこちら

こちらのHTMLはファイルはhp.htmlで中身はこんな感じ

<body>

<div class="bwrap">
	<header>
		<h1>ページのタイトル | サイトのタイトルを表示させます</h1>
		<p class="logo">
			<a href="index.html">
				<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="hp.html">ホームぺージ制作</a></li>
			<li><a href="works.html">制作実績</a></li>
			<li><a href="price.html">料金</a></li>
			<li><a href="flow.html">ご依頼の流れ</a></li>
			<li><a href="feature.html">マリオ君の特徴</a></li>
			<li><a href="question.html">よくある質問</a></li>
			<li><a href="company.html">会社概要</a></li>
			<li><a href="contact.html">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->
	<article>
		<h2 class="fuki">サービス内容</h2>
		<section class="blogbox02">
			<dl>
				<dt>ホームぺージ作ります</dt>
				<dd>
				ご要望のホームページを作ります。
				</dd>
			</dl>

			<dl>
				<dt>リニューアルもお任せください</dt>
				<dd>
				今お持ちのホームぺージのいいところを引継ぎ改善点は直して新しいホームページにします。
				</dd>
			</dl>

			<dl>
				<dt>スマホも対応</dt>
				<dd>
				スマホやタブレットで見てもみやすいレスポンシブデザインで制作します。
				</dd>
			</dl>

			<dl>
				<dt>運用もお任せ</dt>
				<dd>
				WEB担当者がいなくても大丈夫、マリオ君が代わりにがんばんります。
				</dd>
			</dl>

			<dl>
				<dt>更新システム搭載</dt>
				<dd>
				知識がなくても簡単に更新できるワードプレスを導入し簡単に更新していただけます。
				</dd>
			</dl>

			<dl>
				<dt>ランディングぺージお任せ</dt>
				<dd>
				訴求力のある疑問を投げかけ解決に向かうランディングぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>修正依頼もOK</dt>
				<dd>
				他社で制作されたホームページの修正もやってます。※対応できない場合もあります。
				</dd>
			</dl>

			<dl>
				<dt>バナーだけでもいいよ</dt>
				<dd>
				バナーだけの依頼もまってます。
				</dd>
			</dl>

			<dl>
				<dt>SEO対策</dt>
				<dd>
				検索順位対策もやってます。
				</dd>
			</dl>

			<dl>
				<dt>SSLも対応してるよ</dt>
				<dd>
				暗号化通信のSSLもちゃんと設定します。
				</dd>
			</dl>

			<dl>
				<dt>独自ドメインとります</dt>
				<dd>
				世界で一つにURLを取得します。
				</dd>
			</dl>

			<dl>
				<dt>ブログの更新代行</dt>
				<dd>
				めんどくさいことは任せて。
				</dd>
			</dl>

			<dl>
				<dt>オリジナルデザインです</dt>
				<dd>
				オリジナルで一からホームぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>メールアドレスもつくれるよ</dt>
				<dd>
				独自ドメインでオリジナルのメールアドレスで信頼度アップ。
				</dd>
			</dl>

			<dl>
				<dt>ホームーページ以外も</dt>
				<dd>
				結構なんでもできるよ。問い合わせて。
				</dd>
			</dl>

			
		</section>
		<!--blogbox02-->
	</article>
	<footer>
		<nav>
			<ul>
				<li><a href="hp.html">ホームぺージ制作</a></li>
				<li><a href="works.html">制作実績</a></li>
				<li><a href="price.html">料金</a></li>
				<li><a href="flow.html">ご依頼の流れ</a></li>
				<li><a href="feature.html">マリオ君の特徴</a></li>
				<li><a href="question.html">よくある質問</a></li>
				<li><a href="company.html">会社概要</a></li>
				<li><a href="contact.html">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わりr-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
</body>

これをいままで作ってきたように共通の部分をパーツ化すると

<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	<article>
		<h2 class="fuki">サービス内容</h2>
		<section class="blogbox02">
			<dl>
				<dt>ホームぺージ作ります</dt>
				<dd>
				ご要望のホームページを作ります。
				</dd>
			</dl>

			<dl>
				<dt>リニューアルもお任せください</dt>
				<dd>
				今お持ちのホームぺージのいいところを引継ぎ改善点は直して新しいホームページにします。
				</dd>
			</dl>

			<dl>
				<dt>スマホも対応</dt>
				<dd>
				スマホやタブレットで見てもみやすいレスポンシブデザインで制作します。
				</dd>
			</dl>

			<dl>
				<dt>運用もお任せ</dt>
				<dd>
				WEB担当者がいなくても大丈夫、マリオ君が代わりにがんばんります。
				</dd>
			</dl>

			<dl>
				<dt>更新システム搭載</dt>
				<dd>
				知識がなくても簡単に更新できるワードプレスを導入し簡単に更新していただけます。
				</dd>
			</dl>

			<dl>
				<dt>ランディングぺージお任せ</dt>
				<dd>
				訴求力のある疑問を投げかけ解決に向かうランディングぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>修正依頼もOK</dt>
				<dd>
				他社で制作されたホームページの修正もやってます。※対応できない場合もあります。
				</dd>
			</dl>

			<dl>
				<dt>バナーだけでもいいよ</dt>
				<dd>
				バナーだけの依頼もまってます。
				</dd>
			</dl>

			<dl>
				<dt>SEO対策</dt>
				<dd>
				検索順位対策もやってます。
				</dd>
			</dl>

			<dl>
				<dt>SSLも対応してるよ</dt>
				<dd>
				暗号化通信のSSLもちゃんと設定します。
				</dd>
			</dl>

			<dl>
				<dt>独自ドメインとります</dt>
				<dd>
				世界で一つにURLを取得します。
				</dd>
			</dl>

			<dl>
				<dt>ブログの更新代行</dt>
				<dd>
				めんどくさいことは任せて。
				</dd>
			</dl>

			<dl>
				<dt>オリジナルデザインです</dt>
				<dd>
				オリジナルで一からホームぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>メールアドレスもつくれるよ</dt>
				<dd>
				独自ドメインでオリジナルのメールアドレスで信頼度アップ。
				</dd>
			</dl>

			<dl>
				<dt>ホームーページ以外も</dt>
				<dd>
				結構なんでもできるよ。問い合わせて。
				</dd>
			</dl>

			
		</section>
		<!--blogbox02-->
	</article>

	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

であとは拡張子の.htmlから.phpに変更
コピーでも同じです。

そして最後にページ上部に

<?PHP 
/*
Template Name:好きな名前
*/
?>

を入れたら完成です。

完成はこちら。テンプレートの名前は管理しやすいよう内容がわかりやすいようhpにしています。

<?PHP 
/*
Template Name:hp
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	<article>
		<h2 class="fuki">サービス内容</h2>
		<section class="blogbox02">
			<dl>
				<dt>ホームぺージ作ります</dt>
				<dd>
				ご要望のホームページを作ります。
				</dd>
			</dl>

			<dl>
				<dt>リニューアルもお任せください</dt>
				<dd>
				今お持ちのホームぺージのいいところを引継ぎ改善点は直して新しいホームページにします。
				</dd>
			</dl>

			<dl>
				<dt>スマホも対応</dt>
				<dd>
				スマホやタブレットで見てもみやすいレスポンシブデザインで制作します。
				</dd>
			</dl>

			<dl>
				<dt>運用もお任せ</dt>
				<dd>
				WEB担当者がいなくても大丈夫、マリオ君が代わりにがんばんります。
				</dd>
			</dl>

			<dl>
				<dt>更新システム搭載</dt>
				<dd>
				知識がなくても簡単に更新できるワードプレスを導入し簡単に更新していただけます。
				</dd>
			</dl>

			<dl>
				<dt>ランディングぺージお任せ</dt>
				<dd>
				訴求力のある疑問を投げかけ解決に向かうランディングぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>修正依頼もOK</dt>
				<dd>
				他社で制作されたホームページの修正もやってます。※対応できない場合もあります。
				</dd>
			</dl>

			<dl>
				<dt>バナーだけでもいいよ</dt>
				<dd>
				バナーだけの依頼もまってます。
				</dd>
			</dl>

			<dl>
				<dt>SEO対策</dt>
				<dd>
				検索順位対策もやってます。
				</dd>
			</dl>

			<dl>
				<dt>SSLも対応してるよ</dt>
				<dd>
				暗号化通信のSSLもちゃんと設定します。
				</dd>
			</dl>

			<dl>
				<dt>独自ドメインとります</dt>
				<dd>
				世界で一つにURLを取得します。
				</dd>
			</dl>

			<dl>
				<dt>ブログの更新代行</dt>
				<dd>
				めんどくさいことは任せて。
				</dd>
			</dl>

			<dl>
				<dt>オリジナルデザインです</dt>
				<dd>
				オリジナルで一からホームぺージつくります。
				</dd>
			</dl>

			<dl>
				<dt>メールアドレスもつくれるよ</dt>
				<dd>
				独自ドメインでオリジナルのメールアドレスで信頼度アップ。
				</dd>
			</dl>

			<dl>
				<dt>ホームーページ以外も</dt>
				<dd>
				結構なんでもできるよ。問い合わせて。
				</dd>
			</dl>

			
		</section>
		<!--blogbox02-->
	</article>

	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

以上で完成です。ファイル名はhp.phpにしています。ファイル名は何でもいいです。紐づけはページに中に書いてあるTemplate Name:と管理画面のテンプレートで紐づけられます。

確認のためもう1個作ります。

制作事例を作ります。（本来ならこちらはカスタム投稿でつくったりします。カスタム投稿は本番サイトを作った時に投稿予定）

見本はこちら

ファイル名はworks.html

中身はこちら

<body>

<div class="bwrap">
	<header>
		<h1>ページのタイトル | サイトのタイトルを表示させます</h1>
		<p class="logo">
			<a href="index.html">
				<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="hp.html">ホームぺージ制作</a></li>
			<li><a href="works.html">制作実績</a></li>
			<li><a href="price.html">料金</a></li>
			<li><a href="flow.html">ご依頼の流れ</a></li>
			<li><a href="feature.html">マリオ君の特徴</a></li>
			<li><a href="question.html">よくある質問</a></li>
			<li><a href="company.html">会社概要</a></li>
			<li><a href="contact.html">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->
	<article>
		<h2 class="fuki">サービス内容</h2>
			<p class="topi">
			見やすいサイトつくってます
			</p>
		<section class="blogbox02 work">
			<dl>
				<dt><a href="https://reminaclinical.com/" target="_blank">福岡　ハイフ</a></dt>
				<dd>
					<img src="img/work01.jpg" alt="福岡　ハイフ">
				</dd>
			</dl>
			<dl>
				<dt><a href="https://koukanmaster.com/" target="_blank">福岡　トイレ交換</a></dt>
				<dd>
					<img src="img/work02.jpg" alt="福岡　トイレ交換">
				</dd>
			</dl>
			<dl>
				<dt><a href="https://suripuru.com/" target="_blank">福岡　ドライヘッドスパ</a></dt>
				<dd>
					<img src="img/work03.jpg" alt="福岡　ドライヘッドスパ">
				</dd>
			</dl>

		</section>
		<!--blogbox02-->
	</article>
	<footer>
		<nav>
			<ul>
				<li><a href="hp.html">ホームぺージ制作</a></li>
				<li><a href="works.html">制作実績</a></li>
				<li><a href="price.html">料金</a></li>
				<li><a href="flow.html">ご依頼の流れ</a></li>
				<li><a href="feature.html">マリオ君の特徴</a></li>
				<li><a href="question.html">よくある質問</a></li>
				<li><a href="company.html">会社概要</a></li>
				<li><a href="contact.html">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わりr-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
</body>

でこちらもこれまでの様にワードプレス化パーツ化で

<?PHP 
/*
Template Name:works
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	<article>
		<h2 class="fuki">サービス内容</h2>
			<p class="topi">
			見やすいサイトつくってます
			</p>
		<section class="blogbox02 work">
			<dl>
				<dt><a href="https://reminaclinical.com/" target="_blank">福岡　ハイフ</a></dt>
				<dd>
					<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/work01.jpg" alt="福岡　ハイフ">
				</dd>
			</dl>
			<dl>
				<dt><a href="https://koukanmaster.com/" target="_blank">福岡　トイレ交換</a></dt>
				<dd>
					<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/work02.jpg" alt="福岡　トイレ交換">
				</dd>
			</dl>
			<dl>
				<dt><a href="https://suripuru.com/" target="_blank">福岡　ドライヘッドスパ</a></dt>
				<dd>
					<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/work03.jpg" alt="福岡　ドライヘッドスパ">
				</dd>
			</dl>

		</section>
		<!--blogbox02-->
	</article>

	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

こちらで完成
今回のTemplate Nameはworksにしています。
ファイル名はworks.phpにしました。

ファイルの中身は状況に応じて下記の画像のワードプレスタグ・リンクのワードプレスタグ等を使って置き換えていってください。

ワードプレスオリジナルテーマ作り方③　head内記述と共通部分パーツ化
関連こっちもみてね
ワードプレスオリジナルテーマ作り方③　head内記述と共通部分パーツ化 
<?PHP echo esc_url( get_template_directory_uri() );//画像のパスを出力 ?>
<?PHP echo esc_url( home_url() );//サイトのURL出力 ?>

これで固定ページ完成です。

最後に記事の一覧を表示するぺージブログ一覧ぺージを作ります。

見本はこちら

こちらはcategory.phpとほぼ一緒カテゴリー名：〇〇一覧があるかないかです。

しかりcategory.phpと違うのはこちらは固定ページで作るということです。

category.phpの中に記述されているカテゴリー名：〇〇一覧をとるだけでなく
ちゃんとカスタムテンプレートファイルの記述を一番上にしないといけません。
こちら

<?PHP 
/*
Template Name:blog
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ一覧</h2>
			
			<div class="cattitle">カテゴリー名：<?PHP single_cat_title();//カテゴリー名を表示ループ外で使用?>一覧</div>	
			
			<!--ループスタート文章-->
			<?PHP if(have_posts()):while(have_posts()):the_post();?>
			<!--ループスタート文章-->
			
			<div class="blogall">
				<h3><a href="<?PHP the_permalink();//個別ページへのURLを出力?>"><?PHP the_title();//記事のタイトルを出力?></a></h3>
				<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
				<?php the_category();//対象カテゴリーul表示 ?>
				<div class="blogmain">
					<?PHP the_excerpt();//抜粋を表示?>
				</div>
				<p class="btn"><a href="<?PHP the_permalink();//個別ページへのURLを出力?>">詳しくはこちら→→</a></p>
			</div>
			<!--blogall終わり-->
			
			<!--ループ終わり文章-->
			<?PHP endwhile;endif;?>
			<!--ループ終わり文章-->
			
			<div>
				<?php the_posts_pagination(
					array(
						'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
						'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
						'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
						'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
						'type'          => 'list', // 戻り値の指定 (plain/list)
					)
				); ?>
			</div>
		</article>
		<!--leftbox終わり-->
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<?php wp_list_categories('title_li'); //すべてのカテゴリーをリンク付きで出力?>
			</ul>
		</article>
		<!--rightbox終わり-->
</div>
<!--contwrap終わり-->
	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

こんな感じですね。

しかし

あと２つ直さないといけないところがあります。

そう

ループの部分です
ループの説明は下記で書いているので是非ご覧ください。

ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成
関連こっちもみてね
ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成

上記はcategory.phpをコピーしてファイル名をblog.phpにして

ぺージ最上部のTemplate Nameをblogにしたものです。

カスタムテンプレートファイルは、メインループではなくサブループを使用しないといけません。

home.phpで記述したものにループを置き換えます。


こちらが完成品

<?PHP 
/*
Template Name:blog
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ一覧</h2>
			
			<div class="cattitle">カテゴリー名：<?PHP single_cat_title();//カテゴリー名を表示ループ外で使用?>一覧</div>	
			
<!--ループスタート文章-->	
<?php
$paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',//どの記事を出力するかpostは投稿　カスタムポストの場合は好きな名前　例）news　とか
    'posts_per_page' => 5,//記事を何個出力するの数字で出力する記事を指定する　　-1の場合は全部
    'paged' => $paged,//ようわからん
    );
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<!--ループスタート文章-->
			
			<div class="blogall">
				<h3><a href="<?PHP the_permalink();//個別ページへのURLを出力?>"><?PHP the_title();//記事のタイトルを出力?></a></h3>
				<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
				<?php the_category();//対象カテゴリーul表示 ?>
				<div class="blogmain">
					<?PHP the_excerpt();//抜粋を表示?>
				</div>
				<p class="btn"><a href="<?PHP the_permalink();//個別ページへのURLを出力?>">詳しくはこちら→→</a></p>
			</div>
			<!--blogall終わり-->
			
<!--ループ終わり文章-->				
<?PHP endwhile;endif;?>
<?php wp_reset_postdata(); ?>
<!--ループ終わり文章-->	
			
			<div>
				<?php the_posts_pagination(
					array(
						'mid_size'      => 2, // 現在ページの左右に表示するページ番号の数
						'prev_next'     => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
						'prev_text'     => __( '前へ'), // 「前へ」リンクのテキスト
						'next_text'     => __( '次へ'), // 「次へ」リンクのテキスト
						'type'          => 'list', // 戻り値の指定 (plain/list)
					)
				); ?>
			</div>
		</article>
		<!--leftbox終わり-->
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<?php wp_list_categories('title_li'); //すべてのカテゴリーをリンク付きで出力?>
			</ul>
		</article>
		<!--rightbox終わり-->
</div>
<!--contwrap終わり-->
	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

‘posts_per_page’ => の部分に5をいれて5件表示にしています。

ループはどこで使うかで、気を付けないといけないですね。

それともうひとつ直さないといけないのはページャーの部分です。

以前の記事でページャをいれたときに軽く説明しましたが

注意点としてこちらのページャーのタグはcategory.phpやsingle.phpなどワードプレスで意味をもっているテーマファイルのみで使用できます。

固定ページなどでは動きません。

※いつもはプラグインのWP-PageNaviをつかっていますが今回は練習のため使用しておりません。
WP-PageNaviならどのページでもページャーをつけることができます。気になる方は下記をご覧ください。

ページネーション　WP-PageNavi完全版　コピペOK
関連こっちもみてね
ページネーション　WP-PageNavi完全版　コピペOK

ですのでまたまた勉強のため違うページャーの文章を入れてみたいと思います。

こちらのサイト様を参考にさせていただきました。ありがとうございます。

<?PHP 
/*
Template Name:blog
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>

	<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ一覧</h2>
			
			
<!--ループスタート文章-->	
<?php
$paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',//どの記事を出力するか　postは投稿　カスタムポストの場合は好きな名前　例）news　とか
    'posts_per_page' => 5,//記事を何個出力するの　数字で出力する記事を指定する　　-1の場合は全部
    'paged' => $paged,//ようわからん
    );
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<!--ループスタート文章-->
			
			<div class="blogall">
				<h3><a href="<?PHP the_permalink();//個別ページへのURLを出力?>"><?PHP the_title();//記事のタイトルを出力?></a></h3>
				<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
				<?php the_category();//対象カテゴリーul表示 ?>
				<div class="blogmain">
					<?PHP the_excerpt();//抜粋を表示?>
				</div>
				<p class="btn"><a href="<?PHP the_permalink();//個別ページへのURLを出力?>">詳しくはこちら→→</a></p>
			</div>
			<!--blogall終わり-->
			
<!--ループ終わり文章-->				
<?PHP endwhile;endif;?>
<?php wp_reset_postdata(); ?>
<!--ループ終わり文章-->	
			
			<div class="ppejya">

				
				<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
?>
			</div>
			<!--ppejya-->
		</article>
		<!--leftbox終わり-->
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<?php wp_list_categories('title_li'); //すべてのカテゴリーをリンク付きで出力?>
			</ul>
		</article>
		<!--rightbox終わり-->
	</div>
	<!--contwrap終わり-->
	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

ページャーの部分を下記に変えました。表示を整えるためにかっこてあるdivにppejyaというクラスもつけました。

			<div class="ppejya">

				
				<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
?>
			</div>
			<!--ppejya-->

上記なら固定ページでもページャーが動きます。

あとは勝手に出力されるタグをCSSできれいにすればOKです。

それでは残りのぺージもサクッと全部固定ページ化して終わりです。

以上で固定ページの作り方説明は終わりです。


次回は、オリジナルテーマに変更して、今回作った固定ページを設定する方法をご説明します。


ではまた。

一覧へ
こっちもみて！関連記事

カテゴリー

人気!?記事

気になったら
連絡してね!

すいません

お電話は出れないことが多いので
ラインでもしもし・メールでもしもしが推奨です。

お時間をとらせていただきゆっくり
お電話させていただきます。

©Copy Rights MARIOKUN.All Rights Resarved.
Page Top
お問い合わせ

どうぞおじさん

作業中はお電話は出れないことが多いのでライン・メールでもしもしが推奨です。

お電話は出れないことが多いの折り返し致します。