워드프레스 글목록 정렬 위치 변경, POSTX 포스트 그리드 플러그인

워드프레스 글목록 정렬하는 방법에 대해 살펴보다보니 제가 사용하고 있는 제너레이트프레스 테마 무료버전에서는 꾸미기에 한계를 자주 느낍니다. 유료 버전에서는 외모-레이아웃-블로그에서 내 블로그의 아카이브 페이지(메인)와 카테고리별 페이지의 썸네일(워드프레스의 특성 이미지)의 위치를 오른쪽이나 왼쪽으로도 정렬을 할 수 있는 것으로 알고 있습니다.

또, CSS코드를 이용하여 워드프레스 썸네일 위치 뿐만 아니라 글목록도 정렬을 할 수 있을텐데, 복잡하지 않게 플러그인 하나면 비교적 수월하게 내 입맛대로 보기 좋은 아카이브 페이지를 만들 수 있는 방법을 알게 되어 간단히 소개합니다.

워드프레스 글목록 위치 정렬도와 주는 플러그인-POSTX

플러그인 설치하기

우선 포스트엑스라는 포스트 그리드 플러그인은 꽤 많이 사용되는 제품인 것 같은데요. 워프 관리자 페이지의 플러그인 새로추가에서 검색하여 설치해주고 활성화시키면 아래와 같은 설명 창에 접속할 수 있습니다. 첫 웰컴 TO POSTX 화면에서 대시보드로 돌아가기 버튼을 클릭한 후에 본격적으로 워프에서 내 취향에 맞는 아카이브 정렬을 만들 수 있는데요.

POSTX 사이트에서 살펴보기(*크롬에서 열고 오른쪽마우스-한국어로 번역을 이용해 도움받아보세요)

워드프레스 글목록 정렬 플러그인 포스트 그리드

포스트 그리드 만들기

본격적으로 워드프레스 글목록 위치 정렬을 새롭게 하기 위해서 먼저, 워프 관리자 화면에서 페이지 – 새로 추가를 선택합니다. 그러면 마치 새글 쓰는 창처럼 나오는데, 다른 것은 무시하시고 블록 표시에서 ‘POST’를 검색합니다.

그러면 아래와 같이 여러가지 유형의, 정렬 방식의 레이아웃이 나오는데 사실, 거의 다 유료버전이라서 무료를 사용할 수 있는 양식은 제한적입니다. 일단 저는 왼쪽 썸네일 정렬 방식의 POST LIST #3을 선택하였고 아래와 같이 더 세부적으로 만지작 거리며 여러가지 시도를 해서 만들어 봤습니다.

워드프레스 포스트 그리드 플러그인

워드프레스 포스트 그리드 플러그인 POSTX

한번 저처럼 무료로 워드프레스 포스트 그리드 글목록 정렬 플러그인 사용해 보시고, 더 멋지게 꾸미시길 원한다면 나중에 유료버전도 이용해 보시면 좋을 거 같은데요. 위의 우측 블록에서 여러가지 조건을 바꿔가며 아래와 같이 꾸며봤습니다.

저는 호버 애니메이션을 OPACITY(썸네일에 마우스를 가져다대면 흐려지는 효과) 대신에 ZOOM IN으로 선택했던 것 같습니다. 하나 하나 눌러가면서 바꿔가면 생각보다 어렵지 않으니 해보세요.

참고로 썸네일 크기는 아래에서 150*150부터 더 큰 사이즈까지 선택해서 미리보기 해볼 수 있습니다.

워드프레스 글목록 정렬 플러그인

그렇게 완성이 되었다면 이제 내 아카이브 페이지나 카테고리별 페이지에 각각 적용을 시켜줘야하는데요.


아카이브,카테고리 페이지에 적용하기

일단 다시 워프 관리자 화면의 설정 – 읽기로 간 다음에, 아래와 같이 홈페이지 표시에서 만약 최신 글로 체크가 되어 있다면 정적인 페이지로 체크해주고 홈페이지 / 글 페이지에서 각각 새로 생성한 포스트 그리드 페이지를 선택해서 저장하고 적용을 하면 됩니다. 저는 페이지의 제목을 정하지 않아서 아래와 같이 나오는 것이니 참고하세요.

워드프레스 글목록 정렬 플러그인

이렇게 아주 간단하게 적용이 가능하고 현재 저는 아카이브 즉 메인 페이지에서만 사용하고 있고, 글 페이지(카테고리별)에서는 적용하지 않고 있는데요. 참고로 애드센스 광고를 워드프레스 글목록 위치 사이에 넣어 둔게 있는데 이 포스트 그리드 플러그인을 사용하니 광고 위치가 바뀌어서 그냥 반반으로 적용시켜 사용하기로 결정하였습니다. 이렇게 포스트 그리드, 정렬 위치에 따라서도 광고 게재 위치도 달라질 수 있으니 참고하셔서 적절히 사용하시면 좋을 것 같습니다.

추천글

워드프레스 버튼만들기

참고로 저는 외부 버튼 사이트의 태그를 이용해서 워프 CSS에 추가적용한 버튼만들기 방법만 알고 있었는데, 최근에 블록 에디터를 이용하여 간편하고 심플한 버튼도 만들 수 있는 방법을 알게 되어 다시 한번 글을 올릴 예정입니다.

워드프레스 제너레이트프레스 차일드테마 만들기

댓글 남기기