[워드프레스] jQuery를 사용하여 블로그를 포트폴리오 레이아웃으로 만들기

이전 글에서 CSS를 사용하여 블로그 글 목록을 Masonry 그리드 형식으로 표시하는 방법을 살펴보았습니다. 앞의 방법은 크롬에서는 제대로 표시되지만 IE에서는 약간 이상하게 표시됩니다. 이 글에서는 jQuery를 사용하여 Masonry를 구현하는 방법을 간략히 살펴보겠습니다.

salvattore 사이트에 공개된 jQuery 소스를 가지고 테스트해보았습니다. 방법은 이 사이트의 맨 위에 있는 jQuery 소스나 js 스크립트 중 하나를 복사하여 테마 폴더 혹은 플러그인 폴더 아래에 새로운 파일을 만들어 업로드합니다. 그런 다음 다음과 비슷한 코드를 사용하여 enqueue를 해 주도록 합니다.

wp_enqueue_script('masonryjs-scripts', plugin_dir_url(__FILE__) . 'js/salvattore.min.js', array('jquery'), '1.0', true);
wp_enqueue_script('masonryjs-scripts');

enqueue를 하는 자세한 방법은 이 글을 참고하세요.

그런 다음 data-columns 속성을 추가해야 합니다. 이 속성은 블로그 글 목록을 둘러싸고 있는 태그에다가 추가하면 됩니다. 예를 들어 Attitude 테마의 경우 content extension 파일에 data-columns을 아래 부분처럼 추가합니다.

function attitude_loop_before() {
echo '<div id="content" data-columns>';
}

이제 CSS 파일에 다음 코드를 추가합니다.

#grid[data-columns]::before {
content: '3 .column.size-1of3';
}

.column { float: left; }
.size-1of3 { width: 33.333%; }

그대로 추가하면 안 되고 요소 명을 테마에 맞게 수정해야 합니다. Attitude 테마의 경우 아래와 같은 코드를 사용합니다.

.blog #container > #content[data-columns]::before {
content: '3 .column.size-1of3';
}

.blog #container .column { float: left; }
.blog #container .size-1of3 {
width: 33.333%;
padding-left: 10px;
margin-left: -10px;
background-clip: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.blog #container .column {
margin-left: 0;
}
.blog .entry-meta-bar.clearfix {
border: 0px;
}

.blog section {
border: 0px!important;
}

.blog #content  section > article {
border: 1px solid #DDD;
padding: 15px!important;
margin-bottom: 0px;
}

그러면 다음과 같이 Masonry 그리드 형식으로 블로그 글들이 배열됩니다.

WordPress Masonry layout

이 방법을 사용하면 구글 크롬뿐만 아니라 IE에서도 제대로 표시됩니다. 하지만 맨 아래의 이전 글, 다음 글 버튼도 하나의 글로 인식하여 처리됩니다. 이 문제를 해결하려면 이 글을 참고해보시기 바랍니다.

Update: 조금 생각해보니 Pagination 위치 문제는 jQuery를 사용하여 위치를 바꾸는 것도 가능할 것 같습니다. 시도해보지는 않았지만 이론상 가능할 수도(혹은 아닐 수도) 있을 것 같습니다. 자세한 내용은 이 글을 참고해보시기 바랍니다.

위와 같은 작업이 용이하지 않는 경우 포트폴리오 레이아웃의 유료 테마를 고려해볼 수 있습니다. 이 글에서 괜찮은 레이아웃을 제공하는 테마가 소개되어 있습니다. 현재 테마 이전에 사용했던 Pluto 테마도 Masonry 그리드 레이아웃 테마입니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다