Jak stylizować każdy Post WordPress inaczej

Czy kiedykolwiek natknąłeś się na stronę, która inaczej stylizuje swoje posty na blogu? Niektóre witryny mają lepkie posty wyróżnione niestandardowym tłem, podczas gdy inne mogą mieć każdy post kategorii stylizowany na unikalny wygląd. Jeśli kiedykolwiek chciałeś dowiedzieć się, jak stylować każdy post WordPress inaczej, to jesteś we właściwym miejscu. W tym artykule pokażemy, jak stylować każdy post WordPress inaczej.

Uwaga: Ten samouczek wymaga dodania niestandardowego CSS w WordPress. Musisz także mieć możliwość korzystania z narzędzia Inspect. Wymagana jest podstawowa znajomość CSS i HTML.

Stylizacja poszczególnych postów w WordPress

WordPress dodaje domyślne klasy CSS do różnych elementów na twojej stronie. Standardowy zgodny motyw WordPress musi mieć kod wymagany przez WordPress, aby dodać klasy CSS dla treści, postów, stron, widżetów, menu i innych.

Podstawowa funkcja WordPress o nazwie post_class() jest używany przez motywy, aby powiedzieć WordPress, gdzie dodać te domyślne klasy CSS dla postów.

Jeśli odwiedzasz swoją stronę internetową i korzystasz z narzędzia Inspect w przeglądarce, będziesz mógł zobaczyć te klasy dodane dla każdego postu.

Poniżej znajdują się klasy CSS dodane domyślnie na podstawie strony, którą użytkownik przegląda.

• .post-id
• .post
• .załącznik
• .lepki
• .hentry (strony mikroformatowe hatu)
• .Kategoria-ID
• .Kategoria-nazwa
• .tag-nazwa
• .format – {format-nazwa}
• .type – {post-type-name}
• .has-post-thumbnail
• .post-hasło-wymagane
• .post-zabezpieczony hasłem

Przykładowe wyjście wyglądałoby tak:

<article id = "post-412" class = "post-412 typ postu-status postu-format publikacji - Kategoria standardowa-aktualności">

Możesz stylizować każdy post WordPress inaczej, używając odpowiednich klas CSS.

Na przykład, jeśli chcesz stylizować pojedynczy post, możesz użyć klasy post-id w niestandardowym CSS.

.post-412 { 
background-color: # FF0303;
color: # FFFFFF; 
} 

Nie zapomnij zmienić ID postu, aby pasował do twojego.

Spójrzmy na inny przykład.

Tym razem będziemy stylizować wszystkie posty umieszczone w konkretnej kategorii o nazwie news.

Możemy to zrobić, dodając następujący Niestandardowy CSS do naszego motywu”

.Kategoria-Aktualności { 
    font-size: 18px;
    font-style: italic;
} 

Ten CSS wpłynie na wszystkie posty w kategorii Aktualności.

Funkcja Klasy Post

Twórcy motywów używają funkcji post_class, aby powiedzieć WordPress, gdzie dodać klasy post. Zwykle jest to w < artykuł> tag.

Funkcja klasy post nie tylko ładuje domyślne klasy CSS generowane przez WordPress, ale także pozwala dodawać własne klasy.

W zależności od motywu znajdziesz funkcję post_class w swoim pojedynczym.plik php lub w plikach szablonów treści. Normalnie kod będzie wyglądał mniej więcej tak:

< article id = " post -<?php the_ID ();?>" <?php post_class ();?>>

Możesz dodać własną niestandardową klasę CSS z atrybutem takim jak ten:

< article id = " post -<?php the_ID ();?>" <?php post_class ('longform-article');?>>

Post_class wydrukuje odpowiednie domyślne klasy CSS wraz z Twoją niestandardową klasą CSS.

Jeśli chcesz dodać wiele klas CSS, możesz zdefiniować je jako tablicę, a następnie wywołać je w funkcji post_class.

<?php 
$custom_classes = array(
		"longform-article",
		"featured-story",
		"interactive",
	);
?>
< article id = " post -<?php the_ID ();?>" <?php post_class ($custom_classes);?>>

Styl postów inaczej na podstawie autorów

Domyślne klasy CSS generowane przez funkcję the_posts nie zawierają nazwy autora jako klasy CSS.

Jeśli chcesz dostosować styl każdego postu na podstawie autora, musisz najpierw dodać nazwę autora jako klasę CSS.

Możesz to zrobić, korzystając z poniższego fragmentu:

