Wie man verschiedene Kategorien in WordPress einzigartig gestaltet
Veröffentlicht: 2017-09-20Design war schon immer einer der wichtigsten Aspekte der Benutzeroberfläche. Eine gute Benutzeroberfläche führt zu mehr Besuchern auf Ihrer Website und letztendlich zu mehr Umsatz für Sie.
Heutzutage gibt es Millionen von Live-Websites, und Sie müssen Ihre Website einzigartig genug gestalten, um sich von Ihren Mitbewerbern abzuheben.
Wie beliebt ist WordPress
Es gibt viele Möglichkeiten, wie Sie Ihre Website erstellen können, aber die Plattform, die Sie für Ihre Website auswählen, kann ein wichtiger Faktor dafür sein, wie viele Anpassungen Sie vornehmen können. Es gibt viele Plattformen, aus denen Sie wählen können, aber WordPress ist aufgrund seiner Einfachheit und Anpassungsfähigkeit eines der beliebtesten CMS der Welt. WordPress ist vielleicht nicht so einfach zu bedienen wie Wix oder Squarespace, aber seine Anpassungsfähigkeit macht es so beliebt.
Was ist das Problem, so beliebt zu sein?
WordPress hat eine riesige Community (sehr hilfreich) und Sie können Lösungen für jedes Problem finden, auf das Sie während Ihrer WordPress-Reise stoßen könnten. Die Community ist voll von Informationen und Ressourcen, eine der Hauptressourcen sind WordPress-Themes. Sie können Tausende von kostenlosen Themen in der Bibliothek von wordpess.org finden und die Zahl wächst jeden Tag.
Da WordPress so beliebt ist wie es ist, gibt es ein Problem mit so viel Popularität auf andere Weise, da ein Thema viele Male auf verschiedenen Websites verwendet werden kann, werden Websites, die dieses bestimmte Thema verwenden, etwas ähnlich aussehen. Daher kann es Ihrer Website an Einzigartigkeit mangeln, wenn Sie das Thema einfach so verwenden, wie es ist.
Warum sollten Sie Kategorien anders gestalten?
Im Allgemeinen werden in einem Blog oder einer inhaltsreichen Website verschiedene Themen in verschiedene Kategorien eingeteilt. Dies ist die Seite, auf der ein Besucher alle Informationen zu einem bestimmten Thema erhalten kann und die Ihnen die Möglichkeit gibt, Kategorien auf einzigartige Weise zu präsentieren, um ihnen ein großartiges Erlebnis zu bieten.
Wenn Sie also jede Kategorie anders gestalten, können Sie sich einen Vorteil gegenüber Ihren Mitbewerbern verschaffen, selbst wenn sie dasselbe Thema verwenden.
Der Unterschied kann so einfach sein wie unterschiedliche Farben für jede Kategorie für unterschiedliche Layouts.
Mal sehen, wie Sie dies tun können.
Möglichkeiten zum Stylen von Kategorien
Neben kostenlosen Themes können Sie Premium-Themes von verschiedenen Marktplätzen erwerben. Im Allgemeinen sind diese Themen mit benutzerdefinierten Funktionen geladen, aber selbst dann bieten Ihnen die meisten nicht die Möglichkeit, Ihre Kategorien anders zu gestalten.
Da ein Thema von einer Website zur anderen unterschiedlich verwendet werden kann, weiß der Autor des Themas nicht, wie Sie das Thema verwenden werden.
Sie sollten also wissen, wie Sie Kategorien unterschiedlich gestalten können. Es gibt zwei Möglichkeiten, wie Sie dies tun können.
- Mit Vorlagen
- Mit CSS
Sehen wir uns nun jeden mit unterschiedlichen Anwendungsfällen an.
Mit Vorlagen
Wenn Sie eine strukturelle Änderung im Layout vornehmen möchten, müssen Sie Vorlagen verwenden. Ob es eine Seitenleiste oder eine Seite in voller Breite mit Vorlagen sein wird, Sie können das Layout Ihrer Seite steuern.
Muss am untergeordneten Thema arbeiten
Eine Voraussetzung für die Verwendung von Templates ist die Verwendung von Child-Themes. Es ist nicht so, dass es im Hauptdesign nicht funktioniert, aber das Problem beim Ändern des Hauptdesigns besteht darin, dass Sie die Dateien dort nicht steuern können. Sobald das Design aktualisiert ist, gehen alle Ihre Änderungen verloren.
Sie können einige fertige Premium-Designs für untergeordnete Themen verwenden, aber wenn Sie kostenlose Themen verwenden, die im Allgemeinen keine untergeordneten Themen enthalten, müssen Sie eines erstellen. Sobald Sie Ihr untergeordnetes Thema fertig haben, können Sie jetzt Ihre Kategorievorlagen erstellen.
So erstellen Sie eine Kategorievorlage
WordPress arbeitet auf einem Template-System, das einer bestimmten hierarchischen Ordnung folgt. Sie müssen diese Vorlagenhierarchie kennen, um Kategorievorlagen erstellen zu können.
Die hierarchische Reihenfolge für die Kategorie ist.
category-slug.php → category-id.php → category.php → archive.php → index.php
Gemäß der Reihenfolge sucht WordPress nach category-slug.php , wobei slug den Kategorienamen bedeutet. Nehmen wir an, Sie haben eine Kategorie namens photoshop , also wird zuerst nach category-photoshop.php gesucht, wenn diese Datei nicht existiert, wird nach category-id.php gesucht. category-id.php , dh es wird nach einer Datei mit Kategorie- ID gesucht, zum Beispiel category-3.php , wenn diese nicht verfügbar ist, wird nach category.php gesucht, wenn diese Datei ebenfalls fehlt, wird versucht, die Datei archive.php als Vorlage zu verwenden Wenn das nicht gefundene in Ordnung ist, wird es schließlich index.php als Basisvorlage verwenden.
Um eine Kategorievorlage zu erstellen, müssen Sie die Datei category.php in Ihrem Thema finden. Die meisten Themen haben eine Datei category.php , aber wenn Sie diese nicht finden, suchen Sie nach archive.php .
Hinweis: In einigen Frameworks finden Sie diese Dateien möglicherweise überhaupt nicht für die Fälle, in denen Sie diese bestimmte Framework-Richtlinie befolgen müssen.
Angenommen, Sie arbeiten an einem Child-Theme, kopieren Sie die Datei category.php oder archive.php aus dem Parent-Theme und fügen Sie sie in den gleichen Ordner des Child-Themes ein.
Wenn Sie beispielsweise die erforderliche Datei im Stammverzeichnis des übergeordneten Designs gefunden haben, müssen Sie sie auf ähnliche Weise im Stammverzeichnis des untergeordneten Designs ablegen, wenn sie sich in einem Unterordner befand, dann einen Unterordner mit demselben Namen erstellen und dort einfügen.
Nehmen wir nun an, Sie haben eine Kategorie namens Photoshop , benennen Sie die neue Datei im untergeordneten Thema wie diese category-photoshop.php , und das war's, die Photoshop-Kategorie wird diese Vorlage verwenden.
Sehen wir uns das jetzt anhand eines Beispiels an.
Hinweis: Wir verwenden hier für unsere Beispiele das Thema WordPress Twenty Seventeen, der Prozess funktioniert mit jedem Thema, aber die HTML-Struktur unterscheidet sich von Thema zu Thema.
Jetzt haben wir eine Kategorievorlage erstellt, lassen Sie uns einige Anpassungen vornehmen.
Sehen Sie, wie die aktuelle Vorlage aussieht.
Das versuchen wir zu erreichen.
Grundstruktur
Twenty seventeen Theme hat ein zweispaltiges Layout, aber wir wollen ein einspaltiges Layout, wir werden diese Vorlage in voller Breite ohne Seitenleiste erstellen.
Im Design Twenty Seventeen gibt es keine Datei category.php , also haben wir archive.php als unsere Basisvorlage verwendet und sie category-photoshop.php genannt.
Alter Code (archive.php).
<?php /** * The template for displaying archive pages * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <?php if ( have_posts() ) : ?> <header class="page-header"> <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); the_archive_description( '<div class="taxonomy-description">', '</div>' ); ?> </header><!-- .page-header --> <?php endif; ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_posts() ) : ?> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/post/content', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>', ) ); else : get_template_part( 'template-parts/post/content', 'none' ); endif; ?> </main><!-- #main --> </div><!-- #primary --> <?php get_sidebar(); ?> </div><!-- .wrap --> <?php get_footer();
Neuer Code (category-photoshop.php).
<?php /** * The template for displaying photoshop pages * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <?php if ( have_posts() ) : ?> <header class="page-header"> <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); the_archive_description( '<div class="taxonomy-description">', '</div>' ); ?> </header><!-- .page-header --> <?php endif; ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_posts() ) : ?> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/post/content', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>', ) ); else : get_template_part( 'template-parts/post/content', 'none' ); endif; ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <?php get_footer();
Hier können Sie sehen, dass ich die <?php get_sidebar(); ?> <?php get_sidebar(); ?> da diese Vorlage keine Seitenleisten haben wird.
Dadurch wird die Seitenleiste entfernt, aber das Layout ist immer noch nicht in voller Breite. Wir müssen einige CSS-Anpassungen vornehmen. Denken Sie daran, dass alle CSS-Anpassungen an den CSS-Dateien des untergeordneten Designs und nicht am übergeordneten Design vorgenommen werden.
WordPress fügt jeder Kategorie eine eindeutige Klasse mit ihrem Kategorienamen im Hauptteil hinzu, wie in diesem category-photoshop . Sie können diese Klasse als Ziel für die Gestaltung der Seite verwenden.
CSS:
@media screen and (min-width: 48em) {
.category-photoshop #primary {
float: none;
width: 100%;
}
}
Verwenden Sie die media query einfach, um das Stylesheet des übergeordneten Designs abzugleichen.
Kategoriebeschreibung hinzufügen
Sie können eine zusätzliche Beschreibung jeder Kategorie anzeigen, indem Sie die Beschreibung im Abschnitt „Kategorien“ hinzufügen. Die Bereitstellung zusätzlicher Informationen hilft den Besuchern, das Thema besser zu verstehen, aber Sie können diesen Abschnitt interessanter gestalten, indem Sie jeder Kategorie ein einzigartiges Aussehen verleihen.
Gemäß unserem Design benötigen wir ein benutzerdefiniertes Bild auf der linken Seite und einen Kategorienamen mit Beschreibung auf der rechten Seite.
<?php /** * The template for displaying photoshop category * * @link https://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <?php if ( have_posts() ) : ?> <header class="page-header"> <div class="header-category-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/photoshop-banner.jpg" alt="Photoshop"></div> <div class="header-category-title"> <h1 class="page-title"><?php single_term_title()?></h1> <?php the_archive_description( '<div class="taxonomy-description">', '</div>' ); ?> </div> </header><!-- .page-header --> <?php endif; ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_posts() ) : ?> <?php /* Start the Loop */ while ( have_posts() ) : the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/post/content-photoshop', get_post_format() ); endwhile; the_posts_pagination( array( 'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>', ) ); else : get_template_part( 'template-parts/post/content-photoshop', 'none' ); endif; ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <?php get_footer();
CSS:
.page-header {
border-bottom: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 1.5em;
padding-bottom: 0.5em;
}
.header-category-title {
float: left;
padding-top: 15px;
width: 85%;
}
.header-category-img {
float: left;
width: 15%;
}
Sie können sehen, dass ich einige Änderungen im page-header vorgenommen habe, aber die wichtigste ist single_term_title() , da ich nur den Kategorienamen wie diesen Photoshop anstelle von Category:Photoshop anzeigen möchte.
Weiter gehts.
Box-Ansicht
Wir haben die grundlegenden Änderungen vorgenommen, wie z. B. das Erstellen eines einspaltigen Layouts, und den Abschnitt mit der Kategoriebeschreibung geändert. Lassen Sie uns nun etwas Fortgeschritteneres tun. Wir konvertieren die Beitragsliste von der Listenansicht in eine Gitter- oder Kastenansicht mit 3 Elementen pro Spalte.
Um diese Änderungen vorzunehmen, müssen wir den Pfad get_template_part ändern, da der Inhalt hier von einem anderen Ort aufgerufen wird, aber in einigen Themen werden Sie möglicherweise feststellen, dass der Inhalt direkt in der Basisvorlage platziert wird.
get_template_part( 'template-parts/post/content-photoshop', get_post_format() );
Um diese Inhaltsseite jetzt zu ändern, müssen Sie die Datei vom übergeordneten Thema zum untergeordneten Thema kopieren und in derselben Ordnerstruktur ablegen und dann nach Belieben umbenennen.
Hier habe ich die Datei content.php aus dem Parent-Theme kopiert und als content-photoshop.php in das Child-Theme eingefügt. Es wird umbenannt, da alle Änderungen, die hier vorgenommen werden, nur diese Vorlage betreffen.
Code (content-photoshop.php).
<?php
/**
* Template part for displaying photoshop posts
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class("one-third"); ?> >
<?php
if ( is_sticky() && is_home() ) :
echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
endif;
?>
<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div><!-- .post-thumbnail -->
<?php endif; ?>
<header class="entry-header1">
<?php
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
} else {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
if ( 'post' === get_post_type() ) {
echo '<div class="entry-meta">';
if ( is_single() ) {
twentyseventeen_posted_on();
} else {
echo twentyseventeen_time_link();
twentyseventeen_edit_link();
};
echo '</div><!-- .entry-meta -->';
};
?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
if ( is_single() ) :
the_content( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
) );
ks29so_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
) );
else:
the_excerpt( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
) );
ks29so_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
) );
endif;
?>
</div><!-- .entry-content -->
<?php
if ( is_single() ) {
twentyseventeen_entry_footer();
}
?>
</article><!-- #post-## -->
Hier sind nun einige Dinge zu beachten, dass ich im Artikelabschnitt eine benutzerdefinierte Klasse one-third hinzugefügt und den Inhaltstyp für die Boxansicht auf excerpt geändert habe. Andere strukturelle Änderungen sind selbsterklärend.
CSS:
.category-photoshop main{
margin:0 -15px;
}
.one-third {
box-sizing: border-box;
float: left;
padding: 0 15px;
width: 33.333%;
}
.one-third .post-container {
border: 1px solid #ccc;
padding: 10px;
}
.one-third .post-thumbnail{
margin-bottom:0;
}
.one-third h2{
margin-bottom:0.2em;
}
So sieht nun das Layout aus.
Nur mit CSS
Wenn Sie mit PHP-Code nicht vertraut sind, können Sie die Kategorieseiten auch nur mit CSS gestalten, aber diese Änderungen sind so begrenzt, dass Sie den Code nicht hinzufügen oder ändern können, Sie können nur die vorhandenen Elemente gestalten.
Sehen wir uns anhand eines Beispiels an, wie Sie selbst mit diesen Einschränkungen Ihre Kategorieseiten einzigartig machen können.
Nehmen wir an, wir möchten unsere WordPress-Kategorie daraus gestalten.
dazu.
Basis-Styling
Sie können die Hintergrundfarbe sehr einfach mit CSS ändern, indem Sie auf die von WordPress bereitgestellte Klasse abzielen.
Etwas wie das.
CSS:
.category-wordpress .site-content-contain {
background-color:#eaeaea;
}
Symbol zum Kategorietitel hinzufügen
Sie können jeder Kategorie eindeutige Symbole mit Hintergrundbildern hinzufügen, je nach Anforderung werden wir hier nur eines zu unserer WordPress-Kategorie hinzufügen.
CSS:
.category-wordpress .page-header {
border-bottom: 1px solid #ccc;
margin-bottom: 1.5em;
padding-bottom: 0.5em;
}
.category-wordpress .page-header h1{
background:url("assets/images/wordpress-logo.png") no-repeat left center;
padding-bottom:5px;
padding-left:35px;
}
Seite in voller Breite erstellen
Sie können zwei- oder mehrspaltige Seiten zumindest visuell durch CSS in eine Seite mit voller Breite umwandeln.
CSS:
.category-wordpress:not(.error404) #primary{
float: none;
width: 100%;
}
.category-wordpress #secondary{
display:none;
}
Ich weiß, es ist ein CSS-Hack und nicht als Best Practice zu empfehlen, aber Sie können Ihr Designziel auf diese Weise erreichen, insbesondere wenn Sie sich im Umgang mit Vorlagen nicht sicher genug fühlen.
Wenn Sie jedoch mit Vorlagen arbeiten können, ist diese Methode zum Erstellen einer Seite in voller Breite als Abkürzung nicht ratsam, da Sie sie lediglich vor der Anzeige im Browser verbergen, während sie im DOM verbleibt.
Fazit
Wie Sie sehen, können Sie viel tun, um verschiedene Kategorien zu stylen, und die oben genannten Beispiele sind nur ein Ausgangspunkt, aber die Möglichkeiten hängen von Ihrer Fähigkeit ab, mit Vorlagen und CSS zu arbeiten. Abhängig von Ihrem Können können Sie wählen, wie Sie Ihre Kategorien gestalten möchten.
Kennen Sie also andere Möglichkeiten, verschiedene Kategorien anders zu gestalten, lassen Sie es uns im Kommentarbereich unten wissen.