web-dev-qa-db-ja.com

WordPressのカテゴリに応じて投稿のレイアウトとスタイルを変更する方法

私はWordPressのインストールをカスタマイズしていますが、これを行うための最善の方法は何だろうと思っていました。カテゴリに応じて各投稿を完全にカスタマイズしたいです。各投稿は1つのカテゴリにのみ分類されます。

postscategoriescustomization
3
oliverwhite

cSSルートの場合は、 post_class() 関数を使用してカテゴリに依存するCSSクラスを指定できます。

フォーマットを超えた場合、つまりカテゴリに応じて異なる要素を出力する場合は、 ' - if-elseif-else'構造で 条件タグin_category() を使用できます。

カテゴリーアーカイブは カテゴリーテンプレート で行うことができます。

3
Michael

WPのクラスを扱うのに役立つ2つの関数があります： body_class() と post_class() 。あなたがbody_class()を使うとき、あなたは（あなたのCSSファイルの中で）このような特定のカテゴリーに投稿をスタイルすることができます：

/* normal rule for all posts */
.post-title {font-size: 22px; color: #0f0}

/* for posts in Talks category only */
.category-talks .post-title {font-size: 28px; color: #fff}
0
Anh Tran

機能アーカイブにカスタムクラスを追加して、カテゴリ内のすべての投稿にカテゴリアーカイブページと同じスタイルを設定します。

add_filter( 'body_class', 'wpsites_add_body_class' );
function wpsites_add_body_class( $classes ) {
if ( in_category('8')) {
   $classes[] = 'your-custom-class';
   return $classes;
   }
}

そしていくつかのサンプルCSS：

.your-custom-class {
    background-color: red;
    color: #fff;
}
0
Brad Dalton

これが私のやり方です。

  1. 含まれるカテゴリに基づいて単一の投稿にCSSクラスを追加します
  2. スタイルシートでこれらのCSSクラスを使用して、カテゴリに基づいて投稿をスタイル設定します。

例えば; PHP、それはあなたのテーマのfunctions.phpにまっすぐに行きます：

/**
 * Add CSS class(es) to the body of the single posts with the prefix `has-cateogry-`
 *
 * @param Array An array of body classes
 * @return Array A modified array of body classes
 */
 function wpse_18860( $classes ) {
  if( is_single() ) {
    global $post;
    foreach( ( get_the_category( $post->ID ) ) as $category ) {
      // add category-slug with the prefix 'has-category-' to the $classes array
      $classes[] = 'has-category-' . $category->cat_name;
    }
  }
  // return the $classes array
  return $classes;
}
add_filter( 'body_class', 'wpse_18860' );

そしてCSS、あなたのテーマのstyle.cssファイルのために：

/* Default style for the single posts */
.single {
  background-color: #ffd;
  color: #334;
}

/* Category-based style for the single posts */    
.single.has-category-travel {
  background-color: #332;
  color: rgba(255, 255, 255, .5);
}

新しいカテゴリを作成するたびに、CSSに新しいスタイルセレクタを追加して、この新しいカテゴリで投稿にスタ​​イルを設定する必要があります。

0
Rahul Arora

あなたが完全に制御したい場合は、CSSの解決策は十分ではありません。より強力な解決策は、カテゴリスラッグに基づいて単一の投稿に対して一種のテンプレート階層を作成することです。これが一般的な考え方です。

Single.phpでget_the_category（）を使用して投稿に関連するカテゴリを見つけます - あなたが言うように割り当てられたカテゴリが1つしかない場合は、返された配列の最初の値を使用します。それでは、catオブジェクトを入手したら、スラッグを入手してください。そこから、そのファイル名が 'single-'とcatslugに一致するテーマフォルダに存在するかどうかを確認し、存在する場合はそれを読み込みます。そうでなければ、通常のシングルポストループを使い続けます。次に、特定のカテゴリの投稿テンプレートを作成し、カテゴリスラッグに基づいてそれらに名前を付けます。すなわち。 single-mycatslug.php.

ここにいくつかのコードがあります：

$my_cats = get_the_category();

if ( is_array( $my_cats ) ) {
    $my_cat_slug = $my_cats[0]->slug;
}

$my_template = 'single-' . $my_cat_slug . '.php';

if ( file_exists( TEMPLATEPATH  . $my_template ) ) {
    get_template_part( $my_template );
} else {
    // run normal loop for single post
}

私は本番サイトでこれを実行しましたが、うまく機能しました。

0
dwenaus