워드프레스 모바일 버전 레이아웃 조정하기
요즘 나오는 대부분의 워드프레스 테마는 반응형(Responsive)으로서 별도의 수정 없이 모바일 기기에서도 최적화되어 나오는 경우가 많습니다. 모바일 버전에서의 레이아웃을 조정하기를 원하는 경우 CSS의 미디어쿼리(Media Query)를 사용하여 제어할 수 있습니다.
워드프레스 모바일 버전 레이아웃 조정하는 방법
페이지 빌더를 사용하거나 페이지 빌더가 탑재된 테마를 사용하면 수월하게 모바일과 PC 버전의 레이아웃을 다르게 만들 수 있습니다. 자세한 내용은 "워드프레스 모바일과 PC 레이아웃 다르게 만드는 방법"을 참고해보세요.
예를 들어, 화면(브라우저 창) 크기가 500px보다 작을 때 배경색을 바꾸고 싶다면 다음과 같은 CSS 코드를 사용할 수 있습니다.
// Only applies to mobile device screens whose maximum width is 500px
// 최대 폭이 500px인 모바일 기기 화면에만 적용
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
여기에서 직접 테스트해볼 수 있습니다. 위의 코드는 max-width(최대 폭)가 500px인 화면(즉, 500px보다 작은 화면)에만 적용하라는 의미가 됩니다.
// Only applies to mobile device screens whose minimum width is 768px
@media only screen and (min-width: 768px) {
/* your code */
}
이 코드는 min-width(최소 폭)가 768px인 화면(즉, 768px보다 큰 화면)에만 적용하라는 의미입니다.
여기에서 아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리가 소개되어 있으니 참고하시기 바랍니다.
그리고 모바일용 기기에만 특정 코드를 적용하고 싶은 경우에 WordPress에서 지원하는 wp_is_mobile() 함수를 사용할 수 있습니다. 하지만 wp_is_mobile()을 사용하면 스마트폰뿐만 아니라 태블릿도 모바일 기기로 감지하며, CSS 미디어 쿼리나 플랫폼별 스타일링을 대체하지 않습니다.
wp_is_mobile() 함수를 사용할 경우 이 함수의 버그를 수정하는 플러그인을 함께 사용하는 것을 고려해볼 수 있습니다.
안녕하세요 정보꾸러미님! 다름이 아니고 새로 오픈한 워드프레스가 모바일 화면에서는 로딩이 되지 않는 에러를 겪고 있습니다.
데스크탑에서는 정상적으로 접속이 되나 모바일에서 접속을하면 그냥 흰화면만 나오고 레이아웃 페이지가 나오질 않습니다.. 물론 speedpage에서도 ?점수가 나오고 있는 상황이구요! 해결 방안이 있을까요? 포스팅을 두개밖에 하지 않은 상황이라 백업을 해야 하는건가 싶기도 한데 ㅠㅠ 해결방안 있으면 도와주세요!
플러그인을 모두 비활성화한 후에도 문제가 되는지 체크해보시겠어요?
클라우드웨이즈의 경우 플러그인을 비활성화한 후에 서버 캐시도 삭제해보세요.
https://avada.tistory.com/2947
안녕하세요? 엘리멘토 기반으로 사이트를 제작했는데, 모바일에서는 게시글 내부의 이미지가 나오지 않습니다.
이 현상 어떻게 해결할 수 있을까요?
엘리멘터 페이지 빌더를 사용하는 경우 기기 해상도별로 레이아웃을 다르게 설정할 수 있습니다. 다음 글에서 Elementor Page Builder 부분을 참고해보세요:
https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%eb%aa%a8%eb%b0%94%ec%9d%bc%ea%b3%bc-pc-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83/
제 블로그를 모바일에서 젯팩으로 보면 첫 화면은 괜찮은데, 글 하나를 선택해서 들어가면 왼쪽으로 몰리면서 폭이 확 좁아져 보입니다.
젯팩 말고 전체 사이트 보기로 들어가면 양쪽 마진이 들어가고 가운데로 몰리면서 폭이 확 줄어들구요.
첫 화면처럼 정상적으로 보이게 하는 방법이 있을까요?
안녕하세요?
요즘 테마는 대부분 반응형이기 때문에 굳이 젯팩의 모바일 테마 기능을 사용할 필요는 없을 것 같습니다.
JetPack에서 ‘모바일 테마‘ 기능을 비활성화하는 것을 고려해보시기 바랍니다.
네. 젯팩 모바일을 비활성화해도 역시 좁아 보이는 것은 마찬가지입니다.
제가 쓰고 있는 테마가 원래 그런가 봅니다. 사이트 전체 폭은 꽉 차지만 글 본문 부분의 폭만 좁은 거죠. 이걸 어떻게 해결해야할지 연구해봐야겠습니다.
안녕하세요?
현재 소형 화면의 경우 container가 80%로 표시되도록 설정되어 있어서 그렇습니다.
@media all and (min-width: 480px) and (max-width: 768px) {.single .container {
width: 100% !important;
padding-right: 20px !important;
padding-left: 20px !important;
}
}
@media all and (max-width: 479px) {
.single .container {
width: 100% !important;
padding-right: 10px !important;
padding-left: 10px !important;
}
}
위 코드를 넣어서 테스트해보시겠어요?
padding 값은 적절히 조정해보시기 바랍니다.
고맙습니다. padding값을 5로 넣었더니 해결되었습니다.
그런데 공지나 방명록, 전체글 같은 페이지의 폭은 전과 다름없이 좁게 보입니다. 응용력이 제로네요. ㅜ
.single을 삭제한 후에 테스트해보시기 바랍니다.
안녕하세요. 저는 일반 컴퓨터 (768 사이즈 이상)의 모든 스크린에서 모바일 사이즈(정확히 말하면 테블릿 사이즈) 화면을 출력하고 싶습니다. css에 명령어만 넣어서 항상 모바일 버전만을 노출 시키는 방법(아래 ? 자리)이 있을런지요? 아울러 언제나 유용한 정보 감사합니다. @media screen and (min-width:512px) and (max-width:2800px) { ? }
안녕하세요?
PC에서 모바일 버전이 나오면 보기에 좋지 않을 것 같은데요. 그렇게 해야 하는 이유가 있나요?
CSS를 체크하여 태블릿 부분의 CSS를 차일드 테마 내의 style.css로 이동시키고, breakpoint를 매우 높게 설정하면 될 것 같습니다.
안녕하세요. 답변 감사드립니다. 개인적인 운영 계획이긴 한데요. 프로그래머는 아니다 보니 실력이 부족하고 시간도 없다보니... 한가지에 집중해야 하는데 사업특성상 PC보다 모바일이 사용자가 2배이상으로 조사가 되어서요. 참고로 저와 같은 형태로 진행 하는 업체가 http://mefactory.co.kr/m2/index.php? 여기더라구요. 제가 만든 페이지에선 결재단이 700 미만에서 깨져 버립니다. 해서 아예 모바일 버전만 노출하고 싶어서요... 알려주신데로 잘 적용해 보겠습니다. 감사합니다.
모바일 전용 테마가 있는데 도움이 될지는 모르겠네요.
https://1.envato.market/039PM
링크된 사이트를 확인해보았는데 body 폭을 좁게 만들었네요.
일반 테마이더라도 body 폭을 조정하면 비슷한 효과를 얻을 수 있지 않을까 생각됩니다.
가령 Enfold(https://www.thewordcracker.com/go/enfold ) 테마 중에서 Small Blog 데모가 body 폭이 좁은 편입니다. 다른 테마의 경우에도 사이트바를 날리고 body 폭을 좁게 하면 비슷하게 만들 수 있을 것 같습니다.
안녕하세요ㅠ 작업중인데...홈페이지에선 제대로 잘 보이는데 반응형 테마를 쓰는데 이게 월랜 잘 보이다가 모바일에서 ㅂ반응형이 풀린듯합니다....ㅠ작업한 사람한테 물어보니 특정 플러그인 문제라고해서 플러그인 삭제 했는데도....햄버거 메뉴가 왼쪽위에 있엇는데 막 가운데 와있고 문제가 많네요... http://www.thebigstudy.co.kr/ 이 페이지 입니다...부탁드립니다...
안녕하세요?
현재 사이트에서 폰트를 제대로 디코딩하지 못하는 오류가 발생하고 OTS Parsing error도 나타나고 있네요.
잘 되다가 안 된다는 것은 그 사이에 무슨 변경/업데이트/추가/삭제 등의 작업이 있었을 것입니다. 그 부분을 체크해보시기 바랍니다.
안녕하세요ㅠ작업하는데 개편하다가 문제가...thefox 라는 테마를 사용하는데 웹에선 문제없는데 모바일버전에서 반응형이 완전히 풀리고 햄버거 메뉴도 가운데로 오고,....어떤게 문제인지ㅠㅠ계속 찾아봐도 안나오고 답답한 마음에 댓글 적어봅니다...
http://www.thebigstudy.co.kr 입니다....ㅠ
안녕하세요 현재 작업중인데 pc에서 보면 문제가 없는데 tablet 이나 mobile로 보면 화면이 오른쪽으로 쏠려서 나오는데 무엇이 문제 일까요? the simple theme를 사용 했고요. 지금은 test 중인데 상기 문제가 해결 되지 않고 있습니다. heida.dothome.co.kr 로 확인 가능합니다. 바쁘시겠지만 고견 부탁 드리겠습니다. 감사합니다.
안녕하세요? CSS 파일에 다음 라인을 찾아서 수정해보시기 바랍니다.
.header_7 .viewport{padding-left:280px ;}
안녕하세요. 홈페이지를 만들었는데 모바일버전으로 확인하니 문제가 있더라구요.
안녕하세요?
우선 브라우저의 캐시를 지워보시고 문제가 나타나는지 확인해보시기 바랍니다.
그래도 문제가 발생한다면 플러그인 또는 테마 제작자에게 문의하셔야 할 것 같습니다.
가령 썸네일을 누르면 큰 이미지가 열리는 기능을 lightbox라고 하는데요, 플러그인으로 구현한 경우 플러그인 자체의 버그일 수 있습니다. 테마에서 지원하는 경우에도 마찬가지일 수 있고요.