Sau khoảng thời gian dài, một mẹo mới khác được xuất bản ngày hôm nay.
Hiện tại, rất nhiều người dùng đang sử dụng Genesis Responsive Slider hoặc Soliloquy Slider trong Genesis Child Theme. Nhưng tôi đang sử dụng thanh trượt phiên bản miễn phí. Flexslider là một thanh trượt miễn phí đến từ WooThemes. Chủ đề PRO tối thiểu không có tùy chọn thanh trượt cho trang chủ. Vì vậy, tôi chọn chủ đề này và thay thế biểu ngữ đầy đủ băng thông bằng thanh trượt này. Sau đây là các bước:
Bước 1: Tạo thanh trượt CPT
Đầu tiên đăng ký loại bài đăng tùy chỉnh “ Slider ”. Vì vậy, người dùng có thể dễ dàng xử lý nội dung thanh trượt từ Trang tổng quan. Tạo một tệp mới “ slider-cpt.php ” và tải nó lên thư mục chủ đề con. Tệp chứa các mã sau:
/*-----------------------------------------------------------------------------------*/
/* Custom Post Type - Slider */
/*-----------------------------------------------------------------------------------*/
if ( ! function_exists( 'gd_add_cpt_slider' ) ) {
function gd_add_cpt_slider() {
// "Slider" Custom Post Type
$labels = array(
'name' => _x( 'Slider', 'post type general name', 'genesisdeveloper' ),
'singular_name' => _x( 'Slider', 'post type singular name', 'genesisdeveloper' ),
'add_new' => _x( 'Add New', 'slide', 'genesisdeveloper' ),
'add_new_item' => __( 'Add New Slider', 'genesisdeveloper' ),
'edit_item' => __( 'Edit Slider', 'genesisdeveloper' ),
'new_item' => __( 'New Slider', 'genesisdeveloper' ),
'view_item' => __( 'View Slider', 'genesisdeveloper' ),
'search_items' => __( 'Search Slider', 'genesisdeveloper' ),
'not_found' => __( 'No slider found', 'genesisdeveloper' ),
'not_found_in_trash' => __( 'No slider found in Trash', 'genesisdeveloper' ),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'slider' ),
'capability_type' => 'post',
'hierarchical' => false,
'menu_icon' => 'dashicons-slides',
'menu_position' => null,
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail' )
);
$args['exclude_from_search'] = true;
register_post_type( 'slider', $args );
}
add_action( 'init', 'gd_add_cpt_slider' );
add_action( 'add_meta_boxes', 'gd_add_slider_custom_box' );
add_action( 'save_post', 'gd_slider_metabox_save', 1, 2 );
function gd_add_slider_custom_box(){
add_meta_box('slider_details', __( 'Slider Settings', 'cs' ), 'slider_meta_box', 'slider', 'side', 'high');
}
function slider_meta_box(){
wp_nonce_field( 'gd_slider_metabox_save', 'gd_slider_metabox_nonce' );
$readMoretxt = (get_post_meta(get_the_ID(), '_readmore_txt', true)) ? get_post_meta(get_the_ID(), '_readmore_txt', true) : "Read More";
echo '<div style="width: 90%;">';
printf( '<p><label>%s <input type="checkbox" id="show_content" name="sld[_hide_content]" value="yes" %s/></label></p>', __( 'Disable the title & content', 'cs' ), checked("yes", esc_attr( get_post_meta(get_the_ID(), '_hide_content', true) ), false) );
printf( '<p><span class="description">%s</span></p>', __( 'Hide the title, content & read more button from slider image', 'genesisdeveloper' ) );
echo '</div>';
echo '<div style="width: 90%;">';
printf( '<p><label>%s<input type="text" name="sld[_readmore_url]" id="readmore_url" class="large-text" value="%s" /></label></p>', __( 'Read More URL: ', 'cs' ), esc_attr( get_post_meta(get_the_ID(), '_readmore_url', true) ) );
printf( '<p><span class="description">%s</span></p>', __( 'Link of Read More Button', 'genesisdeveloper' ) );
echo '</div>';
echo '<div style="width: 90%;">';
printf( '<p><label>%s<input type="text" name="sld[_readmore_txt]" id="readmore_txt" class="large-text" value="%s" /></label></p>', __( 'Read More Text: ', 'cs' ), esc_attr( $readMoretxt ) );
printf( '<p><span class="description">%s</span></p>', __( 'Replace the Read More button text', 'genesisdeveloper' ) );
echo '</div><br style="clear: both;" />';
}
function gd_slider_metabox_save( $post_id, $post ) {
/** Run only on testimonials post type save */
if ( 'slider' == $post->post_type ) {
/** Verify the nonce */
if ( ! wp_verify_nonce( $_POST['gd_slider_metabox_nonce'], 'gd_slider_metabox_save' ) )
return;
/** Don't try to save the data under autosave, ajax, or future post */
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) return;
if ( defined( 'DOING_CRON' ) && DOING_CRON ) return;
/** Check permissions */
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
$sld_details = $_POST['sld'];
/** Store the custom fields */
foreach ( (array) $sld_details as $key => $value ) {
/** Save/Update/Delete */
if ( $value ) {
update_post_meta($post->ID, $key, $value);
} else {
delete_post_meta($post->ID, $key);
}
if(!isset($sld_details['_hide_content'])){
delete_post_meta($post->ID, '_hide_content');
}
}
}
}
}
Bước 2: Bao gồm tệp PHP và tạo kích thước hình ảnh mới cho thanh trượt
Bao gồm tệp “ slider-cpt.php ” trong tệp functions.php và tạo kích thước hình ảnh mới cho hình ảnh thanh trượt. Đặt các mã sau vào tệp functions.php:
//including slider CPT
include('slider-cpt.php');
//* Add new image size
add_image_size( 'slider', 9999, 750, TRUE );
Bước 3. Loại bỏ biểu ngữ mặc định và thêm Thanh trượt trên Trang chủ
Tải xuống gói flexlsider từ http://www.woothemes.com/flexslider/ và tải lên tệp “ jquery.flexslider-min.js ” trong thư mục “js” và tệp “ flexslider.css ” trong thư mục css của thư mục chủ đề con chuyên nghiệp tối thiểu . Bây giờ, hãy mở tệp front-page.php trên Notepad ++ và tìm hàm “Minimum_front_page_enqueue_scripts” này . Thay thế tất cả các tập lệnh backstretch bằng các tập lệnh Flexslider JS / CSS ở đó. Vì vậy, hàm sẽ có dạng như sau:
function minimum_front_page_enqueue_scripts() {
wp_enqueue_style( 'flexslider-css', get_bloginfo('stylesheet_directory') . '/css/flexslider.css', array(), '1.0', 'all' );
wp_register_script( 'flexslider-js', get_bloginfo('stylesheet_directory') . '/js/jquery.flexslider-min.js', array( 'jquery' ) );
wp_enqueue_script( 'flexslider-js' );
//* Add custom body class
add_filter( 'body_class', 'minimum_add_body_class' );
}
Bây giờ, thêm thanh trượt sau tiêu đề bằng hook genesis_ after_header . Vì vậy, hãy thêm các mã mới sau vào tệp front-page.php :
// Don't include the opening PHP tag
add_action('genesis_after_header', 'gdSlider', 5);
function gdSlider($atts){
$args = array('posts_per_page' => -1, 'post_type' => 'slider');
$slider = new WP_Query($args);
if( $slider->have_posts() ){
$sld= '<div class="flexslider">
<ul class="slides">' . "\n";
while( $slider->have_posts() ){
$slider->the_post();
$hideContent = get_post_meta(get_the_ID(), '_hide_content' ,true);
$readmoreTxt = get_post_meta(get_the_ID(), '_readmore_txt' ,true);
$readmoreLink = get_post_meta(get_the_ID(), '_readmore_url' ,true);
$img = genesis_get_image( array(
'format' => 'html',
'size' => 'slider',
'context' => 'archive',
'attr' => array ( 'class' => 'slider-image' )
) );
if( $img ){
$sld .= '<li>' . $img . "\n" ; //'<h2 class="slider-title">' . the_title('', '', false) . '</h2>'. "\n" .
if( $hideContent != "yes"){
$sld .= '<div class="flex-caption">' . "\n" .
'<h2 class="title">' . get_the_title() . '</h2>' . "\n" .
'<p class="caption">' . get_the_content() . ( ($readmoreLink != '') ? '<br/><a href="'.$readmoreLink.'" class="read-more">'.$readmoreTxt.'</a>' : '' ) . '</p>' . "\n" .
'</div>' . "\n";
}
$sld .='</li>' . "\n";
}
}
$sld .= '</ul>' . "\n";
$sld .= '</div>' . "\n";
$sld .= '<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".flexslider").flexslider({
selector: ".slides > li",
animation: "fade",
slideshow: true,
slideshowSpeed: 9000,
animationSpeed: 1050,
controlNav: true,
directionNav: false,
pauseOnHover: false
});
});
</script>' . "\n";
}
wp_reset_query();
echo $sld;
}
Bước 4: Tạo kiểu
Thêm CSS sau vào tệp style.css
.minimum .flexslider {
background: #fff;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
overflow: hidden;
top: 60px;
}
@media only screen and (min-width: 768px) {
.flex-caption{
background: rgba(0,0,0,0.75);
bottom: 0px;
color: #FFF;
letter-spacing: 1px;
max-width: 350px;
padding: 20px;
position: absolute;
right:0;
}
.flex-caption h2.title{
color: #FFF;
text-transform: uppercase;
}
.flex-caption a.read-more{
border: 1px solid #FFF;
clear: both;
color: #FFF;
cursor: pointer;
display: table;
padding: 10px 28px;
margin: 10px 0;
}
.minimum .flex-control-nav {
position: absolute;
left: 10px;
text-align: center;
top: 40%;
width: auto;
z-index: 20;
}
.minimum .flex-control-nav li {
display: block;
margin: 0 0 1px;
}
.minimum .flex-control-paging li a {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
display: block;
height: 25px;
width: 4px;
}
}
@media only screen and (max-width: 1023px) {
.minimum .flexslider { top: 0; }
}
Chuyển đến dòng số 485 và thay thế CSS hiện tại bằng dòng này
.minimum .site-tagline {
margin-top: 0!important;
}