Word Cracker의 잡다한 정보 모음

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

2

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를 통해 적절히 레이아웃을 원하는 대로 수정해주도록 합니다.

참고:

Related Posts

2개 댓글
  1. dobiho 님의 말씀

    포스트의 높이가 핀터레스트처럼 다른데요, 높이가 모두 같게 만들수있는 방법이 있을까요?

    1. Word 님의 말씀

      안녕하세요?

      https://www.thewordcracker.com/basic/divi-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%AA%A8%EB%93%88-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0/ 글에서 소개하는 Portfolio Posts Pro와 같은 플러그인을 사용하면 간단할 것 같습니다.

      다른 방법으로 블로그 모듈을 추가하고 css 클래스를 지정한 다음 CSS로 max-height 값을 지정할 수 있습니다. 이 방법이 인터넷에서 주로 소개되고 있는 방법입니다.

      또 다른 방법으로는 다음 글에서 소개하는 jQuery를 활용하는 방법도 있습니다.

      https://www.thewordcracker.com/jquery-examples/make-the-heights-of-div-identical-using-jquery/

      https://www.thewordcracker.com/jquery-examples/make-the-heights-of-div-identical-using-jquery-ii/

      CSS를 지정하는 방법은 블로그 모듈에 클래스(예: custom_blog)를 지정하도록 하고 다음과 비슷한 코드를 Custom CSS에 추가하면 됩니다.

      @media only screen and (min-width: 768px) {
      .custom_blog .et_pb_post {
      min-height: 580px;
      max-height:580px;
      }
      }

댓글 남기기

이메일은 공개되지 않습니다.