워드프레스의 글 목록 페이지를 생성하는 플러그인 (대문)

티스토리에서 독립서버의 워드프레스로 이사한 후 가장 애를 먹은 것 중 하나가 대문에 최신글의 목록을 깔끔하게 표시하는 것이었다. 티스토리나 네이버 블로그에서는 너무도 당연하게 블로그 첫 페이지에 표시되는 최신글 목록 기능이 제공된다.

블로그의 메인페이지와 카테고리, 또는 Tag를 선택했을 때에는 글의 제목과 글을 대표하는 이미지 그리고 작성일자, 카테고리와 글의 요약이 표시되어야 한다. 이 당연하다고 생각되는 기능이 워드프레스에서는 당연한 것이 아니다.

그래서 네이버 블로그나 티스토리를 사용하던 블로거들이 자기만의 독립된 블로그가 갖고 싶어 전세계 CMS 점유율 1위라는 워드프레스로 이사를 꿈꾸며 워드프레스를 접하곤 바로 이사를 접는 이유 중 하나가 바로 이 글목록을 만드는 것이 너무 어렵기 때문이다.

물론 워드프레스는 자체 앱 마켓이 있어 다양한 유료 플러그인을 구매하면 글 목록을 쉽게 구현할 수 있다. 그렇다 유료다. 물론 필자가 잠시 사용하던 Contents View 플러그인처럼 무료버전에서도 글 목록을 쉽게 구현할 수 있는 플러그인도 있다.

하지만 대부분의 유저들은 필자처럼 아주 단순한 몇 가지 기능만 있으면 되는데도 불구하고 거의 사용하지 않을 많은 기능을 갖고 있는 매우 무거운 플러그인을 설치해야 하며 수시로 뜨는 업그레이드 알림, 유료 버전 구매를 유도하는 팝업 등을 참고 견뎌내야 한다.

그래서 글 목록을 만드는 플러그인을 직접 만들어 사용하기로 했다. 그리고 꼭~필요한 기능만 갖고 있는 아주 가벼운 플러그인을 만드는 것이 목표다.

WordPress Post-list Plugin

이 플러그인은 Contents View 플러그인과 같은 방식으로 블로그의 전체 글 목록과 카테고리별 글 목록을 보여주는 리스트를 만들고 그 포스트 리스트를 워드프레스의 Page에 숏코드를 입력하고 발행하는 형태로 동작한다.

플러그인을 설치하고 나면 다음 화면과 같이 워드프레스 관리자페이지에 “포스트 리스트” 라는메뉴가 보이고 내부에는 포스트 리스트 목록과 포스트 리스트를 추가하는 메뉴가 보이게 된다.

최초에는 아무런 포스트 리스트가 생성되어 있지 않지만 필자가 블로그의 메인페이지의 포스트리스트와 각 카테고리별 포스트리스트를 만들어 둔 화면이다.

포스트 리스트 생성/편집

“새 포스트 리스트 추가” 버튼을 누르면 다음 화면과 같이 새 포스트 리스트를 추가하는 화면이 표시된다.

입력 내용도 그다지 복잡하지 않고 심플하게 구성했다.

최신 글 목록을 만들 때 전체글을 대상으로 할 것인지 특정 카테고리를 대상으로 할 것인지를 선택할 수 있다. 블로그의 메인 페이지라면 카테고리 구분 없이 전체 글을 대상으로 목록을 만들고 필자의 블로그처럼 카테고리를 만들고 메뉴와 연결했을 때 메뉴를 클릭하면 해당 카테고리의 최신글 목록을 포스트 리스트로 만들면 된다.

하나의 포스트 리스트에서 보여줄 글의 개수를 선택할 수 있고,

포스트 리스트의 레이아웃을 바둑판(섬네일 이미지 상단, 글요약 하단) 형태와 가로(섬네일 이미지 좌측, 글 요약 우측) 형태 중 선택할 수 있도록 했다.

각 글의 대표 이미지를 선택했을 때 보여줄 썸네일 이미지의 크기를 100×100, 200×200, 300×300 중에서 선택할 수 있도록 했다.

그리고 썸네일 이미지 옆에 표시할 요약 글의 글자수를 선택한다. 이 글자수는 포스트 리스트를 만들어 워드프레스의 Page에 연결한 다음 실제로 표시되는 화면을 보고 글자수를 조정하는 것이 좋다.

그리고 SEO 플러그인들은 요약글을 글의 본문과 무관하게 작성해 지정할 수 있는 기능을 제공한다. 그래서 RankMath, Yoast, Slim SEO 세 플러그인 중에서 요약글을 가져와 보여줄 수 있도록 했다. 만약 없다면 워드프레스의 기본 요약글을 가져오며 그것도 없다면 글의 앞 부분에서 해당 글자수 만큼 발췌하여 표시하도록 했다.

