WordPress 테마의 모바일 버전을 개선하는 4 방법

  • 워드 프레스
  • 업데이트 : 7 월 29, 2013

모바일 버전 WordPress

모바일 기기의 인기가 점차 커지고 있습니다. 데스크톱 검색은 더 이상 성장하지 않고 있으며 실제로 감소하고 있습니다. 모바일은 멋진 스마트 폰과 테이블로 빠르게 성장하고 있습니다.

Net MarketShare에 따르면 모바일 장치는 전체 웹 트래픽의 10 %를 나타냅니다. 그것은 큰 인물이며 일부 틈새 시장과 국가에서는 더 커졌습니다. 그러나 여기서 중요한 것은 화면 공간이 제한되어 있고 모바일 연결이 일반적으로 데스크톱 연결보다 느리기 때문에 모바일 장치에 필요한 특별한주의입니다.

많은 WordPress 테마는 반응이 있지만, 우리는 항상 개선의 여지가 있습니다. 여기서는 4 기술과 사용자를위한 모바일 환경을 개선하기 위해이를 사용하는 방법을 살펴 보겠습니다.

#1 Ol '미디어 유형

몇 년 전, IE5.5와 IE6가 살아있는 것으로 여겨졌을 때, 모바일 브라우저는 이제 막 튀어 나오기 시작했습니다. (오페라는 지금까지 최고의 것이 었습니다.) 사람들은 그 당시의 전화가 그저 돌아 왔기 때문에 깨어 난 것을 깨닫기 시작했습니다. CSS (JS, 플래시 등은 말할 것도 없습니다)와 같은 간단한 것들을 처리하십시오.

따라서 완전히 분리 된 모바일 사이트를 운영하는 것이 미디어 유형이 우리를 구하기 위해 나온 유일한 옵션이었습니다. 아이디어는 간단했다. 제공하는 파일이 "고급"CSS 규칙 (데스크탑 용)인지 간단한 CSS 규칙 (휴대용 또는 인쇄용)인지 브라우저에 알릴 수 있었다. 구문은 다음과 같이 간단합니다.

<link rel = "stylesheet"href = "handheld.css"type = "text / css"media = "handheld"/>

이것은 모바일 사이트에 대해 완전히 다른 디자인을 만드는 데 좋은 옵션이 될 수 있습니다. 그러나 당신은 단지 그것을 사용해서는 안됩니다.

미디어 유형은 처음에는 좋았지 만 현대 스마트 폰에는 브라우저 지원이 부족하다는 간단한 문제가있었습니다. 밖에있는 대부분의 주요 선수들은 이런 종류의 기능을 무시하고있었습니다 (사과와 같은)
그런 다음 미디어 쿼리를 통해 우리를 구할 수 있습니다.

#2 미디어 쿼리 및 모바일 환경 개선 방법

이것은 모바일 버전의 사이트를 만드는 가장 보편적 인 방법입니다.

브라우저 크기, 장치 화면 크기, 픽셀 밀도 (예, 망막!) 및 미디어 유형에 따라 특정 지점을 타겟팅 할 수 있습니다.

다음은 간단한 미디어 쿼리입니다.

@ 미디어 (최대 너비 : 700px) {body {background : red; }}

이것은 프로그래밍과 거의 같습니다. IF '브라우저 너비가 700 이하'입니다. 그리고는 "다음 CSS 코드 적용".

어린이 테마

너의 / themes 안에 새로운 폴더를 만들고 그것에게 twentyMobile이라고 지명하게하자. 이미 알고 있긴하지만, 스물 두 명은 이미 미디어 쿼리를 사용하고 있습니다.하지만 우리는 여기 배우기 위해 왔습니다. 그렇지 않습니까?

따라서 style.css 파일을 만들고이 내용을 추가하십시오.

/ * 테마 이름 : 모바일 테마 템플릿 : twentytwelve * / @import url ( "../ twentytwelve / style.css"); @media 핸드 헬드, 화면 및 (최대 너비 : 767px) {nav ul {display : none;} nav select {display : block}}

위와 같이 하위 테마 CSS를 만들었으며 모바일 장치 만 대상으로하는 규칙을 추가했습니다. 그러면 주 메뉴가 숨겨지고 선택 항목이 표시됩니다. 따라서 메뉴를 선택하면 ul / li 항목으로 표시하는 대신 많은 공간을 절약 할 수 있습니다

#3 jQuery Mobile을 통한 극단적 인 변모

jQuery 모바일은 jQuery 기능을 사용하여 최적화 된 위젯과 UI 요소로 모바일 경험을 향상시키는 멋진 프레임 워크입니다.

