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

（图片来源网络，侵删）

1. 创建一个新的指令

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

function register_my_directive() {    wp_register_script('myscript', 'path/to/your/ｓｃｒｉｐｔ.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('ｓｃｒｉｐｔ');    scriptElem.setAttribute('src', 'path/to/your/ｓｃｒｉｐｔ.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 ｕｐｄａｔｅ 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');