Divi 아카이브 페이지의 레이아웃을 포트폴리오 스타일로 표시하는 방법

Elegant Themes의 Divi 테마의 블로그 모듈에는 기본적으로 전체 폭과 그리드로 표시할 수 있는 옵션을 제공하지만, 블로그 페이지, 태그, 카테고리 등의 보관물(아카이브)는 위의 그림과 같은 스타일로 표시됩니다.

Elegant Themes에서 공개한 아래의 코드를 적용하면 다음 그림과 같이 보관물 페이지가 포트폴리오 스타일(Masonry 스타일)으로 표시됩니다.

보관물(아카이브) 페이지에는 카테고리, 태그뿐만 아니라 검색 결과 보관물 페이지, 글쓴이 보관물 페이지 등도 포함됩니다. 아래의 코드는 모든 보관물 페이지에 영향을 미치게 됩니다.

다음 코드를 워드프레스 알림판에서 Divi > Theme Options > General 탭의 맨 아래에 있는 Custom CSS 섹션에 추가합니다. 또는, 자식 테마(차일드 테마)를 만들고 자식 테마 내의 style.css에 추가해도 됩니다.

/*
* Remove sidebar on all archive pages; 모든 아카이브 페이지에서 사이드바 제거하기
*/
.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;
}

/*
* Create Mansonry styles for archive pages; 아카이브 페이지용 Masonry 스타일 생성
*/
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}

.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: 18px;
}

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

위의 코드에서 “Remove sidebar on all archive pages” 부분은 그대로 유지해도 되고, 제거해도 됩니다. 아카이브 페이지에서도 사이드바를 표시하고 싶은 경우 “Remove sidebar on all archive pages” 부분을 삭제하고, 사이드바를 없애고 싶으면 그대로 유지합니다.

보관물 페이지이 맨 아래에 기본적으로 표시되는 페이지네이션(“older entries”, “newer entries”) 대신 페이지 번호를 표시하려면 WP-Pagenavi 플러그인을 설치하면 좋습니다. 현재 이 블로그에 WP-Pagenavi가 설치되어 있습니다.

다음으로 페이지네이션 링크의 위치를 바로잡기 우해 아래 JavaScript 코드를 Divi > Theme Options > Integration > Add code to the < head > of your blog에 추가하도록 합니다.

<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');
}
pagenav.detach();
leftarea.after(pagenav);
});
})(jQuery)
</script>

WP-Pagenavi 플러그인을 설치하는 경우 CSS를 통해 적절히 레이아웃을 원하는 대로 수정해주도록 합니다.

참고:

• Divi 테마 둘러보기