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

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

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


記事内容に変更があります。(2014/8/27)

attribute_escape()がWP2.8から非推奨、get_page()がWP3.5から非推奨ということで、get_post()を使う方法に書き直しました。教えていただきましてありがとうございますー!

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

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; ?>

get_post()

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

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

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

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

条件分け

<?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行で済むんです!

ナビゲーションに使う

120925-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行目で取得しておきます。

140609-2

イメージはこんな感じ。これなら子ページが表示されていても親の階層が取得できます。(トップページのみ空白になるので、空白なら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はシンプルなまま、実装できますね!

公開日:2012/09/25
更新日:2014/08/27

4件のコメント

  1. いけだ より:

    初めまして。固定ページのスラッグを検索していてこちらに来ました。WP初心者で悪戦苦闘中です。

    早速ですが、教えていただきたいことがあります。

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

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

    このコードは、どのphpに追記すれば良いのでしょうか?
    いろいろ検索してみましたですが、コードは出てくるのですが、そもそもこのコードをどのphpに追記すればいいのかを書いてあるサイトが無くて困っています。

    私がやりたいことと言いますと、固定ページのスラッグを取得して、ページ毎にヘッダー画像を変更したいのです。
    なぜかカテゴリーの編集ページにはスラッグの入力画面があるのに固定ページには無いのも不思議です(><;)

    恐縮ではございますが、コードをどのphpに追記すればよいのかお教えください。よろしくお願いします。

    • you より:

      いけださん、コメントありがとうございます!

      まず固定ページのスラッグですが、一度下書きや公開をするとタイトルの下にパーマリンクが現れるので、[編集]ボタンを押せば変えられるようになると思います。また、固定ページ一覧のクイック編集からも変更可能です。

      コードを書く位置は、bodyタグ内の、ヘッダー画像を指定するimgタグの中になります。テーマによってヘッダー画像の記述が含まれているファイルが違うと思いますので、どのphpファイルなのかは一概には言えません。

      ここから先は記事にもありますが、ヘッダーとして書き出す画像を

      スラッグ名「sample1」なら、<img src="xxx/sample1.jpg">
      スラッグ名「sample2」なら、<img src="xxx/sample2.jpg">
      スラッグ名「sample3」なら、<img src="xxx/sample3.jpg">
      

      のように指定したいのであれば、

      <img src="xxx/スラッグを取得するコード.jpg">
      

      と指定すると、xxx/スラッグ名.jpgというソースが生成されます。

      もしも、背景画像としてCSSで指定するのであれば、

      • html
      <div class="スラッグを取得するコード">
      ヘッダー
      </div>
      
      • css
      .sample1{background:url(xxx/sample1.jpg);}
      .sample2{background:url(xxx/sample2.jpg);}
      .sample3{background:url(xxx/sample3.jpg);}
      

      このようになるんじゃないかと思います。いかがでしょうか?お役にたてれば幸いです!

  2. dankan より:

    こんばんは。
    3.5からget_page()も非推奨になったみたいですね。。
    今はget_post()を使うようです。

    • *you より:

      dankanさん、コメントありがとうございますー!ご指摘もとっても助かります!記事直させていただきました(*`・ω・)ゞ


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。