Wordressのカテゴリースラッグをクラス名として付ける方法と固定ページのスラッグをIDにつける方法

WordPressの最新記事一覧などで、カテゴリー名を一緒に表示する際にその表示にカテゴリーのスラッグをクラスとして付与する方法です。固定ページを表示の際に div にページのスラッグをIDとして付ける方法も追加しました。

カテゴリーのスラッグをクラスとして付ける

以下のコードをカテゴリー名を表示したい箇所へ記入します。
マークアップは必要に応じて変更して下さい。

<?php $cat = get_the_category(); $cat = $cat[0]; {
  echo '<p class="' . $cat->category_nicename . '" />'; 
 } ?>
<?php the_category(','); ?></p> 

上のコードを使うと、例えば以下の画像のように、最新記事一覧にカテゴリー名を表示させて、その表示にカテゴリー別にクラスを自動的に付けカテゴリー事にスタイルを変えたりできます。
記事一覧のカテゴリー名表示例
ソースコードは以下のようにその記事が該当するカテゴリー名がクラス名として付けられるようになります。
カテゴリー名をクラスに付与した時のソースコード

固定ページのスラッグをIDとして付ける

以下のようなコードで div にスラッグのIDを付ける事ができます。

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

 <div id="<?php echo esc_attr( $post->post_name ); ?>">
    // $postからスラッグを取り出して出力
	<?php the_content(); ?>
      〜固定ページの内容〜
 </div>

<?php endwhile; else: ?>
<?php endif; ?>

page.php 等にあらかじめ上記のように記入しておけば、ページごとにスタイルを変更する時に便利です。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS