もっと多くのボタンスクリプトを読み込みます：テキストの代わりに画像

Question

標準のナビゲーションを単純な読み込みボタンに置​​き換えるために、テーマのプラグインを作成しています。

しかし、ボタンをpng画像のプラスに変更したいと思います。 これまでのところ、スクリプトを表示するのではなく、画像へのリンクを表示するだけでスクリプトを取得できます。

私はかなり新しいので、私はJavaScriptのものだったので、誰かが私にヒントを与えることができるかどうか疑問に思っていましたか？ 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コードでこれを行いますか？