SANGOで２カラムレイアウトで広告を貼り付けるウィジェットを作ってみました

//==================================================
//	カスタムHTML2カラムウィジェット（広告貼り付け用）
//==================================================
class Widget2ColumnCustomHtml extends WP_Widget{

	//コンストラクタでウィジェットを登録
	function __construct(){
		parent::__construct(
			'widget_2column_custom_html',	//ウィジェットID
			'広告用２カラムのカスタムHTML',	//ウィジェット名
			array('description' => 'カスタムHTMLを2カラムレイアウトで表示します。（主に広告貼付けを目的としたものです）')	//ウィジェットの概要
		);
	}
	
	//ウィジェットの表示
	public function widget($args, $instance){
		echo $args['before_widget'];
		
		
		//-- ここにウィジェットの内容 --//
		$pc_txt1 = !empty($instance['txtarea_1']) ? $instance['txtarea_1'] : '';
		$pc_txt2 = !empty($instance['txtarea_2']) ? $instance['txtarea_2'] : '';
		$mobile_txt1 = !empty($instance['mobile_1']) ? $instance['mobile_1'] : '';
		$mobile_txt2 = !empty($instance['mobile_2']) ? $instance['mobile_2'] : '';
		$mb_check = !empty($instance['mobile_sort']) ? $instance['mobile_sort'] : '';
		
		if($mb_check == "ON"){
			$v_erase = '';
			$h_erase = 'w2cchtml_erase';
		}
		else{
			$v_erase = 'w2cchtml_erase';
			$h_erase = '';
		}
		
		//タイトルがあれば出力
		if(!empty($instance['title'])){
			echo '<p class="w2cchtml_title strong dfont center">' . $instance['title'] . '</p>';
		}
		
		?>
		<!-- PC横並び -->
		<aside class="w2cchtml_pc">
			<div class="w2cch_item_first w2cch_item_tcell">
				<?php echo $pc_txt1; ?>
			</div>
			<div class="w2cch_item_second w2cch_item_tcell">
				<?php echo $pc_txt2; ?>
			</div>
		</aside>
		
		<!-- モバイル横並び -->
		<aside class="w2cchtml_mobile_horizontal <?php echo $h_erase; ?>">
			<div class="w2cch_item_first w2cch_item_tcell">
				<?php echo $mobile_txt1; ?>
			</div>
			<div class="w2cch_item_second w2cch_item_tcell">
				<?php echo $mobile_txt2; ?>
			</div>
		</aside>
		
		<!-- モバイル縦並び -->
		<aside class="w2cchtml_mobile_vertical <?php echo $v_erase; ?>">
			<div class="w2cch_item_first">
				<?php echo $mobile_txt1; ?>
			</div>
			<div class="w2cch_item_second">
				<?php echo $mobile_txt2; ?>
			</div>
		</aside>
		<?php
		
		
		echo $args['after_widget'];
	}
	
