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

この記事では、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 ベースのテーマでも使える可能性があります。
参考にしたもの
- LIQUID PRESS プレミアムテーマのソースコード ( GPL )
- VK All in One Expansion Unit の VK 最新記事のソースコード ( GPL )
- VK Blocks のブロックの非表示設定 ( GPL )
- WordPress Code Reference
まとめ
この記事では Lightning / Lightning Pro で画面サイズによるウィジェットの出し分けを行う方法について記事を書きました。
あまりオブジェクト指向は使いたくないタイプなのですが、今回のコードは三位一体なので使用しました。
参考にさせていただいた制作物の製作者の方々には誠にお礼を申し上げます。
更新履歴
更新日時 | 更新内容 |
2020/04/19 | 出し分け部分とそれに伴うコードの修正 |
2020/04/25 | HTML の表示を echo 出力に変更 |
投稿者プロフィール
最新の投稿
Lightning2023年12月20日Lightning G3 Three Column Unit をアップデートした話
Lightning2021年12月15日Lightning G3 のスキンを自作してみた話
Lightning2021年12月10日Lightning Three Column Unit を G3 対応した話
Lightning2020年12月18日Lightning3カラム化計画 その2 ~プラグイン編~