워드프레스 글목록 정렬하는 방법에 대해 살펴보다보니 제가 사용하고 있는 제너레이트프레스 테마 무료버전에서는 꾸미기에 한계를 자주 느낍니다. 유료 버전에서는 외모-레이아웃-블로그에서 내 블로그의 아카이브 페이지(메인)와 카테고리별 페이지의 썸네일(워드프레스의 특성 이미지)의 위치를 오른쪽이나 왼쪽으로도 정렬을 할 수 있는 것으로 알고 있습니다.
또, CSS코드를 이용하여 워드프레스 썸네일 위치 뿐만 아니라 글목록도 정렬을 할 수 있을텐데, 복잡하지 않게 플러그인 하나면 비교적 수월하게 내 입맛대로 보기 좋은 아카이브 페이지를 만들 수 있는 방법을 알게 되어 간단히 소개합니다.
워드프레스 글목록 위치 정렬도와 주는 플러그인-POSTX
플러그인 설치하기
우선 포스트엑스라는 포스트 그리드 플러그인은 꽤 많이 사용되는 제품인 것 같은데요. 워프 관리자 페이지의 플러그인 새로추가에서 검색하여 설치해주고 활성화시키면 아래와 같은 설명 창에 접속할 수 있습니다. 첫 웰컴 TO POSTX 화면에서 대시보드로 돌아가기 버튼을 클릭한 후에 본격적으로 워프에서 내 취향에 맞는 아카이브 정렬을 만들 수 있는데요.
POSTX 사이트에서 살펴보기(*크롬에서 열고 오른쪽마우스-한국어로 번역을 이용해 도움받아보세요)
![워드프레스 글목록 정렬 플러그인 포스트 그리드](https://i0.wp.com/dathru.com/wp-content/uploads/2023/08/image-16.png?resize=885%2C446&ssl=1)
포스트 그리드 만들기
본격적으로 워드프레스 글목록 위치 정렬을 새롭게 하기 위해서 먼저, 워프 관리자 화면에서 페이지 – 새로 추가를 선택합니다. 그러면 마치 새글 쓰는 창처럼 나오는데, 다른 것은 무시하시고 블록 표시에서 ‘POST’를 검색합니다.
그러면 아래와 같이 여러가지 유형의, 정렬 방식의 레이아웃이 나오는데 사실, 거의 다 유료버전이라서 무료를 사용할 수 있는 양식은 제한적입니다. 일단 저는 왼쪽 썸네일 정렬 방식의 POST LIST #3을 선택하였고 아래와 같이 더 세부적으로 만지작 거리며 여러가지 시도를 해서 만들어 봤습니다.
![워드프레스 포스트 그리드 플러그인](https://i0.wp.com/dathru.com/wp-content/uploads/2023/08/image-18.png?resize=469%2C508&ssl=1)
![워드프레스 포스트 그리드 플러그인 POSTX](https://i0.wp.com/dathru.com/wp-content/uploads/2023/08/image-17.png?resize=885%2C421&ssl=1)
한번 저처럼 무료로 워드프레스 포스트 그리드 글목록 정렬 플러그인 사용해 보시고, 더 멋지게 꾸미시길 원한다면 나중에 유료버전도 이용해 보시면 좋을 거 같은데요. 위의 우측 블록에서 여러가지 조건을 바꿔가며 아래와 같이 꾸며봤습니다.
저는 호버 애니메이션을 OPACITY(썸네일에 마우스를 가져다대면 흐려지는 효과) 대신에 ZOOM IN으로 선택했던 것 같습니다. 하나 하나 눌러가면서 바꿔가면 생각보다 어렵지 않으니 해보세요.
참고로 썸네일 크기는 아래에서 150*150부터 더 큰 사이즈까지 선택해서 미리보기 해볼 수 있습니다.
![워드프레스 글목록 정렬 플러그인](https://i0.wp.com/dathru.com/wp-content/uploads/2023/08/image-19.png?resize=311%2C586&ssl=1)
그렇게 완성이 되었다면 이제 내 아카이브 페이지나 카테고리별 페이지에 각각 적용을 시켜줘야하는데요.
아카이브,카테고리 페이지에 적용하기
일단 다시 워프 관리자 화면의 설정 – 읽기로 간 다음에, 아래와 같이 홈페이지 표시에서 만약 최신 글로 체크가 되어 있다면 정적인 페이지로 체크해주고 홈페이지 / 글 페이지에서 각각 새로 생성한 포스트 그리드 페이지를 선택해서 저장하고 적용을 하면 됩니다. 저는 페이지의 제목을 정하지 않아서 아래와 같이 나오는 것이니 참고하세요.
![워드프레스 글목록 정렬 플러그인](https://i0.wp.com/dathru.com/wp-content/uploads/2023/08/image-20.png?resize=475%2C351&ssl=1)
이렇게 아주 간단하게 적용이 가능하고 현재 저는 아카이브 즉 메인 페이지에서만 사용하고 있고, 글 페이지(카테고리별)에서는 적용하지 않고 있는데요. 참고로 애드센스 광고를 워드프레스 글목록 위치 사이에 넣어 둔게 있는데 이 포스트 그리드 플러그인을 사용하니 광고 위치가 바뀌어서 그냥 반반으로 적용시켜 사용하기로 결정하였습니다. 이렇게 포스트 그리드, 정렬 위치에 따라서도 광고 게재 위치도 달라질 수 있으니 참고하셔서 적절히 사용하시면 좋을 것 같습니다.
추천글
참고로 저는 외부 버튼 사이트의 태그를 이용해서 워프 CSS에 추가적용한 버튼만들기 방법만 알고 있었는데, 최근에 블록 에디터를 이용하여 간편하고 심플한 버튼도 만들 수 있는 방법을 알게 되어 다시 한번 글을 올릴 예정입니다.