コピペでOK！　「Mobile Detect」を使ったワードプレスのウィジェット用の条件分岐表示に便利な関数

著者 Nora
日付
カテゴリー カスタマイズ
タグ ,,,
Mobile Detect 使用例
Mobile Detect 使用例

サードパーティ製のクラス「Mobile Detect」を紹介したので、実際にテーマで使用している例を紹介しようと思いました。

関連記事： 「Mobile Detect」でデバイス毎の条件分岐が簡単に！

テーマ「ShapeShifter」では主にウィジェットでの分岐に使用していますので、そのコードをそのまま紹介しようと思います。「trait」を使用していますので、不要な方は外してしまいましょう。

ウィジェットの作成方法が分からない場合は、「ウィジェットアイテムの作成・追加方法」で紹介していますので、先にご参照ください。

  • Table of Contents

コピペでOKな関数の紹介

テーマ「ShapeShifter」で使用している関数を丸ごと載せますので、「Mobile Detect」によるデバイス毎の条件分岐の他、投稿タイプや表示されるページによる条件分岐も行えるようなコードになっています。

不要な箇所は削除したり、フォームで表示されるテキストが多いと感じる場合は、JavaScriptでポップアップするようにカスタマイズしてください。

まずはインクルード

「functions.php」から読まれる箇所に以下のコードをコピペしてください。

<?php 
/* 
 * Mobile Detect
 * http://mobiledetect.net/
 */
require_once( 'Mobile_Detect.php' );
$detect = new Mobile_Detect;
if( ! defined( 'IS_MOBILE' ) ) define( 'IS_MOBILE', $detect->isMobile() );
if( ! defined( 'IS_TABLET' ) ) define( 'IS_TABLET', $detect->isTablet() );
if( ! defined( 'IS_IOS' ) ) define( 'IS_IOS', $detect->isiOS() );
if( ! defined( 'IS_ANDROIDOS' ) ) define( 'IS_ANDROIDOS', $detect->isAndroidOS() );
unset( $detect );
?>

インクルードした後、「IS_MOBILE」「IS_TABLET」など必要な固定値を定義してしまい、インスタンスは不要なので削除します。

「iOS」「AndroidOS」はオプションで書いていますが、後の関数内でも使用していませんので、必要なら次の関数のコードでに追記してください。

関数の作成

「trait」を使用していますが、不要な場合はラッパーを外して一般的な関数にしても大丈夫です。

<?php
trait widgetFunctions {

	function check_widget_display( $instance ) {

		// デバイス設定
		$ss_display_device = esc_attr( $instance[ 'ss_display_device' ] );
		// デバイス分岐
		if( $ss_display_device == 'ss_display_any' ) {
		} elseif( ! IS_MOBILE && $ss_display_device == 'ss_display_pc' ) {
		} elseif( IS_MOBILE && $ss_display_device == 'ss_display_mobile' ) {
		} elseif( IS_TABLET && $ss_display_device == 'ss_display_tablet' ) {
		} elseif( ( IS_MOBILE && ! IS_TABLET ) && $ss_display_device == 'ss_display_phone' ) {
		} else { return false; }

		// 優先設定
		$ss_display_home = esc_attr( $instance[ 'ss_display_home' ] );
		$ss_display_front = esc_attr( $instance[ 'ss_display_front' ] );

		// 全般設定
		$ss_display_archive = esc_attr( $instance[ 'ss_display_archive' ] );
		$ss_display_singular = esc_attr( $instance[ 'ss_display_singular' ] );

		// ページ分岐
		if( $ss_display_front && ( ! is_home() && is_front_page() ) ) {
		} elseif( $ss_display_home && is_home() ) {
		} elseif( $ss_display_archive && is_archive() ) {
		} elseif( $ss_display_singular && is_singular() ) {
		} else { return false; }

		// ポストタイプ
		$post_types = get_post_types();
        foreach( $post_types as $post_type => $name ) { 
			if( 'ss_display_' . $post->post_type == esc_attr( $instance[ 'ss_display_' . $post_type ] ) ) { return false; }
		}

		return true;

	}

	function update_display_settings( $new_instance, $instance ) {

		$instance[ 'ss_display_home' ] = sanitize_text_field( $new_instance[ 'ss_display_home' ] );
		$instance[ 'ss_display_front' ] = sanitize_text_field( $new_instance[ 'ss_display_front' ] );
		$instance[ 'ss_display_archive' ] = sanitize_text_field( $new_instance[ 'ss_display_archive' ] );
		$instance[ 'ss_display_singular' ] = sanitize_text_field( $new_instance[ 'ss_display_singular' ] );
		$instance[ 'ss_display_device' ] = sanitize_text_field( $new_instance[ 'ss_display_device' ] );
        
		$post_types = get_post_types();
        foreach( $post_types as $post_type => $name ) { 
        	$instance[ 'ss_display_' . $post_type ] = sanitize_text_field( $new_instance[ 'ss_display_' . $post_type ] );
        }

        return $instance;
	}

