Site Library로 블로그 디자인 쉽게 하는 방법

블로그/사이트는 크게 헤더와 본문, 사이드바, 푸터 등의 구조로 이루어져 있다. 운영자의 성향에 따라 사이드바를 미적용하거나 푸터를 간소화하는 등 차이는 있겠지만, 필요한 요소는 적절하게 디자인하고 배치해야 전체 화면을 잘 구성할 수 있다.

제너레이트 프레스 테마에서 페이지나 요소를 추가하려면 Elements – Block 생성을 통해서 가능하다. 위는 관련 글 목록을 만드는 예시인데 관련 글 헤드라인과 Query Loop 요소 등을 넣고 세부 조정 후 완성하면 된다.

하지만 테마 사용이 처음이면 직접 모든 페이지와 요소를 만지려면 아무래도 시간도 들고 어려워서 비효율적일 것이다. 대신 테마에 포함된 사이트 라이브러리를 사용하면 전체 진행 과정이 무척 쉬워진다. 막 돌려도 되는 테스트 블로그가 있다면 준비는 끝이다.

* 이 글에서는 제너레이트프레스 테마를 예시로 들었지만, 다른 테마도 사이트 라이브러리를 포함한다면 적용해 볼 수 있겠다.

1. 테마 검색하는 방법

사이트 라이브러리는 테마에서 기본 제공하는 테마 모음 페이지인데, 대시보드 디자인에서 GeneratePress나 Elements 이동 후 화면 위의 Site Library를 클릭하면 목록이 나온다. 카테고리 등을 참고해서 원하는 테마 아이콘을 클릭하면 디자인과 기능을 볼 수 있다.

(아래는 예시로 NEWSROOM 테마 준비)

마음에 드는 테마가 있다면 헤더, 본문, 관련 글 목록, 푸터 같은 요소를 전체 또는 개별로 자신의 워드프레스에 복사, 붙여넣기 하면 되는데 우선 블로그에 테마를 적용해야 한다.

워드프레스 서브 도메인 연습 블로그 만드는 방법

설치형 워드프레스를 처음 만들면 기본 메뉴부터 테마, 플러그인 등 설정이 필요한 부분이 많다. 콘텐츠를 올리는 메인 블로그에 바로 설정을 진행해도 되지만, 기능과 디자인 등을 따로 테스트해보고 싶다면 연습 블로그를 만드는 것을 추천한다. 연습 블로그는 새로운 도메인을 구매해서 연결해도 된다. (연결 방법은 위 글 참고) .xyz 같은 이벤트 도메인은 첫 해 가격이 저렴해서 딱 1년만 연습용으로 쓰기 좋은데 번거롭다면 메인 도메인에 속하는 서브 도메인을 생성해주면 된다. 서브 도메인 이름은 기존 주소 이름이 abc.com이라면 sub1.abc.com, sub2.abc.com처럼 자유롭게 설정할 수 있다. 어차피 공개용이 아니니 아무 이름이나 편하게 붙여서 사용하면 된다. 서브 도메인 연결 방법 패스트코멧 공유 호스팅 기준으로 먼저 사이트 로그인 후 C … 더 보기

참고로 테마를 적용하면 원하지 않는 요소도 같이 적용될 수 있다. 이럴 때는 테스트/연습 블로그에 적용하고 원하는 요소만 메인 블로그에 가져오면 편하다. (아래는 테스트 블로그가 있는 가정으로 안내)

2. 테마 적용하는 방법

테마 화면 오른쪽의 시작 버튼 – Import(테마 옵션/데모 콘텐츠 선택) – Import 확인 버튼을 누르면 테마 설치가 시작된다. 테마에 따라 시간 차이가 있는데 보통 길어도 20~30초 정도면 충분한 것 같다.

3. 요소 적용하는 방법

다시 대시보드 디자인 – Elements로 오면 선택한 테마의 다양한 요소가 추가된 것을 볼 수 있다. 이제 원하는 요소를 복사해서 메인 블로그에 가져오면 되는데 방법은 아래와 같다.

① 원하는 요소 이름을 클릭해서 화면 열기
② 화면 왼쪽 위의 목록 아이콘을 열고 원하는 이름의 옵션(⋮) 클릭
③ 요소 복사하기(Ctrl+C)
④ 메인 블로그 대시보드 디자인 – Elements – Block 생성

⑤ 화면의 ‘타입 / 블록 선택’을 마우스 왼쪽 클릭 활성화한 뒤 붙여넣기 (Ctrl+V)

이렇게 하면 테스트 블로그에서 복사한 요소가 그대로 메인 블로그에 복제된다. (가장 상위 레벨인 컨테이너나 필요한 부분만 복사해도 된다)

이제 요소 타입과 블로그 내 적용 위치를 지정하고 저장하면 작업을 마칠 수 있다.

우선 화면 왼쪽에 Element Type에서 요소에 맞는 이름을 선택하면 된다.

그리고 화면 아래에서 적용 위치를 지정해야 하는데 그래야 해당 요소가 블로그 어느 부분에서 보이는지 결정할 수 있다.

특정 제외 위치가 있다면 Exclude에 위치를 추가하면 된다. 또한 불필요한 위치가 있으면 오른쪽 X를 눌러서 삭제하거나 ‘Add User Rule’ 버튼을 누르면 위치를 추가할 수 있다.

4. 주의 사항

테마에서 기본으로 제공하는 Site Library 기능을 활용하면 원하는 요소를 손쉽게 복사 + 붙여넣기로 블로그에 적용할 수 있다. 다만 이렇게 진행할 때 아래 내용은 잘 확인하는 것이 좋다.

– 테마 섞임 : 지나치게 많은 테마를 적용하면 테마별 디자인과 기능이 섞여서 블로그가 혼란스러워진다. 대안으로 본문 내용처럼 연습 블로그 활용을 추천한다.
– 요소 위치 : 위치를 제대로 지정하지 않으면 요소가 나오지 않으니 요소 복사/설정 후 잘 확인해야 한다.
– 데모 콘텐츠 : 테마를 적용할 때 데모 콘텐츠를 체크하면 ‘발행’ 상태로 블로그에 적용된다. 콘텐츠 목록은 워드프레스 글 목록에서 확인할 수 있는데 필요 없는 콘텐츠는 삭제하거나 처음 테마 설치 단계에서 옵션을 비활성화 하면 된다.
– 미디어 확인 : 데모 콘텐츠 글을 지우더라도 글에 사용된 데모 사진은 그대로 남는다. 대시보드 미디어로 이동하면 사진을 삭제할 수 있다. (사진이 많으면 벌크 선택 후 영구 삭제)

– 페이지 확인 : 테마에 따라 페이지에 옵션이 추가되기도 한다. 대시보드 – 페이지에서 목록을 확인하고 필요한 요소는 복사하거나 삭제하면 된다.
– 카테고리 확인 : 테마 적용 후 불필요한 카테고리가 늘었다면 대시보드 – 글 – 카테고리 페이지에서 삭제하면 된다.

그런데 모든 요소를 삭제했는데도 다시 블로그에 들어오면 테마의 디자인 잔재가 남아 있는 경우가 있다. 이때는 다시 사이트 라이브러리 메뉴로 와서 ‘Imported 사이트 삭제’ 버튼을 누르면 이전 테마 상태로 돌릴 수 있다.