你可以去看看this tutorial 作者：Josh Pollock。我已经摘录了该教程的部分内容。
添加这些选项将允许您在管理界面中设置移动版面和每个版面的帖子数量，如果您想更改设置，则无需更改代码。
function awesome_2014_customize_register() {
global $wp_customize;
//add extended featured content section
//add controls
$wp_customize->add_setting( \'num_posts_grid\', array( \'default\' => \'6\' ) );
$wp_customize->add_setting( \'num_posts_slider\', array( \'default\' => \'6\' ) );
$wp_customize->add_setting( \'layout_mobile\', array( \'default\' => \'grid\' ) );
$wp_customize->add_control( \'num_posts_grid\', array(
\'label\' => __( \'Number of posts for grid\', \'text-domain\'),
\'section\' => \'featured_content\',
\'settings\' => \'num_posts_grid\',
) );
$wp_customize->add_control( \'num_posts_slider\', array(
\'label\' => __( \'Number of posts for slider\', \'text-domain\'),
\'section\' => \'featured_content\',
\'settings\' => \'num_posts_slider\',
) );
$wp_customize->add_control( \'layout_mobile\', array(
\'label\' => __( \'Layout for mobile devices\', \'text-domain\'),
\'section\' => \'featured_content\',
\'settings\' => \'layout_mobile\',
\'type\' => \'select\',
\'choices\' => array(
\'grid\' => \'Grid\',
\'slider\' => \'Slider\',
),
) );
}
add_action( \'customize_register\', \'awesome_2014_customize_register\' );
为移动设备指定不同的布局
function awesome_2014_theme_mod( $value ) {
if ( wp_is_mobile() ){
return get_theme_mod( \'layout_mobile\', \'grid\' );
} else {
return $value;
}
}
add_filter( \'theme_mod_featured_content_layout\', \'awesome_2014_theme_mod\' );
> Setting the Number of Posts For Each Layout
function awesome_2014_get_featured_posts( $posts ){
$fc_options = (array) get_option( \'featured-content\' );
if ( $fc_options ) {
$tag_name = $fc_options[\'tag-name\'];
} else {
$tag_name = \'featured\';
}
$layout = get_theme_mod( \'featured_content_layout\' );
$max_posts = get_theme_mod( \'num_posts_\' . $layout, 2 );
$args = array(
\'tag\' => $tag_name,
\'posts_per_page\' => $max_posts,
\'order_by\' => \'post_date\',
\'order\' => \'DESC\',
\'post_status\' => \'publish\',
);
$new_post_array = get_posts( $args );
if ( count($new_post_array) > 0 ) {
return $new_post_array;
} else {
return $posts;
}
}
add_filter( \'twentyfourteen_get_featured_posts\', \'awesome_2014_get_featured_posts\', 999, 1 );
使滑块自动滚动。现在，将此代码添加到函数中。php：
//dequeue/enqueue scripts
function awesome_2014_featured_content_scripts() {
wp_dequeue_script( \'twentyfourteen-script\' );
wp_dequeue_script( \'twentyfourteen-slider\' );
wp_enqueue_script( \'awesome_2014-script\', get_stylesheet_directory_uri() . \'/js/functions.js\', array( \'jquery\' ), \'\' , true );
if ( is_front_page() && \'slider\' == get_theme_mod( \'featured_content_layout\' ) ) {
wp_enqueue_script( \'awesome_2014-slider\', get_stylesheet_directory_uri() . \'/js/jquery.flexslider-min.js\', array( \'jquery\', \'awesome_2014-script\' ), \'\' , true );
wp_localize_script( \'awesome_2014-slider\', \'featuredSliderDefaults\', array(
\'prevText\' => __( \'Previous\', \'awesome_2014\' ),
\'nextText\' => __( \'Next\', \'awesome_2014\' )
) );
}
}
add_action( \'wp_enqueue_scripts\' , \'awesome_2014_featured_content_scripts\' , 999 );
这段代码还删除了父主题的两个函数。js文件。为了让滑块与Flexslider的完整版本无缝地工作，并确保应用现有的CSS，我们确实需要对主题的功能进行一些小的调整。js文件。将该文件复制到子主题的/js文件夹，打开它，并在底部用以下代码替换初始化特色内容滑块代码：
// Initialize Featured Content slider.
_window.load( function() {
if ( body.is( \'.slider\' ) ) {
$( \'.featured-content\' ).flexslider( {
selector: \'.featured-content-inner > article\',
controlsContainer: \'.featured-content\',
slideshow: true,
slideshowSpeed: 4500,
namespace: \'slider-\',
} );
}
} );
