WordPress固定ページのスラッグを取得するとナビゲーションとかに使えるかも

WordPressでブログじゃないサイトを作るときって、固定ページを結構使いますよね。そんなとき、スラッグを取得して指定すると便利だなぁと思ったので書き残しておきます。子ページの場合、子階層のみのスラッグを出力してくれるので使い方によっては便利かも！

スラッグを取得するコード

attribute_escape() ※WP2.8から非推奨

<?php echo attribute_escape($post->post_name); ?>

• ページのスラッグを取得したい

get_page() ※WP3.5から非推奨

<?php echo get_page($wp_query->post->ID)->post_name; ?>

• WordPress「attribute_escape」は非推奨 | WebNote

get_post()

<?php echo get_post($wp_query->post->ID)->post_name; ?>

• 関数リファレンス/get post – WordPress Codex 日本語版

以下、使ってみた例はこのコードで書いています。

ページごとに画像を変えたいとき

固定ページがたくさんあって、そのページごとに違う画像（大きさは同じ）を入れたいというときにコードがすっきりするかも。

条件分け

<?php if(is_page('sample1')): ?>
    <img src="http://xxx/sample1.jpg" alt="sample1" />
<?php elseif(is_page('sample2')): ?>
    <img src="http://xxx/sample2.jpg" alt="sample2" />
<?php elseif(is_page('sample3')): ?>
    <img src="http://xxx/sample3.jpg" alt="sample3" />
<?php endif; ?>

このように、ページのスラッグがsample1ならsample1.jpgという画像を…という感じで条件分けしていけば実装できます。でも、ちょっと長いですよね…

スラッグ取得で指定

<img src="http://xxx/<?php echo get_post($wp_query->post->ID)->post_name; ?>.jpg" alt="<?php echo get_post($wp_query->post->ID)->post_name; ?>" />

スラッグと使う画像の名前を同じにしておけば、たったの1行で済むんです！

ナビゲーションに使う

それぞれ100*50pxのナビゲーションを用意します。スプライト形式で1枚にまとめてみました。簡単に、マウスホバーで下線が出て、カレント（現在の）ページは下三角が出るというような画像にしてみました。

php

<div id="header">
	<ul class="<?php echo get_post($wp_query->post->ID)->post_name; ?>">
		<li class="home"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
		<li class="blog"><a href="<?php bloginfo('url'); ?>/blog">BLOG</a></li>
		<li class="about"><a href="<?php bloginfo('url'); ?>/about">ABOUT</a></li>
	</ul>
</div>

ulにclass="スラッグ名"を付加してしまおうという魂胆です！

2014/7/1追記：別解

このコードは最後のスラッグ名を持ってくるので、子ページが表示されてるけど親の階層を取得したい、ということはできないんですよね。そういうときはこのように書いてみるといいかも。（WP関係ないですが）

<?php
$slug = explode('/', $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
$navi = ($slug[1] == '') ? 'home' : $slug[1];
?>
<div id="header">
	<ul class="<?php echo $navi; ?>">
		<li class="home"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
		<li class="blog"><a href="<?php bloginfo('url'); ?>/blog">BLOG</a></li>
		<li class="about"><a href="<?php bloginfo('url'); ?>/about">ABOUT</a></li>
	</ul>
</div><!-- /#header -->

2行目で、現在のURL（http://を除く）を「/」で分割して$slugという配列に入れています。すると配列の1番め（パーマリンク設定によっては違う場所かも）の配列にディレクトリ名が入るので、それを3行目で取得しておきます。

イメージはこんな感じ。これなら子ページが表示されていても親の階層が取得できます。（トップページのみ空白になるので、空白ならhomeという文字列を入れてやります。）これを6行目でクラス名として出力してやればOK。

css

#header ul li a{
	display:block;
	zoom:1;
	width:100px;
	height:50px;
	float:left; /*横並びに*/
	margin-left: 10px;
	text-indent: 100%; /*テキストを見えなくする*/
	white-space: nowrap;
	overflow: hidden;
	background:url("images/navi.png") no-repeat;
	}

#header ul li.home a{background-position:0 0;}
#header ul li.blog a{background-position:-100px 0;}
#header ul li.about a{background-position:-200px 0;}

#header ul li.home a:hover{background-position:0 -50px;}
#header ul li.blog a:hover{background-position:-100px -50px;}
#header ul li.about a:hover{background-position:-200px -50px;}

#header ul.home li.home a{background-position:0 -100px;}
#header ul.blog li.blog a{background-position:-100px -100px;}
#header ul.about li.about a{background-position:-200px -100px;}

htmlはシンプルなまま、実装できますね！