Jak w unikalny sposób stylizować różne kategorie w WordPress

Opublikowany: 2017-09-20

Design zawsze był jednym z najważniejszych aspektów UI. Dobry interfejs użytkownika doprowadzi do większej liczby odwiedzających Twoją witrynę i ostatecznie do większych przychodów.

Obecnie istnieją miliony aktywnych witryn internetowych i musisz sprawić, by Twoja witryna była na tyle wyjątkowa, aby wyróżniała się na tle konkurencji.

Jak popularny jest WordPress

Istnieje wiele sposobów na zbudowanie swojej witryny, ale platforma, którą wybierzesz dla swojej witryny, może być głównym czynnikiem określającym, jak bardzo możesz dostosować. Istnieje wiele platform, z których możesz wybierać, ale wordpress jest jednym z najpopularniejszych CMS na świecie ze względu na swoją prostotę i możliwość dostosowania. WordPress może nie być tak prosty w użyciu jak Wix lub Squarespace, ale jego moc dostosowywania sprawia, że jest tak popularny.

Jaki jest problem bycia tak popularnym?

WordPress ma ogromną społeczność (bardzo pomocną) i możesz znaleźć rozwiązania każdego problemu, który możesz napotkać podczas swojej podróży do WordPressa. Społeczność jest wypełniona informacjami i zasobami, jednym z głównych zasobów są motywy wordpress. Możesz znaleźć tysiące darmowych motywów w bibliotece wordpess.org, a ich liczba rośnie każdego dnia.

WordPress jest tak popularny, jak jest, jest problem z tak dużą popularnością w inny sposób, ponieważ jeden motyw może być używany wiele razy w różnych witrynach internetowych, witryny korzystające z tego konkretnego motywu będą wyglądać nieco podobnie. Więc Twojej witrynie może brakować wyjątkowości, jeśli po prostu użyjesz motywu takiego, jaki jest.

Dlaczego chcesz inaczej stylizować kategorie?

Generalnie w blogu lub witrynie bogatej w treści różne tematy są podzielone na różne kategorie. Jest to strona, na której odwiedzający może uzyskać wszystkie informacje na określony temat i która daje szansę zaprezentowania kategorii w unikalny sposób, aby zapewnić mu wspaniałe wrażenia.

Tak więc stylizowanie każdej kategorii w inny sposób może dać Ci przewagę nad konkurencją, nawet jeśli używają tego samego motywu.

Różnica może być tak prosta, jak różne kolory dla każdej kategorii w różnych układach.

Zobaczmy, jak możesz to zrobić.

Sposoby stylizacji kategorii

Oprócz darmowych motywów możesz kupować motywy premium z różnych rynków. Ogólnie te motywy są ładowane z niestandardowymi funkcjami, ale nawet wtedy większość z nich nie daje opcji innego stylu kategorii.

Ponieważ jeden motyw może być używany inaczej w różnych witrynach, więc autor motywu nie wie, w jaki sposób zamierzasz z niego korzystać.

Powinieneś więc wiedzieć, jak inaczej stylizować kategorie, możesz to zrobić na dwa sposoby.

Z szablonami
Z CSS

Zobaczmy teraz każdy z różnymi przypadkami użycia.

Z szablonami

Jeśli chcesz dokonać strukturalnej zmiany w układzie, musisz użyć szablonów. Niezależnie od tego, czy będzie miała pasek boczny, czy będzie to strona o pełnej szerokości z szablonami, możesz kontrolować układ swojej strony.

Musi pracować nad motywem potomnym

Jednym z warunków korzystania z szablonów jest użycie motywów podrzędnych. Nie chodzi o to, że nie zadziała w głównym motywie, ale problem z modyfikacją głównego motywu polega na tym, że nie możesz kontrolować tam plików, po zaktualizowaniu motywu wszystkie zmiany zostaną utracone.

Możesz użyć gotowych motywów premium z motywami potomnymi, ale jeśli używasz darmowych motywów, które generalnie nie zawierają żadnego motywu potomnego, musisz go utworzyć. Po przygotowaniu motywu potomnego możesz teraz tworzyć szablony kategorii.

