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

728x90

워드프레스로 만든 사이트-
PC로 접속했을 때와 모바일로 접속했을 때를 구분하여
다른 내용을 보여주고 싶을 때....
BOLD BUILDER - wordpress page builder plugin

워드프레스 대부분의 테마들은 반응형 웹을 지원하기 때문에 데스크탑 환경에 맞춰서 만들어도 모바일에서 전혀 어색하지 않다. 모바일용 웹사이트를 별도로 만들지 않아도 된다는 것이 워드프레스의...아니 반응형 웹의 장점일 것이다.

문제는 모바일로 접속 했을 때와 데스크탑으로 접속했을 때 서로 다른 내용을 보여줘야 할 필요가 있을 때이다. 즉, 별도의 모바일 전용 웹페이지가 필요한 경우인데....나는 모바일 접속 화면에서의 "모바일 메뉴" 자체가 마음에 들지 않아서 별도의 모바일 전용 웹페이지의 필요성을 느낀다. 워드프레스에 반응형 웹을 지원하는 테마를 사용했다면 모바일로 접속한 상태에서 '메뉴' 버튼을 클릭하여 모든 메뉴를 확인할 수는 있지만 웹사이트 전체의 메뉴가 서너개 뿐이라면 처음부터 모든 메뉴를 보여주는 방식이 더 나을 수 있다. 굳이 '모바일 메뉴' 버튼을 클릭(터치) 하지 않더라도 모바일 환경에서도 데스크탑과 마찬가지로 모든 메뉴가 그냥 보여지는 방식을 선호한다. 메뉴의 수량이 몇개 안되기 때문에 모든 메뉴를 보여주는 것이 정답이라는 얘기는 아니며, 이는 웹사이트의 성격과 컨텐츠에 따라서 판단해야 할 것이다.

가장 손쉬운 방법은 '모바일 메뉴'에 관련된 플러그인을 설치하는 것일지도 모르겠다. 사실 이런류의 플러그인을 사용해 본 경험은 없지만 검색해 보면 수많은 플러그인이 존재한다. 또는 모바일 메뉴를 별도로 설정할 수 있는 테마들을 찾아서 활용하는 것도 좋은 방법이다. 그리고 페이지 빌더(wordpress page builder plugins)를 응용할 수도 있다. 페이지 빌더의 사용 목적이 접속자가 모바일기기로 접속했을 때를 대비해서 새로운 페이지를 만드는 것은 아니겠지만 반응형 레이아웃을 지원한다면 접속기기가 모바일인 경우에만 특정 컨텐츠(메뉴로 사용할 이미지나 텍스트 등)를 보여주거나 혹은 감출 수 있다. 자칫 손이 많이 가는 작업이 될 수도 있지만 하나의 페이지에서 데스크탑과 모바일 모두를 커버할 수 있다는 장점도 있다.

여기서 또하나 해결해야 할 문제는 접속자의 기기가 데스크탑인지 모바일인지를 알아내는 것이다. 단순히 브라우저의 해상도만으로 판단한다면 ~~놓치는 부분도 있겠지만~~ 간단하게 해결할 수 있다. 내가 만든 웹사이트가 모바일에서는 어떻게 보이는지 웹사이트 전체의 레이아웃을 보여주는 Responsive Design Checker를 활용해 보자.

화면 왼쪽의 기기목록을 보면 최근에 출시된 고해상도를 지원하는 스마트폰이 누락된 듯 하지만 갤럭시 S7조차 이미 FHD(1080×1920)이상의 QHD(1440×2560)의 해상도를 지원한다. 하지만 위의 사이트에서는 360×640의 해상도라고 나와있다. 기기의 물리적인 해상도와 브라우저 해상도의 차이인 듯 한데... 아래의 사이트를 pc에서 접속하여 창(웹브라우저)의 크기를 변경하면 그와 동시에 웹브라우저의 해상도(창의 크기)가 변경되는 것을 확인할 수 있다. 그리고 스마트폰으로 접속하여 해상도를 확인해 보았다. 홍미노트 9s는 393×873, LG Q6는 360×720, 갤럭시 S8은 360×740, 갤럭시 노트10은 412×869 임을 확인할 수 있었다.

