动态引入 WordPress 帖子

Question

我已经尝试让这个功能运行很多天了，这让我发疯了！

我在 WP 中有一个单页主题，其中一个在左侧有一个 div，其中包含网站中的帖子列表，在右侧，一个 div 应该显示点击帖子的内容。

我找到了this question 和followed up the linked tutorial，并且部分成功了。

我设法动态地带来内容，我想要的只是显示，但似乎任务的顺序是错误的。以下是它的表现：

1. 我点击链接。
2. 当前内容消失。
3. 加载跨度显示正确。
4. SAME 内容淡入。
5. 1 秒左右后，当前内容被新内容替换，地址栏完全没有变化。

这是我的代码：

• atracoes.js $(document).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('.controle nav li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href)){
          var aCarregar = hash+'.html #atr-conteudo';
          $('#atr-conteudo').load(aCarregar)
      }
  });
  
  $('.controle nav li a').click(function() {
  
      var aCarregar = $(this).attr('href')+' #atr-conteudo';
      $('#atr-conteudo').hide('fast',carregarConteudo);
      $('#carregando').remove();
      $('#atracoes').append('<span id="carregando">Carregando...</span>');
      $('#carregando').fadeIn('normal');
  
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
  
      function carregarConteudo () {
          $('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
      }
      function mostrarNovoConteudo () {
          $('#atr-conteudo').show('normal',esconderCarregando());
      }
      function esconderCarregando () {
          $('#carregando').fadeOut('normal');
      }
  
      return false;
      });
      });
  

• index.php（动态内容部分）

  <div class="main" id="atracoes">
  
      <div class="controle">
  
          <nav>
          <?php
          $args = array( 'posts_per_page' => 20);
  
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
              <li>
                  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </li>
          <?php endforeach; 
          wp_reset_postdata();?>
          </nav>
  
      </div>
  
      <div id="atr-conteudo">
  
          <?php the_post_thumbnail(); ?>
          <div id="atr-texto">
              <h2><?php the_title(); ?></h2>
              <?php the_content(); ?>
          </div>
  
      </div>
  
  </div>
  

  • single.php（我用 ajax 采摘的部分）

  <!-- article -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  
      <!-- post thumbnail -->
      <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
              <?php the_post_thumbnail(); // Fullsize image for the single post ?>
          </a>
      <?php endif; ?>
      <!-- /post thumbnail -->
  
  
      <div id="atr-texto">
      <!-- post title -->
      <h1>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
      </h1>
      <!-- /post title -->
  
      <?php the_content(); // Dynamic Content ?>
  
      <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
      </div>
  </article>
  

Answer 1

您在调用函数之前将它们传递给 jQuery 执行，而不是让 jQuery 执行它们：

function carregarConteudo () {
    $('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
    $('#atr-conteudo').show('normal',esconderCarregando);
}

（请注意它们在函数名称后不再有()）