워드프레스-하나의 사이트에 두 개 이상의 테마 사용하기.

부제 : 워드프레스-PC와 모바일의 화면을 다르게 설정하기 - (2)

대략 3년 전에 이 제목으로 글을 썼었는데.....그 이후로는 거의 elementor를 사용하고 있다.

2021.02.14 - [Wordpress/plugin] - [워드프레스-PC와 모바일의 화면을 다르게 설정하기]

[워드프레스-PC와 모바일의 화면을 다르게 설정하기]

---

워드프레스로 작업을 하다보면 PC에서는 괜찮은데 모바일에서는 어색하게 보이는 경우가 종종있다. 기본이 반응형이다 보니 편리하기도 하지만 모바일에서의 컬럼의 갯수나 위치 등을 결국 다시 설정해야 하는 경우가 많다. 물론 elementor의 편집화면은 실시간으로 pc, tablet, phone에서 어떻게 보이는지 확인하고 수정할 수 있어서 유리하다.

최근 디자인이 독특한 테마가 눈에 띄어서 사용했는데 PC환경에서는 보기 좋았는데 모바일에서는 많이 어색해 보였다.  그래서 하나의 사이트에서 pc로 접속했을 때와 모바일로 접속했을 때 각기 다른 테마를 적용시킬 수 있는지 검색해 보았다. 워드프레스로 만든 하나의 사이트를 pc로 접속했을 때와, 태블릿으로 접속했을 때, 그리고 모바일 폰으로 접속했을 때 각기 다른 테마를 적용할 수 있는 플러그인이 존재한다.

(1) Any Mobile Theme Switcher

이 플러그인은 접속 브라우저가 모바일인 경우에 미리 설정한 테마로 적용할 수 있다. 아래와 같이 모바일 브라우저를 자동으로 감지하여 접속 기기의 종류에 따라서 적용할 테마를 선택할 수 있다. 물론 테마는 미리 설치해두어야 한다.

아이폰, 안드로이드폰 등 접속 기기에 따라서 다른 테마를 설정하는 것이 가능하다. 위의 옵션중에서 데스크탑 / 테블릿 / 폰 정도로만 나누면 충분할 것이다. 기본 테마는 PC(데스크탑)이며 나머지는 위의 옵션에서 태블릿(탭)과 모바일만 구분해 주면 된다. 옵션의 하단에는 PC와 모바일을 스위칭하는 버튼을 표시하는 기능도 있다. 사이트의 하단에 'PC화면 / 모바일화면' 등으로 선택할 수 있는 옵션버튼을 보여주는 것이다. 가끔 이런식으로 보여주는 사이트가 눈에 띄는데 조금 촌스럽다고 느껴지는 건... -_-;

(2) Multi Device Switcher

이 플러그인 또한 위에서 소개한 Any mobile theme switcher와 동일한 기능을 수행한다. 설정화면은 아래와 같다.

접속 기기(환경)별로 미리 설치한 테마중에서 선택할 수 있다. 첫 번째 플러그인인 Any Mobile Theme Switcher를 사용하고 있는지만 어떤 것을 쓰든지 큰 차이는 없었던 것으로 기억한다. 아직 많은 테스트를 해본게 아니라서...-_-;

(3) Equivalent Mobile Redirect

이 플러그인은 모바일 접속시 외부 URL로 redirect하는 플러그인이다. 즉 PC(desktop)와 모바일을 분리해서 별도의 사이트로 만들 수 있게 해준다. 이러한 설정이 필요한 경우가 있을지는 모르겠지만...재미있는 플러그인이다. 서두에 언급했던 이전글의 가장 마지막 부분에서 잠깐 언급했던 내용과 일치한다. 이전 글에서는 html과 자바스크립트로 구현했다면 이 플러그인은 워드프레스에서 구현해 준다.

* 참고로 (1), (2)번 플러그인 모두 오늘자 워드프레스의 최종버전에서 정상작동 한다. (3)번 플러그인은 정상작동 하는 것만 확인하고 지웠던 것 같다.....