画面サイズでウィジェットの表示・非表示を切り替える方法

この記事では、Lightning / Lightning Pro で画面サイズによるウィジェットの出し分けを行う方法について解説します。

このカスタマイズを行うと下記画像のように全ウィジェットに出し分け用オプションが追加されます。

各ウィジェットに左記画像が表示され、チェックを入れた範囲で非表示になります。どこにもチェックをいれなければ全範囲で表示されます。

画面サイズでウィジェットの表示・非表示を切り替える方法

下記コードを子テーマの functions.php に追記すれば可能となります。

/**
 * Lightning Widget Appear Disappear.
 */
class Widget_Appaer_Disappear {
	/**
	 * Constructor.
	 */
	public function __construct() {
		add_action( 'in_widget_form', array( $this, 'widget_form' ), 10, 3 );
		add_filter( 'widget_update_callback', array( $this, 'widget_update_callback' ), 10, 2 );
		add_filter( 'dynamic_sidebar_params', array( $this, 'dynamic_sidebar_params' ) );
	}

	/**
	 * Widget Form.
	 *
	 * @param WP_Widget $widget  The widget instance (passed by reference).
	 * @param null      $return  Return null if new fields are added.
	 * @param array     $instance  An array of the widget's settings.
	 */
	public function widget_form( $widget, $return, $instance ) {
		$name         = 'widget-' . $widget->id_base . '[' . $widget->number . ']';
		$options      = array(
			array( 'disappear-xs', '非表示 ( 画面サイズ : xs )' ),
			array( 'disappear-sm', '非表示 ( 画面サイズ : sm )' ),
			array( 'disappear-md', '非表示 ( 画面サイズ : md )' ),
			array( 'disappear-lg', '非表示 ( 画面サイズ : lg )' ),
			array( 'disappear-xl', '非表示 ( 画面サイズ : xl )' ),
		);
		$widget_html  = '<h3 class="admin-custom-h3">ウィジェット非表示設定</h3>';
		$widget_html .= '<ul>';
		foreach ( $options as $option ) {
			$widget_html .= '<li><label><input name="' . esc_attr( $name ) . '[' . esc_attr( $option[0] ) . ']" type="checkbox"' . checked( isset( $instance[ $option[0] ] ), true, false ) . '></input>' . esc_html( $option[1] ) . '</label></li>';
		}
		$widget_html .= '</ul>';
		$allowed_html = array(
			'h3'    => array(
				'class' => array(),
			),
			'label' => array(),
			'input' => array(
				'name'    => array(),
				'type'    => array(),
				'checked' => array(),
			),
			'ul'    => array(),
			'li'    => array(),
		);
		echo wp_kses( $widget_html, $allowed_html );
		return $instance;
	}

	/**
	 * Widget Update CallBack.
	 *
	 * @param array $instance The current widget instance's settings.
	 * @param array $new_instance Array of new widget settings.
	 */
	public function widget_update_callback( $instance, $new_instance ) {
		$instance['disappear-xs'] = $new_instance['disappear-xs'];
		$instance['disappear-sm'] = $new_instance['disappear-sm'];
		$instance['disappear-md'] = $new_instance['disappear-md'];
		$instance['disappear-lg'] = $new_instance['disappear-lg'];
		$instance['disappear-xl'] = $new_instance['disappear-xl'];
		return $instance;
	}

	/**
	 * Dynamic Sidebar Params
	 *
	 * @param array $params An array of widget display arguments.
	 */
	public function dynamic_sidebar_params( $params ) {
		global $wp_registered_widgets;

		$widget_id  = $params[0]['widget_id'];
		$widget_obj = $wp_registered_widgets[ $widget_id ];
		$widget_opt = get_option( $widget_obj['callback'][0]->option_name );
		$widget_num = $widget_obj['params'][0]['number'];

		$widget_class  = '';
		$widget_class .= isset( $widget_opt[ $widget_num ]['disappear-xs'] ) ? 'd-none ' : 'd-block ';
		$widget_class .= isset( $widget_opt[ $widget_num ]['disappear-sm'] ) ? 'd-sm-none ' : 'd-sm-block ';
		$widget_class .= isset( $widget_opt[ $widget_num ]['disappear-md'] ) ? 'd-md-none ' : 'd-md-block ';
		$widget_class .= isset( $widget_opt[ $widget_num ]['disappear-lg'] ) ? 'd-lg-none ' : 'd-lg-block ';
		$widget_class .= isset( $widget_opt[ $widget_num ]['disappear-xl'] ) ? 'd-xl-none ' : 'd-xl-block ';

		$params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_class}", $params[0]['before_widget'], 1 );
		return $params;
	}
}

new Widget_Appaer_Disappear();

注意事項

  • このカスタマイズは Bootstrap 4 ベースのスキンを想定したものです。
  • Bootstrap 3 をベースとしたスキンでは反映されません。
  • 他の Bootstrap 4 ベースのテーマでも使える可能性があります。

参考にしたもの

まとめ

この記事では Lightning / Lightning Pro で画面サイズによるウィジェットの出し分けを行う方法について記事を書きました。

あまりオブジェクト指向は使いたくないタイプなのですが、今回のコードは三位一体なので使用しました。

参考にさせていただいた制作物の製作者の方々には誠にお礼を申し上げます。

更新履歴

更新日時更新内容
2020/04/19出し分け部分とそれに伴うコードの修正
2020/04/25HTML の表示を echo 出力に変更

コメントを残す

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

コメントは日本語で入力してください。(スパム対策)

CAPTCHA