WordPress ページングはやめてAjaxローディング表示にしたい

  • nagaichiya

    (@nagaichiya)


    10年前

    初めて投稿させていただきます。投稿に関して至らぬところはお許し下さい。
    下記のぺージを参考にいろいろ試して見ているのですが、投稿のローディング表示ができず困っています。javascript ajax初心者なのであまりわからない状況でとりあえず、コピペして試したり、いろいろ参考ページなどみて試していますが動きません。

    他の方々の内容も見ているのですが、手詰まりの状況です。

    環境はXAMPP(最新バージョン)で動かそうとしています。
    テーマは独自テーマでつくろうとしています。

    他に読み込みファイルとして,jsファイルとmore-disp.phpファイルを作成し、
    テーマフォルダに格納しました。jsファイルはjsというフォルダを作成して
    そこに置きました。

    何卒ご教授お願いいたします。

    下記がindex.php ファイルです。

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>
<?php bloginfo('name'); ?>
<?php wp_title(); ?>
</title>
<meta name="description" content="XXXXXXXXX">
<meta name="keywords" content="XXXXXX">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<?php wp_enqueue_script('jqery.js',get_template_directory_uri() . '/js/jqery.js'); ?>
<?php wp_enqueue_script('style.js',get_template_directory_uri() . '/js/style.js'); ?>
</head>

<body>
<?php wp_head(); ?>
<!-- ********************header**************************** -->
<header id="headerwrap">
  <div class="headerInner">
    <h1 class="logo"><a href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('template_url'); ?>/img/commonslogo.gif" width="200" height="27" alt="XXXXXXXX"></a></h1>
    <nav id="g-navi">
      <ul>
        <li id="outline"><a href="#"><span>会社概要</span></a></li>
        <li id="case"><a href="#"><span>実績紹介</span></a></li>
        <li id="contact"><a href="#menu1" class="menu-link"><span>お問合せ</span></a></li>
      </ul>
    </nav>
    <div class="tel"><img src="<?php bloginfo('template_url'); ?>/img/nav/telephone.gif" width="190" height="32" alt="お問合せ　"></div>
  </div>
  </div>
</header>
<!-- ************************//header************************ --> 

<!-- **********************投稿記事部分************************-->

<div id="maincontents">
  <section id="content">
    <?php query_posts('posts_per_page=5'); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <article>
      <h2><a href="<?php the_permalink() ?>">
        <?php the_title(); ?>
        </a></h2>
      <div class="excerpt">
        <?php the_excerpt(); ?>
      </div>
    </article>
    <?php endwhile; ?>
    <?php else : ?>
    Not Found.
    <?php endif; ?>
    <?php wp_reset_query(); ?>
    <div id="more_disp"><a href="#">もっと表示</a></div>
  </section>
</div>
<!-- **********************投稿記事部分************************-->
</div>
</div>
<!-- **********************footer************************-->

<?php wp_footer(); ?>
<!-- **********************//footer************************-->
</body>
</html>

    下記が、style.jsです。

    var now_post_num = 5; // 現在表示されている数
var get_post_num = 5; // 一度に取得する数

$(function() {
    $("#more_disp a").live("click", function() {

        $("#more_disp").html('<img class="ajax_loading" src="http://localhost/common/wp-content/themes/commons-blog/img/loding.gif" />');

        $.ajax({
            type: 'post',
            url: 'http://localhost/common/wp-content/themes/commons-blog/more-disp.php',
            data: {
                'now_post_num': now_post_num,
                'get_post_num': get_post_num
            },
            success: function(data) {
                now_post_num = now_post_num + get_post_num;
                $("#content").append(data);
                $("#more_disp").remove();
                $("#content").append('<div id="more_disp"><a href="#">もっと表示</a></div>');
            }
        });
        return false;
    });
});

    下記がmore-disp.phpです。

    <?php

require_once("../../../wp-config.php");

$now_post_num = $_POST['now_post_num'];
$get_post_num = $_POST['get_post_num'];

$sql = "SELECT
        $wpdb->posts.ID,
        $wpdb->posts.post_title,
        $wpdb->posts.post_excerpt
    FROM
        $wpdb->posts
    WHERE
        $wpdb->posts.post_type = 'post' AND $wpdb->posts.post_status = 'publish'
    ORDER BY
        $wpdb->posts.post_date DESC
    LIMIT $now_post_num, $get_post_num";

$results = $wpdb->get_results($sql);

$html = "";

foreach ($results as $result) {
    $html .= '<article>';
    $html .= '<h2><a href="'.get_permalink($result->ID).'">'.apply_filters('the_title', $result->post_title).'</a></h2>';
    $html .= '<div class="excerpt">'.apply_filters('the_excerpt', $result->post_excerpt).'</div>';
    $html .= '</article>';
}
echo $html;

?>

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • モデレーター Daisuke Takahashi

    (@extendwings)

    10年前

    WordPress自体とはあまり関係なさそうなので解決のためのヒントだけ。

    現在、広く使用されているブラウザにはスクリプトのデバッグ機能がありますのでまずは試してみてください。
    不正なプログラムや見つからないファイルがあればその多くを発見することができます。

    また、同じ方が新しい記事を公開されているので、そちらも見てみてください。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「WordPress ページングはやめてAjaxローディング表示にしたい」には新たに返信することはできません。