글 제목의 크기와 색상을 선택할 수 있고 Bold도 선택할 수 있다.

썸네일 이미지는 둥글게 표시하는데 둥근 정도를 4단계로 선택할 수 있다.

마지막으로 카테고리와 글 작성일을 표시할 것인지 여부도 선택할 수 있으며 만약 썸네일 이미지가 흐릿하게 보인다면 선명하게 보이도록 할 수 있는 기능도 추가했다.

필자가 필요로 하는 기능은 딱 여기까지 였다.

이제 생성한 포스트 리스트를 “공개”하면 하나의 포스트 리스트가 만들어진다.

페이지에 포스트 리스트 삽입하기

만들어진 포스트 리스트는 그 자체로는 아무것도 하지 못한다. 워드프레스의 Page에 포스트 리스트의 숏 코드를 넣고 페이지를 발행하고 페이지를 메뉴와 연결해주어야 한다. 아래 화면이 워드프레스에 작성된 페이지의 목록이다.

원래 워드프레스의 페이지는 정적인 HTML을 작성해 발행할 수 있도록 제공되는 기능인데 숏 코드를 활용해 동적인 페이지를 구현할 수 있다.

다음과 같이 워드프레스 설정 메뉴의 “페이지”에서 “페이지 추가” 버튼을 누른 다음 [입력 / 블록 선택] 우측 끝의 + (더하기) 를 누르면 표시되는 창에서 “사용자 정의 HTML”을 선택한다. 만약 창에 보이지 않으면 하단의 “모두 찾아보기”를 선택하면 표시되는 목록에서 찾으면 된다.

“사용자 정의 HTML”은 워드프레스 구텐베르그 편집기에서 기본적으로 제공하는 유형의 블록이라 반드시 있을 것이다. 그런 다음 추가된 블록에서 “HTML 편집” 버튼을 누른 다음 아래와 같이 포스트 리스트에서 생성한 숏 코드를 입력한다.

그리고 “업데이트”를 클릭한다. 그런 다음 이 페이지를 블로그의 어떤 URL에 연결할 것인지(Slug – 슬러그) 주소를 지정해줘야 한다. 다음과 같이 글목록의 특성에 따라 카테고리 이름을 주소로 지정해도 된다.

만약 블로그의 메인(대문)에 연결할 페이지라면 슬러그는 지정하지 않아도 된다.

테마 설정에서 메인 페이지 연결하기

생성한 페이지가 블로그의 대문(메인)에 연결되어야 한다면 다음과 같이 워드프레스의 설정 페이지에서 “모양” – “테마”에서 선택된 테마의 “사용자 정의” 버튼을 누른다. 그러면 테마의 설정 화면이 보이게 되는데 하단에 “홈페이지 설정” 이라는 메뉴가 보인다.

“홈페이지 설정”을 클릭하면 다음과 같이 앞에서 생성한 페이지 (포스트 리스트와 연결한)를 선택하는 창이 보인다.

#4418이 앞에서 포스트 리스트의 숏코드를 입력해 만든 페이지의 번호다. 이 번호는 페이지 목록에 가면 확인할 수 있다. 페이지를 생성할 때 워드프레스가 자동으로 생성해주는 페이지의 식별 번호다.

만약 필자의 블로그처럼 메뉴가 카테고리들이라면 페이지를 생성할 때 슬러그를 준 다음 워드프레스의 메뉴 설정에서 각 메뉴와 페이지를 연결에주면 메뉴를 클릭했을 때 해당 슬러그의 주소로 연결된다.

후기

AI, 정확하게는 구글 제미나이의 Gems(젬스)에 DevSecOps 전문가 젬스를 만든 다음, 내가 원하는 워드프레스 플러그의 기능 요구사항을 입력해 개발계획을 수립해달라고 요구하였다. 수 분도 걸리지 않아 개발 계획이 수립되었고 개발 계획을 MD(마크다운 문법) 파일로 내려 받아 VSCode의 비었는 새 프로젝트 폴더에 agent.md 파일로 저장하여 이 md 파일을 참고해 워드프레스 테마를 코딩해달라고 요구했다.

md 파일의 개발 계획대로 코드가 작성되는데 채 5분도 걸리지 않았다. 그리고 세부적인 요구 사항을 추가로 지시하며 부분 부분 완성도를 높여가니 순수 작업시간 5시간도 걸리지 않아 플러그인 한 개가 뚝딱 완성되었다. 아마도 워드프레스 플러그인 개발에 숙련된 개발자라면 한 두 시간 정도면 완료되었을 것 같다.

프로그래머들에 의해 프로그래머의 직업이 가장 큰 타격을 받을 것 같다는 생각이 들 수 밖에 없는 경험이었다.

이 코드는 taeho의 github 리포지토리에 공개하고 있다.

https://github.com/taeho9/wp-postlist-view.git

#워드프레스플러그인 #바이브코딩 #워드프레스글목록