brunch

You can make anything
by writing

C.S.Lewis

by oksambari Jun 21. 2020

워드프레스 & 게시판

IMPREZA 테마로 워드프레스 웹사이트 만들기

워드프레스 사이트에 게시판을 추가하고 싶어요


워드프레스를 접했던 당시(2012년도)에 듣던 얘기를 최근까지도 듣는 경우가 있습니다. 아마도 이런 모습의 글 리스트 표시가 익숙한 분들도 있어서겠죠. 비교를 위해 유료 테마의 기본적인 그리드 표시 방식도 올려봅니다. 



Q: 왜 게시판을 추가하길 원하시나요? 
A: 게시판 형태의 글 리스트를 이용하려고요. 

Q: 그럼 누구나 다 글을 게시할 수 있는 게시판을 원하시는 건가요? 

A: 게시글까지 누구나 작성하게 할 계획까지는 없습니다.



워드프레스 사이트에 이런 리스트 형태의 목록을 원하는 경우, 대개 이 모양 때문인 경우가 많았습니다. 글의 작성까지를 허락한다는 것은 대비해야 할 이슈도 고려를 해야 하는 것이라 일반 사이트에서는 적용이 되기는 다소 어렵거든요. (회원 가입 여부, 로그인, 업로드로 인한 사이트 용량, 트래픽, 사진이나 내용 모니터링, 프런트 앤드 글 작성 등)


! 글을 리스트 형태로만 표시할 수 있는 거면 문제는 끝. 


그런데 테마 대부분이 이런 국내형 게시판 리스트 표시를 준비해 놓지 않았기에, 대부분 리스트 구현을 위해 워드프레스의 플러그인 형태로 개발이 돼 있는 것을 설치해서 이용을 하는 경우가 많습니다. 금세 결과가 확인이 되고 좋습니다... 단, 문제는 차후 워드프레스 작업 마무리로 어드민 환경을 정리하는 데에도 그렇고(불필요 메뉴 생성, 광고 등), 기능을 더 추가한다든지 할 때 계속 제약 사항이 발생하는 것이죠. 


혹시, 기본 기능을 활용하면서 게시판(모양)을 만들 수는 없는가? 


물론 방법이 있습니다. Impreza의 경우 더욱이 코딩이 거의 필요 없이도 이런 게 가능합니다. 

서론이 길어졌는데 오늘 주제는 이 게시판 형태를 만드는 작업입니다. 





1. 포스트 타입 추가 

게시판용으로 따로 글을 관리하려고 한다면 별도의 글 형식을 만드는 게 편리합니다. 포스트 타입이란? 워드프레스를 설치하면 기본적으로 글, 페이지를 작성할 수 있습니다. 여기에 테마들 중엔 설치를 하면 '포트폴리오'라는 글 형식이 추가가 됩니다. 이러한 어떤 콘텐츠의 큰 묶음이라고 보시면 될 듯합니다. 

임프레자의 추천 플러그인 목록을 보면 'Custom Post Type UI'라는 게 있는데 이 플러그인이 이러한 포스트 타입을 코딩 없이 어드민에서 추가하고 관리할 수 있게 도와주는 역할을 합니다. 


필수항목 3가지만 넣고 저장을 해도 새로운 글 형식 '게시글'을 만들 수 있습니다. 


추가로, 게시글에 공지사항이나 또는 여러 주제로 묶을 수 있도록 분류(Taxonomy)를 추가합니다. 마찬가지로 처음엔 필수 항목만 입력해도 만드는 건 문제없습니다. 이제 워드프레스 기본 편집기를 이용하면서 게시글 관련 콘텐츠도 작성 및 관리를 할 수 있게 되었습니다. 목록 구성된 모습을 보기 위해 몇 개 미리 만들어 놓습니다. 




2. 그리드 디자인 만들기 

그리드 = 목록. 목록 하나하나가 각각 어떻게 보일지 구조를 미리 만드는 과정입니다. 

Impreza > Grid Layouts에서 그리드 레이아웃을 하나 추가합니다. 

'board-new'라고 이름을 지었고, 리스트의 1줄을 고려해서 가로로 펼쳐지도록 3가지 내용(제목, 작성일, 조회수)을 배치했습니다. 넓이는 약간의 산수가 적용됩니다. (전체 가로넓이를 100%라 해서 3개의 넓이 조정) 


공지사항 강조용으로 그리드 레이아웃을 하나 복사해서 만듭니다. (배경색 추가)




3. 게시글 목록이 표시될 페이지 만들기 

게시글 목록이 표시될 페이지를 하나 만들어줍니다. 

위쪽의 Horizontal Wrapper는 그리드 레이아웃과 동일하게 넓이를 설정합니다. (각 칼럼의 제목들)


첫 번째 그리드 요소로는 게시글들 중 '공지사항'이라는 분류에 속한 글 5개를 'board-sticky'라는 레이아웃으로 표시하도록 설정합니다. 


두 번째 그리드 요소로는 전체 게시글을 한 페이지당 5개씩 페이지 번호 버튼이 추가된 형태로 'board-new'라는 레이아웃으로 표시되도록 설정합니다. 



페이지를 저장 후 화면을 확인해 보면, 5개씩 페이지가 분리가 되면서 공지사항이 표시되는 간단하지만 원하는 형태의 리스트가 표시되는 걸 볼 수 있습니다. 각 라인의 아래 보더는 페이지 css로 스타일 추가를 할 수 있습니다. 

※ 페이지를 열어본 조회 수 표시는 간단한 코딩 추가가 필요합니다. 코드 추가는 자식 테마 functions.php를 이용하면 됩니다.  > How to Display Popular Posts by Views in WordPress without a Plugin

원리는, 글 페이지가 열리게 되면 해당 글의 포스트 메타 정보로 카운트들이 기록됩니다. 조회수는 아까 그리드 레이아웃에서 이 정보를 표시한 겁니다. 




이상 글을 리스트 형태로 표시하는 방법을 한 번 적어봤습니다. 


이후 워드프레스의 편집기 내에서 보이는 각종 정보들과 작성자, 댓글 수, 연결된 파일이 있다면 파일 링크 등을 표시할 수도 있고, 어드민만 작성을 하는 것이 아닌 작성자 권한까지 기획 내용을 확대하면 비밀글이나, 내 글 모아보기, 프런트 앤드 글 작성하기와 같은 것들을 추가할 수도 있습니다. 워드프레스의 기본 개발 방식을 최대한 활용할 수 있기 때문에 기능 확장이 수월해집니다.   



끝. 




https://brunch.co.kr/@oksambari/76

https://brunch.co.kr/@oksambari/118

https://brunch.co.kr/@oksambari/124


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari