在 Wordpress 上的特定 URL 创建一个可访问的 React 页面

Question

我正在构建一个 WordPress 插件，它创建一个管理菜单和一个可在特定 URL 访问的公共页面让我们说www.mywordpress.com/invite-only

在根目录中，我有这样的 wp-react-kickoff.php 文件

<?php
/**
 * Plugin Name: Batmobile Design
 * Author: Batman
 * Author URI: 
 * Version: 1.0.0
 * Description: WordPress React KickOff.
 * Text-Domain: wp-react-kickoff
 */

if( ! defined( 'ABSPATH' ) ) : exit(); endif; // No direct access allowed.

/**
* Define Plugins Contants
*/
define ( 'WPRK_PATH', trailingslashit( plugin_dir_path( __FILE__ ) ) );
define ( 'WPRK_URL', trailingslashit( plugins_url( '/', __FILE__ ) ) );

/**
 * Loading Necessary Scripts
 */
add_action( 'admin_enqueue_scripts', 'sd_scripts' );
function sd_scripts() {
    wp_enqueue_script( 'wp-react-kickoff', WPRK_URL . 'dist/bundle.js', [ 'jquery', 'wp-element' ], wp_rand(), true );
    wp_localize_script( 'wp-react-kickoff', 'appLocalizer', [
        'apiUrl' => home_url( '/wp-json' ),
        'nonce' => wp_create_nonce( 'wp_rest' ),
    ] );
}

require_once WPRK_PATH . 'classes/class-create-admin-menu.php';
require_once WPRK_PATH . 'classes/class-create-settings-routes.php';
require_once WPRK_PATH . 'classes/class-public-page.php';

然后我在其中创建了一个名为 classes 的文件夹

class-create-admin-menu.php, 
class-create-settings-routes.php, 
class-public-page.php, 
wprk-public-page-template.php.

创建管理页面的代码如下所示

<?php
/**
 * This file will create admin menu page.
 */

class WPRK_Create_Admin_Page {

    public function __construct() {
        add_action( 'admin_menu', [ $this, 'create_admin_menu' ] );
    }

    public function create_admin_menu() {
        $capability = 'manage_options';
        $slug = 'wprk-settings';

        add_menu_page(
            __( 'WP React KickOff', 'wp-react-kickoff' ),
            __( 'WP React KickOff', 'wp-react-kickoff' ),
            $capability,
            $slug,
            [ $this, 'menu_page_template' ],
            'dashicons-buddicons-replies'
        );
    }

    public function menu_page_template() {
        echo '<div class="wrap"><div id="wprk-admin-app"></div></div>';
    }

}
new WPRK_Create_Admin_Page();

class-create-settings-routes.php 看起来像这样

<?php
/**
 * This file will create Custom Rest API End Points.
 */
class WP_React_Settings_Rest_Route {

    public function __construct() {
        add_action( 'rest_api_init', [ $this, 'create_rest_routes' ] );
    }

    public function create_rest_routes() {
        register_rest_route( 'wprk/v1', '/settings', [
            'methods' => 'GET',
            'callback' => [ $this, 'get_settings' ],
            'permission_callback' => [ $this, 'get_settings_permission' ]
        ] );
        register_rest_route( 'wprk/v1', '/settings', [
            'methods' => 'POST',
            'callback' => [ $this, 'save_settings' ],
            'permission_callback' => [ $this, 'save_settings_permission' ]
        ] );
    }

    public function get_settings() {
        $firstname = get_option( 'wprk_settings_firstname' );
        $lastname  = get_option( 'wprk_settings_lastname' );
        $email     = get_option( 'wprk_settings_email' );
        $response = [
            'firstname' => $firstname,
            'lastname'  => $lastname,
            'email'     => $email
        ];

        return rest_ensure_response( $response );
    }

    public function get_settings_permission() {
        return true;
    }

    public function save_settings( $req ) {
        $firstname = sanitize_text_field( $req['firstname'] );
        $lastname  = sanitize_text_field( $req['lastname'] );
        $email     = sanitize_text_field( $req['email'] );
        update_option( 'wprk_settings_firstname', $firstname );
        update_option( 'wprk_settings_lastname', $lastname );
        update_option( 'wprk_settings_email', $email );
        return rest_ensure_response( 'success' );
    }

    public function save_settings_permission() {
        return current_user_can( 'publish_posts' );
    }
}
new WP_React_Settings_Rest_Route();

专门用于创建公共页面的代码如下所示

function wprk_create_public_page() {
    $page = [
        'post_type' => 'page',
        'post_title' => 'WP React KickOff Public Page',
        'post_content' => 'asasasas',
        'post_status' => 'publish',
        'post_author' => 1,
    ];
    $page_id = wp_insert_post( $page );
    update_post_meta( $page_id, '_wp_page_template', 'wprk-public-page-template.php' );
}

register_activation_hook( __FILE__, 'wprk_create_public_page' );

在 ReactFolder 中，我有 App.js，两个设置（这是用于管理菜单，它工作正常）和公共页面都是这样呈现的

import React from 'react';
import PublicPage from './components/PublicPage';
import Settings from './components/Settings';

function App() {
    return(
        <React.Fragment>
            <Settings />
            <PublicPage />
        </React.Fragment>
    )
}
export default App;

为了测试，让公共页面看起来像这样

import axios from 'axios';

const apiUrl = appLocalizer.apiUrl;
const nonce = appLocalizer.nonce;



import React from 'react';

function PublicPage(props) {
    return (
        <div>
            <h1>hello world asasa</h1>
        </div>
    );
}

export default PublicPage;

目前，管理页面和公共页面都在一个下面。 我希望公共页面出现在用户可以访问的特定 URL，而不仅仅是管理员。

Answer 1

您不需要 function 来创建页面并在每次调用时将其插入数据库。 相反，在 wp-admin 中创建两个页面：

1. 用户可访问的页面
2. 管理页面

给他们 slug 名称，在主题目录的根目录中为这些页面创建模板。 比如，如果管理页面有 slug react-admin，创建一个文件 page-react-admin.php，把页面的代码放在那里，对两个页面都这样做。 然后你可以通过 wp-admin 限制管理页面，或者使用这样的构造：

if ( current_user_can( 'manage_options' ) ) {
    //the actual code for the page goes there
}
else {
   //display a message that you need to log in 
}

查看WordPress 主题开发指南。