Wordpress通过AJAX加载php内容

时间：2016-02-26 15:15:47

标签： javascript php jquery ajax wordpress

我试图让这个小组工作： enter image description here

左侧的元素是h4，其data- *属性包含必须通过$.ajax();在中间部分加载的帖子类别。在那里我只显示the_post_thumbnail();一个简单的php循环。 然后单击一个img我想通过右侧框中的$.ajax();加载帖子的详细信息。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('h4.homus-partners-global-ajax').click(function() {
    var pb_cat = $(this).data('pb-cat');
    $('section').append(pb_cat);

    $.ajax({

      // type: "POST",
      // url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",


      success: function(result) {

        $('ul.homus-partners-section-slide').html(result);

        $('section').append(result);
      }
    });

  });
});
＆＃13; 
section.homus-partners {
  max-width: 960px;
  height: 150px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: auto;
  margin-top: 60px;
}
@media screen and (max-width: 940px) {
  section.homus-partners {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 480px;
    height: 100%;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners {
    margin-top: 30px;
    max-width: 100vw;
  }
}
section.homus-partners .homus-partners-list {
  max-width: 170px;
  background-color: #a21c26;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
  text-align: left;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list {
    max-width: 480px;
    min-height: 40px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  margin-left: 30px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap {
    margin: 10px 30px;
    max-width: 480px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  font-weight: 400;
  text-transform: capitalize;
  padding: 3px 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax {
    margin: 0 5px;
  }
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 25%;
  left: -15px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
  border-left: 5px solid rgba(255, 255, 255, 0.5);
}
section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
  border-left: 5px solid #ffffff;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before,
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    position: absolute;
    width: 1px;
    height: 1px;
    left: calc(50% - 5px);
    top: auto;
    bottom: -5px;
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:hover::before {
    border-bottom: 5px solid rgba(255, 255, 255, 0.5);
  }
  section.homus-partners .homus-partners-list .homus-partners-wrap h4.homus-partners-global-ajax:active::before {
    border-bottom: 5px solid #ffffff;
  }
}
section.homus-partners .homus-partners-section {
  background-color: #c22633;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 490px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-section {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section {
    min-height: 100px;
  }
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right {
  margin: 0 10px;
  height: 150px;
  width: 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
section.homus-partners .homus-partners-section .homus-partner-section-arrow-left i,
section.homus-partners .homus-partners-section .homus-partner-section-arrow-right i {
  color: #ffffff;
  cursor: pointer;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
section.homus-partners .homus-partners-section .homus-partners-section-inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 460px;
  height: 150px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-left: 0px;
  width: auto !important;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single:last-of-type {
  padding: 0;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}
section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-section .homus-partners-section-inner ul.homus-partners-section-slide .homus-partners-section-single img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis {
  max-width: 310px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: inset 0 0 0 5px #c22633;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis {
    max-width: 480px;
    min-height: 140px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 5px;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img {
    width: 30%;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 480px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-img img {
    width: 70px;
    height: 70px;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: auto;
}
@media screen and (max-width: 940px) {
  section.homus-partners .homus-partners-detalis .homus-partners-detalis-info {
    max-width: 70%;
    margin: 0 10px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info h4 {
  font-weight: 700;
  color: #c22633;
}
section.homus-partners .homus-partners-detalis .homus-partners-detalis-info p {
  padding-right: 10px;
  font-size: 12px;
  line-height: 18px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="homus-partners">
  <div class="homus-partners-list">
    <div class="homus-partners-wrap">
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_partner">
        partners
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_ente">
        enti
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="">
        associazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_coll">
        collaborazioni
      </h4>
      <h4 class="homus-partners-global-ajax" data-pb-cat="pb_media">
        media
      </h4>
    </div>
  </div>

  <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

    <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
      <i class="uk-icon-caret-left"></i>
    </a>

    <div class="homus-partners-section-inner uk-slider-container">

      <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

        <div class="homus-partners-section uk-slidenav-position" data-uk-slider>

          <a class="homus-partner-section-arrow-left uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous">
            <i class="uk-icon-caret-left"></i>
          </a>

          <div class="homus-partners-section-inner uk-slider-container">

            <ul class="homus-partners-section-slide uk-slider uk-grid-width-medium-1-4">

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

              <li class="homus-partners-section-single">
                <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg">
              </li>

            </ul>

          </div>

          <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
            <i class="uk-icon-caret-right"></i>
          </a>


        </div>

      </ul>

    </div>

    <a class="homus-partner-section-arrow-right uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next">
      <i class="uk-icon-caret-right"></i>
    </a>


  </div>

  <div class="homus-partners-detalis">
    <div class="homus-partners-detalis-img">
      <img src="http://www.domyownpestcontrol.com/images/content/mouse.jpg" />
    </div>
    <div class="homus-partners-detalis-info">
      <h4>Fenice Pool</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

</section>
＆＃13;
＆＃13;
＆＃13;

这是我正在努力的cose但是我无法附加任何img来尝试ajax函数既不加载php内容，因为服务器响应500错误

EDIT 如我所知，我提供了PHP代码

这是我要替换的代码

    <?php get_template_part('loop_pb_coll') ?>

这是加载新代码的ajax函数

 $.ajax({
  type: "POST",
  url: "wp-content/themes/homus-theme/loop_"+ pb_cat+".php",
  success: function(result){
    $('ul.homus-partners-section-slide').html('<?php get_template_part('+result+') ?>');
    $('footer').append(result);
  }
 });

这是我得到的错误 enter image description here

2 个答案:

答案 0 :(得分：1)

WordPress有一种处理ajax请求的特定方法。将外部PHP脚本放在WordPress结构中是不好的做法。如果需要，将它们放在服务器上不受WordPress .htaccess控制的地方。

如果你不包含wp-blog-header.php（这将触发WordPress的引导过程），

WordPress函数无论如何都不能在这个脚本中工作。

您可以在主题内或您创建的自定义插件中处理Ajax请求。

在WordPress中处理Ajax请求的正确方法是在WordPress codex中描述的扩展：

https://codex.wordpress.org/AJAX_in_Plugins

选项1：创建自定义插件并使用codex中描述的功能

选项2：使用自定义主题或子主题中的codex中所述的ajax函数

选项3：在服务器结构上的WordPress文件夹结构外部创建一个外部PHP文件，并对此外部脚本进行ajax调用。

选项1和2在迁移方面是很好的做法。

答案 1 :(得分：0)

你的header.php中的

添加这个来声明你的ajax网址

<script>var ajaxURL = '<?php echo esc_js(admin_url('admin-ajax.php'));?>';</script>

然后在你的JS。

$(document).delegate('h4.homus-partners-global-ajax', 'click', function(event) {
    event.preventDefault();
    var pb_cat = $(this).data('pb-cat');
    var data = {
        'action': 'GetPost',
        catURL : "loop_"+ pb_cat,
    };
    $.post(ajaxURL, data, function(response) {
        $( 'ul.homus-partners-section-slide' ).html(response);
    });

  });

然后在你的functions.php中

function GetPost(){
    $cat = $_POST['catURL'];
    get_template_part($cat);
    exit();
}
add_action('wp_ajax_nopriv_GetPost', 'GetPost');
add_action('wp_ajax_GetPost', 'GetPost');
相关问题
最新问题