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

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プラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能