Jak stworzyć szablon kategorii

WordPress działa w systemie szablonów, który zachowuje pewną hierarchiczną kolejność. Musisz znać tę hierarchię szablonów, aby tworzyć szablony kategorii.

Hierarchiczny porządek kategorii to.

category-slug.php → id category-id.php kategorii.php → category.php → archive.php → index.php

Zgodnie z zamówieniem wordpress będzie szukał category-slug.php , gdzie slug oznacza nazwę kategorii, załóżmy, że masz kategorię o nazwie photoshop , więc najpierw wyszuka category-photoshop.php , jeśli ten plik nie istnieje, będzie szukać category-id.php tj. będzie szukał dowolnego pliku z identyfikatorem kategorii na przykład category-3.php jeśli ten nie jest dostępny, będzie szukał category.php jeśli również tego pliku nie ma, spróbuje użyć pliku archive.php jako szablonu jeśli ten nie znaleziony jest prawidłowy, w końcu użyje index.php jako podstawowego szablonu.

Aby utworzyć szablon kategorii, musisz znaleźć plik category.php w swoim motywie, większość motywów będzie miała plik category.php , ale jeśli go nie znajdziesz, poszukaj archive.php .

Uwaga: W niektórych frameworkach możesz w ogóle nie znaleźć tych plików w przypadkach, w których musisz przestrzegać wytycznych dotyczących konkretnych frameworków.

Teraz zakładając, że pracujesz nad motywem potomnym, skopiuj plik category.php lub archive.php z motywu nadrzędnego i wklej go w tej samej lokalizacji folderu motywu potomnego.

Category Template

Na przykład, jeśli znalazłeś wymagany plik w głównym katalogu motywu nadrzędnego, musisz umieścić go w głównym katalogu motywu potomnego, podobnie, jeśli był w podfolderze, a następnie utwórz podfolder o tej samej nazwie i wklej go tam.

Idąc dalej, powiedzmy, że masz kategorię o nazwie photoshop , zmień nazwę nowego pliku w motywie potomnym, na przykład ta category-photoshop.php i to jest to, że kategoria programu Photoshop będzie używać tego szablonu.

Spójrzmy teraz na przykład.

Uwaga: W naszych przykładach użyjemy motywu wordpress dwadzieścia siedemnaście , proces będzie działał na dowolnym motywie, ale struktura html będzie się różnić w zależności od motywu.

Teraz stworzyliśmy szablon kategorii, dostosujmy go.

Zobacz, jak wygląda aktualny szablon.

Current Category Layout

To właśnie staramy się osiągnąć.

New Category Layout

Podstawowa struktura

Motyw dwadzieścia siedemnaście ma układ dwukolumnowy, ale chcemy mieć układ jednokolumnowy, zrobimy ten szablon o pełnej szerokości bez paska bocznego.

W motywie dwadzieścia siedemnaście nie ma pliku category.php , więc jako szablon bazowy użyliśmy archive.php i nazwaliśmy go category-photoshop.php .

Stary kod (archive.php).

[php]
<?php
/**
* Szablon do wyświetlania stron archiwum
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @pakiet WordPress
* @podpakiet Twenty_Seventeen
* @od 1.0
* @wersja 1.0
*/

pobierz_nagłówek(); ?>

<?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; ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Rozpocznij pętlę */
while ( have_posts() ): the_post();

/*
* Dołącz do treści szablon specyficzny dla formatu Post-Format.
* Jeśli chcesz to zmienić w motywie potomnym, dołącz plik
* o nazwie content-___.php (gdzie ___ to nazwa formatu postu) i zostanie on użyty w zamian.
*/
get_template_part( 'części-szablonu/post/treść', get_post_format() );

koniec;

