2018/03/18 2018/03/31

WordPressで固定ページのスラッグを取得して画像を表示するコード

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

今日は上級者向けのWordPressカスタマイズの記事です。自分でオリジナルテーマを作成している方がこの記事に検索から辿り着くのでは？という予想です。記事タイトルは「WordPressで固定ページのスラッグを取得して画像を表示するコード」ですが、もう少し噛み砕いて説明します。

僕がこのコード(スラッグを取得)が必要になった状況

各下層ページの上部に「top_img.jpg」という横幅いっぱいのメイン画像を配置しました。その画像は各下層ページごとに変わるという仕様にしました。画像名は各下層ページすべて同じにして、画像をアップロードするフォルダと固定ページのスラッグ名を同一にして、いちいちコードを書き換える手間をなくそうと思いました。数ページなら書き換えたほうが楽かもしれませんが、今から紹介するコードは、ページ数が多くなってきたときには素晴らしい解決策だと思います！

固定ページのスラッグを取得して画像を表示するコード

画像のURLは下記のような感じ。
/images/フォルダ名(スラッグ名)/top_img.jpg

「フォルダ名(スラッグ名)」のところに、その時開いている固定ページのスラッグ名が入ればOK！

<?php
	// 現在表示しているページの投稿IDから投稿情報を取得します
	$page = get_post( get_the_ID() );

	// 投稿のスラッグを取得します
	$slug = $page->post_name;
	
	// 取得したスラッグを元に画像のパスを取得します
	$img_src = get_template_directory_uri() . '/images/' . $slug . '';
?>

<?php while ( have_posts() ) : the_post(); ?>

<section id="top_img">
	<img src="<?php echo esc_attr( $img_src ); ?>/top_img.jpg" alt="" />
</section>
        
<?php endwhile; ?>