WordPress Tips

WordPress モバイルのみで表示されるウィジェットの作り方

2019-03-22

本記事にはプロモーションが含まれています。

WordPress モバイルのみで表示されるウィジェットの作り方

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

WordPressサイトでスマートフォンやタブレットなどの小さな画面で閲覧するユーザーに対して、特別なコンテンツを表示したい時、モバイルのみで表示されるウィジェットがあれば便利です。

モバイルでのみ表示されるオリジナルのウィジェットを作成する方法をまとめました。

特定のウィジェットをモバイルのみで表示させる方法は以下の2つがあります。

  • プラグインを使う
  • オリジナルのウィジェットを作成する
  • モバイルのみ表示できるウィジェット機能があるテーマを使う

Widget Options プラグインを使う

Widget Options

ウィジェットを特定の条件やコンテキストに合わせて表示または非表示にするための多くのオプションを提供し、ウェブサイトのコンテンツを柔軟に管理できるようにします。

Widget Optionsでできること

  1. ウィジェットの表示コントロール: 固定ページ、投稿、カテゴリ、カスタム投稿、ユーザー権限など、さまざまな条件に基づいてウィジェットを表示または非表示にすることができます。これにより、特定のページやセクションに特定のウィジェットを表示することができます。
  2. デバイス別の制御: モバイルデバイスとデスクトップデバイスでウィジェットを別々に設定できます。特定のデバイスにのみウィジェットを表示したり非表示にしたりすることができます。
  3. 時間帯別の制御: ウィジェットの表示日時を設定できます。特定の期間や時間にウィジェットを表示することができます。
    例)セールの期間中だけウィジェットを表示する
  4. ウィジェットのデザイン ウィジェットのスタイルやデザインをカスタマイズできるオプションを提供します。ウィジェットの見た目を調整し、テーマと一致させることができます。
  5. ユーザーロール別の制御: 特定のユーザーロールに対してウィジェットの表示を制限することができます。たとえば、管理者だけ特定のウィジェットを表示し、一般ユーザーには表示しないようにすることができます。
  6. ウィジェットの配置制御: ウィジェットの順序や位置をカスタマイズできます。
  7. 他にもElementorやACFプラグインと連携したりと、無料でもたくさんの機能を備えています。

Widget Optionsでウィジェットをモバイルのみで表示する方法

Widget Optionsをインストールしたら、Setting画面で「Display Logic」を有効にします。(デフォルトで有効の状態)

外観>ウィジェットで、有効にした各ウィジェットにWidget Optionsの設定が表示されます。

モバイルアイコンのタブで、デバイスごとの表示非表示をコントロールすることができます。

オリジナルのウィジェットを作成する

プラグインを使わず、オリジナルのウィジェットを作成します。functions.phpの編集、PHPの知識が必要になります。

オリジナルのウィジェットエリアをテーマに挿入するには、テーマファイル(functions.phpsidebar.php など)にカスタムウィジェットエリアの定義と、ウィジェットエリアを表示するためのコードを追加する必要があります。

モバイル用のウィジェットクラスを作成する

class Mobile_Only_Widget extends WP_Widget {
    // ウィジェットのコンストラクタ
    function __construct() {
        parent::__construct(
            'mobile_only_widget', // ウィジェットID
            'モバイル専用ウィジェット', // ウィジェット名
            array(
                'description' => 'モバイルのみで表示されるウィジェット'
            )
        );
    }

    // ウィジェットの表示
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] ); // ウィジェットタイトルの取得
        $text = isset( $instance['text'] ) ? esc_html( $instance['text'] ) : ''; // ウィジェットテキストの取得

        if ( wp_is_mobile() ) {
            echo $args['before_widget'];

            if ( ! empty( $title ) ) {
                echo $args['before_title'] . $title . $args['after_title'];
            }

            echo '<div class="text-mobile">';
            echo $text;
            echo '</div>';

            echo $args['after_widget'];
        }
    }

    // ウィジェットのフォーム
    public function form( $instance ) {
        $title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
        $text = isset( $instance['text'] ) ? esc_textarea( $instance['text'] ) : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">タイトル:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'text' ); ?>">テキスト:</label>
            <textarea class="widefat" rows="5" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>"><?php echo $text; ?></textarea>
        </p>
        <?php
    }

    // ウィジェットの更新
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['text'] = strip_tags( $new_instance['text'] );
        return $instance;
    }
}

ウィジェットを登録する

widgets_initフックで、register_widget() を使い作成したウィジェットを登録します。

function register_mobile_only_widget() {
    register_widget( 'Mobile_Only_Widget' );
}
add_action( 'widgets_init', 'register_mobile_only_widget' );

利用できるウィジェットの中に、「モバイル専用ウィジェット」が表示されていればOKです。

モバイルのみ表示できるウィジェット機能があるテーマを使う

プラグインの追加やfunctions.phpを編集しなくても、ウィジェットをモバイルだけに表示できる機能があるWordPressテーマを使う方法もあります。

有料のWordPressテーマなら機能を備えている場合が多いです。

Affingerの場合、モバイル専用のウィジェットエリアがあります

Affinger

Cocoon

無料テーマのCocoonでは、ウィジェットごとにカテゴリーやページでの表示・非表示を選択することができます。

https://wp-cocoon.com/

操作方法は、Widget Optionsプラグインと似ています。

PCのみ、モバイルのみのウィジェットが用意されています。

モバイルのみで表示されるウィジェットを作成する方法をまとめました。

最も手軽に導入できるのは、Widget Optionsプラグインです。プラグインをインストールすればすぐに利用することができます。

プラグインを増やしたくない、自力でやりたい場合は、functions.phpなどPHPファイルを編集してオリジナルのウィジェットを作成します。

既にテーマに機能が備わっている場合は、プラグインやカスタマイズの必要なく利用できるでしょう。

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WordPress Tips