podział_postów_(tablica(
'prev_text' => dwadzieściaseventeen_get_svg( array( 'icon' => 'strzałka w lewo') ) . '<span class="screen-reader-text">' . __( 'Poprzednia strona', 'dwadzieścia siedemnaście' ) . '</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Następna strona', 'dwadzieścia siedemnaście' ) . '</span>' . dwadzieściaseventeen_get_svg( array( 'icon' => 'strzałka w prawo' ) ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Strona', 'dwadzieścia siedemnaście' ) . '</span>',
) );

w przeciwnym razie :

get_template_part( 'części-szablonu/post/treść', 'brak' );

endif; ?>

</main><!– #main –>
</div><!– #primary –>
<?php get_sidebar(); ?>
</div><!– .wrap ->

<?php get_footer();
[/php]

Nowy kod (kategoria-photoshop.php).

[php]
<?php
/**
* Szablon do wyświetlania stron Photoshop
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @pakiet WordPress
* @podpakiet Twenty_Seventeen
* @od 1.0
* @wersja 1.0
*/

pobierz_nagłówek(); ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Rozpocznij pętlę */
while ( have_posts() ): the_post();

koniec;

w przeciwnym razie :

get_template_part( 'części-szablonu/post/treść', 'brak' );

endif; ?>

</main><!– #main –>
</div><!– #primary –>
</div><!– .wrap ->

<?php get_footer();
[/php]

Tutaj możesz zobaczyć, że usunąłem <?php get_sidebar(); ?> <?php get_sidebar(); ?> ponieważ ten szablon nie będzie miał pasków bocznych.

Spowoduje to usunięcie paska bocznego, ale układ nadal nie jest pełny, musimy wprowadzić pewne poprawki CSS. Pamiętaj, że wszystkie korekty CSS zostaną wprowadzone do plików CSS motywów podrzędnych, a nie motywu nadrzędnego.

WordPress dodaje unikatową klasę do każdej kategorii z jej nazwą kategorii w treści, tak jak ten category-photoshop , na który możesz skierować tę klasę, aby stylizować stronę.

Category Class Name

CSS:

[css]
@media screen i (min-szerokość: 48em) {
.category-photoshop #podstawowy {
pływak: brak;
szerokość: 100%;
}
}
[/css]

Używając media query wystarczy dopasować arkusz stylów motywu nadrzędnego.

Dodawanie opisu kategorii

Możesz wyświetlić dodatkowy opis każdej kategorii, dodając opis w sekcji kategorii. Podanie dodatkowych informacji pomoże odwiedzającym lepiej zrozumieć temat, ale możesz uatrakcyjnić tę sekcję, nadając niepowtarzalny wygląd każdej kategorii.

Zgodnie z naszym projektem potrzebujemy niestandardowego obrazu po lewej stronie i nazwy kategorii z opisem po prawej stronie.

[php]
<?php
/**
* Szablon do wyświetlania kategorii Photoshop
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @pakiet WordPress
* @podpakiet Twenty_Seventeen
* @od 1.0
* @wersja 1.0
*/

pobierz_nagłówek(); ?>

<?php if ( have_posts() ) : ?>
<header class="page-header">
<div class="kategoria-nagłówka-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/photoshop-banner.jpg" alt="Photoshop"></div>
<div class="header-category-title">
<h1 class="tytuł-strony"><?php single_term_title()?></h1>
<?php
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</div>
</header><!– .page-header –>
<?php endif; ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Rozpocznij pętlę */
while ( have_posts() ): the_post();

/*
* Dołącz do treści szablon specyficzny dla formatu Post-Format.
* Jeśli chcesz to zmienić w motywie potomnym, dołącz plik
* o nazwie content-___.php (gdzie ___ to nazwa formatu postu) i zostanie on użyty w zamian.
*/
get_template_part( 'szablon-części/post/treść-photoshop', get_post_format() );

koniec;

w przeciwnym razie :

get_template_part( 'szablon-części/post/treść-photoshop', 'brak' );

endif; ?>

</main><!– #main –>
</div><!– #primary –>
</div><!– .wrap ->

<?php get_footer();
[/php]

CSS:

