더 많은 버튼 스크립트로드 : 텍스트 대신 이미지

Question

표준 탐색 기능을 간단한로드 버튼으로 대체하기 위해 내 테마 용 플러그인을 제작했습니다.

그러나 플러스의 png 이미지로 단추를 변경하고 싶습니다. 이미지를 표시하는 대신 스크립트에 대한 링크 만 표시 할 수 있습니다.

나는 누군가에게 나에게 힌트를 줄 수 있을지 궁금해서 자바 스크립트 일 뿐이므로 상당히 새롭다. 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 

?> 

Answer 1

파일

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(); 
     }); 
    }); 


}); 

:

플러그인은 loadmore.js 파일과 index.php 파일

loadmore.js와 함께 작동 이 질문에 유용한 정보가 아닙니다. 더 명확하고 실제적인 문제에 집중해야합니다. 이미지를 단추에 넣거나 이미지를 단추로 사용 하시겠습니까? Javascript, jQuery 또는 PHP 코드에서이 작업을 수행 하시겠습니까?