Question

我在这个网站上的第一篇文章，我正在为我的第一个自定义wordpress主题寻求一些指导。我对jQuery / AJAX非常陌生，此时它对我的大脑造成了伤害，因为整个过程在下一个过程之后就是一个学习曲线。所以请原谅我无法在线条之间看到并理解已经或可能已经存在的内容。当我搜索时，这个主题有一些结果，但我无法将这些例子转化为我的情况的工作结果......

我希望在“新闻”部分按类别对显示的帖子进行排序... <div id="#container">中有一个子菜单...我的意图是让子菜单链接更改我的内容<div id="contentbox-news"> ...

即。 “最新消息”，“近期建设项目”，“新闻发布公告”等......

以下是“page-news.php”和原始链接Cars & Coffee HFX

中的一些代码

<div id="news_submenu_container"><!-- begin submenu placement -->
            <ul id="news_submenu">
              <li>VIEW</li>
              <li><a href="#" onClick="get_posts_all();">ALL</a></li>
              <li><a href="#" onClick="get_posts_news();">NEWS</a></li>
              <li><a href="#" onClick="get_posts_builds();">BUILDS</a></li>
              <li><a href="#" onClick="get_posts_pr();">PR</a></li>
            </ul>
        </div><!-- end submenu placement -->

        <script>
            function get_posts_all() {
                var posts_all_var = '<?php echo "Insert Wordpress Loop here identified by Category-ID" ?>';
            document.getElementById("contentbox-news").innerHTML = posts_all_var;
            return false;
            }

            function get_posts_news() {
                var posts_news_var = '<?php echo "Huh?" ?>';
            document.getElementById("contentbox-news").innerHTML = posts_news_var;
            return false;
            }

            function get_posts_builds() {
                var posts_builds_var = '<?php echo "Cant get loop to work" ?>';
            document.getElementById("contentbox-news").innerHTML = posts_builds_var;
            return false;
            }

            function get_posts_pr() {
                var posts_pr_var = '<?php echo "DAMNIT!" ?>';
            document.getElementById("contentbox-news").innerHTML = posts_pr_var;
            return false;
            }
        </script>

我现在理解JavaScript和PHP不能以我想的方式一起工作......显然我需要通过AJAX使用一种方法......我在PHP AJAX and MySQL找到了这篇文章，但它太先进了对我来说，我无法理解它并为自己创造一个有效的例子......

但是现在，从周六开始，我已经制作了新的代码，让我这么远，我可以用PHP回应......就此而言。

            function get_posts_builds() {
                var posts_builds_var = '<?php query_posts('cat=6'); 
                                              while (have_posts()):
                                              the_post(); 
                                              the_content(); 
                                              endwhile; ?>';
            document.getElementById("contentbox-news").innerHTML = posts_builds_var;
            return false;
            }

一旦我用这个PHP wordpress循环替换PHP回声，它似乎不会为我做这个技巧和休息。

Answer 1

你确实需要使用AJAX来实现这一目标。 Wordpress have its own way to handle ajax request您可以通过以下几个步骤来完成此操作。我将尝试在这个主题上展示一些WP最佳实践 - 因为可能有更快/更容易/更脏的方式来实现这一点（可能甚至通过插件），这将为您提供Wordpress主题/插件开发的良好介绍。请随意关注文档链接，以更好地了解其工作原理。

1。构建类别菜单

在您的代码示例中，菜单是静态的，但您最好使用动态菜单。一种解决方案可能是使用get_the_category_list，但它不允许您完全控制类别链接。我建议像这样定义一个新的navigation menu（以下代码进入你的主题 functions.php ）：

add_action('after_setup_theme', 'add_categories_menu');
function add_categories_menu() {
  register_nav_menu('categories_menu', __('Categories Menu', 'your-theme-slug'));
}

然后在您的模板中，使用以下内容替换静态菜单，以显示您的全新菜单：

<?php wp_nav_menu(array('theme_location' => 'categories_menu')); ?>

现在要将类别添加到菜单中，登录到Wordpress管理，进入外观＆gt; 菜单，创建一个新菜单，选择主题位置＆＃34;类别菜单＆＃34;为它，并添加类别。

最后一步，我们添加a filter以便在菜单链接上添加onclick属性，该类别会将类别slug发送到名为showPostsFromCategory()的js函数我们稍后会定义。

这包含在你的 functions.php ：

中

