PC/モバイルで表示コンテンツを切り替えるWordPressプラグイン

この記事は約2分で読めます。
記事内に広告が含まれています。

ブログを書いていて、PCと携帯で表示内容を変えたい、ボリュームを変えたいという方もいらっしゃると思います。
特にアフィリエイターさんはPCと携帯でリンクURLが違うため、併記したりしてユーザビリティも悪い状態になっていると聞きます。

そこで、PCと携帯で表示内容を切り替えられるプラグインを作りました。
正確には指定した範囲をPCのみで表示する、携帯のみで表示する、ということが制御できるものです。なお、動作にはおなじみのKtai Style(携帯対応プラグイン)が必要です。

それでは、使い方を説明していきます。


ダウンロード

PC Ktai content selecter

使い方

ダウンロードしたzipファイルをプラグインフォルダにアップロードし、通常通りプラグインのインストールを行ってください。

ブログ投稿画面でショートコードと呼ばれるタグみたいなもので表示制御したい範囲を囲むと、PCのみで表示したり、携帯のみで表示したりできるようになります。

具体的に書きます。

[pccontent]~[/pccontent]
[ktaicontent]~[/ktaicontent]
※プラグインが実行されないように[ ]は全角で書いています。実際に使うときには半角にしてください。

で挟まれた部分をPCで表示されているか、携帯で表示されているかによって判断し、表示したり表示しなくしたりします。
※仕組みとしてはktai styleで表示されているかどうかで判別しています。つまりktai styleプラグインに乗っかるカタチで書いています。

アフィリエイトタグをPCとモバイルで切り替える場合は

[pccontent]PC用アフィリエイトタグ[/pccontent][ktaicontent]携帯用アフィリエイトタグ[/ktaicontent]

という感じにするとよいと思います。

謝辞

動作テストしていただきました方、人柱になって使っていただいた皆様ありがとうございました。

実は6月下旬に初めてボクが創ったプラグインとなります。
公開していなかったので、この機会に公開してみました。

不具合やご意見等あればお寄せせください。
ライセンスの勉強はちゃんとしてないのでなんとも言えませんが、再配布等自由にしていただいて構いません(GPLライセンス?)

この記事を書いた人

iPhone/MacBook Air/Apple Watchユーザー。
2006年よりブログを書き始め、現在はちょっとした効率化をテーマとしてブログを投稿中。

脇村 隆をフォローする
WordPress
脇村 隆をフォローする
ムジログ

コメント

  1. hisa より:

    素晴らしいプラグインを作成して下さってありがとう御座います。
    質問なんですが、
    携帯サイト用に[携帯用タグ]アフィリエイトタグ[/携帯用タグ]を囲むと携帯で表示がうまく表示されませんでした。 斜めの→が表示されてしまいます。
    原因は何でしょうか?
    ご教授いただけますと幸いです。

  2. wackey より:

    hisaさん>
    ご質問いただき、ありがとうございます。
    恐縮ですが、このプラグインはすでに開発を終了しており、実はktai styleプラグインのほうで、同様のことが実現可能となっております。
    「斜めの→が表示されてしまいます」とのことですが、ちょっと状況が読めないのでお答えすることが難しいのですが、
    [ktaicontent]~[/ktaicontent]
    が適切に書いてあればそれで表示出来るはずです(プラグインが動かないように、括弧は全角で記述しています)

  3. hisa より:

    wackeyさん
    hisaです。
    ご連絡が遅くなってしまいましてすいません。
    コメントありがとう御座います。
    そうだったんですね。
    ktai styleのデフォルト機能として、追加された事は初耳でした。
    まだ斜めの『↑』が出てしまっているので、これは引き続き解決策を探すという形です。
    わざわざありがとう御座いますm(_ _)m

  4. k.k より:

    はじめまして。トップページでPC表示と携帯表示を切り替えるのに使用させてもらっています。
    この度、スマートフォン表示とタブレット表示も必要になったので、初めはWp Mobile Detectと混在させて使用してみましたが、機種によりトラブルが起きるので、以下の様に改造してみました。とりあえず動いていますが、タブレット関連のユーザーエージェントを機種が出る度に書き換えなければならないので、もっとすっきりとしたやり方があれば、教えてください。
    「使用方法」
    [pccontent]PC用タグ[/pccontent][ktaicontent]携帯用タグ[/ktaicontent]
    [spcontent]スマホ用タグ[/spcontent][tabcontent]タブレット用タグ[/tabcontent]
    「改造」
    その1
    wp-inckudesvars.php に、以下の関数を追加
    function wp_is_tablet() {
    static $is_tablet;
    if ( isset($is_tablet) )
    return $is_tablet;
    if ( empty($_SERVER[‘HTTP_USER_AGENT’]) ) {
    $is_tablet = false;
    } elseif ( strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPad’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Tab’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘TAB’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘SC-01’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘SC-02’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Nexus 7’) !== false
    || strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Nexus 10’) !== false ) {
    $is_tablet = true;
    } else {
    $is_tablet = false;
    }
    return $is_tablet;
    }
    その2
    wp-contentpluginspc-ktai-content-selecterpc-ktai-content-selecter.php
    function pccontent_func( $atts, $content = null ) {
    if ((! function_exists(‘is_mobile’) || ! is_mobile()) && (! function_exists(‘is_ktai’) || ! is_ktai() && ! wp_is_mobile() && ! wp_is_tablet())) {
    return $content;
    } else {
    return “”;
    }
    }
    function ktaicontent_func( $atts, $content = null ) {
    if ((! function_exists(‘is_mobile’) || is_mobile()) && (! function_exists(‘is_ktai’) || is_ktai())) {
    return $content;
    } else {
    return “”;
    }
    }
    function spcontent_func( $atts, $content = null ) {
    if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() && ! wp_is_tablet() ) {
    return $content;
    } else {
    return “”;
    }
    }
    function tabcontent_func( $atts, $content = null ) {
    if ( function_exists(‘wp_is_tablet’) && wp_is_tablet() ) {
    return $content;
    } else {
    return “”;
    }
    }
    add_shortcode( ‘pccontent’, ‘pccontent_func’ );
    add_shortcode( ‘ktaicontent’, ‘ktaicontent_func’ );
    add_shortcode( ‘spcontent’, ‘spcontent_func’ );
    add_shortcode( ‘tabcontent’, ‘tabcontent_func’ );

タイトルとURLをコピーしました