Word Cracker의 잡다한 정보 모음

WPtouch 테마에 사용자 정의 CSS 코드를 추가하여 커스터마이징하는 방법

2

WPtouch는 사용 중인 워드프레스 사이트의 모바일 방문자들에게 심플하고 세련된 모바일 테마를 자동으로 전환해주는 워드프레스용 모바일 플러그인입니다. (플러그인 개발자에 의하면) Google에서 권장하는 이 플러그인은 Google Mobile 테스트를 통과하는 모바일 친화적인 버전을 즉시 활성화하고 모바일에 최적화되지 않은 버전 때문에 SEO 순위가 떨어지는 것을 방지해준다고 하네요.

제가 워드프레스를 시작할 당시에 반응형 워드프레스가 드문 편이어서 WPtouch와 같은 플러그인을 사용하여 테스트해본 적이 있습니다. 당시에는 그리 좋은 결과를 얻지 못했던 기억이 나네요.

최근에 WPtouch를 테스트해보니 예전보다 많이 기능이 향상되었다는 것을 느낄 수 있었습니다. 모바일 기기에서 반응형 워드프레스 사이트의 레이아웃이 마음에 들지 않거나 모바일에서 속도가 느린 경우에 WPtouch 같은 플러그인을 사용해볼 수 있을 것 같습니다.

W3 Total Cache 등 인기 무료 캐시 플러그인에서는 모바일 캐시 기능을 제공하지 않습니다. WPtouch를 사용하면 모바일에서도 캐시 기능을 사용할 수 있도록 설정할 수 있습니다. 자세한 내용은 다음 글을 참고해보세요.

또한, 사용자  CSS를 추가하여 모바일 테마를 커스터마이징하는 것도 가능합니다. 예를 들어, 다음과 같은 코드를 모바일 테마의 Custom CSS에 추가하면 사이드 너비의 페이지/글 제목이 제거됩니다.

.post-page-head-area.bauhaus {
display: none !important;
}

예를 들어, 특정 페이지 제목을 표시하고 싶지 않은 경우 사용해볼 수 있을 것입니다.

WPtouch에서 사용자 정의 CSS를 추가하는 방법

WPtouch에 사용자 지정 CSS를 추가하려면 워드프레스 관리자 페이지에서 WPtouch > 설정 > 테마 사용자 정의로 이동합니다.

위와 같은 그림이 표시되면 오른쪽에서 “사용자 정의하기로 이동“을 클릭합니다.

그러면 모바일 테마용 사용자 정의하기 화면이 표시됩니다.

그러면 위와 비슷한 화면이 표시됩니다. CSS를 추가할 수 있는 옵션에는 Custom CSS추가 CSS 등 두 개가 있습니다. 추가 CSS에는 코드를 추가해보면 코드가 작동하지 않습니다. Custom CSS를 클릭하여 사용자 정의 CSS를 추가하도록 합니다.

제대로 된 코드를 추가했다면 CSS 코드가 제대로 작동할 것입니다.

WPtouch 테마를 커스터마이징하는 방법은 다음 글을 참고해보세요.

모바일에서 SEO가 염려가 된다면 모바일 테마를 사용하는 대신 구글 AMP를 적용하는 방법도 고려해볼 수 있습니다.

참고:

Related Posts

2 Comments
  1. 김용훈 says

    요즘은 모바일 디자인에 신경을 많이 쓰게되더군요. 한편으로는 워드프레스에서 모바일 웹으로 편하게 변경하는 것도 관심을 가기게 됩니다.

    1. Word says

      WPtouch는 Premium 버전이 있어서 WPtouch 테마를 모바일 테마로 이용하려는 경우 프리미엄 버전도 고려해볼 수 있을 것 같습니다.

Leave A Reply

Your email address will not be published.