brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

#5-3. 블로그 페이지, 글 상세 페이지 만들기

IMPREZA 테마로 포트폴리오 사이트 만들기

by oksambari Nov 25. 2021

이번에 진행할 과정은 사이트의 또 하나의 주요 콘텐츠 종류인 글(post)의 목록이 나오는 페이지와, 글 상세 내용을 볼 수 있는 페이지 템플릿을 만드는 과정입니다.

글 목록이 나오는 페이지를 만들기 위해서 우선 워드프레스의 글 페이지가 연결되는 구조를 알아보겠습니다.

워드프레스는 블로그 형태로 처음 시작이 된 것으로 알고 있습니다. 그만큼 워드프레스의 글(post)은 비중이 높은 콘텐츠 형식입니다. 워드프레스의 템플릿 우선순위를 보면 이 글들만의 템플릿이 약속돼 있기도 하고, '설정> 읽기'를 보면 글 페이지라는 것을 지정할 수 있게 돼 있습니다.

이렇게 지정을 한 페이지는 편집하려고 하면 이런 메시지가 보이게 됩니다. 테마에 따라 편집이 아예 안 되게 해 놓는 경우도 있습니다.

그러면 글(post) 목록이 나오는 화면을 꾸미려면 어떻게 해야 할까요?

1) 글 목록 관련 템플릿 파일을 열어서 수정합니다. (home.php 또는 index.php)

2) 최근에는 페이지 빌더를 대부분 사용하다 보니 아예 블로그 페이지를 지정하지 않고 별도의 페이지에서 글을 불러다가 보여주는 방식을 이용하기도 합니다. (읽기 > 글 페이지 지정을 하지 않고 비워둠)

3) Impreza 테마의 경우는 읽기> 설정에서 지정한 페이지를 가지고 어드민 내에서 목록을 꾸밀 수 있게 개발돼 있어서 페이지 빌더를 이용해서 마음대로 디자인에 맞게 수정이 가능합니다. 테마의 화면을 다루는 체계를 그대로 이용할 수 있으니 그리드 하나의 디자인도 만들어서 준비할 수 있습니다.

블로그 목록 페이지 구성하기

이제 블로그의 목록 화면도 디자인대로 페이지를 꾸미기만 하면 되겠습니다.

참고사이트의 목록 디자인에 맞게 Grid Layout을 하나 만들었습니다. 이미지 부분 위에 마우스를 올렸을 때 오버레이가 나타나는 것, 그리고 화살표 아이콘이 나오는 효과는 화면 요소를 넣어서 구현이 어려우므로 css를 추가해서 해결을 했습니다. (css의 :before, :after 이용)

글 상세 페이지용 템플릿(Content template) 만들기

모든 글의 템플릿을 만들어야 하므로, Impreza > Content templates에서 'Post Single'이라는 템플릿을 하나 추가합니다. 참고사이트의 디자인을 보면 본문의 텍스트와 아래쪽 전, 후 글 내비게이션, 댓글 부분은 총 넓이 730px로 돼 있는 걸 볼 수 있습니다.

로우의 콘텐츠 폭을 임의 제한을 해야겠지요. 로우 편집에서 디자인 > Sizes에서 최대 넓이를 800px로 설정해 주면 되겠습니다. (양쪽 패딩이 각각 35px이 있음)

글 내용이 나오는 'Post Content' 부분은 글의 편집 내용 그대로 기본 콘텐츠 폭 1100px로 나오게 됩니다. 이미지도 한 번 넣어봐야겠네요.

우선 글에 이미지를 넣는 방법은 편집 화면 좌상단 '미디어 추가' 버튼을 눌러주면 됩니다. 이미지를 1개를 넣을 수도 있고, 여러 개를 갤러리 형태로 그룹으로 넣을 수도 있습니다. 테스트를 위해 이미지 2개를 갤러리로 만들어 한 번 넣어 보겠습니다. 다시 글의 주소를 열어 보니 이미지는 의도대로 잘 추가가 되는 듯합니다.

디자인처럼 중간중간 들어가는 사진만 1100px이 되어야 하고, 텍스트는 730px 안으로 들어가려면 뭔가 조치가 필요하겠습니다.

워드프레스의 기본 편집기에서 적게 되는 텍스트는 한 문장이 기본적으로 p 태그로 묶여 있게 되는데요, 이 p 태그에만 적용되는 css 스타일을 추가해서 폭을 730px로 제한해 주면 디자인과 같이 보일 수 있게 됩니다. css를 추가한 후 다시 글을 열어 보면, 이제 의도대로 글 내용 중 텍스트는 730px로 최대 넓이가 고정이 되어, 아래쪽 화면 요소들과 폭이 같아지게 됩니다.