加载更多的按钮脚本:图像而不是文本


Load more button script: image instead of text

我一直在为我的主题构建一个插件,将标准导航替换为一个简单的加载更多按钮。

然而,我想把按钮变成一个加号的png图像。我只能得到脚本到目前为止,它显示链接到图像,而不是显示它。

我在这方面相当新,所以我是javascript的东西,所以我想知道是否有人可以给我一个提示?

插件与loadmore.js文件和index.php文件一起工作

loadmore.js:

if ( next_page <= max_pages ) {
    $( '.paging-navigation' ).html( '<div class="nav-links"><a class="load_more" href="#">' + _load_more.main_img + '</a><img class="load_more_img" style="display: none;" src="' + _load_more.loading_img + '" alt="Loading..." /></div>' );
}
var mt_ajax_load_posts = function() {
    //Begin Ajax
    $.post( _load_more.ajaxurl, { action: 'load_posts', next_page: next_page }, function( response ) {
        next_page = response.next_page;
        max_pages = response.max_pages;
        //Append the HTML
        var html = $.parseHTML( response.html );
        html = $( html ).filter( '.type-post' );
        $( '#content .type-post:last' ).after( html );
        //If the next page exceeds the number of pages available, get rid of the navigation
        if ( next_page > max_pages ) {
            $( '.paging-navigation' ).html( '' );
        }
        //Fade out loading img and fade in loading text
        $( '.load_more_img' ).fadeOut( 'slow', function() {
            $( '.load_more' ).fadeIn( 'slow' );
        } );
    }, 'json' );
};
//Clicking the load more button
$( '.paging-navigation' ).on( 'click', 'a.load_more', function( e ) {
    e.preventDefault();
    $( '.load_more' ).fadeOut( 'slow', function() {
        $( '.load_more_img' ).fadeIn( 'slow', function() {
            mt_ajax_load_posts();
        } );
    } );

} );

index . php文件

add_action( 'plugins_loaded', '_load_more_textdomain' );
function _load_more_textdomain() {
    load_plugin_textdomain( 'HelloDolly-load-more', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
/* Load More */
add_action( 'wp_enqueue_scripts', '_load_more_scripts' );
function _load_more_scripts() {
    global $wp_query;
    if ( !is_home() ) return;
    //Detect HelloDolly
    $theme = wp_get_theme();
    $template = $theme->get_template();
    if ( 'HelloDolly' != $template ) return;
    $max = $wp_query->max_num_pages;
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
    wp_enqueue_script( '-load-more', plugins_url( '/js/loadmore.js', __FILE__ ), array( 'jquery' ), '20131010', true );
    wp_localize_script( '-load-more', '_load_more', array(
        'current_page' => esc_js( $paged ),
        'max_pages' => esc_js( $max ),
        'ajaxurl' => esc_js( admin_url( 'admin-ajax.php' ) ),
        'main_img' => esc_js( plugins_url( '/images/plus.png', __FILE__ ) ),
        'loading_img' => esc_js( plugins_url( '/images/ajax-loader.gif', __FILE__ ) )
    ) );
}
/**
 * Ajax for loading more posts
 * 
 * @author Ronald Huereca <ronald@metronet.no> 
 */
 add_action( 'wp_ajax_load_posts', '_ajax_load_posts' );
 add_action( 'wp_ajax_nopriv_load_posts', '_ajax_load_posts' );
 function _ajax_load_posts() {
    $next_page = absint( $_POST[ 'next_page' ] );
    global $wp_query;
    $wp_query = new WP_Query( array(
        'paged' => $next_page,
        'post_status' => 'publish'
    ) );
    ob_start();
    global $post;
    while( $wp_query->have_posts() ) {
        $wp_query->the_post();
        get_template_part( 'content', get_post_format() );
    };
    $html = ob_get_clean();
    $return_array = array(
        'next_page' => $next_page + 1,
        'max_pages' => $wp_query->max_num_pages,
        'html' => $html
    );
    //return
    die( json_encode( $return_array ) );
 } //end _ajax_load_posts
?>

你在这个问题里放了很多没用的信息。你需要更清楚,更专注于真正的问题。你是想在按钮中放置图像,还是让图像充当按钮?你是想用Javascript, jQuery还是PHP代码?