Creating a Custom Directive for WordPress Post Listing on the Front End

创建自定义指令以在前端显示WordPress文章列表可以通过以下步骤完成：

1. 创建一个新的指令

在WordPress中，你可以使用register_directive函数来创建一个新的自定义指令，这个函数需要两个参数：指令的名称和处理该指令的回调函数。

function register_my_directive() {
    wp_register_script('myscript', 'path/to/your/script.js', array('wpelements'), null, true);
    wp_localize_script('myscript', 'MyScriptObject', array(
        'ajaxurl' => admin_url('adminajax.php'),
        'directiveNonce' => wp_create_nonce('mydirectivenonce')
    ));
}
add_action('init', 'register_my_directive');

2. 在JavaScript中处理新的指令

在你的JavaScript文件中，你需要定义一个处理新的指令的函数，这个函数将在用户在前端页面上输入你的自定义指令时被调用。

window.onload = function() {
    var scriptElem = document.createElement('script');
    scriptElem.setAttribute('src', 'path/to/your/script.js');
    document.body.appendChild(scriptElem);
};

3. 获取并显示文章列表

在你的JavaScript文件中，你需要创建一个函数来获取并显示文章列表，你可以使用wp.ajax.send函数来发送一个请求到你的WordPress后端，然后使用返回的数据来更新你的前端页面。

wp.ajax.send({
    action: 'my_action',
    data: {
        nonce: MyScriptObject.directiveNonce
    },
    success: function(response) {
        // Use the response data to update your frontend page
    }
});

4. 在WordPress后端处理请求

在你的WordPress后端，你需要创建一个新的函数来处理来自你的JavaScript文件的请求，这个函数应该查询你的文章数据，然后将这些数据作为响应发送回你的前端页面。

function my_action_callback() {
    check_ajax_referer('mydirectivenonce', 'security');
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 1,
    );
    $query = new WP_Query($args);
    if ($query>have_posts()) {
        while ($query>have_posts()) {
            $query>the_post();
            ?>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_excerpt(); ?></p>
            <?php
        }
    } else {
        echo 'No posts found';
    }
    wp_die();
}
add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

以上就是如何在WordPress中创建自定义指令以在前端显示文章列表的步骤。