	//ウィジェットフォームの作成
	public function form($instance){
		$title = !empty($instance['title']) ? $instance['title'] : '';
		$txt1 = !empty($instance['txtarea_1']) ? $instance['txtarea_1'] : '';
		$txt2 = !empty($instance['txtarea_2']) ? $instance['txtarea_2'] : '';
		$mb1 = !empty($instance['mobile_1']) ? $instance['mobile_1'] : '';
		$mb2 = !empty($instance['mobile_2']) ? $instance['mobile_2'] : '';
		if(!isset($instance['mobile_sort'])){
			$mb_check = "ON";	//nullの場合は初回なので、初期値のONをセットする
		}
		else{
			$mb_check = !empty($instance['mobile_sort']) ? $instance['mobile_sort'] : '';
		}
		if($mb_check == "ON"){
			$mb_check = "checked";
		}

		?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>">タイトル</label>
		<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>"></p>

		<div><label for="<?php echo $this->get_field_id('txtarea_1'); ?>"><p>PC用：左側に表示するカスタムHTML</p></label>
		<textarea id="<?php echo $this->get_field_id('txtarea_1'); ?>" name="<?php echo $this->get_field_name('txtarea_1'); ?>" rows="10" cols="50"><?php echo esc_html($txt1); ?></textarea></div>

		<div><label for="<?php echo $this->get_field_id('txtarea_2'); ?>"><p>PC用：右側に表示するカスタムHTML</p></label>
		<textarea id="<?php echo $this->get_field_id('txtarea_2'); ?>" name="<?php echo $this->get_field_name('txtarea_2'); ?>" rows="10" cols="50"><?php echo esc_html($txt2); ?></textarea></div>

		<div><p><input id="<?php echo $this->get_field_id('mobile_sort'); ?>" name="<?php echo $this->get_field_name('mobile_sort'); ?>" type="checkbox" value="ON" <?php echo "$mb_check" ?> >
		<label for="<?php echo $this->get_field_id('mobile_sort'); ?>">モバイル時は縦並びにする</label></p></div>
		
		<div><label for="<?php echo $this->get_field_id('mobile_1'); ?>"><p>モバイル用：先に表示するカスタムHTML</p></label>
		<textarea id="<?php echo $this->get_field_id('mobile_1'); ?>" name="<?php echo $this->get_field_name('mobile_1'); ?>" rows="10" cols="50"><?php echo esc_html($mb1); ?></textarea></div>

		<div><label for="<?php echo $this->get_field_id('mobile_2'); ?>"><p>モバイル用：後に表示するカスタムHTML</p></label>
		<textarea id="<?php echo $this->get_field_id('mobile_2'); ?>" name="<?php echo $this->get_field_name('mobile_2'); ?>" rows="10" cols="50"><?php echo esc_html($mb2); ?></textarea></div>
		<?php
	}
	
	//入力されたデータの更新処理
	//	new_instance：更新後の値
	//	old_instance：更新前の値
	public function update($new_instance, $old_instance){
		$instance = array();
		$instance['title'] = !empty($new_instance['title']) ? $new_instance['title'] : '';
		$instance['txtarea_1'] = !empty($new_instance['txtarea_1']) ? $new_instance['txtarea_1'] : '';
		$instance['txtarea_2'] = !empty($new_instance['txtarea_2']) ? $new_instance['txtarea_2'] : '';
		$instance['mobile_1'] = !empty($new_instance['mobile_1']) ? $new_instance['mobile_1'] : '';
		$instance['mobile_2'] = !empty($new_instance['mobile_2']) ? $new_instance['mobile_2'] : '';
		$instance['mobile_sort'] = !empty($new_instance['mobile_sort']) ? $new_instance['mobile_sort'] : '';
		
		return $instance;	//更新されたデータが入った配列を戻り値として返す
	}
}

add_action('widgets_init', function(){ register_widget('Widget2ColumnCustomHtml'); } );

/* ----------------------------------------------------
	カスタムHTML2カラムウィジェット（広告貼り付け用）CSS
------------------------------------------------------ */
/* PC,モバイルの横並び設定 */
.w2cchtml_pc,
		.w2cchtml_mobile_horizontal {
	display: table;
	width: 100%;
	table-layout: fixed;
	text-align: center;
	vertical-align: middle;
}

.w2cch_item_tcell {
	display:table-cell;
}

/* モバイルの縦並び設定 */
.w2cchtml_mobile_vertical {
	text-align: center;
}

.w2cchtml_mobile_vertical .w2cch_item_first,
		.w2cchtml_mobile_vertical .w2cch_item_second {
	/* モバイル縦並びだと、ぴったりくっつくので上下に余白を入れる */
	margin: 1em 0;
}

/* モバイル */
@media (max-width: 767px) {
	/* PCグループは消す。モバイルもeraseクラスが定義されている方は消す */
	.w2cchtml_pc,
			.w2cchtml_mobile_horizontal.w2cchtml_erase,
			.w2cchtml_mobile_vertical.w2cchtml_erase {
		display: none;
	}
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1029px) {
	/* モバイルを両方消してPCだけを残す */
	.w2cchtml_mobile_horizontal,
			.w2cchtml_mobile_vertical {
		display: none;
	}
}

/* デスクトップ */
@media (min-width: 1030px) {
	/* モバイルを両方消してPCだけを残す */
	.w2cchtml_mobile_horizontal,
			.w2cchtml_mobile_vertical {
		display: none;
	}
}

add_action('widgets_init', function(){ register_widget('Widget2ColumnCustomHtml'); } );

add_action('widgets_init', 
	create_function('', 'return register_widget("Widget2ColumnCustomHtml");'));