web-dev-qa-db-fra.com

Comment changer la mise en page et le style des messages en fonction de leur catégorie dans WordPress?

Je personnalise une installation WordPress et je me demandais quelle était la meilleure façon de procéder. Je veux personnaliser chaque message complètement en fonction de la catégorie. Chaque poste sera dans une seule catégorie.

3
oliverwhite

pour la route css, vous pouvez utiliser la fonction post_class() pour vous donner des classes css dépendantes des catégories.

si vous allez au-delà du formatage, c’est-à-dire que vous générez différents éléments en fonction de la catégorie, vous pouvez utiliser la balise conditionnelle in_category() dans une structure 'if-elseif-else'.

les archives de catégories peuvent être réalisées avec templates de catégories .

3
Michael

Deux fonctions vous aident à gérer les classes dans WP: body_class() et post_class() . Lorsque vous utilisez body_class(), vous pouvez attribuer un style à la publication dans une certaine catégorie comme celle-ci (dans votre fichier 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

Ajoutez une classe personnalisée dans votre fichier de fonctions pour attribuer un style identique à tous les articles d’une catégorie et à la page d’archive des catégories.

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

Et quelques exemples de CSS:

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

Voici comment je le ferais:

  1. Ajouter une classe CSS aux articles individuels en fonction des catégories qu'ils contiennent
  2. Utilisez ces classes CSS dans la feuille de style pour styliser les publications en fonction des catégories.

Par exemple; PHP, cela va directement dans le functions.php de votre thème:

/**
 * 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' );

Et CSS, pour le fichier style.css de votre thème:

/* 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);
}

Pas très averti, car chaque fois que vous créez une nouvelle catégorie, vous devez ajouter un nouveau sélecteur de style dans le CSS pour attribuer un style aux publications de cette nouvelle catégorie.

0
Rahul Arora

Si vous souhaitez un contrôle total, une solution CSS ne suffit pas. une solution plus puissante consiste à créer une sorte de hiérarchie de modèles pour les publications uniques en fonction du slug de catégorie. Voici l'idée générale.

Dans single.php, trouvez les catégories liées à l'article à l'aide de get_the_category () - si, comme vous le dites, une seule catégorie est assignée, utilisez simplement la première valeur du tableau retourné. puis une fois que vous avez l'objet chat, récupérez-le. à partir de là, voyez si ce nom de fichier existe dans le dossier du thème qui correspond à 'single-' plus catslug et chargez-le si c'est le cas. Sinon, continuez à utiliser la boucle régulière simple post. vous créez ensuite des modèles de publication pour des catégories spécifiques et les nommez en fonction du slug de catégorie. c'est à dire. single-mycatslug.php.

voici du code:

$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
}

Je dirige ceci sur un site de production et cela fonctionne très bien.

0
dwenaus