brunch

You can make anything
by writing

C.S.Lewis

by oksambari Jul 08. 2023

#14-2. 메인 페이지 만들고 홈페이지 지정하기

워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들

사이트의 뼈대가 완성이 됐으니, 이제 메인 화면에 나오는 콘텐츠 목록을 만들 차례입니다. 우선 콘텐츠가 있어야 가능하겠지요. FakerPress 플러그인을 설치 후 더미 콘텐츠 100개를 생성합니다. (※ 더미 콘텐츠는 한방에 일괄 삭제가 가능합니다.)


가. 글의 주제별 카테고리들을 생성


나. FakerPress > Posts에서 더미 글 생성 


다. 확인 

글 100개가 특성이미지(500x333 크기)를 가지고, 요약글과 카테고리와 함께 생성이 되었다면 완료





※ 참고로, 위에서 오른쪽 편집 화면은 워드프레스의 classic 편집기입니다. Impreza의 경우 테마 활성화 시 블록 에디터는 자동으로 꺼지고 고전 편집기가 작동합니다. 테마에 이런 옵션이 없다면, 플러그인 추가 > 처음에 보이는 '클래식 편집기' 플러그인을 설치하면 되겠습니다. 

디자인상 콘텐츠 본문은 문장, h 태그들, 그리고 blockquote만 구성이 되면 되는 정도라 고전 편집기면 충분합니다. 화면에 보이는 편집을 위한 메타박스들은 '화면옵션'을 클릭해서 불필요한 건 안 보이게 처리 가능하고, 이 박스들은 마우스 드래그로 원하는 위치에 놓고 편집도 가능합니다. (한 번 지정하면 다음 글 편집은 똑같은 환경으로 표시)






콘텐츠 준비 과정이 완료되었다면 이제 글의 목록을 만들 차례입니다. 





메인 페이지 만들기 


먼저, 참고용 템플릿의 메인 페이지를 확인해 보겠습니다. 좌측에는 50% 넓이로 지정된 글이 크게 표시되고, 우측에는 최신 글 8개가 모양은 유사한데 이미지 비율, 타이틀 크기, 요약글 크기만 살짝 다르게 표시되는 거로 확인이 되네요. 



참고로, 메인 페이지를 만드는 부분은 wordpress.org에 이렇게 소개가 돼 있습니다. 


예전에는 이 메인 페이지를 만들려면 별도의 파일(front-page.php)을 만들거나, 페이지 템플릿을 만들고 빈 페이지 하날 만들어 연결하거나, 읽기 설정에서 페이지를 지정해 놓고, 해당 페이지에 해당되는 템플릿 파일을 수정해서 구성하곤 했는데요, 최근에는 페이지 빌더가 워낙 발전이 되어서 이런 번거로운 과정 없이도 메인 페이지를 뚝딱 만들 수 있게 되었습니다. 


메인을 위한 페이지 하나를 만든 다음, 디자인에 맞게 구성 후 설정 > 읽기에서 홈페이지로 지정하면 끝. 


Impreza 테마의 경우는 목록 디자인도 어드민에서 바로 제작 후 [ Grid/Listing ]이라는 화면 요소에서 바로 사용할 수 있는 장점이 있습니다. (※ 자유도가 없는 테마의 경우 옵션 몇 가지로만 모양 컨트롤이 가능)


featured 글 리스트용으로 디자인대로 그리드 레이아웃 하나를 만들어 줍니다. 


featured 글 레이아웃이 완성이 되면 그대로 복사한 다음, 제목과 요약글 폰트 사이즈만 조정하면 기본 글 목록도 금세 완성됩니다. 




페이지 구성하기 


Featured 칼럼에는 원하는 글 2개를 지정해서 표시하는데, 1 칼럼으로 세로로 넓게 이어지도록 했습니다. 


Recent 칼럼에는 최신 글 8개를 가져다 표시하는데 앞에 Featured로 지정된 글은 리스트에 나오지 않게 설정하고, 타이틀이 조금 작은 기본 레이아웃으로 나오는데, 2개의 열로 나오도록 설정을 했습니다. 



편집 시 각 칼럼은 반응형 사이즈를 결정할 수 있습니다. 여기에 Grid 요소의 반응형 글의 칼럼 수를 조합하면 화면이 작아지더라도 목록이 너무 길어지거나 하는 것을 방지할 수 있습니다. 

예 : 칼럼 넓이가 5:5이던 걸 -> 2:3으로 조정했다가 -> 1 칼럼으로 변경, 목록은 2열을 유지하다가 600px보다 작은 화면에서는 1열로 변경 




여기까지 하면 메인 페이지가 완성됩니다. 

https://oks-dev.tk/wpblog/







다음은 모든 글이 최신글부터 순서대로 표시되는 Blog 홈 페이지(All articles)와 각 카테고리 목록을 만드는 과정이 필요합니다. 



계속... 



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