複数記事の上部や下部に同じ内容を書くことは多い。そのような時に固定ページに事前にその内容をテンプレートとして用意して埋め込む方法がある。

固定ページをテンプレート化する

固定ページに記事の一部の内容を用意しておき埋め込むことで、同じ内容を複数の記事に書く手間がなくなる。また内容を更新する時も固定ページを編集するだけなので簡単。

10行程度のコードで作れるのでやってみよう

スラッグから固定ページを出力するコード

<php	
  $slug = 'スラッグを入力';
	
	$page_obj = get_page_by_path($slug);
	if(count($page_obj) > 0){
		$page = get_post( $page_obj );
		$html  = apply_filters( 'the_content', $page->post_content);
	}else{
		$html  = '該当ページがありません'."\n";
	}
?>

$slugに表示したい固定ページのスラッグを代入すれば固定ページの内容が$htmlに代入される。

記事パーツとして埋め込むならapply_filters()が必須

apply_filters()を付けないと一部のブロックの内容やショートコードの内容が展開されない。今回は固定ページに記事の一部をテンプレートとして事前に用意しておくという目的なので、固定ページの内容をそのまま埋め込みたい。なのでapply_filters()は必須となる

これだけ。あとは$htmlを好きな方法で出力すればいい。

ちたまん

このブログの場合はどんなふうに出力しているの?

ツン子

実際の運用例

ここからは実際の運用例として当ブログでの実装方法を紹介する。

  • ショートコード化
  • 投稿ページに固定ページ一覧を表示

ざっくりいうと上記2点がこのブログでの実装になる。順番に見ていこう

ショートコードで固定ページを埋め込む

<?php
// 固定ページの本文を出力
function exportPage($atts){
	
	$slug = $atts['slug'];
	
	$page_obj = get_page_by_path($slug);
	if(count($page_obj) > 0){
		$page = get_post( $page_obj );
		$html  = apply_filters( 'the_content', $page->post_content);
	}else{
		$html  = '該当ページがありません'."\n";
	}

	return $html;
}

add_shortcode('expPage','exportPage');
?>

ショートコードにするとこのようになる。ショートコードの作り方を知っていれば難しい点はないと思う。このコードをfunctions.phpに入れておけば

[expPage slug=スラッグ]

このような形で利用することが出来る。

投稿ページに固定ページ一覧を表示

ショートコード化だけだと引数となるスラッグを事前に調べておかないと利用できない。そこで投稿画面に固定ページ一覧とショートコード取得ボタンを設置する。下図のようなイメージ

固定ページ一覧ウィンドウ

左側のTOOLと書かれた小さなウィンドウは常時表示されている。

TOOL内の「テンプレート一覧」をクリックすることで固定ページ一覧ウィンドウが表示される。各リストの左側の「ショートコード」ボタンをクリックするとショートコードがクリップボードにコピーされる。という仕組み。

Amazonアフィリエイトの時と一緒だね

ツン子

うん。だから簡単に作れた。

ちたまん

functions.php

<?php
/********************************

	カスタムボックスの設置             
	
********************************/

function add_custom_box(){
	add_meta_box( 
		'custom-box-tool',
		'TOOL',
		'custom_box_tool',
		array('page','post'),
		'side',
		'high'
	);
}

add_action( 'add_meta_boxes', 'add_custom_box',1 );

function custom_box_tool($post){
	global $wpdb;
	?>
	
	<dl id="btList">
		<dt>データ参照</dt>
		<dd><button id="pgBt" type="button" onClick="showWindow('pgList')">テンプレート一覧</button></dd>
	</dl>
	
	<div id="pgList" class="floatWindow">
		<label class="closeBt" onClick="showWindow('pgList')">閉じる</label>
		<table>
			<tr>
				<th>COPY</th>
				<th>TITLE</th>

			</tr>
			<?php
			$args = array(
					'post_type' => 'page',
				);
			$the_query = new WP_Query( $args );
			?>
			
			<?php if($the_query->have_posts()) : ?>
			<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
			<?php $slug = get_post_field( 'post_name', get_the_ID()); ?>

			<tr>

				<td style="width:120px; text-align:center;">
					<button type="button" onClick="copyClip(this)" value="[expPage slug=<?php echo $slug; ?>]">ショートコード</button>
				</td>
				<td><?php the_title(); ?></td>
				
			</tr>

			<?php endwhile; ?>
			<?php endif; wp_reset_postdata(); ?>
		</table>
	</div>
	<script>
		function copyClip(obj){
			navigator.clipboard.writeText(obj.value);
		};
		function showWindow(id){
			document.getElementById(id).classList.toggle('show');

		};
	</script>
	<?php
}

?>

上記コードは固定ページ一覧を表示するためのもので、その他の部分は削除している。ウィンドウの表示の切り替えのためにjavascriptで「show」というクラスをON、OFFしているのでこれに合わせてCSSを書けばOK

Amazonアソシエイトのリンクカスタマイズまとめ

このブログではAmazonアソシエイトのリンクを自前のコードで生成している。少しずつブラッシュアップしてきたため該当記事が複…

今回の機能は元々、上記リンク先のAmazonのアフィリエイトリンクの実装のために用意した機能なのでCSSなど共通部分の説明は省略する。気になる場合はそちらを参照してほしい。

固定ページ一覧のループ部分

<?php
	$args = array(
		'post_type' => 'page',
	);
	$the_query = new WP_Query( $args );
	?>
			
	<?php if($the_query->have_posts()) : ?>
		<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

			<?php $slug = get_post_field( 'post_name', get_the_ID()); ?>
			<?php the_title(); ?>

		<?php endwhile; ?>
	<?php endif; wp_reset_postdata(); ?>

?>

一覧の出力部分のコードだけ抜き出したのが上記のコード。見ての通りWP_Queryのループを回せば良い。

条件として「’post_type’ => ‘page’」を入れれば固定ページのみを取得できる。

特定のスラッグを除外するには?

スラッグの指定、除外のパラメータは調べても分からなかった。代替え案として上記コードでは$slugにスラッグが代入されるので、そのあとにIF文などで除外することは可能。