Блог

Я создавал плагин для своей темы, чтобы заменить стандартную навигацию на простую кнопку «Загрузить больше».

Однако я хотел бы превратить кнопку в изображение 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?