<?php $author = get_the_author_meta ('user_nicename');?>
< article id = " post -<?php the_ID ();?>" <?php post_class ($author);?>>

Ten kod doda nazwę użytkownika jako klasę CSS. Nicename to przyjazna nazwa URL używana przez WordPress. Nie ma spacji, a wszystkie znaki są pisane małymi literami, co czyni go idealnym do użycia jako klasa CSS.

Powyższy kod da ci taki wynik:

<article id = "post-412" class = "peter post-412 typ postu-status postu-format publikacji - standardowa Kategoria-Aktualności">

Teraz możesz użyć .peter w swoim niestandardowym CSS, aby stylizować wszystkie posty tego konkretnego autora, aby wyglądać inaczej.

.Piotr { 
background-color: # EEE;
border: 1px solid # CCC; 
}

Styl postów na podstawie popularności za pomocą liczby komentarzy

Być może widziałeś witryny z popularnymi widżetami postów, które czasami opierają się na liczbie komentarzy. W tym przykładzie pokażemy Ci, jak inaczej stylizować posty za pomocą liczby komentarzy.

Po pierwsze, musimy uzyskać liczbę komentarzy i powiązać z nią klasę.

Aby uzyskać liczbę komentarzy, musisz dodać następujący kod do plików motywów. Ten kod trafia do pętli WordPress, więc możesz go dodać tuż przed tagiem < article>.

<?php 
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments ($postid);
		$my_comment_count = $total_comment_count - > approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'new';
	} elseif ($my_comment_count > = 10 & & $my_comment_count <20) {
		$my_comment_count = 'emerging';
	} elseif ($my_comment_count > = 20) {
		$my_comment_count = 'popularne';
	}
?>

Ten kod sprawdza liczbę komentarzy dla wyświetlanego postu i przypisuje im wartość na podstawie liczby. Na przykład posty z mniej niż 10 komentarzami otrzymują klasę o nazwie new, mniej niż 20 są określane jako emerging, a wszystko, co ma więcej niż 20 komentarzy, jest popularne.

Następnie musisz dodać klasę CSS comment count do funkcji post_class.

< article id = " post -<?php the_ID ();?>" <?php post_class ($my_comment_count ); ?>>

Spowoduje to dodanie nowych, pojawiających się i popularnych klas CSS do wszystkich postów na podstawie liczby komentarzy, które każdy post ma.

Możesz dodać niestandardowy CSS do postów w stylu na podstawie popularności:

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed # ff9933;}
.popular {border: 1px dashed #CC0000;}

Dodajemy tylko obramowania, możesz dodać dowolne reguły CSS, które chcesz.

Style postów oparte na niestandardowych polach

Twarde kodowanie klas CSS w pliku motywu ogranicza cię tylko do tych konkretnych klas CSS. Co zrobić, jeśli chcesz zdecydować, którą klasę CSS dodać do artykułu podczas pisania?

Dzięki Polom niestandardowym możesz dodawać klasy CSS w locie.

Najpierw musisz dodać niestandardowe pole do posta, abyś mógł je przetestować. Edytuj post i przewiń w dół do sekcji pola niestandardowe.

Dodaj klasę post jako nazwę pola niestandardowego i wszystko, czego chcesz użyć jako klasy CSS w polu Wartość.

Nie zapomnij kliknąć przycisku „Dodaj niestandardowe pole”, aby go zapisać, a następnie zapisać swój post.

Następnie Edytuj pliki motywów, aby wyświetlić niestandardowe pole jako klasę post.

<?php $custom_values = get_post_meta ($post- > ID, 'Post-class');?>
< article id = " post -<?php the_ID ();?>" <?php post_class ($custom_values);?>>

Wyświetli następujący kod HTML:

<article id = "post-412" class = "trending Post-412 typ postu-status postu-format publikacji-standardowa Kategoria hentry-uncategorized">

Możesz teraz dodać niestandardowy CSS dla post_class, który dodałeś, używając niestandardowego pola.

.trending{
background-color: # # ff0000;
}

Pola niestandardowe mogą mieć wiele wartości, dzięki czemu można dodać wiele klas CSS przy użyciu tej samej nazwy.

Istnieje wiele innych sposobów indywidualnego stylu postów WordPress. Wraz z rozwojem Twoich umiejętności będziesz odkrywać nowe sposoby stylizacji postów przy użyciu różnych warunków.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stylować każdy post WordPress inaczej. Możesz również zobaczyć naszą ostateczną listę najbardziej poszukiwanych wskazówek, sztuczek i hacków WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.