0

以前にこれに関するいくつかの問題を見たことがありますが、石積みのスクリプト内では、正しい軌道に乗っているかどうかわかりません。

結果: コンテンツを div にロードしようとすると、リンクによってまったく新しいページが開きます。

index.php コード:

<div id="primary" class="site-content">
    <div id="content" role="main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="miniLoader"></div>
    <div class="box">
      <a class="miniLoader" href="<?php the_permalink() ?>">
      <?php if (has_post_thumbnail()) {
        the_post_thumbnail('thumbnail');
      }?>
      <h2><?php the_title(); ?></h2></a>
    </div>
    <?php endwhile; endif; ?>
    <?php get_footer(); ?>

header.php コード:

 <script>
jQuery(document).ready(function($){
    $('#container').masonry({
      itemSelector: '.box',
      });
});
 </script>

 <?php wp_head(); ?>

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});
    $(".miniLoader").click(function(){
    var post_id = $(this).attr("href")
    $("#miniLoader").html("loading...");
    $("#miniLoader").load(post_link);
    return false;
 });

 });

私の知る限り、配置はループ内にあり、スクリプトはあるべき場所に収まります。それとも、配置と「rel」について悪いアドバイスを受けていますか? html5 と wordpress 3.5 では「rel」を使用しないと聞いたことがあります...

どんな助けでも大歓迎です！

（これを理解するためにパズルのピースが欠けている場合はお知らせください）

4

2 に答える 2

2

event.preventDefault() を追加して、通常のリンク アクションを無効にしてみてください。

$(".miniLoader").click(function(event){
    event.preventDefault();

また、post_link 変数はまだ設定する必要があるようです。

var post_id = $(this).attr("href");
var post_link = 'your-api-file.php?id=' + post_id;
$("#miniLoader").html("loading...");
$("#miniLoader").load(post_link);

ああ、API ファイルがない場合、jQuery は実際には WordPress ページ全体を読み込むことができますが、必要な要素のコンテンツのみを表示します。この場合、AJAX ロード リクエストは #content 要素の内容のみを取得して表示します。

$('#miniLoader').load('/?p='+ post_id +' #content');
于 2013-01-08T20:14:45.023 に答える
0

@ハンスヴェード

多くのことをいじった後、スクリプトの問題をどのように解決したかを次に示します。

$(document).ready(function(){

$.ajaxSetup({cache:false});
$("h1 a").click(function(event){
    event.preventDefault();
    var post_link = $(this).attr("href");
    $("#miniloader").html("loading...");
    $("#miniloader").load(post_link);
return false;
});

});

インデックスの変更は次のとおりです。

<div id="miniloader" class="miniloader"></div>

#content のみをロードするというヒントを実装しようとしましたが、役に立ちませんでした。「コンテンツ」ID がないように見えますが、以下のコードに実装しようとしました。

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <div class="entry-meta">
 <?php toolbox_posted_on(); ?>
 </div><!-- .entry-meta -->
 </header><!-- .entry-header -->
 <div class="entry-content" id="content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
 </div>
于 2013-01-17T01:46:18.980 に答える