2012
9
25

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

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


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

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

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

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

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

get_post()

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

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

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

条件分け

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

スラッグ取得で指定

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

ナビゲーションに使う

120925-1

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

php

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

2014/7/1追記:別解

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

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

140609-2

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

css

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

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


4件のコメント

  • いけだ
    2012年9月26日 11:44 AM

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

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

    スラッグを取得するコード
    < ?php echo attribute_escape($post->post_name); ?>

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

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

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

    • you
      2012年9月26日 1:24 PM

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

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

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

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

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

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

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

      html

      css

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

  • dankan
    2014年8月27日 3:07 AM

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

    • *you
      2014年8月27日 9:18 AM

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

コメントを残す




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


back to top