워드프레스로 직접 블로그를 구축하다보면 유료 플러그인이나 테마를 구입하고자 하는 충동에 휩싸이곤 한다. 무료 버전의 플러그인이나 테마로는 한계가 명확하기 때문이다. 하지만 필자는 블로그를 구축하고 운영하는데 들어가는 비용이 0원이다. 웹서버와 DB서버는 오라클 클라우드의 평생 무료 티어에서 제공하는 ocpu 1개 (가상 CPU 2개)와 1 G 램 그리고 50GB의 하드 디스크로 구성되는 서버 2대에 구축하였고 CMS로는 워드프레스를 사용하고 있다.
그리고 테마는 제너레이트프레스(GeneratePress) 무료버전을 사용하고 있다. 하지만 무료버전으로는 작은 섬네일 이미지와 포스트의 글 일부를 목록으로 보여주는 가장 기본적엔 블로그의 메인 화면을 구성할 수 없다. 하지만 다른 플러그인의 무료 버전과 워드프레스에서 제공하는 페이지 기능을 함께 활용하면 가능해진다.
콘텐츠 뷰 플러그인 설치
먼저 워드프레스의 플러그인 메뉴에서 content view 라는 키워드로 다음 화면과 같이 콘텐츠 뷰라는 플러그인을 설치한다.
이 플러그인도 완전 무료는 아니고 쉐어웨어 형태를 띄고 있다. 기본 기능은 기간의 제한없이 무료로 사용할 수 있으나 보다 다양하고 예쁜 콘텐츠의 배치 및 디자인을 사용하려면 비용을 지불해야 한다.
설치한 다음에는 콘텐츠 뷰 플러그인을 활성화한다.
위 화면과 같이 콘텐츠 뷰 플러그인에 “비활성화”가 보이면 활성화된 것이다.
새 보기(뷰) 추가
블로그의 포스트 목록을 보여주는 보기(뷰)를 콘텐츠 뷰 플러그인의 “모든 보기” 메뉴에서 추가한다.
처음에는 모든 보기 메뉴를 선택했을 때 만들어진 보기(뷰)가 없겠지만 위 화면에는 이 블로그의 메인화면과 각 메뉴(카테고리) 선택 시 보여줄 뷰 목록을 만들어 등록한 화면이다.
먼저 “새 보기 추가’ 버튼을 눌러 새로운 보기(뷰)를 만든다.
먼저 뷰의 이름을 지정한다. 이름은 적당한 이름을 지정하면 된다. 그리고 “필터 설정” 탭에서 콘텐츠 유형을 “글”로 지정한다.
뷰에 보여줄 글 목록 선택
콘텐츠 유형을 “글”로 선택하면 “고급”에서 보여줄 글의 목록을 선택하는 필터를 지정할 수 있는데 만약 블로그의 메인 페이지라면 “고급’에서 아무것도 선택하지 않고 비워두면 된다. 그러면 작성된 글의 날짜를 기준으로 최신 글이 순서대로 선택된다. 표시할 글의 개수는 “표시 설정’에서 제한할 수 있다.
앞의 화면은 워드프레스에서 정의한 카테고리를 기준으로 “공지사항” 카테고리의 글만 뷰에 표시한다는 조건을 정의한 화면이다.
뷰에 표시할 글의 레이아웃 선택
“표시 설정” 탭으로 이동하면 “레이아웃”에서 글을 표시할 뷰의 구성을 선택할 수 있다. 섬네일 이미지와 글의 제목, 글의 앞부분 일부”를 표시할 수 있는 “List”를 선택한다.
그리고 리스트에서 글과 글 사이의 간격을 Gap 에서 정의할 수 있다.
표시되는 글의 제목, 섬네일, 발췌문과 페이지 처리 정의
“필드 설정”에서는 글에 표시되는 글의 제목, 섬네일 이미지 등 표시 여부와 위치, 크기 등을 정의할 수 있다.
썸네일 크기는 운영하는 블로그의 화면 구성에 따라 적절한 크기를 선택하면 된다.
다음은 썸네일 옆에 보여줄 글의 앞부분 단어수를 정의한다. 공백을 구분자로 하여 단어의 수를 입력한다. 그리고 하나의 페이지에 목록으로 보여줄 포스트의 개수를 정의한다. 먼저 “페이지 처리”를 활성화하고 하나의 페이지에 표시할 글의 개수를 선택한다.
여기까지 설정했다면 기본적인 보기(뷰)의 설정이 완료되었다. “저장” 버튼을 눌러 뷰를 저장한다. 저장이 되면 화면 상단에 뷰의 ID를 보여준다.
[pt_view_id~~ ] 부분이다. [ 와 ] 를 포함하는 뷰ID 전체를 복사한다. 이 뷰 ID를 워드프레스의 페이지에 추가해줘야 한다.
페이지 생성 및 뷰 ID 입력
이제 페이지 메뉴에서 “페이지 추가” 버튼을 클릭해 페이지 추가 화면으로 진입한다.
추가할 페이지가 표시되는데 제목과 코드(페이지의 내용) 입력하게 된다.
제목은 ”공지사항”을 입력했는데 만약 이 페이지가 블로그의 첫 화면, 포스트 목록에 표시되는 화면이라면 제목을 입력하지 않아도 된다. 그리고 슬러그에 블로그 도메인 하위의 주소를 입력한다. 다음 화면에서 메뉴와 연결한 뒤 블로그에 표시되는 메뉴를 클릭하면 이 슬러그의 주소로 접근이 이루어진다.
그리고 내용에 복사해둔 뷰의 ID를 위 화면과 같이 입력한다. 구텐베르그 입력기에서는 자동으로 쇼트코드로 인식된다. 긜고 페이지를 저장한다.
페이지와 메뉴의 연결
페이지가 저장되었으면 메뉴와 연결해준다. 쉽게 말해 특정 메뉴를 클릭하면 페이지 추가에서 지정한 슬러그(slug) 주소를 통해 페이지를 보여주게 되는 것이다.
워드프레스 설정 메뉴의 모양에서 메뉴 화면으로 들어간다.
“메뉴 추가” 화면에서 “페이지”를 선택하면 앞 화면에서 작성한 페이지가 목록형태로 보인다. 페이지를 하나만 추가했다면 하나만 보일 것이다. 해당 페이지를 추가하고 “메뉴에 추가” 버튼을 클릭하면 오른쪽 메뉴 목록 화면에 “공지사항” 메뉴가 추가된다. 그리고 오른쪽에 해당 메뉴는 “페이지”로 연결되었음을 알려준다.
만약 페이지 화면에 “공지사항” 이라는 제목의 큼지막한 제목이 보기 싫다면 페이지를 저장할 때 “제목”을 비워두면 된다. 다만 그렇게 되면 위의 페이지에 제목이 아닌 페이지의 ID와 제목없음 이라는 문구가 보일 것이다. 그러면 메뉴에 일단 추가하고 메뉴 세부 설정의 내비게이션 레이블에서 “공지사항” 이라고 입력해주면 된다.
페이지가 블로그의 메인화면에 표시되는 글 목록인 경우
만약 페이지가 워드프레스 블로그의 메인화면에 표시되는 글의 목록인 경우 페이지의 제목이 없어야 깔끔한 글목록이 된다. 다음과 같이 워드프레스 설정화면의 “읽기” 화면에서 다음과 같이 설정해준다.
홈페이지 표시 메뉴에서 “정적인 페이지”를 체크해주고 홈페이지에 카테고리 등 필터링 없이 글 목록이 표시되도록 작성한 뷰를 포함하는 제목이 없는 페이지를 지정해준다.
그러면 지금 현재 필자의 블로그처럼 글 목록이 워드프레스 블로그의 메인 화면에 표시된다.
#워드프레스 #메인화면 #글목록
답글 남기기