it-swarm.com.de

Wie ändere ich das Layout und den Stil von Beiträgen gemäß ihrer Kategorie in WordPress?

Ich passe eine WordPress-Installation an und frage mich, wie das am besten geht. Ich möchte jeden Beitrag je nach Kategorie komplett anpassen. Jeder Beitrag wird nur einer Kategorie zugeordnet.

3
oliverwhite

für die CSS-Route können Sie die Funktion post_class() verwenden, um kategorieabhängige CSS-Klassen zu erhalten.

wenn Sie über die Formatierung hinausgehen, d. h. je nach Kategorie unterschiedliche Elemente ausgeben, können Sie das Bedingungs-Tag in_category() in einer 'if-elseif-else'-Struktur verwenden.

die Kategoriearchive können mit Kategorieschablonen erstellt werden.

3
Michael

Es gibt 2 Funktionen, mit denen Sie die Klassen in WP handhaben können: body_class() und post_class() . Wenn Sie body_class() verwenden, können Sie den Beitrag in einer bestimmten Kategorie wie folgt formatieren (in Ihrer CSS-Datei):

/* 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

Fügen Sie Ihrer Funktionsdatei eine benutzerdefinierte Klasse hinzu, um alle Beiträge in einer Kategorie sowie die Kategoriearchivseite gleich zu gestalten.

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

Und ein paar Beispiele für CSS:

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

So würde ich es machen:

  1. Fügen Sie den einzelnen Posts eine CSS-Klasse hinzu, basierend auf den Kategorien, die sie enthalten
  2. Verwenden Sie diese CSS-Klassen im Stylesheet, um die Beiträge basierend auf den Kategorien zu stilisieren.

Zum Beispiel; PHP, das geht direkt in den functions.php Ihres Themas:

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

Und CSS für die style.css-Datei Ihres Themas:

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

Das ist nicht besonders klug, da Sie jedes Mal, wenn Sie eine neue Kategorie erstellen, eine neue Stilauswahl im CSS hinzufügen müssen, um die Beiträge mit dieser neuen Kategorie zu gestalten.

0
Rahul Arora

Wenn Sie vollständige Kontrolle wünschen, reicht eine CSS-Lösung nicht aus. Eine leistungsstärkere Lösung besteht darin, eine Art Vorlagenhierarchie für einzelne Beiträge auf der Grundlage der Kategorie zu erstellen. Hier ist die allgemeine Idee.

Finden Sie in single.php die mit dem Beitrag verbundenen Kategorien mit get_the_category () heraus. Wenn, wie Sie sagen, immer nur eine Kategorie zugewiesen wird, verwenden Sie einfach den ersten Wert im zurückgegebenen Array. Wenn Sie das Katzenobjekt haben, holen Sie es sich. Überprüfen Sie von dort aus, ob dieser Dateiname im Themenordner vorhanden ist, der mit "single-" plus catslug übereinstimmt, und laden Sie ihn, falls dies der Fall ist. Verwenden Sie andernfalls weiterhin die reguläre Einzelpostschleife. Anschließend erstellen Sie Post-Vorlagen für bestimmte Kategorien und benennen sie basierend auf dem Category Slug. dh single-mycatslug.php.

hier ist ein 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
}

Ich betreibe dies auf einer Produktionsstätte und es funktioniert großartig.

0
dwenaus