기존 와블테마 V1 버전을 넘어, 새롭게 레이아웃을 구성해보았다.

구들 애드센스를 노리는 신규 블로거라면 더욱더 추천한다.

이번엔 좀 더 편집이 쉽게 본인의 취향에 맞게 설계할 수 있도록 최대한 반영하였다.

기본은 리퀴드 글래스 느낌으로 설계하였다.

1. 와블 테마 V2 소개

우선적으로 SEO 검색 결과에 최적화될 수 있게 설계 했다.

페이지스피드인사이트 점수는 준수하다.

또한, SEO 검색결과 최적화에 대한 기능을 최대한 반영하였다.

1). 페이지스피드인사이트 점수

데스크탑 점수

성능	접근성	권장사항	검색엔진 최적화
99	100	100	100

모바일 점수

성능	접근성	권장사항	검색엔진 최적화
96	100	100	100

2). 리치검색결과 SEO 검색 최적화

리치검색결과값이 중복이 되면 의미 없는 크롤링만 하게되어 필수 요소만 적용시켰다.

2. 와블테마 V2 디자인 소개

디자인은 글의 집중이 잘될 수 있게 모바일과 PC버전의 설계를 달리하였다.

1). PC 화면

PC화면은 상대적으로 화면이 크기 때문에 상단에 카테고리와 검색창,

그리고 우측 사이드에 추천글과 인기글을 배치하였다.

요즘 나온 모니터 화면비를 기준으로 최대한 넓게 설계하였다.

홈페이지 화면

2). 모바일 화면

모바일 화면은 포스팅 화면이 집중될 수 있게 설계하였다.

메뉴는 오버레이형으로 구조를 설계하였고 기본 세팅값은 리퀴드 글라스 형태다.

검색창 또한 스프레드형으로 움직일 수 있게 설계 하였다.

보이지 않는 현상을 최대한 개선하여 텍스트도 잘 보이게끔 하였다.

자세한건 상단의 링크를 타서 보는것이 가장 빠르다.

메뉴와 검색창 화면

모바일 화면 디자인

3. 와블테마 V2 기능 소개

와블테마 V2는 필자가 포스팅 편집하면서 불편사항들을 고려하면서 만들어 보았다.

기본 포스팅 편집하면서 할 수 있는 기능중 하나는 '링크'와 '인용문'을 기본으로 사용 할 수 있다.

다만, 링크의 경우 조건부가 존재하니 참고하자.

1). 기본 편집글

블로그스팟은 기본적으로 편집글이 상단에 '보통'이라고 명시되어 있다.

정말 불편한건 '보통'으로 글을 작성할 경우 SEO 검색과 광고에 좋지 못하다.

반드시 '<p>'의 단락형식으로 글을 써야한다.

따라서, 이 테마는 기본적으로 <p>의 형식으로 글을 작성을 기준으로 설계했다.

상단에 보면 '단락형식'이라고 명시되어 있는데 설정에 그냥 <p></p>를 기본으로 해놓고 시작하는 것이 편리하다.

하지만 편집을 하다보면 편집글과 '미리보기' 화면이 다르게 보이니 반드시 '미리보기' 기준으로 편집해야 한다.

2). 인용문 사용법

인용문 사용법은 간단하다. 우측에 '···' 되어 있는 것을 클릭하면 '받은메일'이라는 문구가 있다.

이것을 인용문 기능으로 했다.

아이러니한건 번역이 잘못된건지 인용문인데 받은메일로 번역이 되어 있다.

보통 class를 만들어 인용문을 사용해와서 매번 쓸 때 불편했기 때문에 기본 기능으로 최대한 살려보고자 만들었다.

인용문 사용법

Step 1. 상단 '···' 클릭

Step 2. 문구 삽입

Step 3. '받은메일' 클릭

Step 4. 완료

인용문 디자인

Wable Theme V2 수익형 무료 테마

3). 기타 편집 기능

기타 '표'나 '가로스크롤' 등은 위의 링크에 '모음집'에서 그대로 복사 붙여 넣기하여 편집하면 된다.

