Czy kiedykolwiek spotkałeś się z witryną, która publikuje artykuły na blogu inaczej?
Niektóre witryny zawierają artykuły wyróżnione niestandardowym tłem, podczas gdy inne mogą mieć niepowtarzalny wygląd każdej kategorii. Jeśli zawsze chciałeś dowiedzieć się, jak dostosować każdy post WordPress, trafiłeś we właściwe miejsce.
W tym samouczku pokażemy, jak inaczej kształtować każdy artykuł WordPress.
Ale jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu
Wróćmy do tego, dlaczego tu jesteśmy.
Uwaga: Ten samouczek wymaga dodania niestandardowego CSS na WordPress. Będziesz także musiał użyć narzędzia Inspect. Wymagana jest pewna znajomość CSS i HTML.
Nadaj indywidualny styl artykułom WordPress
WordPress dodaje domyślne klasy CSS do różnych elementów Twojej witryny. A WordPress zgodny ze standardem musi mieć kod wymagany przez WordPress, aby dodać klasy CSS dla treści, postów, stron, widżetów, menu i innych.
Odkryj także nasz przewodnik po Permalinks: Jak dostosować swoje linki na blogach
Główna funkcja WordPress o nazwie „ post_class () Jest używany przez motywy, aby powiedzieć WordPressowi, gdzie dodać te domyślne klasy CSS do artykułów.
Jeśli odwiedzisz swoją witrynę i użyjesz narzędzia Inspect w swojej przeglądarce, będziesz mógł zobaczyć te zajęcia dodane do każdego postu.
Oto klasy CSS dodawane domyślnie na podstawie strony wyświetlanej przez użytkownika.
- ID .post
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-name
- .tag-name
- .format- {nazwa formatu}
- {.type- post-type-name}
- .has post-miniaturkę
- .post-password-wymagane
- .protected-by-a-hasło
Przykład wyświetlania wygląda następująco:
Możesz dostosować każdą publikację WordPress inaczej, używając odpowiednich klas CSS.
Czytaj także: Jak poprawić swój blog WordPress w ten weekend
Na przykład, jeśli chcesz edytować pojedynczą publikację, możesz użyć klasy post-id w swoim niestandardowym CSS.
.post-412 {background-color: #FF0303; Kolor: #FFFFFF; }
Pamiętaj, aby zmienić identyfikator posta, aby był zgodny z identyfikatorem posta.
Spójrzmy na inny przykład.
Tym razem omówimy wszystkie artykuły opublikowane w określonej kategorii o nazwie „aktualności”.
Odkryj nasz przewodnik na Jak dodać niestandardowy CSS do bloga WordPress
Możemy to zrobić, dodając do naszego motywu następujący niestandardowy CSS.
.category-actualities {rozmiar-czcionki: 18px; font-style: italic; }
Ten CSS wpłynie na wszystkie elementy w kategorii „ aktualność ".
Funkcja post_class ()
Twórcy motywów używają tej funkcji post_class () aby poinformować WordPress, gdzie ma dodać klasy postów. Zwykle znajduje się w tagu „artykuł”.
Funkcja post_class () nie tylko domyślnie ładuje klasy CSS generowane przez WordPress, ale także pozwala dodawać własne.
Odkryj także Jak chronić bloga zgarniaczy treści
Zgodnie z Twoim WordPress, znajdziesz funkcję post_class() w swoim pliku single.php lub w plikach szablonów. Normalnie kod będzie wyglądał tak:
" >
Możesz dodać własną niestandardową klasę CSS z takim atrybutem:
" >
Klasa post_class wydrukuje odpowiednie domyślne klasy CSS z niestandardową klasą CSS.
Jeśli chcesz dodać wiele klas CSS, możesz zdefiniować je jako tablicę i użyć ich w funkcji post-class ().
" >
Pokaż artykuły w innym stylu według autorów
Domyślne klasy CSS generowane przez funkcję posts_class nie zawierają nazwiska autora jako klasy CSS.
Jeśli chcesz dostosować styl każdego posta na podstawie autora, musisz najpierw dodać nazwisko autora jako klasę CSS.
Aby przeczytać także: Jak dodać animacje CSS WordPress
Możesz to zrobić za pomocą następującego fragmentu kodu:
" >
Ten kod doda nazwę użytkownika jako klasę CSS. Nazwa użytkownika to nazwa zgodna z adresem URL używanym przez WordPress. Nie ma spacji, a wszystkie znaki są zapisane małymi literami, co czyni go idealnym do użycia jako klasa CSS.
Zobacz także nasz przewodnik na temat Jak dodać niestandardowy CSS do bloga WordPress
Powyższy kod prawdopodobnie będzie wyglądał następująco:
Teraz możesz użyć „.peter” w swoim niestandardowym CSS, aby zmodyfikować wszystkie posty tego konkretnego autora, aby wyglądały inaczej.
.peter {background-color: #EEE; border: 1px solid # CCC; }
Dostosuj publikowanie artykułów na podstawie komentarzy
Być może widziałeś strony internetowe z widżetami z popularnymi artykułami, które czasami są sortowane na podstawie komentarzy. W tym przykładzie pokażemy Ci, jak stworzyć inny styl na podstawie liczby komentarzy.
Odkryj nasze 10 premium wtyczek WordPress do zarządzania komentarzami
Najpierw musimy uzyskać liczbę komentarzy i skojarzyć klasę.
Aby uzyskać liczbę komentarzy, musisz dodać następujący kod do swoich plików WordPress. Ten kod trafia do pętli WordPress, możesz dodać go tuż przed tagiem .
zatwierdzony; if ($ my_comment_count <10) {$ my_comment_count = 'nowe'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popularne'; }?>
Ten kod sprawdza liczbę komentarzy do opublikowanej publikacji i przypisuje im wartość na podstawie konta. Na przykład wiadomości zawierające mniej niż 10 komentarzy otrzymują klasę o nazwie „ nowa Nazywa się mniej niż 20 wschodzących „A wszystko, co dotyczy więcej niż komentarzy 20, to” popularny ".
Następnie musisz dodać klasę CSS do funkcji post_class.
" >
Spowoduje to dodanie nowych, pojawiających się i popularnych klas CSS do wszystkich artykułów na podstawie liczby komentarzy w każdym poście.
Zapraszamy również do zapoznania się z naszym artykułem na temat Wtyczki 6 WordPress do podpisywania dokumentów online
Możesz także dodać niestandardowy CSS do stylów publikacji opartych na popularności:
.new {graniczne: stałe 1px #FFFF00;} .emerging {graniczne: przerywana 1px #FF9933;} .popular {graniczne: przerywana 1px #CC0000;}
Po prostu dodajemy ramki, ale możesz dodać dowolne reguły CSS.
Odkryj także niektóre wtyczki premium WordPress
Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować połączenie z Twoim blogiem lub stroną internetową.
Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.
1. Ultimate Membership Pro
Ultimate Membership Pro jest świetny WordPress Plugin premia za subskrypcję i ograniczenie treści. Umożliwia zarządzanie użytkownikami zgodnie z ich pakietem (bezpłatnym lub płatnym) poprzez tworzenie wyłącznych poziomów dostępu.
Dlatego będzie to możliwe chroń całą zawartość swojej witrynylub tylko jego część. Będzie to na przykład kurs, lekcja, strona, produkt, kategoria, obraz itp.
Przeczytaj także nasz artykuł na temat Wtyczki 4 premium WordPress do tworzenia miniatur
Jego główne funkcje to m.in .: ochrona treści, wiele poziomów dostępu, obsługa wielu bramek płatniczych - PayPal, Autoryzuj.net, Naszywka, 2CheckOut, przelew bankowy-, częściowa ochrona treści, I wiele więcej…
2. Jak dla Slider Facebook
Jak dla Slider Facebook jest WordPress Plugin premium, który oferuje odwiedzającym możliwość pozostawienia komentarzy na Twojej stronie. Dzięki temu nowoczesnemu i nieinwazyjnemu polu komentarza, to WordPress Plugin udostępnia funkcję Like Box i Fan Page Wall, która rozszerzy integrację Twojej witryny z siecią społecznościową Facebook.
Wtyczka zapewnia także różne funkcje zwiększające możliwości Twojej witryny: ma na przykład sekcja Lubię to („Like Box”) lub strona przeznaczona dla fanów („Fan Page Wall).
Odkryj też Jak stopniowo ładować komentarze na Facebooku i Disqus
Nie musisz umieszczać przycisków „Lubię to” i „Udostępnij” w postach lub na stronach, ponieważ Facebook Comment Slider już je ma i mogą pojawiać się w każdym poście lub na dowolnej stronie. Odwiedzający znajdą przycisk „Lubię to”, przycisk „Udostępnij” oraz pole komentarzy suwaka Facebooka. Oczywiście użyją swoich kont na Facebooku.
Poza tym możesz włączać, wyłączać i ustawiać czas efektu wstrząsu.
3. Zaloguj się Ninja
Ta premium wtyczka WordPress umożliwia dostosowanie strony logowania. To więcej niż tylko dostosowywanie twój formularz logowania. Możesz dostosować całą stronę, zmieniając jej kolor, dodając obraz tła, logo i nie tylko.
Inne jego funkcje to: ochrona formularzy logowania i rejestracji za pomocą captcha, automatyczne i ręczne blokowanie adresów IP, które atakują cię brutalną siłą, szczegółowy dziennik wszystkich czynności związanych z połączeniami, przekierowywanie użytkowników na podstawie ról i nazw użytkowników, otrzymywanie powiadomień e-mail dla wszystkich zdarzeń związanych z połączeniem, łatwy w obsłudze interfejs graficzny, szczegółowa dokumentacja i więcej.
Polecane zasoby
Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.
- Wtyczki 9 WordPress do zarządzania płatnościami PayPal na swoim blogu
- 10 niezbędnych wtyczek WordPress do zainstalowania na swoim blogu
- 10 wtyczek WordPress do zarządzania reklamami
- Wtyczki 10 WordPress do tworzenia atrybutów dla zmiennych produktów
Wnioski
Tutaj jest ! To wszystko w tym samouczku, mam nadzieję, że pozwoli ci dostosować wyświetlanie artykułów na blogu WordPress. Jeśli masz jakieś obawy lub sugestie w tej dziedzinie, znajdźmy się sekcja komentarzy do omówienia.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
