Unikalne stylizowanie każdego wpisu WordPress to sprytny sposób na wyróżnienie Twojej witryny. Pozwala podkreślić konkretne treści i dopasować projekt do klimatu Twojej marki.
Niektóre strony używają niestandardowych teł dla przypiętych wpisów lub nadają każdej kategorii własny styl. Te drobne zmiany sprawiają, że Twoje treści wydają się bardziej uporządkowane i atrakcyjne wizualnie.
Jednak może to być trudne. Bez odpowiednich narzędzi i kroków możesz stracić godziny na próbach i błędach – lub co gorsza, przypadkowo zepsuć układ swojej witryny.
Przeprowadziliśmy badania za Ciebie i znaleźliśmy kilka prostych metod na różne stylizowanie wpisów.
Korzystając z WPCode, najlepszej wtyczki do fragmentów kodu dla WordPress, możesz łatwo dodawać niestandardowe style do swoich wpisów i tworzyć unikalny wygląd dla każdego z nich – bez wysiłku.
Uwaga: Ten samouczek wymaga dodania niestandardowego CSS w WordPress. Będziesz także musiał umieć korzystać z narzędzia Inspektora i mieć podstawową wiedzę o CSS, więc może nie być odpowiedni dla całkowicie początkujących.
💡Szybka odpowiedź: Jak inaczej stylizować wpisy
Najbezpieczniejszym sposobem stylizowania konkretnych postów WordPress bez edycji plików motywu jest użycie wtyczki WPCode. Pozwala ona bezpiecznie wstrzykiwać niestandardowe klasy CSS:
- Pojedyncze posty: Celuj w konkretną klasę
.post-id. - Według kategorii: Celuj w klasę
.category-name. - Według autora: Dodaj niestandardowy fragment PHP, aby wygenerować klasy autora.
- Według popularności: Dodaj niestandardowy fragment PHP, aby stylizować na podstawie liczby komentarzy.
Plusy i minusy różnego stylizowania każdego posta WordPress
Jeśli masz bloga WordPress, różnorodne stylizowanie każdego posta może stworzyć unikalne wrażenia wizualne, gdzie różne kolory są powiązane z różnymi kategoriami treści.
Jednak ważne jest, aby rozważyć korzyści w stosunku do potencjalnych wad.
| ✅ Plusy | ❌ Minusy |
|---|---|
| Tworzy unikalne wrażenia wizualne dla czytelników | Regularna konserwacja może być czasochłonna |
| Pomaga wizualnie kategoryzować typy treści | Może stworzyć niespójne doświadczenie użytkownika |
| Przyciąga uwagę i może zwiększyć zaangażowanie | Może rozmyć tożsamość marki i spójność |
| Umożliwia specyficzne wyróżnienie kluczowych postów | Wymaga wiedzy technicznej (CSS/PHP) |
Jeśli jesteś początkującym, dodawanie niestandardowego CSS do stylizowania każdego posta może być również trudne. Mając to na uwadze, pokażemy Ci, jak łatwo stylizować każdy post WordPress inaczej, używając najbezpieczniejszych metod.
Oto szybki przegląd wszystkich tematów, które omówimy w tym przewodniku:
- Jak stylizować pojedyncze posty w WordPress
- Jak stylizować posty w określonej kategorii
- Jak stylizować posty inaczej w zależności od autora
- Jak stylizować posty w zależności od popularności przy użyciu liczby komentarzy
- Bonus: Wyświetlanie innego paska bocznego dla każdego posta w WordPress
- Często zadawane pytania dotyczące stylizowania różnych postów w WordPress
Zacznijmy.
Jak stylizować pojedyncze posty w WordPress
WordPress dodaje domyślne klasy CSS do różnych elementów na Twojej stronie. Motywy używają podstawowej funkcji WordPress o nazwie post_class(), aby powiedzieć WordPress, gdzie dodać te domyślne klasy CSS dla postów.
Jeśli odwiedzisz swoją stronę i użyjesz narzędzia Inspekcja w swojej przeglądarce, będziesz w stanie zobaczyć te klasy dodane dla każdego posta.
Poniżej znajdują się klasy CSS dodawane domyślnie w zależności od tego, którą stronę ogląda użytkownik:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (strony z mikrodanymi hAtom)
- .category-ID
- .category-name
- .tag-name
- .format-{nazwa-formatu}
- .type-{nazwa-typu-wpisu}
- .has-post-thumbnail
Przykładowy wynik wyglądałby następująco:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Możesz inaczej stylizować każdy wpis WordPress, używając odpowiednich klas CSS lub identyfikatorów. Aby to zrobić, musisz najpierw znaleźć identyfikator wpisu dla poszczególnych wpisów.
W tym celu musisz odwiedzić stronę Wpisy » Wszystkie wpisy w panelu administracyjnym WordPress i najechać kursorem myszy na wpis.
Teraz u dołu ekranu po lewej stronie pojawi się adres URL do edycji wpisu. Tutaj możesz znaleźć identyfikator wpisu, patrząc na liczbę między „post=” a „&action=”.
W poniższym przykładzie identyfikator wpisu to 25.
Po wykonaniu tej czynności musisz dodać klasę CSS wraz z niestandardowym kodem do plików motywu lub w narzędziu do dostosowywania motywu. Może to być jednak ryzykowne i spowodować awarię witryny jednym błędem.
Dlatego zamiast tego zalecamy WPCode.
Po dokładnym przetestowaniu stwierdziliśmy, że jest to najłatwiejszy i najbezpieczniejszy sposób dodawania niestandardowego kodu do witryny. Aby dowiedzieć się więcej o naszych doświadczeniach z wtyczką, zapoznaj się z naszą recenzją WPCode.
Najpierw musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Szczegółowe informacje znajdziesz w naszym przewodniku dla początkujących, jak zainstalować wtyczkę WordPress.
Uwaga: Jeśli podoba Ci się darmowa wersja, uaktualnienie do WPCode Pro może przenieść Twoje doświadczenia na wyższy poziom. Wersja premium odblokowuje dostęp do ponad 100 sprawdzonych przez ekspertów fragmentów kodu, inteligentnej logiki warunkowej, zaplanowanych zmian kodu i wielu innych funkcji.
Po aktywacji odwiedź stronę Fragmenty kodu » + Dodaj fragment w panelu administracyjnym WordPress. Tutaj kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment kodu)”.
Spowoduje to przejście do strony „Utwórz fragment niestandardowy”, gdzie możesz zacząć od dodania nazwy dla swojego fragmentu kodu. Następnie wybierz „Fragment CSS” jako typ kodu z menu rozwijanego po prawej stronie.
Następnie wprowadź selektor CSS dla swojego konkretnego identyfikatora wpisu w polu „Podgląd kodu”.
.post-13 { }Następnie możesz dodać dowolny niestandardowy kod CSS między nawiasami, aby stylizować swój wpis.
Na przykład, jeśli chcesz zmienić kolor tła poszczególnego wpisu, możesz dodać następujący niestandardowy kod CSS. Pamiętaj, że musisz zastąpić identyfikator wpisu w tym kodzie własnym identyfikatorem. Tam, gdzie jest .post-13, Twój może być .post-23873.
Możesz również zmienić kod szesnastkowy dla koloru tła na dowolny wybrany kolor:
.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}
Następnie przełącz przełącznik „Nieaktywny” na górze na „Aktywny” i kliknij przycisk „Zapisz fragment”, aby zapisać ustawienia.
Niestandardowy kod CSS zostanie teraz automatycznie wykonany w Twoim indywidualnym wpisie po aktywacji fragmentu.
Przejdź dalej i odwiedź swój wpis na blogu WordPress, aby zobaczyć zmiany w czasie rzeczywistym.
Możesz również dodać inne niestandardowe fragmenty kodu CSS w polu „Podgląd kodu”, aby zmienić kolor zaznaczenia tekstu, kolor tekstu, kolor linków wewnętrznych i wiele więcej.
Więcej informacji znajdziesz w naszym przewodniku dla początkujących na temat dostosowywania kolorów w WordPress.
Jak stylizować posty w określonej kategorii
Jeśli chcesz stylizować wszystkie posty należące do określonej kategorii, możesz to również zrobić za pomocą WPCode.
Musisz odwiedzić stronę Fragmenty kodu » + Dodaj fragment i wybrać opcję „Dodaj własny kod (nowy fragment)”.
Następnie dodaj nazwę fragmentu kodu na nowej stronie i wybierz „Fragment CSS” jako typ kodu. Po tym wpisz klasę CSS konkretnej kategorii w polu podglądu kodu, używając sluga permalinka kategorii po myślniku:
.category-books { }
Po wykonaniu tej czynności możesz dodać dowolny niestandardowy fragment CSS do pola i zastosować go do wszystkich postów w różnych kategoriach.
Na przykład, jeśli chcesz zmienić rozmiar i styl czcionki dla wszystkich postów w określonej kategorii, możesz użyć następującego fragmentu kodu. Pamiętaj tylko, aby zastąpić nazwę kategorii zgodnie z Twoją witryną.
category-books {
font-size: 18px;
font-style: italic;
}
Następnie musisz przełączyć przełącznik „Nieaktywny” na „Aktywny” u góry.
Następnie kliknij przycisk „Zapisz fragment”, aby zapisać ustawienia.
Możesz teraz odwiedzić wszystkie posty w określonej kategorii, aby zobaczyć zmiany zastosowane za pomocą kodu CSS.
Tak to wyglądało na naszej stronie demonstracyjnej:
Jak stylizować posty inaczej w zależności od autora
Domyślne klasy CSS generowane przez WordPress nie zawsze zawierają nazwisko autora jako użyteczny styl dla każdego posta na podstawie autora. Najpierw musisz dodać nazwisko autora do klas postów.
Aby to zrobić za pomocą WPCode, możesz wybrać opcję „Dodaj własny kod (nowy fragment)”.
Spowoduje to przejście do strony „Utwórz niestandardowy fragment”, gdzie musisz dodać nazwę fragmentu kodu i wybrać „Fragment PHP” jako typ kodu.
Następnie po prostu dodaj następujący niestandardowy kod do pola „Podgląd kodu”:
$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );
Na koniec możesz przełączyć przełącznik „Nieaktywny” na „Aktywny” i kliknąć przycisk „Zapisz fragment”, aby zapisać ustawienia.
Powinno to wyglądać tak:
Ten kod automatycznie doda pseudonim użytkownika jako klasę CSS do każdego posta. Pseudonim to przyjazna dla adresu URL nazwa używana przez WordPress. Nie zawiera spacji, a wszystkie znaki są małymi literami.
Teraz musisz ponownie odwiedzić stronę Fragmenty kodu » + Dodaj fragment i wybrać opcję „Dodaj własny kod (nowy fragment)”.
Na następnym ekranie chcesz dodać nazwę dla swojego niestandardowego kodu i wybrać „Fragment CSS” jako typ kodu z menu rozwijanego po prawej stronie.
Następnie możesz wybrać konkretnego autora, używając jego pseudonimu w polu „Podgląd kodu” w następujący sposób:
.sarahclare
Następnym krokiem jest dodanie niestandardowego kodu CSS, aby zmienić kolor tła, rozmiar obramowania, kolor tekstu i inne.
Możesz użyć poniższego kodu, aby zmienić kolor tła postów autora i dodać obramowanie do obszaru treści.
.sarahclare {
background-color:#EEE;
border:1px solid #CCC;
}
Po zakończeniu kliknij przycisk „Zapisz fragment” u góry.
Następnie, nie zapomnij przełączyć przełącznika „Nieaktywny” na „Aktywny”.
Niestandardowy kod zostanie automatycznie wykonany po aktywacji.
Możesz teraz odwiedzić wpis konkretnego autora, aby zobaczyć zmiany.
Jak stylizować posty w zależności od popularności przy użyciu liczby komentarzy
Mogliście widzieć strony z widgetami popularnych wpisów, które czasami opierają się na liczbie komentarzy. W tym przykładzie pokażemy, jak inaczej stylizować wpisy, używając liczby komentarzy.
Najpierw musimy sprawdzić liczbę komentarzy dla każdego wpisu i przypisać mu klasę na podstawie tej liczby. Aby to zrobić, musisz dodać niestandardową funkcję PHP za pomocą wtyczki do fragmentów kodu, takiej jak WPCode.
Po prostu wybierz opcję „Dodaj własny kod (nowy fragment)”, aby otworzyć stronę „Utwórz niestandardowy fragment” w WPCode.
Tutaj chcesz wybrać „Fragment PHP” jako „Typ kodu”, a następnie skopiować i wkleić poniższy kod do pola „Podgląd kodu”:
<?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 = 'popular';
}
?>
Następnie kliknij przycisk „Zapisz fragment” i przełącz przełącznik „Nieaktywny” na „Aktywny”, aby zapisać swoje ustawienia.
Ten kod sprawdza liczbę komentarzy dla wyświetlanego wpisu i przypisuje mu wartość na podstawie tej liczby.
Na przykład, wpisy z mniejszą niż 10 komentarzami otrzymują klasę „new”, z mniejszą niż 20 są określane jako „emerging”, a wszystko powyżej 20 komentarzy jest „popularne”.
Teraz musisz dodać liczbę komentarzy jako klasę CSS do funkcji post_class. Aby to zrobić, musisz ponownie otworzyć stronę „Utwórz niestandardowy fragment” i wybrać opcję „Fragment PHP” z menu rozwijanego.
Następnie możesz dodać poniższy niestandardowy kod do pola podglądu:
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Następnie po prostu kliknij przycisk „Zapisz fragment”.
Następnie możesz przełączyć przełącznik „Nieaktywny” na „Aktywny”.
Spowoduje to dodanie klas CSS new, emerging i popular do wszystkich wpisów na podstawie liczby komentarzy, które posiada każdy wpis. Możesz teraz dodać niestandardowy kod CSS, aby stylizować każdy wpis na podstawie jego popularności.
Na przykład, możesz użyć poniższego kodu, aby dodać różne kolory obramowania dla wpisów na podstawie liczby komentarzy dodanych do nich:
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz fragment”, aby zapisać swoje ustawienia.
Bonus: Wyświetlanie innego paska bocznego dla każdego posta w WordPress
Po odmiennym stylizowaniu każdego wpisu, możesz również chcieć dodać unikalny pasek boczny dla każdego wpisu. Pozwoli to na prezentację konkretnych treści związanych z tym artykułem, które mogą zainteresować użytkowników.
Na przykład, jeśli masz blog podróżniczy i opublikowałeś wpis o miejscach do odwiedzenia na Florydzie, możesz utworzyć specjalny pasek boczny wyświetlający pakiety podróżne na Florydę. Alternatywnie, możesz wyświetlić formularz rejestracyjny na wycieczkę na Florydę, którą organizujesz.
Możesz użyć SeedProd, najlepszej wtyczki do tworzenia stron dla WordPressa, aby wyświetlić inny pasek boczny dla każdego wpisu.
Posiada interfejs typu „przeciągnij i upuść”, ponad 320 gotowych szablonów oraz integracje z usługami marketingu e-mailowego, co czyni go doskonałym wyborem.
Po aktywacji wtyczki możesz wybrać niestandardową stronę jako projekt strony docelowej, a następnie układ z paskiem bocznym.
Następnie możesz łatwo przeciągać i upuszczać wybrane bloki z lewej kolumny, w tym formularze kontaktowe, archiwa, prezenty, pola wyszukiwania, komentarze i inne.
Po zakończeniu kliknij przyciski „Zapisz” i „Opublikuj” z menu rozwijanego u góry.
Pomyślnie zaprojektowałeś teraz specyficzny pasek boczny dla wpisu lub strony WordPress.
Aby uzyskać więcej informacji, zapoznaj się z naszym samouczkiem na temat wyświetlania innego paska bocznego dla każdego wpisu i strony w WordPress.
Często zadawane pytania dotyczące stylizowania różnych postów w WordPress
Oto kilka pytań, które nasi czytelnicy często zadawali na temat stylizacji wpisów i innych elementów w WordPress:
Jak dodać style w WordPress?
Style można dodawać za pomocą Edytora pełnej witryny dla motywów blokowych lub Dostosowywania motywu dla motywów klasycznych. W przypadku zaawansowanego niestandardowego CSS zalecamy użycie wtyczki takiej jak WPCode do bezpiecznego wstrzykiwania stylów bez edycji plików motywu.
Jak zmienić styl czcionki we wpisie WordPress?
Styl czcionki można zmienić bezpośrednio w ustawieniach edytora bloków. Zaznacz blok tekstu, który chcesz edytować, spójrz na pasek boczny po prawej stronie i użyj ustawień „Typografia”, aby dostosować rozmiar, wygląd i rodzinę czcionek.
Jak dostosować tekst w WordPress?
Aby dostosować tekst, możesz podświetlić konkretne słowa, aby użyć paska narzędzi do pogrubienia lub kursywy. W przypadku globalnych zmian, takich jak kolor lub wyrównanie, użyj panelu ustawień bloku po prawej stronie ekranu edytora.
Jak zmienić format wpisu w WordPress?
Format wpisu można zmienić w pasku bocznym edytora wpisów. Poszukaj panelu „Stan i widoczność” (lub dedykowanej sekcji „Format wpisu”, w zależności od motywu) i wybierz pożądany format, taki jak Standardowy, Galeria lub Wideo, z listy rozwijanej.
Czy można w pełni dostosować WordPress?
Tak, można w pełni dostosować każdy aspekt WordPress. Ponieważ jest to oprogramowanie open-source, masz pełną kontrolę nad motywami, wtyczkami i niestandardowym kodem, co pozwala na tworzenie dowolnego projektu lub funkcjonalności, której potrzebujesz.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak inaczej stylizować każdy wpis WordPress. Możesz również zapoznać się z naszymi poradnikami dla początkujących na temat dodawania ikony strony (favicon) i dodawania spadających płatków śniegu do swojego bloga WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Rafael
Świetny artykuł. Chyba mógłbym użyć czegoś takiego do sprawdzenia kategorii posta i umieszczenia niestandardowego CSS, aby zmienić styl części strony internetowej zgodnie z kategorią, prawda?
Chciałbym ustawić różne kolory tylko dla tła tytułu posta dla każdej kategorii na blogu.
Kany
Cześć, świetny artykuł. Jak dostosować styl CSS najnowszych wiadomości z bloga? Tylko najnowszy, masz jakiś pomysł? Dzięki.
Pomoc techniczna WPBeginner
Twój motyw musiałby dodać coś, co można by skierować za pomocą CSS, w tej chwili nie mamy zalecanej metody dodawania tego.
Admin
Les
Świetny artykuł. Chciałem ustawić domyślny rozmiar czcionki dla każdej kategorii i postępowałem zgodnie z instrukcjami, dodając kod do pliku Style.css, ale kiedy dodałem nowy post, czcionka miała stary rozmiar. Widzisz kod? Czegoś brakuje?
/* Początek dodatkowych stylów CSS */
.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
.desktop .art-nav-inner{width: 1200px!important;}
.category-firstg {
font-size: 18px;
font-style: bold;
}
/* Koniec dodatkowych stylów CSS */
William D
Świetny artykuł, dziękuję bardzo. Czy można by w podobny sposób zmienić kolor przycisku „Czytaj dalej”/kolor tekstu? Coś (prawdopodobnie ja) zmieniło moje przyciski w bardzo nieprzyjemny sposób i mam mnóstwo problemów z próbą dowiedzenia się, jak sprawić, by znów wyglądały przyjemnie.
Z góry dziękuję za wszelką pomoc, którą możesz udzielić!
Matusz
Świetny tutorial. Proste i jasne wyjaśnienie.
Neon Emmanuel
Cześć, jeśli umieszczę to w single.php, wyświetla tytuł bieżącego posta, ale działa dobrze w index.php, jakieś sugestie?
MayMyatKhine
Cześć, proszę wyślij mi nowe wydarzenie do użycia w wordpressie.
marisa
To świetny artykuł, ale mam problem z umieszczeniem
ID, ‘post-class’); ?
Gdzie dokładnie w pętli mam to umieścić? Używam underscore.me z foundation 5 i moja nowa klasa się nie pojawia.
Alberto Hartzet
Idealnie!, dzięki. A co z pierwszym i „ostatnim” postem? jakieś pomysły?
Nadeem
Dzięki wielkie bracie.. to bardzo pomocne
RW
kolejna zakładka! świetny post! dziękuję…
Payal
Bardzo pouczające, dziękuję. Dodałem tę stronę do zakładek.
Mam też pytanie: Co jeśli chciałbym inaczej stylizować pierwszy (najnowszy) post — tak, aby post wyświetlany na górze mojej strony indeksu wyglądał inaczej?
James
Hej, mam z tym problem w tej chwili…
Moja pętla postów nie wydaje się mieć funkcji post_class, więc nie mogę rozgryźć, gdzie umieścić powyższy kod…
To jest pętla, której używam do postów, gdzie powinienem umieścić powyższy kod? Albo jak mogę sprawić, by niestandardowe pola działały przy użyciu tego?
Redakcja
Musisz dodać coś w stylu tego do swojej pętli postów:
1-click Use in WordPress
Admin
Jon Fuller
Cześć, jestem całkiem nowy w tworzeniu motywów WordPress i szukam sposobu na wyświetlanie każdego posta w osobnym polu, oddzielonym marginesem górnym i dolnym. Proszę wyjaśnij, jak to jest możliwe.
Dzięki
Redakcja
Domyślnie każdy post znajduje się w swoim własnym elemencie div. Wystarczy użyć CSS, aby dodać margines górny i dolny.
Admin
Shaun
Ciekawi mnie, jak można by to zastosować do dodania klasy CSS tylko do postów, które mają tę samą „wartość meta” lub „numer wartości meta”?
Dzięki za świetny tutorial!
Pozdrawiam
Redakcja
Pokazaliśmy, jak to zrobić za pomocą niestandardowych pól, ale to jest robione według klucza. Ale jeśli masz ten sam klucz z wieloma wartościami, powinieneś użyć funkcji get_post_custom_values.
Admin
Em
Właśnie znalazłem ten post i jest świetny, jasny, zwięzły i trafiony w punkt, wielkie dzięki
Jim
Chciałbym zrobić coś takiego, że post pierwszy dostaje klasę „1”, post drugi „2”, post trzeci „3”, a potem powtarza ten porządek, więc post czwarty znowu dostaje „1”.
Jakieś wskazówki? Chodzi o powtarzanie trzech różnych klas co trzy posty.
Redakcja
Musiałbyś użyć opcji super loop.
Admin
Brit
Konkretnie próbuję sprawić, aby po wejściu na mojego bloga, miniaturka (która jest po prostu kółkiem z tytułem posta) miała inny kolor TYLKO dla najnowszego posta. Nie mam pojęcia, jak to osiągnąć. Wszystko, co znalazłem, jest specyficzne dla kategorii lub kolejności. Pomysły?
Redakcja
Brit, musiałbyś użyć ostatniej metody „Super Loop”. To prawdopodobnie jedyny sposób, ponieważ wszystko, co musiałbyś zrobić, to dodać unikalną klasę do pierwszego posta, taką jak „first-post”, a następnie stylizować ją za pomocą pliku CSS.
Admin
Jayaseelan Arumugam
To bardzo miły i przydatny post. Szczególnie podoba mi się sposób stylizacji postów na podstawie niestandardowych pól. Dzięki.
Kathleen
Thanks for this great article! It’s exactly what I searched for and so much helpful!
dina
Jak dodać unikalną klasę do 3., 6., 9. i 12. posta w super pętli. Dzięki!
vajrasar
Cóż, to bardzo dobry artykuł. Rozumiem, co powiedziałeś, ale czy możesz rzucić trochę światła na to, jak mam to zaimplementować w moim motywie potomnym News opartym na Genesis, ponieważ mam to wszystko zrobić w function.php
Chciałbym inaczej stylizować posty z poszczególnych kategorii. Wielkie dzięki za ten artykuł. Bardzo pouczający.
Redakcja
Więc jeśli używasz tylko metody post class, Genesis ma pole w swoich ustawieniach układu dla każdego posta. Możesz wprowadzić niestandardową klasę i stylizować ją w ten sposób. Reszta może być dość skomplikowana w zależności od haków i tym podobnych. Nie publikujemy tutaj artykułów specyficznych dla Genesis.
Admin
jim
Co masz na myśli index.php w pętli. które index.php. Mój nie ma niczego podobnego do twojego. To 10. post, jaki czytam, gdzie nikt nie wyjaśnił tego podstawowego pojęcia poprawnie. A co z CSS. Ostatnie 10 postów też tego nie wyjaśniło. Internet jest coraz gorszy.
Redakcja
Cześć Jim,
Każdy motyw WordPress działa inaczej. Koncepcja pętli jest dość dobrze wyjaśniona w WordPress Codex. Wymaga prostego wyszukiwania w Google: Loop WordPress, które zaprowadzi Cię do: http://codex.wordpress.org/The_Loop
Ponieważ każdy motyw się różni, niektóre wykorzystują osobny plik loop.php, inne są motywami potomnymi, które nawet nie mają plików index.php. Naprawdę trudno jest wyjaśnić wszystkie te koncepcje. Kiedy umieszczamy tutoriale w kategorii motywów, oczekujemy, że użytkownicy będą mieli dobrą wiedzę o tym, jak działają motywy WordPress (nawet jeśli nie znasz PHP).
Admin
Haider E Karrar
Myślę, że powinieneś użyć filtrów zamiast tego w połączeniu z tagami szablonu tutaj http://codex.wordpress.org/Conditional_Tags
Na przykład
function my_post_css_filters($content) {
if(is_category(…))
return ” $content “;
else if (something else)
….
}
add_filter(‘the_content’, ‘my_post_css_filters’, 1) — (priorytet 1, nie jestem pewien, na co jeszcze może wpłynąć).
Hossein
Cześć..
Jak mogę opakować co 4 posty w div?
gashface
Nieważne, udało mi się to zrobić, ale TERAZ nie stylizuje każdego posta inaczej, tylko stylizuje wszystkich zgodnie z pierwszym autorem posta, którego znajdzie?
gashface
Czy jest sposób na określenie znacznika, np. H2, który jest stylizowany przez autora? Próbuję np. .username h2{}, ale to nie działa?
gashface
To nie pokazuje autora u mnie, tylko pustą przestrzeń. Wkleiłem Twój dokładny kod, jakieś pomysły? Posty napisane przez administratora i są prywatne, czy to ma znaczenie?
wpbeginner
@gashface nie, to nie ma znaczenia, czy post jest prywatny, czy publiczny… Jeśli pojawia się biała strona, to wklejasz kod w złym miejscu.
gashface
Zdałem sobie sprawę, że to dlatego, że umieściłem kod przed wywołaniem pętli. Myślałem, że masz na myśli przed if have posts itp., kiedy powinno być po tym, dzięki za informację.
KimeeDoherty
This was a little helpful, but I am still lost
Not sure how to include the loop file in order to override the template. You started the <div> tag but not ended them, what’s inside the div? I’m lost 
kristelvdakker
Dziękuję bardzo za ten post! Był bardzo pomocny.
Stuart
Cześć, dzięki za pomysły – zwłaszcza za super pętlę – cieszę się, że udało mi się to uruchomić na mojej stronie.
Ale zastanawiam się, jestem kompletnym początkującym w PHP, czy jest sposób na dostosowanie kodu tak, aby każda kolejna strona postów nie otrzymywała stylu, który posty 1, 2, 3 i 4 otrzymują na pierwszej stronie.
Innymi słowy, chcę, aby tylko pierwsze cztery posty na pierwszej stronie wyglądały inaczej niż pozostałe.
Pozdrawiam,
Stu
Redakcja
Tak. Możesz użyć znacznika warunkowego is_paged(), aby wyświetlał się tylko na pierwszej stronie, ale nie na innych. Możesz też użyć is_home()… aby tylko na stronie głównej.
Admin
Stuart
Super – dziękuję. Wygląda na to, że is_paged() jest tym, czego potrzebuję – ale niestety, moje nowicjuszowe umiejętności sprawiają, że mam problem z tym, jak zintegrować go z kodem.
Stuart
W końcu się udało…
Michael
Jeśli chciałbyś użyć tego podejścia do wizualnego rozdzielenia postów na podstawie daty publikacji. Jak byś to zrobił? Na przykład: stylizuj 5 postów opublikowanych 1-go z czarnym tłem, a następnie stylizuj posty opublikowane 2-go z czerwonym tłem? Z góry dziękuję!
Redakcja
Najlepszym sposobem na zrobienie tego jest użycie metody super pętli. Gdzie używasz zmiennej licznika do ustawienia wartości klasy postu.
Admin
Dale
Próbuję nadać każdemu autorowi inny kolor nazwiska na naszej stronie wordpress i postępowałem zgodnie z poniższym kodem:
Chociaż ten kod działa w moim motywie wordpress, umieszcza znaki cudzysłowu po klasie-2, ale przed nazwiskiem autora, więc klasa jest zamykana bez nazwy w środku. Dowiedziałem się o tym dopiero po umieszczeniu tego php w ciele, gdzie można zobaczyć pełny ciąg znaków.
Czy ktoś ma pomysł, dlaczego tak się dzieje?
Dale
Przepraszam, usunęło php, które opublikowałem, ale oto wynik klasy stylizowania moich postów według nazwiska autora. Autor nazywa się tutaj admin, i jak widać, tag zamykający jest przed nazwiskiem autora admin.
“post-395 post type-post hentry category-uncategorized class-1 class-2″admin
Bec
Świetny post! Te informacje są niesamowite do dodawania tych dodatkowych, specjalnych funkcji niestandardowych do Twojego projektu.
Adam W. Warner
Rzeczywiście świetny post, czapki z głów! Jednak nie mogłem się powstrzymać od myślenia o tym, kiedy nadejdzie czas na aktualizację motywu, do którego wprowadzasz wszystkie te niestandardowe edycje. Staram się używać pliku functions, kiedy tylko jest to możliwe, aby uniknąć nadpisywania.
Myślę, że lepiej byłoby włączyć te edycje pętli do funkcji. Wiem, że w przypadku motywów nadrzędnych, takich jak Thematic, Hybrid, Genesis itp., możliwe (i zalecane) jest filtrowanie pętli i tym samym wprowadzanie tych zmian.
@Ken – Może Twój plugin wyeliminowałby potrzebę stosowania jakichkolwiek funkcji?
W każdym razie, to tylko moje dwa centy i gratulacje dla Syeda i zespołu za Waszą ciągłą doskonałość na tej stronie!
Azad Shaikh
Bardzo przydatny post. Dlaczego nie publikujesz motywów wordpress z Twoimi niesamowitymi pomysłami i funkcjonalnością. Byłby to wielki sukces.
Dzięki!
Ken
Twój artykuł dał mi kilka pomysłów na ulepszenie mojego pluginu, dzięki za to!
Właśnie napisałem plugin (Scripts n Styles) do dodawania CSS bezpośrednio do elementu head z ekranu edycji posta/strony. (Tylko użytkownicy administracyjni mogą to robić.) Nie jest tak rozbudowany (lub raczej, nie rozwiązuje tego samego problemu) co Twoje rozwiązanie, ponieważ CSS pojawia się tylko w widoku pojedynczym, a nie na listach (archiwach).
Rozważam dodanie funkcjonalności do uwzględnienia nazwy klasy w post_class, ale za pomocą pola meta na ekranie administracyjnym. Wtedy administrator musiałby tylko dodać css do swojego motywu. (Lub, być może ekran ustawień, aby to ułatwić?)
W każdym razie, Super Loop wydaje się przydatny do ogólnego tworzenia motywów, muszę go uwzględnić w moim następnym!
Connor Crosby
Wow, that is a great post! Perfect timing since I am making a new Wordpress theme