Wable theme V3 - 수익형 테마 추천

이번 와블테마 V3은 V2의 기능의 단점과 코딩을 일부 개선시켰다.

기본적으로 와블테마는 수익형 블로그를 초점으로 만들었다.

현대에 맞게 전반적으로 어두운 배경으로 초점을 맞췄다.

기존의 느낌 그대로 리퀴드 글래스는 살려뒀다.

1. 와블 테마 V3 소개

기존 테마 V2와 같은 결의 디자인으로 SEO 검색 결과에 최적화될 수 있게 설계 했다.

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

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

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

데스크탑 점수

모바일 점수

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

기존 와블테마 V2에서 큰 변화 없이, 리치검색결과값이 중복이 되면 의미 없는 크롤링만 하게되어 필수 요소만 적용시켰다.

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

와블테마의 V2는 모바일과 데스크탑 설계를 달리하였다.

모바일은 준수했으나 데스크탑이 불편한 요소들이 존재하여, 본질에 충실하게끔 재설계하였다.

1). PC 화면

와블테마 V3은 블로그 본질에 맞게 재설계하였다.

또한, 최근 모니터 화면비를 기준으로 최대한 넓게 설계하였다.

기존과 다른 변화된 점은 기존 카테고리 위치를 이미지 오버레이 형식에서 날짜 우측으로 배치된 점이다.

홈페이지 화면

2). 모바일 화면

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

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

변화된 점이라면, 카테고리(라벨)이 보이지 않았는데, 보이도록 기능을 추가하였다.

메뉴와 검색창 화면

모바일 화면 디자인

3. 와블테마 V3 기능 소개

와블테마 V3는 V2를 사용하면서 불편사항들을 개선하면서 만들어 보았다.

기존의 기능을 넣었던 '링크'와 '인용문' 등은 기본으로 사용 할 수 있다.

다만, 기능의 사용법들은 아래의 링크나 상단의 '모음집' 링크에서 확인 할 수 있으니 참고하자.

1). 기본 편집글

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

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

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

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

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

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

2). 인용문 사용법

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

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

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

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

인용문 사용법

• Step 1. 상단 '···' 클릭
• Step 2. 문구 삽입
• Step 3. '받은메일' 클릭
• Step 4. 완료

인용문 디자인

Wable Theme V3 수익형 무료 테마

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-color-main
• --wable-bg-gradi
• --wable-bg-shadow 라인업

7). 이미지 캡션

이미지 캡션 기능

- 'figcaption' 의 이미지 밑 설명 기능

- SEO 검색 최적화 설정 기능

8). 목록 기능

9). 코드 복사 기능

코드복사 기능 디자인 예시

안녕하세요.
코드의 복사 기능을 사용해보세요.

4. 와블테마 V3 설치 방법

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

설치 순서

• Step 1. 위의 경로에서 와블 테마 다운로드 또는 html 전체를 복사한다.
• Step 2. 테마 설정에서 HTML 편집 기존코드 전체 삭제한다.
• *만일 애드센스나 연결되어 있는 추적코드가 있다면 미리 옮겨둘 준비하자.
• Step 3. 와블 테마 V3 코드 복사 붙여넣기 한다.
• Step 4. 저장한다.
• Step 5. 테마 편집의 모바일 설정에서 데스크톱으로 설정한뒤 저장한다.
• *이유는 반응형 구조이기 때문
• Step 6. 설정에서 글 '기본 페이지의 최대 게시물 수'는 6개로 한다.

Wable Theme V3

이번 V3은 기존의 새로운 버전의 개념보단 '개선된 버전'이라고 생각한다.

기존의 V2에서 최적화 설계부터 디자인까지 고민을 많이 하였기 때문이다.

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

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

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

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

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

그럼 끝