Custom Post Type eigene Klasse im Frontend

Hin und wieder benötigt man als WordPress Theme Entwickler für den erstellten Custom Post Type eine eigene CSS Klasse. Möglicherweise will man die Schrift größer darstellen oder die Hintergrundfarbe ändern usw… Sowas kann einfach mit einer neuen CSS Klasse realisiert werden.

Standart Themes benützen normalerweise die post_class() Funktion um Post Klassen zu erstellen. Um unsere Spezielle Klasse hinzuzufügen, benötigen wir eine Filter Methode. Einfach den Code unterhalb in die functions.php kopieren.

function ls_add_body_class( $class ) {
    $post_type = 'portfolio';
    if ( get_query_var('post_type') === $post_type ) {
        $class[] = $post_type;
        $class[] = 'type-' . $post_type;
    }
    return $class;
}
add_filter( 'body_class', 'ls_add_body_class' );

Erklärung:
Die PHP Variable $post_type bekommt den Namen des Custom Post Type.

Hier ein Beispiel für einen Custom Post Type ( portfolio )

function portfolio_register() {

	$labels = array(
		'name' => _x('My Portfolio', 'post type general name'),
		'singular_name' => _x('Portfolio Item', 'post type singular name'),
		'add_new' => _x('Add New', 'portfolio item'),
		'add_new_item' => __('Add New Portfolio Item'),
		'edit_item' => __('Edit Portfolio Item'),
		'new_item' => __('New Portfolio Item'),
		'view_item' => __('View Portfolio Item'),
		'search_items' => __('Search Portfolio'),
		'not_found' =>  __('Nothing found'),
		'not_found_in_trash' => __('Nothing found in Trash'),
		'parent_item_colon' => ''
	);

	$args = array(
		'labels' => $labels,
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'query_var' => true,
		'menu_icon' => get_stylesheet_directory_uri() . '/portfolio-cpt-icon.png',
		'rewrite' => array(
			'slug' => 'portfolio',
			'with_front' => false
		),
		'capability_type' => 'post',
		'hierarchical' => true,
		'menu_position' => null,
		'supports' => array('title','editor','thumbnail','page-attributes'),
		'has_archive' => 'work'
	  );

	register_post_type( 'portfolio' , $args );
}

add_action('init', 'portfolio_register');

So sollte es dann aussehen wenn ihr den obigen Code eingefügt habt.

<body class="single single-portfolio postid-1 single-format-standard portfolio type-portfolio">

Keine Kommentare vorhanden

Hinterlassen Sie eine Antwort

Kontakt
Do NOT follow this link or you will be banned from the site!