아래의 웹사이트에서 얻은 결론은 가로 480px 이하는 모두 일반적인 스마트폰이라고 간주하면 될 것 같다.

developer.android.com/training/multiscreen/screensizes

www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

모바일로 접속했을 때에도 데스크탑으로 접속했을 때와 마찬가지로 화면에 메뉴를 보여주고 싶은 것 뿐이었는데 너무 멀리 온 느낌이다. 계속 플러그인을 설치하고 테스트를 하면서 글을 작성하다보니 결국은 모바일 접속 화면에서의 메뉴(모바일 메뉴)는 워드프레스 기본값도 쓸만하다는 생각이다 -_-;

웹페이지 마다 별도의 메뉴를 만들어 놓고, 그 메뉴들이 모바일로 접속했을 때에만 화면에 출력되는 방식은....나중에 테스트용 웹사이트를 완성지은 후에 조금씩 정리해 봐야겠다. 가끔 사용하던 Max Mega Menu가 오늘따라 왜이리 근사해 보이는지..... 그리고 WP Bottom Menu 는 꼭 사용해 볼 생각이다. 역시나 재미있는 플러그인이 참 많다.

Bold Builder 플러그인은 내가 처음으로 사용해본 wordpress page builder이다. 페이지 빌더 자체를 처음 설치해 봤기에 조금은 생소한 면이 있지만 section별로 만들어 놓은 row와 column 에 넣을 수 있는 컨텐츠는 아래와 같이 많다.

여기서 특정 섹션이나 그 안에 포함된 row 혹은 그 안의 column 혹은 element별로 즉, 세세한 단위별로 해상도에 따라서 화면에서 Hide할 수 있는 옵션이 있다.

위의 예에서 첫 번째 section의 이미지 슬라이더는 접속자의 해상도(width)가 769px 이상이라면 보이지 않는다. 잘 응용하면 충분히 모바일 접속에서만 화면에 메뉴가 보이게 만들 수 있을 것이다.

워드프레스를 몰랐던 시절에는 자바스크립트(navigator.userAgent.match)를 이용해서 접속자의 기기가 모바일이라면 모바일 전용 웹페이지가 열리게끔 했었는데....이제는 거의 사용할 일이 없어진 것 같다. 물론 검색해보면 이러한 플러그인 조차 분명히 존재할 것 이라고 생각한다....

<html>
<head><title></title>

<script type="text/javascript">
<!--
if(navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
        location.href="http://mobile.pius/";
}
//-->
</script>


</head>
<body>
<h3> ★안녕하세요★ </h3>
.....
<body>
</html>

위의 코드가 모바일로 접속했을 때에는 mobile.pius로 연결되며, pc로 접속 했을 때에는 "★안녕하세요★"가 출력된다.

또는 아래와 같이 스크립트 파일을 별도로 만들어서 사용할 수도 있다.

<html>
<head><title></title>

<script language=JavaScript src="mobile.js"></script>

</head>
<body>
<h3> ★안녕하세요★ </h3>
.....
<body>
</html>

같은 디렉토리에 mobile.js를 만들고 그 내용은 아래와 같이 하자.

if(navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)){
        location.href="http://sample3.수리.cc/m_mobile.html";
}

이에 대한 자세한 예제소스를 담은 블로그가 있다.
https://rayhon.tistory.com/198

모바일 홈페이지로 자동 이동되는 소스

출처 : http://kiss7.tistory.com/316 이 자동이동 코드소스는 홈페이지에 PC로 접근했는지, 홈페이지에 스마트폰 등 모바일 기기로 접근했는지를 판단하여 해당하는 페이지로 이동시켜 주는 소스입니다

rayhon.tistory.com

22.01.07 - [Wordpress/plugin] - 워드프레스에서 열(column)의 수량(개수)을 설정(변경/고정)하는 방법

워드프레스에서 열(column)의 수량(개수)을 설정(변경/고정)하는 방법

반응형과 css. html과 php, css에 대한 기초지식이 전혀 없는 나같은 사람은 워드프레스의 플러그인에 대한 의존도가 높을 수 밖에 없다. 아직까지(?)는 워드프레스가 만능(??)이다. 웹프로그래밍을

aegypius.tistory.com