HTML은 작동하기 쉽고, HTML 데이터 속성과 JS를 사용하여 UI 위젯을 탐지하고 생성하기 만하면됩니다.

그러나 WordPress 블로그에서 jQuery Mobile을 올바르게 작동 시키려면 먼저 jQuery 모바일 스크립트를 호출해야합니다. 우리 아이 테마로 돌아가서 메인 테마의 header.php 파일을 복제하고 head 태그에 다음 라인을 추가하십시오 :

<link rel = "stylesheet"href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

상용 제안의 경우 wp_enqueue _script를 사용해야하므로 사이트에 라이브러리가 중복되는 것을 피할 수 있습니다.
이제 우리는 당신이 원하는 거의 모든 UI 요소로 놀 수 있습니다. jQuery 모바일에는 테마에서 사용할 수있는 많은 UI 위젯이 있지만 페이지와 접을 수있는 패널을 적용 해 보겠습니다.
다음은 기본 HTML 구문입니다.

<div data-role = "page"> <div data-role = "header"> </ div> <div data-role = "content"> </ div> div> </ div>

이 코드를 사용하여 새 "페이지"와 머리글, 내용 및 바닥 글 영역을 만듭니다. 머리글과 바닥 글은 고정되어 있으며 내용은 현재 페이지에 따라 변경되므로 한 번에 여러 페이지를로드하고 다른 ID를 지정하여 숨길 수 있습니다.
접을 수있는 패널의 기본 HTML입니다.

접을 수있는 영역 콘텐츠 </ p> </ div> </ div> <div data-role = "collapsible-set"> <div data-role = "collapsible-

루프를 구현하는 것은 매우 간단합니다. 그렇지 않습니까? 자, 코드는 다음과 같습니다.

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible"data-collapsed = "true"> </ div> <? ...}?> </ div>

선택 메뉴가 개정되었습니다.

위에서 본 코드 (미디어 쿼리 섹션에서)를 사용하면 평상시의 메뉴를 숨기고 특별한 선택 메뉴를 표시 할 수 있습니다. jQuery를 사용하면 많은 PHP 코드없이 추가 할 수 있습니다 (솔직히 PHP는 전혀 필요하지 않습니다). 새 파일을 만들고 거기에이 코드를 추가하십시오.

jQuery (function ($) {// DOM이 준비되었을 때 $ (document) .ready (function () {// select 요소를 생성하자 $ ( "<select />").appendTo("nav"); / / 새로운 옵션을 사용하면 $ { "option />", { "value": "", "text": "...}"}) appendTo ( "nav select");}) / 이제 우리는 select가 생성되도록 만들었습니다 : $ ( "nav .menu a") 각 (function () {// 메뉴에서 찾은 각 LINK에 대해 var aux = $ (this); $ ( "<option appendTo ( "nav select"); // select에 새 항목을 추가하십시오.}) {{{{{{value}}} ; // 새로운 아이템 $ ( "nav select")를 선택했을 때 리다이렉트하도록 드롭 다운 기능을 설정합니다 .. change (function () {window.location = $ (this) .find ( "option : selected"). ();});});

이렇게하면 새로운 모바일 메뉴가 생성되지만 문제는 "일반"버전의 사이트에서도 jquery 모바일을로드하는 것입니다. 그래서 우리 사이트를 개선하는 데 도움이되는 몇 가지 플러그인을 사용할 수 있습니다.

#4 - Mobile Detector로 모든 것을 마무리하세요.

이 멋진 플러그인은 사용자 장치에 따라 조건부로 테마를로드 할 수있는 새로운 기능을 만듭니다. 그리고 그것은 다음과 같은 간단한 조건부 규칙들과 함께 작동합니다 :

<? php if (MobileDTS :: is ( 'android')) {....} elseif (MobileDTS :: is ( 'mobile')) {....} else {}?>

MobileDTS 메서드는 현재 장치를 확인한 다음 간단한 true / false를 반환합니다. 그런 다음 switch_theme ()이라는 마법 함수를 사용하여 새 테마를 설정하고 MobileDTS :: is_switcher_enabled ()와 같은 플러그인 조건을 사용하여 모바일을 사용할 때 데스크톱 버전에 대한 링크를 만들 수 있습니다.

결론

그렇다면 WordPress 테마에서 모바일 플러그인이나 기능을 사용해 본 적이 있습니까? 어떤 방법을 선호하십니까? 부끄러워하지 말고 생각을 나누십시오!

로체스터 올리베이라의 기사

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.