function add_onclick_attr_categories_menu($atts, $item, $args) {
    if($args->theme_location == 'categories_menu' && $item->object == 'category') {
        $category = get_category($item->object_id);
        if($category !== null) {
            $atts['onClick'] = 'showPostsFromCategory("' . $item->slug . '")';
        }
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_onclick_attr_categories_menu', 10, 3);

您可能想问一下，为什么我们要在菜单项上保留类别链接？它的搜索引擎优化和可访问性目的：对于没有javascript的浏览器（如屏幕阅读器）或搜索爬虫，仍然可以访问类别页面。

2。为AJAX准备主题

在Wordpress中，需要使用动作参数将所有AJAX请求发送到wp-admin/admin-ajax.php，该参数将识别请求，以便使用{{1}在 functions.php 中捕获它（对于非登录用户）和wp_ajax_nopriv_my_action（对于登录用户）挂钩。

因此，在进一步发展之前，只需迈出一小步即可在JavaScript中访问该路径（wp_ajax_my_action）。首先，创建一个我们将在主题文件夹中用于AJAX流程的js文件，让我们说他的名字将是wp-admin/admin-ajax.php。然后，在 functions.php 中添加以下内容，以enqueue这个新脚本，并通过script localization访问路径：

./js/categories-ajax.js

这样， admin-ajax.php 路径将在您的JS中以add_action('wp_enqueue_scripts', 'ajax_categories_enqueue_scripts'); function ajax_categories_enqueue_scripts() { wp_register_script('categories_ajax', get_stylesheet_directory_uri() . '/js/categories-ajax.js', array('jquery'), '', true); wp_localize_script('categories_ajax', 'ls', array( 'ajax_url' => admin_url('admin-ajax.php') )); wp_enqueue_script('categories_ajax'); }访问。

3。触发ajax请求

是时候创建ls.ajax_url功能了。因此，让我们在您的新 categories-ajax.js 文件中写一下。就个人而言，为了避免在我的插件/主题开发中与jQuery发生任何可能的冲突，我喜欢始终将我的jQuery代码封装在JavaScript closure中，并通过像这样的全局变量来访问函数：

showPostsFromCategory()

所以我现在假设功能代码在一个闭包内基本上，我们现在需要做的是为 admin-ajax.php 设置$.post请求，该请求将发送以下参数：

(function($){ showPostsFromCategory = function(category_slug) { // code function... }; })(jQuery); var showPostsFromCategory;：正在调用的AJAX操作的标识符，以便使Wordpress知道稍后应该调用哪个函数。我们将此命名为action。
dynamic_categories：已在菜单中单击的类别slug。

因此功能代码如下所示：

category

这是非常基本的，您可能希望稍后添加一些错误处理和加载器。这里我们只用AJAX返回替换实际的帖子，我们假设是HTML。在JS方面没有什么要做的，所以现在让我们在PHP方面工作。

4。获取所请求类别的帖子

首先，在 functions.php 中添加以下行，以便将函数get_categories_posts（）附加到showPostsFromCategory = function(category_slug) { $.post(ls.ajax_url, {action: 'dynamic_categories', category: category_slug}, function success(data) { $('#your-post-content-wrapper').html(data); // Update the page with the new posts -- change this ID to the correct one }); return false; // this is to cancel the link click, so the page isn't being redirected }和wp_ajax_dynamic_categories操作。

wp_ajax_nopriv_dynamic_categories

现在，我们需要在函数中执行以下操作：

检查类别slug是否有效且是否有关联的帖子，否则显示错误。
Get the posts与JS脚本发送的slug标识的类别相关联。
循环播放帖子并使用template part显示每个帖子。为此，在主题文件夹中创建一个模板，该模板仅包含必要的HTML / PHP以显示一个帖子。您可以在add_action('wp_ajax_dynamic_categories', 'get_categories_posts'); add_action('wp_ajax_nopriv_dynamic_categories', 'get_categories_posts');的默认wordpress主题（twentysixteen）中查看此类模板的示例。在您的主题中执行相同类型的文件 - 可能已经存在一个。

您需要更新存档模板以使用模板部件。这非常简单，删除用于在循环中显示帖子的代码，并将其替换为：
```
template-parts/content.php
```

所以整个功能代码如下所示：

<?php get_template_part('template-parts/content'); ?>

并且，这就是全部！有了这个，您现在可以为帖子类别添加动态导航。

供参考：sanitize_text_field，get_category_by_slug，get_posts，setup_postdata和get_template_part。

请注意，这不支持分页。如果您需要，请查看this answer我对此事做的。

从“按类别排序帖子”菜单更改<div>中的内容，而不加载页面

1 个答案:

1。构建类别菜单

2。为AJAX准备主题

3。触发ajax请求

4。获取所请求类别的帖子

进一步阅读