	function widget_display_form( $instance ) {

		$defaults = array(
			'ss_display_home' => 'ss_display_home',
			'ss_display_front' => 'ss_display_front',
			'ss_display_archive' => 'ss_display_archive',
			'ss_display_singular' => 'ss_display_singular',
			'ss_display_device' => 'ss_display_any',
		);
		$instance = wp_parse_args( ( array ) $instance, $defaults );

		// 優先設定
		$ss_display_home = esc_attr( $instance[ 'ss_display_home' ] );
		$ss_display_front = esc_attr( $instance[ 'ss_display_front' ] );

		// 全般設定
		$ss_display_archive = esc_attr( $instance[ 'ss_display_archive' ] );
		$ss_display_singular = esc_attr( $instance[ 'ss_display_singular' ] );

		// ポストタイプ
		$post_types = get_post_types();
        foreach( $post_types as $post_type ) { 
			$ss_display[ $post_type ] = esc_attr( $instance[ 'ss_display_' . $post_type ] );
		}

		// デバイス設定
		$ss_display_device = esc_attr( $instance[ 'ss_display_device' ] );

		?>

		<p>
            <label>
            	<strong>表示するページの優先設定</strong>
            </label><br>

            <input type="checkbox" id="<?php echo $this->get_field_id( 'ss_display_home' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_home' ); ?>" value="ss_display_home" <?php checked( $ss_display_home, 'ss_display_home' ); ?> style="width:0;"/><span>ホーム</span><br>

            <input type="checkbox" id="<?php echo $this->get_field_id( 'ss_display_front' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_front' ); ?>" value="ss_display_front" <?php checked( $ss_display_front, 'ss_display_front' ); ?> style="width:0;"/><span>フロントページ</span><br>


            <label>
            	<strong>表示する全般ページを選択</strong>
            </label><br>

            <input type="checkbox" id="<?php echo $this->get_field_id( 'ss_display_archive' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_archive' ); ?>" value="ss_display_archive" <?php checked( $ss_display_archive, 'ss_display_archive' ); ?> style="width:0;"/><span>アーカイブページ全般</span><br>

            <input type="checkbox" id="<?php echo $this->get_field_id( 'ss_display_singular' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_singular' ); ?>" value="ss_display_singular" <?php checked( $ss_display_singular, 'ss_display_singular' ); ?> style="width:0;"/><span>コンテンツページ全般</span><br>

            <label>
            	<strong>※ 非表示のページにチェック</strong>
            </label><br>

            <?php foreach( $post_types as $post_type ) { ?>
	            <input type="checkbox" id="<?php echo $this->get_field_id( 'ss_display_' . $post_type ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_' . $post_type ); ?>" value="ss_display_<?php echo $post_type; ?>" <?php checked( $ss_display[ $post_type ], 'ss_display_' . $post_type ); ?> style="width:0;"/><span><?php echo $post_type; ?></span><br>
            <?php }
            ?>
		</p>

		<p>
            <label>
            	<strong>表示する端末を選択</strong>
            </label><br>
            <input type="radio" id="<?php echo $this->get_field_id( 'ss_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_device' ); ?>" value="ss_display_any" <?php checked( $ss_display_device, 'ss_display_any' ); ?> style="width:0;"/><span>全端末（PC・モバイル）</span><br>
            <input type="radio" id="<?php echo $this->get_field_id( 'ss_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_device' ); ?>" value="ss_display_pc" <?php checked( $ss_display_device, 'ss_display_pc' ); ?> style="width:0;"/><span>パソコンのみ ※スマホ・タブレットには表示されません </span><br>
            <input type="radio" id="<?php echo $this->get_field_id( 'ss_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_device' ); ?>" value="ss_display_mobile" <?php checked( $ss_display_device, 'ss_display_mobile' ); ?> style="width:0;"/><span>モバイルのみ ※パソコンには表示されません。</span><br>
            <input type="radio" id="<?php echo $this->get_field_id( 'ss_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_device' ); ?>" value="ss_display_tablet" <?php checked( $ss_display_device, 'ss_display_tablet' ); ?> style="width:0;"/><span>タブレット ※スマホには表示されません</span><br>
            <input type="radio" id="<?php echo $this->get_field_id( 'ss_display_device' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'ss_display_device' ); ?>" value="ss_display_phone" <?php checked( $ss_display_device, 'ss_display_phone' ); ?> style="width:0;"/><span>スマホのみ ※タブレットには表示されません</span><br>
        </p>

	<?php }

}
?>

ウィジェットクラス内でコール

コピペしたら、ウィジェットのクラスのメソッド「widget」「update」「form」でそれぞれ呼び出します。

「trait」ラッパーを外した場合は、「use widgetFunctions;」や各メソッドに書かれているメソッドコールの頭の「$this->メソッド名」の「this->」を削除してください。

class Your_Widget extends WP_Widget {

  // 「trait」の使用（ラッパーを外す場合は不要）
  use widgetFunctions;

  function Your_Widget() {
    parent::WP_Widget( false, $name = 'Your Widget Name' );
  }

  function widget( $args, $instance ) {

    if( ! $this->check_widget_display( $instance ) )
      return;

    extract( $args );

    // ウィジェットの出力

  }

  function update( $new_instance, $old_instance ) {

    $instance = $old_instance;

    $instance = $this->update_display_settings( $new_instance, $instance );

    // ウィジェットの更新

    return $instance;

  }

  function form( $instance ) {

    // ウィジェットの設定フォーム

    $this->widget_display_form( $instance );

  }

}

さいごに

最初はアクションフックかフィルターフックで、ベースのクラス「WP_Widget」をカスタマイズしようと思ったのですが、見つからなかったのでこんな形になっています。知っている方がいらっしゃったら教えてください。

一応テーマ「ShapeShifter」で使用しているコードを丸ごと使用しており、サニタイズもできている筈ですが、万が一エラーがありましたらご報告いただけると有難いです。

1件のピン

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。