워드프레스 위젯 사이드바 모바일 숨기기 및 순서변경

워드프레스를 이용해 홈페이지를 제작당히 모바일 친화적인 테마덕분에 홈페이지 디자인부터 인터넷검색최적화 와 워드프레스 위젯 디자인등 편리한 부분도 있지만 단점도 존재합니다.

그리고 해상도가 높은 PC버전에는 사이드바 위젯 이용해 보다 다양한 컨텐츠를 꾸밀수 있지만 비교적 화면사이즈가 작고 집중도가 집약되는 모바일 AMP 버전으로 접속시에는 워드프레스 위젯 사이드바는 가독성이나 홈페이지 속도를 저하시키는 요인으로 발생할 수 있습니다.

워드프레스 위젯 사이드바 모바일 숨기는 방법

그렇기 때문에 저는 모바일에서는 사이드바 위젯을 숨기는것을 추천하며 제 홈페이지에도 똑같이 세팅이 되어 있습니다.

이를 해결할 수 있는 방법은 플러그인을 이용하면 간단합니다.

워드프레스 위젯 사이드바 플러그인

사이드바 위젯 활성화 및 비활성화 할수 있는 플러그인 Widget Logic
Widget Logic 플러그인

워드프레스 플러그인에서 Widget Logic 다운로드 후 설치해줍니다.

워드프레스 위젯 사이드바 모바일 숨기는 방법
외모 – 위젯 사이드바 비활성화 설정

다음 테마디자인 – 위젯에서 만들어둔 사이드바를 클릭하면 하단에 Widget Logic 이라는 부분이 추가된것을 볼 수 있습니다.

이 부분에 각각 PC버전에서만 보이게 하고 싶은지 모바일 상태에서만 보이게 할것인지 아래에 맞게 입력합니다.

  • wp_is_mobile() :입력 모바일에서만 출력
  • !wp_is_mobile() : 입력 PC에서만 출력

저는 모바일에서 출력이 안되길 바라기 때문에 !wp_is_mobile() 입력했습니다.

아바다 테마 사이드바 순서 변경

Avada 테마 모바일 사이드바 설정
Avada 테마 모바일 사이드바 설정

그리고 제가 사용하는 아바다 테마에서는 모바일 레이아웃에 대해 사이드바 순서를 변경할 수 있습니다.

이렇게 사이드바가 보이게 하고 싶지 않다면 상단에 있는 사이드바를 아래로 내려주는것으로도 사이드바가 가장 위에 표시되는 문제를 해결할 수 도 있습니다.

워드프레스 참고포스팅

You may also like...

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

노랗 목차