4のあなたのWordPressテーマのモバイル版を改善する方法

  • WordPress
  • 更新:Jul 29、2013

モバイル版WordPress

真実に直面しましょう、携帯機器はますます普及しています。 デスクトップブラウジングはもはや成長していませんが、実際には減少していますが、モバイルはすばらしいスマートフォンやテーブルで急速に成長しています。

Net MarketShareによると、モバイルデバイスはWebトラフィック全体の10%を占めています。 それは大きな数字であり、いくつかのニッチや国ではさらに大きくなっています。 しかし、ここで重要なのは、限られた画面スペースとモバイル接続が通常デスクトップ接続よりも遅いという事実のために、モバイルデバイスが必要とする特別な注意です。

多くのWordPressのテーマが反応しますが、われわれは常に改善の余地があるでしょう。 ここでは、4テクノロジーと、ユーザーのモバイルエクスペリエンスを向上させるためにそれらを使用する方法を見ていきます。

#1 Ol 'のメディアタイプ

数年前、IE5.5とIE6が生きていると見なされたとき、モバイルブラウザが飛び出し始めていました(そしてOperaは圧倒的に最高のものでした)。 CSSのような単純なものを処理する(JS、フラッシュなどは言うまでもありません)

したがって、メディアタイプが私たちを救うために来たとき、完全に分離したモバイルサイトを行うことは唯一の選択肢でした。 アイデアはシンプルで、提供しているファイルが「高度な」CSSルール(デスクトップの場合)またはシンプルなCSSルール(ハンドヘルドまたはプリントの場合)であるかどうかをブラウザに伝えることができます。 構文は次のように簡単です:

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

これは、モバイルサイト用にまったく異なるデザインを作成するのに適したオプションです。 しかし、あなたはそれを使うべきではありません。

メディアの種類は最初はよく聞こえるかもしれませんが、現代のスマートフォンではブラウザのサポートが不足しているという単純な問題がありました。 ほとんどの主要なプレーヤーは、この種の機能を無視していました(リンゴのような)
それからメディアの問い合わせが私たちを救うために来ます。

#2メディアクエリとモバイルエクスペリエンスの向上方法

これは、サイトのモバイル版を作成するための最も一般的な方法です。

ブラウザのサイズ、デバイスの画面サイズ、ピクセル密度(ええ、網膜!)、さらにはメディアタイプの怒りに基づいて、特定のポイントをターゲットにすることができます。

単純なメディアクエリを次に示します。

@media(最大幅:700px){ボディ{背景:赤; }}

これはプログラミングとほぼ同じです。 IF 「ブラウザの幅は700以下です」 THEN "次のCSSコードを適用する"。

子供のテーマ

/ themesに新しいフォルダーを作成し、twentyMobileという名前を付けましょう。 私は知っています、22人はすでにメディアクエリを使用していますが、私たちは学ぶためにここにいますよね?

ですから、style.cssファイルを作成してこのコンテンツを追加してください:

/ *テーマ名:モバイルテーマテンプレート:twentytwelve * / @import url(“ ../ twentytwelve / style.css”); @メディアハンドヘルド、唯一の画面と(最大幅:767px){nav ul {display:none;} nav select {display:block}}

上記では、子テーマCSSを作成し、モバイルデバイスのみを対象とするルールを追加しました。これにより、メインメニューが非表示になり、選択が表示されます。 セレクトにメニューがある場合、ul / liアイテムとして表示する代わりに、多くのスペースを節約できます

#3 jQuery Mobileによる極端な変革

jQueryモバイルは、最適化されたウィジェットとUI要素を使用して、モバイルエクスペリエンスを向上させるためのjQuery機能を使用する素晴らしいフレームワークです。

それを動作させるために必要なHTMLは非常にシンプルで、UIデータウィジェットを検出して作成するためにJSとJSのHTMLデータ属性を使用するだけです。

しかし、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 =“ページ”> <div data-role =“ヘッダー”> </div> <div data-role =“コンテンツ”> </div> <div data-role =“フッター”> </ div> </div>

このコードを使用すると、新しい「ページ」とヘッダ、コンテンツ、およびフッターの領域が作成されます。 ヘッダーとフッターは固定されており、コンテンツは現在のページに基づいて変更されるため、複数のページを一度読み込んで別のIDを割り当てることで非表示にすることができます。
折りたたみパネルの基本的なHTMLです:

<div data-role = "折りたたみセット"> <div data-role = "折りたたみセット" data-collapsed = "true"> <p>折りたたみ領域のコンテンツ</p> </div> </div>

そこでループを実装するのは非常に簡単ですよね? さて、コードは次のようになります。

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

選択メニューが改訂されました

上記の(メディアクエリセクションで)コードを使用すると、通常のメニューを非表示にして、特別な選択メニューを表示できます。 jQueryを使用すると、多くのPHPコードなしで追加できます(正直なところ、PHPはまったく必要ありません)。 新しいファイルを作成して、このコードをそこに追加しましょう。

jQuery(function($){// DOMの準備ができたら$(document).ready(function(){// select要素を作成しましょう$( "<select />").appendTo("nav"); / /新しいオプションを指定して、…$( "<option />"、{"value": ""、 "text": "Go to…"})に移動します。appendTo( "nav select");}); / $( "nav。メニューa")。each(function(){//メニューに表示される各LINKに対してvar aux = $(this); $( "<option /> "、{" value ":aux.attr(" href ")、" html ":aux.text();})appendTo(" nav select "); // selectに新しい項目を追加します)} ; //新しいアイテムを選択したときにドロップダウン機能をリダイレクトするように設定する$( "nav select")。change(function(){window.location = $(this).find( "option:selected")。val ();});});

これを行うと、新しいモバイルメニューが作成されますが、問題は、「通常の」バージョンのサイトでもjqueryモバイルがロードされていることです。 そのため、サイトの改善に役立つプラグインもいくつか使用できます。

#4 - モバイル検出器ですべてをラップする

この素晴らしいプラグインは、ユーザーのデバイスに応じて条件付きでテーマを読み込むことができる新しい機能を作成します。 そして、次のような簡単な条件付きルールで動作します:

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

MobileDTSメソッドは現在のデバイスをチェックし、単純な真偽を返します。 次に、新しいテーマを設定するためにswitch_theme()というマジック関数を使用できます。たとえば、MobileDTS :: is_switcher_enabled()のようなプラグイン条件を使用して、モバイルを使用するときにデスクトップバージョンへのリンクを作成できます。

結論

だから、WordPressテーマでモバイルプラグインや関数を使用したことはありますか? あなたはどちらの方法を好きですか? 恥ずかしがりや思いを共有しないでください!

ロチェスターオリベイラについて

私はブラジルのイタジュバ(MG)のウェブデザイナー兼起業家です。 あいまいなトピックについて書くこと、およびいくつかクールなことをすることが大好きです。

接続します。