[css]
.nagłówek {
border-bottom: 1px stałe #ccc;
rozmiar pudełka: obramowanie-pudełko;
margines-dolny: 1,5em;
wyściółka na dole: 0.5em;
}
.tytuł-kategorii-nagłówka {
pływak: lewy;
padding-top: 15px;
szerokość: 85%;
}
.header-category-img {
pływak: lewy;
szerokość: 15%;
}
[/css]

Page Header

Widać, że wprowadziłem sporo zmian w sekcji page-header ale najważniejszą z nich jest single_term_title() , ponieważ chcę wyświetlać tylko nazwę kategorii, taką jak Photoshop , zamiast Category:Photoshop .

Iść dalej.

Widok pudełka

Wprowadziliśmy podstawowe zmiany, takie jak tworzenie układu jednej kolumny i zmodyfikowaliśmy sekcję opisu kategorii, teraz zróbmy coś bardziej zaawansowanego, przekonwertujemy listę postów z widoku listy na widok gid lub box z 3 elementami na kolumnę.

Aby wprowadzić te zmiany, musimy zmodyfikować ścieżkę get_template_part , ponieważ zawartość jest tutaj wywoływana z innej lokalizacji, ale w niektórych motywach możesz znaleźć zawartość bezpośrednio w szablonie podstawowym.

[php]
get_template_part( 'szablon-części/post/treść-photoshop', get_post_format() );
[/php]

Teraz, aby zmodyfikować tę stronę zawartości, musisz skopiować plik z motywu nadrzędnego do motywu potomnego i umieścić go w tej samej strukturze folderów, a następnie zmienić jego nazwę, jak chcesz.

Tutaj skopiowałem plik content.php z motywu nadrzędnego i wkleiłem go jako content-photoshop.php w motywie potomnym. Zmieniono jego nazwę, ponieważ wszelkie zmiany, które zostaną tutaj wprowadzone, wpłyną tylko na ten szablon.

Content Template

Kod (treść-photoshop.php).

[php]
<?php
/**
* Część szablonu do wyświetlania postów w Photoshopie
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @pakiet WordPress
* @podpakiet Twenty_Seventeen
* @od 1.0
* @wersja 1.2
*/

<article id="post-<?php the_ID(); ?>" <?php post_class("jedna trzecia"); ?> >
<?php
if ( is_sticky() && is_home() ):
echo dwadzieściaseventeen_get_svg( array( 'icon' => 'pinezka' ) );
endif;
?>
<?php if ( ” !== get_the_post_thumbnail() && ! is_single() ): ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'dwadzieścia siedemnaście-polecany-obraz' ); ?>
</a>
</div><!– .post-miniaturka –>
<?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="zakładka">', '</a></h3>' );
} w przeciwnym razie {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="zakładka">', '</a></h2>' );
}
if ( 'post' === get_post_type() ) {
echo '<div class="entry-meta">';
if ( is_single() ) {
dwadzieścia siedemnaście_wysłane_w();
} w przeciwnym razie {
echo dwadzieścia siedemnaście_time_link();
dwadzieścia siedemnaście_edytuj_link();
};
echo '</div><!– .entry-meta –>';
};
?>
</header><!– .entry-header –>

<div class="entry-content">
<?php
/* tłumacze: %s: Nazwa aktualnego posta */
if ( is_single() ) :
zawartość_( sprintf(
__( 'Kontynuuj czytanie<span class="screen-reader-text"> "%s"</span>', 'dwadzieścia siedemnaście' ),
pobierz_tytuł()
) );

ks29so_link_pages( tablica (
'before' => '<div class="page-links">' . __( 'Strony:', 'dwadzieścia siedemnaście' ),
'po' => '</div>',
'link_before' => '<span class="numer-strony">',
'link_after' => '</span>',
) );
w przeciwnym razie:

the_fragment( sprintf(
__( 'Kontynuuj czytanie<span class="screen-reader-text"> "%s"</span>', 'dwadzieścia siedemnaście' ),
pobierz_tytuł()
) );

ks29so_link_pages( tablica(
'before' => '<div class="page-links">' . __( 'Strony:', 'dwadzieścia siedemnaście' ),
'po' => '</div>',
'link_before' => '<span class="numer-strony">',
'link_after' => '</span>',
) );
endif;
?>
</div><!– .entry-content –>

