brunch

You can make anything
by writing

C.S.Lewis

by oksambari Feb 14. 2022

#11-5. 글 형식 추가, 목록/상세 페이지 템플릿

'펜트하우스'도 워드프레스 사이트

참고사이트는 워드프레스의 글(post) 외에 포스트 형식을 추가해서 운영 중입니다. (#11-2 참고) 

> Pets, Legacy


이 중에 legacy 형식의 콘텐츠 운영에 대한 부분은 글의 카테고리와 템플릿 리다이렉트, 별도의 글 상세 페이지를 만들어서 적용할 수 있는 워드프레스와 Impreza 테마의 특성을 활용하여 지난번 다른 방법으로 대체했습니다. (#11-3. Legacy 글 모아 보기)


이제 Pets라는 추가 글 형식을 만들어 적용하는 것을 진행할 차례입니다. 




워드프레스는 내가 필요한 포스트 형식을 추가할 수 있는 방법을 제공 중인데, 이걸 코딩 없이 어드민에서 간편하게 적용할 수 있는 플러그인들 중에 Custom Post Type UI라는 게 있습니다. Impreza 테마의 경우 이 플러그인을 고려해서 잘 연동이 될 수 있도록 개발이 돼 있고, 'Impreza > Addons'에도 포함이 돼 있습니다. 

※ 플러그인의 자세한 사용 방법 소개는 여길 한 번 참고해 보세요 > https://www.wpbeginner.com/wp-tutorials/how-to-create-custom-post-types-in-wordpress/  





새 글 형식의 추가 

플러그인 설치 후 글 형식을 추가하기 위해선 세 가지 필수 항목만 넣으면 되겠습니다. 





pes 글 형식에 대한 더미 콘텐츠 추가 

'fakerpress'를 이용해서 이번에는 '글'이 아닌 '패스'라는 포스트 형식의 더미 글을 추가합니다. 





pes 콘텐츠들을 모아 보여주는 페이지 추가 

기존에 만들었던 템플릿 구성과 비슷하므로 전체를 복사해서 붙여 넣기 한 다음 일부를 수정해서 적용해도 되겠습니다. (변화 : 오른쪽에 사이드 영역을 위한 칼럼 나누기)


'패스' 콘텐츠를 한 줄에 3개씩 총 12개를 가져와서 표시하도록 하고, 12개보다 콘텐츠가 많다면 아래에 pagination이 표시되는 방식으로 적용했습니다. 그리드 하나의 레이아웃은 상단에 이미지, 하단에 제목이 표시되는 간단한 구조입니다. 


https://oks-dev.tk/logohouse/pes/

(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)





pes 글 상세 페이지 템플릿 만들기 


pes 글의 사진이나 타이틀을 클릭 시 열리는 상세 페이지가 어떤 모습으로 보일지 템플릿을 만들어 적용합니다. 레거시 글 상세 페이지와 구조가 비슷하므로, 템플릿을 복사한 다음 필요 없는 부분들을 제거하여 만들었습니다. 

만들어진 템플릿을 통해 콘텐츠가 표시될 수 있도록, 테마 옵션 > Page Layout 설정에서 '패스'용 콘텐츠 템플릿으로 연결을 해 주었습니다. 


https://oks-dev.tk/logohouse/pes/voluptates-quo-doloremque-adipisci-et/

(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)







기존에 작업된 부분들과 비슷한 점들이 많아서 pes 추가 포스트 형식에 대한 작업은 비교적 쉽게 진행될 수 있습니다. 


이제 남은 작업은 모든 콘텐츠들을 조금씩 가져다 모아 보여주는 메인 페이지를 만드는 과정이 되겠습니다. 



계속...

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