Strona główna

Artykuły

WordPress & Divi

O mnie

Kontakt

Zmiana wyglądu stron archiwów i wyników wyszukiwania na grid

utworzone przez 21 Mar 2019Divi, tips&tricks, Wordpress0 komentarzy

Artykuł pochodzi z serwisu DiviHelp Artykuł powstał na potrzeby mojego starego serwisu DiviHelp. Ponieważ przestałem go rozwijać – przeniosłem archiwalne artykuły na blog prywatny..

Standardowy wygląd strony archiwów, czy wyników wyszukiwania w Divi może nie wystarczać wszystkim.

Standardowo wpisy pokazują się jako lista z dużym obrazkiem wyróżniającym, co (zwłaszcza na mniejszych ekranach) powoduje, że wyniki nie są czytelne dla użytkownika. Dlatego warto podmienić listę wyników na tzw. grid – czyli popularną „siatkę”.

W tym celu trzeba dołożyć do serwisu odrobinę kodu JS.

<!– Pokazywanie postów w archiwach jako grid –>
<script>
	(function($) {
 		$(document).ready(function() {
 		 leftarea = $(‚#left-area’);
 	pageNavi = leftarea.find(‚.wp-pagenavi’);
 	pageNavigation = leftarea.find(‚.pagination’);
 		  
	if ( pageNavi.length ) {
	 pagenav = $(‚#left-area .wp-pagenavi’);
	 }
	else {
	pagenav = $(‚#left-area .pagination’);
	}<br> pagenav.detach();
	leftarea.after(pagenav);
	});
})(jQuery)
</script>

Następnie należy dodać odrobinę kodu CSS, który sprawi, że wszystko będzie wyglądać lepiej:)

/*
* Usunięcie paska bocznego na stronach archiwów
*/
.search #main-content .container::before, .archive #main-content .container::before { display: none; }
.search #left-area, .archive #left-area { width: 100%; float: none; padding-right: 0; }
.search #sidebar, .archive #sidebar {display: none;}

/*
* Wygląd strony archiwów jako grid
*/
.search #left-area,. archive #left-area {display: grid; grid-gap: 30px; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); }
.archive .et_pb_post > a, .search .et_pb_post > a { margin: -20px -20px 10px; display: block;
}
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
overflow: hidden; /* fix for Firefox */
page-break-inside: avoid;
break-inside: avoid-column;
width: 100%;
padding: 19px;
border: 1px solid #d8d8d8;
background-color: #fff;
word-wrap: break-word;
display: inline-block;
}
.search #left-area .et_pb_post h2,
.archive #left-area .et_pb_post h2 {
font-size: 20px !important;
}
.search #left-area .et_pb_post.format-link,
.search #left-area .et_pb_post.format-quote,
.search #left-area .et_pb_post.format-audio,
.archive #left-area .et_pb_post.format-link,
.archive #left-area .et_pb_post.format-quote,
.archive #left-area .et_pb_post.format-audio{
padding: 0;
}
.archive .et_pb_post .et_pb_image_container,
.archive .et_pb_post .et_main_video_container,
.archive .et_pb_post .et_audio_content,
.archive .et_pb_post .et_pb_slider,
.search .et_pb_post .et_pb_image_container,
.search .et_pb_post .et_main_video_container,
.search .et_pb_post .et_audio_content,
.search .et_pb_post .et_pb_slider {
margin: -20px -20px 10px;
}
.archive .et_pb_post.format-audio .et_audio_content{
margin: 0px -38px 0px;
}
.archive .et_pb_post .et_pb_slider .et_pb_slide,
.search .et_pb_post .et_pb_slider .et_pb_slide {
min-height: 180px;
}
.archive .pagination,
.search .pagination {
padding: 20px 0;
}
/*
* Media Queries
*/
@media screen and (max-width: 980px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 60px;
column-gap: 60px;
}
}
@media screen and (max-width: 767px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 1;
column-count: 1;
}
.search .et_pb_post.format-audio .et_audio_content,
.archive .et_pb_post.format-audio .et_audio_content{
margin: 0;
}
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{
min-width: 300px!important;
width: 300px!important;
}
}
.archive #left-area .et_pb_post {margin-bottom: 0;}

Gdzie umieścić powyższy kod?

Pamiętaj – nigdy nie umieszczaj żadnego kodu w plikach motywu Divi (ani żadnego innego). Z prostej przyczyny – każda aktualizacja motywu spowoduje wyczyszczenie Twoich zmian.

UMIESZCZANIE KODU JAVA SCRIPT

W kokpicie swojej strony przejdź do zakładki Divi i przewiń ekran na sam dół. W opcjach szablonów graficznych znajduje się pole Integracja (względnie Integration). Wszystkie zmiany tam wprowadzone zostaną zachowane nawet po aktualizacji.

Kod JS umieszczasz w sekcji <head>. Jest to również miejsce do umieszczenia np. kodu Google Analytics.

 

W celu dodania kodu CSS, który ma wpływać na wszystkie elementy danego typu w serwisie  – użyj przystosowanych do tego miejsc:

Opcja 1

W kokpicie swojej strony przejdź do zakładki „Divi” i przewiń ekran na sam dół. W opcjach szablonów graficznych znajduje się pole „Niestandardowe CSS”. Wszystkie zmiany tam wprowadzone zostaną zachowane nawet po aktualizacji.

Opcja 2

Będąc zalogowanym w panelu administracyjnym i przeglądając swoją stronę – na górze serwisu masz włączony pasek administratora. Klikając na tytuł strony rozwinie Ci się menu. Wybierz z niego „Stylista tematów”, a następnie „Spersonalizowany CSS”. Po wpisaniu kodu kliknij „Opublikuj”.

Opcja 3

Umieść w pliku style.css w Motywie potomnym. Jak stworzyć motyw potomny (child theme) dowiesz się tutaj.

Jeśli mój post Ci pomógł – postaw mi kawę:)

Paweł Szynkiewicz

Paweł Szynkiewicz

Właściciel SOFF Studio Kreatywne

Mam ponad 20 lat doświadczenia jako projektant UX/UI. Na co dzień prowadzę SOFF Studio Kreatywne, gdzie staramy się rozwiązywać problemy biznesowe naszych Klientów .

0 komentarzy

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Share This