// ウィジェットエリアを用意する（widgets_init のタイミングで登録）
function mytheme_widgets_init() {
	register_sidebar(
		array(
			'name'          => '広告エリア',           // 「外観」→「ウィジェット」に表示される名前
			'id'            => 'ad-area',              // ★ 記事のコードで使う値
			'before_widget' => '<div class="widget">',
			'after_widget'  => '</div>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

/* =====================================================================
   ウィジェットの広告を、カスタマイザーのチェックで表示／非表示にする
   ・「外観」→「カスタマイズ」→「広告の表示」にチェックボックスを追加
   ・OFF のエリアは、公開画面で広告を出力しない。ウィジェットの設定は残るので、ON に戻せば元どおり
   ・ウィジェットのデータ自体には触らない（ウィジェット編集画面で空に見えて、保存で消える事故を防ぐため）
   ・保存時のノンス・権限（edit_theme_options）のチェックはカスタマイザー側で行われる
   ===================================================================== */

/**
 * 切り替えの対象にするウィジェットエリア（★ id => カスタマイザーに表示する名前）
 * ・register_sidebar() の 'id' と同じ値にする。エリアを増やすときは1行足す
 *
 * @return array
 */
function adtoggle_areas() {
	return array(
		'ad-area' => '広告エリア（ad-area）を表示する',
	);
}

/**
 * そのエリアの広告を表示するか
 *
 * @param string $index ウィジェットエリアの id。
 * @return bool 表示するなら true（対象外のエリアは常に true）。
 */
function adtoggle_is_on( $index ) {
	$areas = adtoggle_areas();
	if ( ! isset( $areas[ $index ] ) ) {
		return true;
	}
	return (bool) get_theme_mod( 'adtoggle_show_' . $index, true );
}

/**
 * カスタマイザーに「広告の表示」セクションとチェックボックスを追加する
 *
 * @param WP_Customize_Manager $wp_customize カスタマイザー本体。
 */
function adtoggle_customize_register( $wp_customize ) {
	$wp_customize->add_section(
		'adtoggle',
		array(
			'title'       => '広告の表示',
			'description' => 'チェックを外したエリアは、公開画面で広告を出力しない。ウィジェットの設定は残る。',
			'priority'    => 160,
		)
	);

	foreach ( adtoggle_areas() as $index => $label ) {
		$wp_customize->add_setting(
			'adtoggle_show_' . $index,
			array(
				'default'           => true,
				'type'              => 'theme_mod',
				'capability'        => 'edit_theme_options',
				'sanitize_callback' => 'rest_sanitize_boolean', // true / false 以外は保存しない
			)
		);
		$wp_customize->add_control(
			'adtoggle_show_' . $index,
			array(
				'label'   => $label,
				'section' => 'adtoggle',
				'type'    => 'checkbox',
			)
		);
	}
}
add_action( 'customize_register', 'adtoggle_customize_register' );

/**
 * dynamic_sidebar() の出力を始める直前：OFF のエリアなら出力の溜め込みを始める
 * ・dynamic_sidebar_before / dynamic_sidebar_after は必ず対で呼ばれる
 * ・テンプレートを adtoggle_is_on() で囲んでいない箇所で呼ばれても、広告を出力しないため
 *
 * @param string $index ウィジェットエリアの id。
 */
function adtoggle_buffer_start( $index ) {
	if ( ! is_admin() && ! adtoggle_is_on( $index ) ) {
		ob_start();
	}
}
add_action( 'dynamic_sidebar_before', 'adtoggle_buffer_start' );

/**
 * dynamic_sidebar() の出力が終わった直後：溜めた出力（広告）を捨てる
 *
 * @param string $index ウィジェットエリアの id。
 */
function adtoggle_buffer_end( $index ) {
	if ( ! is_admin() && ! adtoggle_is_on( $index ) ) {
		ob_end_clean();
	}
}
add_action( 'dynamic_sidebar_after', 'adtoggle_buffer_end' );

<?php if ( is_user_logged_in() ) : ?>
<p>NO ADS</p>
<?php else : ?>
<?php dynamic_sidebar( 'ad-area' ); ?>
<?php endif; ?>

<?php if ( is_user_logged_in() ) : ?>
<div class="ad ad--dummy">
<p>NO ADS<?php echo adtoggle_is_on( 'ad-area' ) ? '' : ' / OFF'; ?></p>
</div>
<?php elseif ( adtoggle_is_on( 'ad-area' ) ) : ?>
<div class="ad">
<?php dynamic_sidebar( 'ad-area' ); ?>
</div>
<?php endif; ?>

/* ===== ここから CSS ===== */
/* 広告を囲む div の余白 */
.ad {
  margin: 40px 0;
}

/* ログイン中に広告の代わりに表示する枠（地色・点線の枠・対角線） */
.ad--dummy {
  display: flex;
  align-items: center;      /* 文字を上下の中央に */
  justify-content: center;  /* 文字を左右の中央に */
  min-height: 280px;        /* ★ 広告の高さ（PC） */
  background-color: #e0e5e9; /* ★ 地色 */
  /* 対角線（×）：枠と同じ色の 1px の線を2本。枠の大きさが変わっても角から角へ引かれる */
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), #bcbcbc calc(50% - 0.5px), #bcbcbc calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcbcbc calc(50% - 0.5px), #bcbcbc calc(50% + 0.5px), transparent calc(50% + 0.5px));
  border: 1px dashed #bcbcbc; /* ★ 枠の色 */
}
.ad--dummy p {
  margin: 0;
  padding: 4px 12px;
  background-color: #e0e5e9; /* 文字の後ろだけ対角線を隠して読みやすくする */
}

/* スマホ */
@media (max-width: 767px) {
  .ad--dummy {
    min-height: 250px;      /* ★ 広告の高さ（スマホ） */
  }
}
/* ===== ここまで CSS ===== */