WordPress Litning 付属するVK ExUnitのVK_PR Blocksテキストもボーダーで内包したいのでカスタム。
カスタム箇所は、
plugins/vk-all-in-expansion-unit/plugins/other_widget/widget-pr-blocks.php
188行目付近
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
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には
|
1 2 3 4 |
.panel { height: 95%; margin-bottom: 5%; } |
追加、
さらに、画像にそれぞれ左右に隙間があくので、
|
1 2 3 4 5 6 |
.nopadding{ padding: 0px; } .just-padding{ padding: 15px; } |
追加して、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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>'; |
