20.モバイル用テーマ－Jetpack by WordPress.com

2014/01/20 2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、
ここでは「モバイル用テーマ」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

モバイル用テーマ

モバイル用テーマ

スマートフォンからアクセスしている読者もたくさんいる可能性があります。小さな画面でも読みやすくしておくことも重要です。

Jetpack のモバイルテーマは小さな画面にも最適化されています。現在のテーマのヘッダー画像、背景、ウィジェットを使い、カスタム表示に対応します。投稿フォーマットにも対応しており、スマートフォンでも写真やギャラリーを美しく表示できます。

iPhone、Android、Windows Phone などのモバイルデバイス上の読者には、自動的に通常サイト表示オプション付きのモバイル対応テーマが提供されます。モバイル対応テーマは、上記のボタンから有効化・無効化できます。

JetPackモバイル用テーマ詳細

環境

今回、表示の確認を行った環境は以下の環境になります。
ご利用のテーマなどによっては、表示や動作が異なる場合がありますことをご了承ください。

WordPress： 3.7.1
テーマ： Twenty Twelve 1.3
iOS: iPhone4S 64G
Android OS: FUJITSU ARROWS FJL21
（キャプチャ画像は一部、エミュレータ使用しています）

設定変更

モバイル用テーマを有効にした場合でも、サイドメニューなどに設定メニューは表示されません。
設定の変更は、JetPackの機能を有効・無効にする画面より行います。
[設定]をクリックします。

モバイル用テーマ設定

[設定]をクリックするとモバイル用テーマの設定画面が表示されます。

モバイル用テーマ設定画面

抜粋

抜粋の設定では、投稿の抜粋表示を自動で行うか否かを設定します。
設定は以下の通りで、初期状態では全文表示となっています。

フロントページとアーカイブページで抜粋を有効化する
フロントページとアーカイブページで全文を表示する（デフォルト）

この設定には注意が必要で、
投稿に<!–more–>タグを設定し抜粋表示を行っている投稿はこの設定に関わらず抜粋表示が行われます。

フロントページとアーカイブページで抜粋を有効化する

この設定を有効にすると、フロントページとアーカイブページ（投稿ページ）で抜粋表示が行われます。

スマートフォンから表示を確認すると以下のように表示されます。

モバイル用テーマ抜粋表示

この設定による抜粋表示には「<!–more–>タグ」は必要ありません。
投稿に<!–more–>タグが設定されている場合には、
以下のように<!–more–>タグを優先して抜粋表示されます。

モバイル用テーマ抜粋表示＋moreタグ抜粋

フロントページとアーカイブページで全文を表示する（デフォルト）

この設定を有効にすると、フロントページとアーカイブページ（投稿ページ）でも抜粋表示されません。

モバイル用テーマ全文表示

個別に投稿内に「<!–more–>タグ」を設定している場合には、
<!–more–>の位置で抜粋表示が行われます。

モバイル用テーマ全文表示＋moreタグ抜粋

モバイルアプリの広告

WordPress モバイルアプリの広告をモバイルテーマのフッターに表示します。
広告と言ってもテキストが挿入され、アプリダウンロードのリンクが表示されます。

iOS:　Now Available! Download WordPress for iOS
Android OS:　Now Available! Download WordPress for Android

モバイルアプリ広告表示

テーマによるモバイル表示（無効）

モバイル用テーマの表示についてご紹介する前に、
WordPressとスマートフォン・フューチャーフォン（ガラパゴス携帯・ガラケー）の関係を補足しておきます。

WordPressのテーマにはRWD（Responsive Web Design）に対応したテーマがあります。
今回のTwenty Twelveもその一つです。

RWDに対応しているテーマの場合、スマートフォンなどでアクセスをした場合でも、
画面のサイズに合わせて画面の表示が行われます。

その為、以下のような表示を確認することができます。
※ここでは「モバイル用テーマ無効」は無効です。

PCによる表示

TOPページ（フロントページ）

PC表示(Twenty Twelve)

スマートフォンによる表示

TOPページ（フロントページ）

スマートフォン表示(Twenty Twelve)

ここではエミュレータ使用、以下参考
サイト確認にはスマートフォンエミュレータが便利）

フューチャーフォン（ガラケー）による表示

TOPページ（フロントページ）

フューチャーフォン(Twenty Twelve)

ここではエミュレータ使用、以下参考
サイト確認にはガラパゴス携帯(フューチャーフォン)エミュレータが便利

モバイルサイトに対応しているテーマを利用している限りは、
特にモバイル対応の意識も必要ないくらいです。

モバイル用テーマによる表示（有効）

では、次はモバイル用テーマを有効にして表示を確認します。

PCによる表示

TOPページ（フロントページ）
※変化しません

スマートフォンによる表示

TOPページ（フロントページ）

スマートフォン表示(モバイル用テーマ)

ここではエミュレータ使用、以下参考
サイト確認にはスマートフォンエミュレータが便利）

フューチャーフォン（ガラケー）による表示

TOPページ（フロントページ）

フューチャーフォン(モバイル用テーマ)

ここではエミュレータ使用、以下参考
サイト確認にはガラパゴス携帯(フューチャーフォン)エミュレータが便利

結構すっきりしたデザインになります。

これが「モバイル用テーマ」の表示です。

モバイル用テーマ表示のキャンセル

モバイル用テーマで表示しているサイトを、
モバイル用テーマを利用していない表示にすることができるようになっています。

サイトを閲覧している際に、最下部に表示されている[View Full Site]をクリックすると、
モバイル用テーマを利用しない表示にすることができるようになっています。

[View Full Site]をクリックすると、モバイルテーマを利用しないサイト表示になります。
最下部には「モバイルサイトを表示」と表示されます。

View Full Site

このようにして、テーマに一部依存する部分もありますが、
モバイル端末でアクセスされた際に、
モバイル用テーマを有効化すると見栄えを簡単にモバイル端末向けにすることができます。

さいごに

スマホ対応という意味ではその他のプラグインで対応されている方が多い印象ですが、
こうやってJetPackを利用することで、簡単にモバイル対応が行えるのは非常に便利です。

ただし、利用しているテーマによっては、モバイル用テーマを有効にした場合であっても、
スマホやフューチャーフォン（ガラケー）に対応した表示にならないものもあります。
ちょうど、現在私が採用しているContangoでは動作していません。

その為、当サイトは現在スマートフォンでもフルサイト表示です。
ガラケーには一切対応しておらず、表示はされません。割り切っています。

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。