Jak kolorować posty na blogu Divi według autora

Jednym z głównych celów Divi jest upewnienie się, że każdy element Twojej witryny wygląda dobrze, a posty na blogu nie są wyjątkiem. Jednak zawsze jest miejsce na ulepszenia, a kodowanie kolorami postów na blogu przez autora umożliwia użytkownikom bardziej efektywne poruszanie się po treści (a także identyfikację ich ulubionych autorów!).

W tym artykule porozmawiamy więcej o tym, dlaczego możesz chcieć kodować kolorami swoje posty na blogu Divi i jak to zrobić w dwóch prostych krokach. Czas na nową warstwę farby!

Dlaczego warto rozważyć kodowanie kolorami postów na blogu Divi

Zanim przejdziemy dalej, wyjaśnijmy, co rozumiemy przez oznaczanie kolorami postów na blogu Divi. W następnej sekcji nauczymy Cię, jak przypisać każdemu z twoich pisarzy kolor, który pojawi się jako tło dla ich własnych postów. W tym przykładzie przypisałem moim własnym postom (jako autor1) bardzo atrakcyjny kolor jasnoniebieski:

Sam efekt jest stosunkowo prosty, ale oferuje skuteczny sposób na zróżnicowanie pisarzy. Użytkownicy mogą łatwo rozpoznać nowe utwory swoich ulubionych pisarzy na pierwszy rzut oka. Oczywiście wyeksponowanie nazwiska autora może dać ten sam efekt, ale może nie być tak efektowne wizualnie.

Twoim jedynym zmartwieniem jest wybór kolorów. Weźmy na przykład zrzut ekranu na początku tej sekcji – nasz indeks bloga Divi wykorzystuje białe tło, więc postanowiliśmy trzymać się jasnych pastelowych kolorów dla postów naszych autorów. Zobaczmy, co się stanie, jeśli wybierzemy inny schemat kolorów:

Oczywiście to skrajny przykład, ale pomaga nam to zilustrować nasz punkt widzenia. Jeśli chcesz oznaczyć swoje posty kolorami, musisz dokładnie rozważyć swoją paletę, używając odpowiedniego narzędzia, aby w razie potrzeby pomóc. Używanie kontrastujących kolorów w celu podkreślenia różnicy między poszczególnymi postami może pomóc użytkownikom w szybkiej identyfikacji autorów, ale może również spustoszyć styl bloga i utrudnić czytanie treści.

Jak kolorować posty na blogu Divi według autora (w 2 krokach)

Teraz omówiliśmy teorię, nadszedł czas, aby przejść do tego, jak właściwie kodować posty na blogu Divi. Włączenie tej funkcji wymaga tylko dwóch kroków, ale przed rozpoczęciem należy wziąć pod uwagę pewne kwestie.

Na początek utwórz kopię zapasową witryny WordPress, co zawsze jest dobrym pomysłem przy wprowadzaniu zmian. Po drugie, będziesz chciał utworzyć motyw potomny Divi, więc Twoje modyfikacje pozostaną po aktualizacji motywu.

Na koniec musisz użyć klienta FTP w kroku numer jeden. Będziemy używać FileZilla, ale jeśli wolisz inne narzędzie, skorzystaj z niego.

Krok #1: Dodaj fragment kodu do pliku functions.php motywu podrzędnego

Aby to zrobić, musisz otworzyć klienta FTP i zalogować się na serwerze swojej witryny. Stamtąd przejdź do katalogu public_html / wp-content/themes/ , a następnie znajdź folder motywu podrzędnego. Pamiętaj, że folder public_html lub folder główny może mieć nazwę www lub po domenie witryny, w zależności od hosta:

Po zlokalizowaniu folderu motywu potomnego otwórz go i poszukaj w nim pliku functions.php . Teraz kliknij go prawym przyciskiem myszy i wybierz opcję Wyświetl/Edytuj :

To poprosi Cię o otwarcie pliku za pomocą domyślnego edytora tekstu. Ponieważ mamy do czynienia z motywem potomnym, plik functions.php powinien być w większości pusty, poza kolejkowaniem funkcji swojego rodzica. Zamierzamy dodać fragment kodu, który automatycznie tworzy nową klasę dla każdego z twoich autorów z prefiksem autor- . Na przykład, jeśli masz użytkownika WordPress o imieniu John, możesz użyć klasy autor-john . Umożliwi nam to późniejsze dodanie kodu CSS.

Następnie dodaj następujący fragment kodu PHP po wierszu // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Teraz zapisz zmiany, zamknij edytor i gotowe! Pamiętaj, że aby Twoja klasa działała, musisz używać małych liter, niezależnie od tego, z którym autorem masz do czynienia. To będzie ważne w kroku numer dwa.

Krok #2: Określ kolor dla każdego autora za pomocą niestandardowej opcji CSS Divi

Teraz nasza nowa funkcja jest gotowa, kolejnym krokiem jest ustawienie koloru dla każdego z Twoich autorów. Divi umożliwia to dzięki funkcji Custom CSS , ponieważ każdy dodany kod wpłynie na cały motyw. Aby go znaleźć, przejdź do pulpitu WordPress i przejdź do zakładki Divi > Opcje motywu , a następnie przewiń w dół do pola Niestandardowy CSS na końcu strony:

Musisz dodać nowy wiersz kodu CSS w tym polu dla każdego ze swoich autorów. Na przykład, jeśli masz autora o nazwie użytkownika author1, oto jak ustawić dla niego konkretny kolor:

.author-author1 {background-color: #C1F3FA !important;}

Pamiętaj, że musisz dodać przedrostek autora do swojej klasy, niezależnie od nazwy użytkownika. Po wskazaniu koloru tła należy również upewnić się, że kod jest !important . Mówiąc najprościej, nadaje to kodowi większą wagę i zastępuje wszelkie konflikty, które mogą się pojawić — bez tego ta funkcja nie będzie działać.

Przejdźmy do ostatniego przykładu. W tym przypadku dwóm autorom przypiszemy różne kolory. Oto kod, który dodaliśmy do naszego niestandardowego pola CSS Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

A oto jak to wygląda z przodu:

Pomijając wybór koloru, możesz wprowadzić inne poprawki do swoich postów na blogu Divi. Możesz na przykład dostosować długość fragmentów swojego bloga lub stylizować „kartki” postów na wiele sposobów. Twoim głównym celem powinno być znalezienie idealnego stylu dla własnego bloga, więc nie bój się bawić z Divi i zobaczyć, co może zrobić!

Wniosek

Oznaczanie kolorami postów na blogu przez ich autorów to prosta funkcja, która może pomóc użytkownikowi w znacznie łatwiejszym poruszaniu się po treści (szczególnie, jeśli masz obszerne archiwum). Ponadto wielu użytkowników prawdopodobnie doceni możliwość rozpoznawania postów swoich ulubionych autorów tylko po kolorze.

Zanim zaczniesz poprawiać pliki, pamiętaj o utworzeniu kopii zapasowej witryny i skonfigurowaniu motywu podrzędnego, aby zmiany pozostały w przyszłości. Gdy to zrobisz, oto dwa kroki, które musisz wykonać, aby pokolorować swoje posty na blogu Divi według autora:

1. Zmodyfikuj plik functions.php motywu potomnego.
2. Określ kolor dla każdego ze swoich autorów, korzystając z niestandardowej opcji CSS Divi.

Czy masz jakieś pytania dotyczące kolorowania postów na blogu Divi według autora? Zapytaj w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa RazZers / shutterstock.com.