このガイドでは、Jetpack に含まれているモバイル用テーマの使い方、ホームページやアーカイブページ上で記事の抜粋または全文を表示する方法、そしてモバイル用テーマのフッターに WordPress モバイルアプリの宣伝を表示する方法を学ぶことができます。また、モバイル用テーマ向けのカスタムメニュー・ヘッダー・背景の作成方法や、サイドバーとウィジェットの活用方法についても説明しています。
WordPress.com のデフォルトであるモバイル用テーマを使うとコンテンツをすっきりとしたインターフェイス上で表示できるため、モバイルの訪問者がサイトを閲覧しやすくなります。さらに読み込み時間をより素早くするため、モバイル用テーマはできる限り軽量化しています。
モバイル用テーマの有効化
Jetpack のダッシュボード上で「モバイル用テーマ」モジュールを有効化するだけで、モバイル用テーマを使用できます。
どうすれば自分のサイトでモバイル用テーマが動作していることを確認できますか？
モバイル用テーマはモバイル OS 上でのみ表示されます。動作を確認するにはスマートフォンを使ってサイトを訪問する必要があります。
モバイル用テーマのオプション
モバイル用テーマは様々なオプションを提供します。
- ホームページ上やアーカイブページ上で、記事の抜粋または全文のどちらかを表示します。
- モバイル用テーマのフッターにWordPressモバイルアプリのプロモ版を表示します。
モバイル用テーマのオプションにアクセスする方法は次のとおりです。
- ダッシュボードで Jetpack メニューをクリック
- Jetpack のフロントページへたどり着いたら、モバイル用テーマのモジュールを見つけて、[さらに詳しく] をクリックしてください。モバイル用テーマの設定ページへ移動します。
- ご希望のオプションを選択し、[設定の保存] をクリックします。
追加機能
カスタムメニュー
モバイル用テーマは、現在のデスクトップ用テーマのカスタムメニューの位置を検出し、指定されたメニューを表示します。もしカスタムメニューを指定していない場合は、標準的なページメニューが設定されます。
メニューの右側に検索ボックスが表示され、訪問者はすばやくコンテンツを発見できます。
カスタムヘッダーと背景
モバイル用テーマは、以下の現在のデスクトップ用テーマにおけるカスタムヘッダーと背景の設定を反映します。
- カスタムヘッダー画像
- カスタム背景画像・色
- カスタム背景画像の繰り返しや位置の設定
- ヘッダーテキストを表示するかどうか（サイトのタイトルと説明文に適用）
- サイトタイトルの文字色（カスタムヘッダーの文字色をモバイル用テーマのオプションとして有効にした場合）
サイドバーとウィジェット
モバイル用テーマは1カラムのレイアウトを使用しています。これは、小さなスクリーン上でもコンテンツができるだけ幅広に表示されるようにするためです。ウィジェットはコンテンツの後、フッターの直前に表示されます。
現在、モバイル用テーマはメインのコンテンツ領域の下、フッターのすぐ上にサイドバーをひとつ表示します。ウィジェットを表示するには、このサイドバーのサイドバー ID が「sidebar-1」になっている必要があります。サイドバー ID についてよく分からない場合は、WordPress.org の Codex で詳細を読むことができます。
モバイル用テーマでウィジェットが見当たらない場合、よくある原因はデスクトップ用テーマに「sidebar-1」という ID のサイドバーが存在しないことです（ID は「sidebar-1」と完全一致する必要があります）。確認するには、テーマのファイルを開き register_sidebar() という関数を見つけてください（通常 functions.php 内にあります）。ウィジェットを表示したい場合は対象のサイドバー ID を「sidebar-1」へと変更してください。例は以下のとおりです。
register_sidebar( array(
'id' => 'sidebar-1',
'name' => __( '右サイドバー', 'theme-text-domain' ),
'description' => __( 'このサイドバーは右ラカラムに表示されます', 'theme-text-domain' ),
) );
注: 複数のサイドバーがある場合はそのうちひとつだけが「sidebar-1」というサイドバー ID を保持できます。この場合、まずどのサイドバーをモバイル用テーマに表示したいかを決定した後、該当するサイドバー ID を「sidebar-1」に変更してください。
「フルバージョン」に切り替える
閲覧者は、各ページの下部にある「フルサイトを表示」というリンクをタップしてデスクトップ用サイトへの切り替えオプションを選択できます。
Jetpack by WordPress.com 