<?php
if ( is_single() ) {
dwadzieścia siedemnaście_wpis_stopka();
}
?>

</artykuł><!– #post-## –>
[/php]

Teraz kilka rzeczy, na które należy zwrócić uwagę, że dodałem niestandardową klasę w one-third w sekcji artykułu i zmieniłem typ zawartości na excerpt dla widoku pudełkowego, inne zmiany strukturalne są oczywiste.

CSS:

[css]
.category-photoshop główny{
margines:0 -15px;
}
.jedna trzecia {
rozmiar pudełka: obramowanie-pudełko;
pływak: lewy;
dopełnienie: 0 15px;
szerokość: 33,333%;
}
.jedna trzecia .post-kontener {
obramowanie: stałe 1px #ccc;
wypełnienie: 10px;
}
.jedna trzecia .po miniaturze{
margines-dolny:0;
}
.jedna trzecia h2{
margines-dolny:0.2em;
}
[/css]

Teraz tak wygląda układ.

New Category Layout

Tylko z CSS

Jeśli nie czujesz się dobrze z kodem php, nawet wtedy możesz stylizować strony kategorii tylko za pomocą CSS, ale te zmiany będą ograniczone w taki sposób, że nie będziesz mógł dodawać ani modyfikować kodu, możesz tylko stylizować istniejące elementy.

Zobaczmy na przykładach, jak nawet przy tych ograniczeniach możesz sprawić, że strony kategorii będą wyjątkowe.

Powiedzmy, że chcemy z tego wystylizować naszą kategorię wordpress.

Old WordPress Category

do tego.

New WordPress Category

Podstawowa stylizacja

Możesz bardzo łatwo zmienić kolor tła za pomocą CSS, kierując się na klasę, którą zapewnia wordpress.

Coś takiego.

CSS:

[css]
.category-wordpress .treść-witryny-zawiera {
kolor tła:#eaeaea;
}
[/css]

Dodawanie ikony do tytułu kategorii

Możesz dodać unikalne ikony do każdej kategorii z obrazami tła, zgodnie z wymaganiami tutaj dodamy jedną tylko do naszej kategorii wordpress.

CSS:

[css]
.category-wordpress .page-header {
border-bottom: 1px stałe #ccc;
margines-dolny: 1,5em;
wyściółka na dole: 0.5em;
}
.category-wordpress .page-header h1{
background:url("assets/images/wordpress-logo.png") bez powtarzania w lewo środek;
dopełnienie-dolne:5px;
dopełnienie-lewe:35px;
}
[/css]

Tworzenie strony o pełnej szerokości

Możesz przekonwertować dwie lub więcej stron kolumn na stronę o pełnej szerokości przynajmniej wizualnie za pomocą CSS.

CSS:

[css]
.category-wordpress:nie(.error404) #podstawowy{
pływak: brak;
szerokość: 100%;
}

.category-wordpress #dodatkowe{
Nie wyświetla się;
}
[/css]

Wiem, że jest to hack CSS i nie jest to zalecane jako najlepsza praktyka, ale możesz osiągnąć swój cel projektowy w ten sposób, szczególnie jeśli nie jesteś wystarczająco pewny w pracy z szablonami.

Hidden Element

Ale jeśli możesz pracować z szablonami, ta metoda tworzenia strony o pełnej szerokości nie jest zalecana jako skrót, ponieważ jedyne, co robisz, to ukrywanie jej przed wyświetleniem w przeglądarce, gdy pozostaje w DOM.

Wniosek

Jak widać, można wiele zrobić, aby stylizować różne kategorie, a powyższe przykłady to tylko punkt wyjścia, ale możliwości zależą od umiejętności pracy z szablonami i CSS. W zależności od poziomu umiejętności możesz wybrać sposób stylizowania kategorii.

Czy znasz inne sposoby na różne style różnych kategorii, daj nam znać w sekcji komentarzy poniżej.