VR_PR Blocks カスタム

WordPress Litning　付属するVK ExUnitのVK_PR Blocksテキストもボーダーで内包したいのでカスタム。
カスタム箇所は、

plugins/vk-all-in-expansion-unit/plugins/other_widget/widget-pr-blocks.php
188行目付近

	public function widget( $args, $instance )
	{
		$instance = self::default_options($instance);
		echo $args['before_widget'];
	
		echo PHP_EOL.'<article class="veu_prBlocks prBlocks row">'.PHP_EOL;

		$widget_block_count = ( isset( $instance['block_count'] )) ? intval( $instance['block_count'] ) : 3;

		$col_class = 'col-sm-4';
		if( $widget_block_count == 4 ){
			$col_class = 'col-sm-3';
		}
echo PHP_EOL.'<div class="row row-eq-height">'.PHP_EOL;
		// Print widget area
		for ( $i = 1; $i <= $widget_block_count; ) {
			if ( isset( $instance[ 'label_'.$i ] ) && $instance[ 'label_'.$i ] ) {
// ----------------------------------------------------------------------------------

// パネルテスト

				
echo '<div class="col-sm-3">'.PHP_EOL;
//リンク
echo '<a href="'.esc_url( $instance[ 'linkurl_'.$i ] ).'" '.$blank.'>'.PHP_EOL ;
echo '<div class="panel panel-primary">'.PHP_EOL;
echo '<div class="panel-heading">'.PHP_EOL;
//タイトル
echo $instance[ 'label_'.$i ];
echo '</div>'.PHP_EOL;
echo '<div class="panel-body">'.PHP_EOL;
echo '<img src="'.esc_url( $instance[ 'media_image_'.$i ] ).'" alt="'.esc_attr( $instance[ 'media_alt_'.$i ] ).'" />'.PHP_EOL;				
echo '<p class="just-padding">'.nl2br( wp_kses_post( $instance[ 'summary_'.$i ] ) ).'</p>'.PHP_EOL;
echo '</div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
echo '</a>';
echo '</div>';
	
	
// ----------------------------------------------------------------------------------	
				
				
				
				//echo '<div class="prBlock '.$col_class.'">'.PHP_EOL;
				
//				echo '<div class="panel panel-primary">'.PHP_EOL;
//					echo '<div class="panel-heading">'.PHP_EOL;
//						// title text
//						echo '<div class="prBlock_title">';
//						if ( isset( $instance[ 'label_'.$i ] ) && $instance[ 'label_'.$i ] ) {
//						echo $instance[ 'label_'.$i ];
//						} else {
//						_e( 'PR Block', 'vkExUnit' );
//						}
//						echo '</div>'.PHP_EOL;
//					echo '</div>'.PHP_EOL;
//
//				echo '<div class="panel-body">'.PHP_EOL;
//					echo 'パネルの内容'.PHP_EOL;
//					echo '</div>'.PHP_EOL;
//					echo '</div>'.PHP_EOL;
				
				
				
				
//				if ( ! empty( $instance[ 'linkurl_'.$i ] ) ) {
//					$blank = ( isset( $instance['blank_'.$i] ) && $instance['blank_'.$i] ) ? 'target="_blank"':'';
//					echo '<a href="'.esc_url( $instance[ 'linkurl_'.$i ] ).'" '.$blank.'>'.PHP_EOL ;
//				}
				// icon font display

//				if (
//					// 画像が未登録 &&
//					empty( $instance[ 'media_image_'.$i ] ) &&
//					// iconFont_class_が空じゃない（ font-awesomeのアイコンが入力されている ）場合
//					! empty( $instance[ 'iconFont_class_'.$i ] )
//				) {
//
//					$styles = 'border:1px solid '.esc_attr($instance[ 'iconFont_bgColor_'.$i ]).';';
//
//					if (
//						!isset( $instance[ 'iconFont_bgType_'.$i ] ) ||
//						$instance[ 'iconFont_bgType_'.$i ] != 'no_paint'
//					){
//						$styles .= 'background-color:'.esc_attr($instance[ 'iconFont_bgColor_'.$i ]).';';
//					}
//
//					echo '<div class="prBlock_icon_outer" style="'.esc_attr( $styles ).'">';
//
//					if ( isset( $instance[ 'iconFont_bgType_'.$i ] ) && $instance[ 'iconFont_bgType_'.$i ] == 'no_paint' ){
//						$icon_styles = ' style="color:'.esc_attr( $instance[ 'iconFont_bgColor_'.$i ] ).';"';
//					} else {
//						$icon_styles = ' style="color:#fff;"';
//					}
//
//					echo '<i class="fa '.esc_attr( $instance[ 'iconFont_class_'.$i ] ).' font_icon prBlock_icon"'.$icon_styles.'></i></div>'.PHP_EOL;
//
//					// image display
//				} else if ( ! empty( $instance[ 'media_image_'.$i ] ) ) {
//					echo '<div class="prBlock_image">'.PHP_EOL;
//					echo '<img src="'.esc_url( $instance[ 'media_image_'.$i ] ).'" alt="'.esc_attr( $instance[ 'media_alt_'.$i ] ).'" />'.PHP_EOL.'</div><!--//.prBlock_image -->'.PHP_EOL;
//				}
				// title text
//				echo '<h1 class="prBlock_title">';
//				if ( isset( $instance[ 'label_'.$i ] ) && $instance[ 'label_'.$i ] ) {
//					echo $instance[ 'label_'.$i ];
//				} else {
//					_e( 'PR Block', 'vkExUnit' );
//				}
//				echo '</h1>'.PHP_EOL;
//
//				// summary text
//				if ( ! empty( $instance[ 'summary_'.$i ] ) ) {
//
//					echo '<p class="prBlock_summary">'.nl2br( wp_kses_post( $instance[ 'summary_'.$i ] ) ).'</p>'.PHP_EOL;
//				}
//
//				if ( ! empty( $instance[ 'linkurl_'.$i ] ) ) {
//					echo '</a>'.PHP_EOL;
//				}
//
//				echo '</div>'.PHP_EOL;
//				echo '<!--//.prBlock -->'.PHP_EOL;
			}
			$i++;
		}
		echo '</div>';	
		//echo '</article>' . $args['after_widget'] . PHP_EOL . '<!-- //.pr_blocks -->';
	}
}

また、これだと高さが合わないので、CSSには

  .panel {
    height: 95%;
    margin-bottom: 5%;
  }

追加、

さらに、画像にそれぞれ左右に隙間があくので、

.nopadding{
padding: 0px;
}
.just-padding{
	padding: 15px;
}

追加して、

echo '<div class="col-sm-3">'.PHP_EOL;
//リンク
echo '<a href="'.esc_url( $instance[ 'linkurl_'.$i ] ).'" '.$blank.'>'.PHP_EOL ;
echo '<div class="panel panel-primary">'.PHP_EOL;
echo '<div class="panel-heading">'.PHP_EOL;
//タイトル
echo $instance[ 'label_'.$i ];
echo '</div>'.PHP_EOL;
echo '<div class="panel-body nopadding">'.PHP_EOL;
echo '<img src="'.esc_url( $instance[ 'media_image_'.$i ] ).'" alt="'.esc_attr( $instance[ 'media_alt_'.$i ] ).'"  />'.PHP_EOL;				
echo '<p class="just-padding">'.nl2br( wp_kses_post( $instance[ 'summary_'.$i ] ) ).'</p>'.PHP_EOL;
//echo 'デフォルトのパネル'.PHP_EOL;
echo '</div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
echo '</a>';
echo '</div>';