와블테마 V2는 Script와 CSS는 기본 설치되어 있기 때문에 어려움 없이 사용만 하면 된다.

4). 인기글 기능

인기글의 경우 2가지가 존재하는데 블로그스팟 레이아웃에서 설정하면된다.

'wable-mobile-popular'와 'wable-sidebar' 2곳이 존재한다.

말그대로 PC버전과 Mobile 버전의 차이다.

레이아웃에서 수정버튼을 눌러 썸네일표시(권장)하고 표시되는 최대글 수만 조절하면된다.

필자는 6개를 기본으로 하였다.

또한, 스니펫(내용)은 꺼둠으로 설정해야한다. 기능을 첨부하지 않았다.

즉, 활성화를 시켜도 나오지 않으니 참고하자.

4). 추천글 설정

추천글은 고정으로 띄어놓는 형태이기 때문에 자동으로 설정되지는 않는다.

추천글 설정 단계

Step 1. 블로그스팟 '레이아웃' 이동

Step 2. 'wable-sidebar' 추천글 클릭

Step 3. 포스팅 사용 이미지 URL 복사

- 예시 : <a class ='wable-page-item' herf='https://블로그스팟.com/이미지.jpg'>

Step 4. 제목 입력

- 예시 : <h2 class='wable-page-title'>사용할 제목</h2>

Step 5. 포스팅 URL 입력

- 예시 : <img alt='추천글1' src='http://블로그스팟.com/blog-08'>

Step 6. 끝

5). 모바일 화면 '메뉴' 설정

모바일화면에서 카테고리는 자동으로 업로드 된다.

다만, 추천글과 Contact Us는 수동 기입으로 진행해야 하는데,

블로그스팟 테마 -> HTML 편집에서 해야한다.

HTML 편집에서 '상단 섹션'을 검색하면 해당 편집할 수 있는 메뉴 관련 코드가 나온다.

1925번열에 존재하는데 여기서 위와 같이 URL과 사용할 제목 그리고 Contact Us만 입력하면된다.

만일 Contact Us나 추천글을 사용하고 싶지 않을경우 삭제하면된다.

6). 홈페이지 색상 설정

기본 세팅되어 있는 색상이 마음에 들지 않을 경우 취향에 맞게 색상 설정할 수 있다.

위와 같이 테마 HTML 편집에 들어가서

131열에서 색상을 설정하면된다.

만약 블랙테마로 하고싶다면, wable-text를 반대로 입력해주면 된다.

4. 와블테마 V2 설치 방법

만일을 대비해서 기존 테마는 백업을 해둔다.

설치 순서

Step 1. 위의 경로에서 와블 테마 다운로드 또는 html 전체를 복사한다.

Step 2. 테마 설정에서 HTML 편집 기존코드 전체 삭제한다.

*만일 애드센스나 연결되어 있는 추적코드가 있다면 미리 옮겨둘 준비하자.

Step 3. 와블 테마 V2 코드 복사 붙여넣기 한다.

Step 4. 저장한다.

Step 5. 테마 편집의 모바일 설정에서 데스크톱으로 설정한뒤 저장한다.

*이유는 반응형 구조이기 때문

Step 6. 설정에서 글 '기본 페이지의 최대 게시물 수'는 6개로 한다.

Wable Theme V2

이번에 테마를 제작하면서 공을 많이 들였다.

최적화 설계부터 디자인까지 고민을 많이 하였다.

앞으로 계속 수정하면서 개선해 나갈 예정이다.

한국형 무료 테마는 찾기가 힘들어 직접 제작을 시도하게 된 후 꾸준히 업데이트를 하고 있는데,

무료이니 부담없이 사용만 하면된다.

마지막으로 실사용에 초첨을 맞춘 수익형 테마는 물론,

포스팅에 대한 글의 주목에도 신경을 썼으니 좋게 사용하면 좋을 것 같다.

다만, 조회수가 좋지 못하면 인기가 없는 것이기 때문에 마지막일수도...

그럼 끝