javascript - Wordpress 通过 AJAX 加载 php 内容

标签 javascript php jquery ajax wordpress

我正在尝试让这个面板工作: enter image description here

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

$(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);
      }
    });

  });
});
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;
}
<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>

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

编辑 按照要求我提供了 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

最佳答案

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

如果您不包含 wp-blog-header.php(这将触发 WordPress 的引导过程)，WordPress 函数将无法在此脚本中运行。

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

在 WordPress 代码中广泛描述了在 WordPress 中处理 Ajax 请求的正确方法:

https://codex.wordpress.org/AJAX_in_Plugins

选项 1:创建自定义插件并使用代码中描述的功能

选项 2:在自定义主题或子主题中使用 codex 中描述的 ajax 函数

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

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

关于javascript - Wordpress 通过 AJAX 加载 php 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35655330/

上一篇：javascript - 如何在异步操作期间使 Express.js 记录错误

下一篇：javascript - 如何在 jquery 中将 img src 设置为 php session

相关文章：

javascript - 使用 jQuery 和 ajax 尝试写入锁定记录的最佳方法？

javascript - 在 React 中为 Google Analytics 安装 Google 标签管理器时遇到困难

php - 有人熟悉PHP源代码吗？

php - 在数组 PHP 中插入值

javascript - `fail` 类添加到 jQuery 中的 MixItUp 容器

JavaScript 和查询选择器

javascript - 如何使用 jQuery 从页面上的每个元素中删除类

php - 任何 php artisan 命令卡住终端

jquery - 使用 webpack 在 Angular2 中包含 jQuery 并从组件访问它

javascript - 使用 javascript 修改 CSS

©2024 IT工具网  联系我们