Kiểm soát các cột tiện ích con ở chân trang từ Trang cài đặt chủ đề trong Genesis

Trước đây, tôi đã viết một bài hướng dẫn “ Cách thay đổi văn bản bản quyền chân trang từ Trang Cài đặt Chủ đề Genesis “. Hôm nay tôi viết bài này và hướng dẫn bạn cách thay đổi khu vực tiện ích chân trang từ trang Cài đặt Chủ đề Genesis

Tôi đã thêm mã PHP sau vào tệp functions.php:

Tạo Cài đặt Chủ đề cho Tiện ích Chân trang

function gd_defaults_settings_fields( $default_settings ) { 
$default_settings['footer_widgets'] = 3; // default is 3
return $default_settings;
}
add_filter( 'genesis_theme_settings_defaults', 'gd_defaults_settings_fields' );
function gd_genesis_settings_sanitization_filters() {
genesis_add_option_filter( 
'no_html', 
GENESIS_SETTINGS_FIELD,
array(
'footer_widgets'
) );
}
add_action( 'genesis_settings_sanitizer_init', 'gd_genesis_settings_sanitization_filters' );
add_action('genesis_theme_settings_metaboxes', 'gd_add_metaboxes', 99, 1);
function gd_add_metaboxes( $pagehook ){
if( is_admin() ):
add_meta_box( 'genesis-theme-settings-footer-widgets', __( 'Footer Widget Settings', 'genesis_developer' ), 'gd_footer_widgets_box', $pagehook, 'main', 'high' ); 
endif;
}
// Footer Widgets UI
function gd_footer_widgets_box(){
?>
<p>
<label for="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]"><?php _e( 'Footer Widgets:', 'genesis' ); ?></label>
<select name="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]" id="<?php echo GENESIS_SETTINGS_FIELD;?>[footer_widgets]">
<?php for($i=0; $i <= 6; $i++){ ?>
<option value="<?php echo $i; ?>"<?php selected( $i, genesis_get_option( 'footer_widgets' ) ); ?>><?php echo $i; ?></option>
<?php } ?>
</select> 
</p>
<?php
}

Thêm Hỗ trợ Tiện ích Chân trang

//* Add support for flexible footer widgets   
$footer_widgets = ( intval( genesis_get_option('footer_widgets') ) > -1 ) ? genesis_get_option('footer_widgets') : 3 ;
add_theme_support( 'genesis-footer-widgets', intval($footer_widgets) );
if( intval($footer_widgets) > 0 ){
  add_filter( 'genesis_attr_footer-widgets', 'gd_genesis_attributes_footer_widgets' );
  function gd_genesis_attributes_footer_widgets($attributes){
     $attributes['class'] .= ' gd-footer-widgets-' . genesis_get_option('footer_widgets');
     return $attributes;
  }
}

Tạo kiểu cho hiệu ứng đáp ứng

Tôi đã thêm CSS sau vào tệp style.css

/* 
 1 Column Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-1 .footer-widgets-1{
  clear: both;
  display: table;
  float: none;
  width: 100%;
}
/* 
 2 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-2 .footer-widgets-1,
.gd-footer-widgets-2 .footer-widgets-2{
  width: 48.717948717948715%;
}
/* 
 3 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-3 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-2,
.gd-footer-widgets-3 .footer-widgets-3{
  width: 31.623931623931625%;
}
/* 
 4 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-4 .footer-widgets-1,
.gd-footer-widgets-4 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-3,
.gd-footer-widgets-4 .footer-widgets-4{
  width: 23.076923076923077%;
}
/* 
 5 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-5 .footer-widgets-1,
.gd-footer-widgets-5 .footer-widgets-2,
.gd-footer-widgets-5 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-4,
.gd-footer-widgets-5 .footer-widgets-5{
  width: 18%;
}
/* 
 6 Columns Footer Widget 
---------------------------------------------------------------------------*/
.gd-footer-widgets-6 .footer-widgets-1,
.gd-footer-widgets-6 .footer-widgets-2,
.gd-footer-widgets-6 .footer-widgets-3,
.gd-footer-widgets-6 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-5,
.gd-footer-widgets-6 .footer-widgets-6{
  width: 14.52991452991453%;
}
.gd-footer-widgets-2 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-1,
.gd-footer-widgets-3 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-1,
.gd-footer-widgets-4 .footer-widgets-2,
.gd-footer-widgets-4 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-1,
.gd-footer-widgets-5 .footer-widgets-2,
.gd-footer-widgets-5 .footer-widgets-3,
.gd-footer-widgets-5 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-1,
.gd-footer-widgets-6 .footer-widgets-2,
.gd-footer-widgets-6 .footer-widgets-3,
.gd-footer-widgets-6 .footer-widgets-4,
.gd-footer-widgets-6 .footer-widgets-5{
  float: left;
  margin-right: 2.5%;
}
.gd-footer-widgets-2 .footer-widgets-2,
.gd-footer-widgets-3 .footer-widgets-3,
.gd-footer-widgets-4 .footer-widgets-4,
.gd-footer-widgets-5 .footer-widgets-5,
.gd-footer-widgets-6 .footer-widgets-6{
  float: right;
}
@media only screen and (max-width: 1023px) {
  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4{
    float: left;
    margin-right: 2.5%;
    width: 48.717948717948715%;
  }
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-4{
    float: right;
    margin-right: 0;
  }
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: left;
    margin-right: 2.5%;
    width: 31.623931623931625%;
  }
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: right;
    margin-right: 0;
  }
}
@media only screen and (max-width: 900px) {
  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: left;
    margin-right: 2.5%;
    width: 48.717948717948715%;
  }
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: right;
    margin-right: 0;
  }
  .gd-footer-widgets-3 .footer-widgets-1,
  .gd-footer-widgets-3 .footer-widgets-2,
  .gd-footer-widgets-3 .footer-widgets-3,
  .gd-footer-widgets-5 .footer-widgets-1,
  .gd-footer-widgets-5 .footer-widgets-2,
  .gd-footer-widgets-5 .footer-widgets-3,
  .gd-footer-widgets-5 .footer-widgets-4,
  .gd-footer-widgets-5 .footer-widgets-5{
    float: none;
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .gd-footer-widgets-2 .footer-widgets-1,
  .gd-footer-widgets-2 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-1,
  .gd-footer-widgets-4 .footer-widgets-2,
  .gd-footer-widgets-4 .footer-widgets-3,
  .gd-footer-widgets-4 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-1,
  .gd-footer-widgets-6 .footer-widgets-2,
  .gd-footer-widgets-6 .footer-widgets-3,
  .gd-footer-widgets-6 .footer-widgets-4,
  .gd-footer-widgets-6 .footer-widgets-5,
  .gd-footer-widgets-6 .footer-widgets-6{
    float: none;
    margin-right: 0;
    width: 100%;
  }
}