モバイルとPCのコンテンツを記事中で分ける

ヘッダ画像

モバイルとPCのコンテンツを記事中で分ける

WordPressでは、wp_is_mobile()関数での条件分岐でモバイルとPCの内容を変えることができます。
こういう具合です。

<?php if (wp_is_mobile()) :?>
<img src="<?php echo get_template_directory_uri(); ?>/images/image_mobile.png" alt="mobile_image">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/image_pc.png" alt="pc_image">
<?php endif; ?>

モバイルとPCで違う画像を表示する例です。

ただし、投稿エディタ中ではPHPコードの実行は許可されませんので、記事中で使う場合にはショートコード化するのがよいでしょう。
以下をお使いのテーマのfunctions.phpに追加します。
wp_is_mobile()で条件分岐するだけのごくシンプルなショートコードです。

<?php
function pc_parts($atts, $content = null ){
  $content = do_shortcode( $content);
  if(!wp_is_mobile()){
    return $content;
  }
}
add_shortcode('pc_view', 'pc_parts');
function mobile_parts($atts, $content = null ){
  $content = do_shortcode( $content);
  if(wp_is_mobile()){
    return $content;
  }
}
add_shortcode('mobile_view', 'mobile_parts');
?>

投稿エディタでは次のように使います。
[mobile_view]モバイルでの出力内容[/mobile_view]
[pc_view]PCでの出力内容[/pc_view]
条件判定でそれぞれのクライアントに応じた内容が出力されます。

クイックタグボタンの追加で表示する内容の選択でショートコードを指定できますね。

投稿効率アップ間違いなしのAddQuicktag
投稿効率アップ間違いなしのAddQuicktag

投稿画面にある入力補助のhtmlタグボタン。 「このタグボタンがあったらなあ」ということはないでしょうか。 例えば、デフォルトの投稿画面にはstrongタグはありますが、bタグはありません。 Quicktags APIでテーマ自体に実装することもできますが、今 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です



関連記事

WordPressのユーザー名は丸見え!? 知っていますか?WordPressのログインユーザー名はだだ漏れだという事実を...ダッシュボード乗っ取り防止のためのセ...

絶対に分かる!WordPressの子テーマ作成 WordPressでは子テーマという機能があります。既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子...

WordPressのRSSフィードを完全にコントロールする WordPressではコンテンツの更新情報を知らせるために標準でRSSを出力します。その出力方法は...http://e...

「トップに戻る」ボタンでスマホでのユーザビリティアップ! ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビューンとページの初め...