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;}