justdev / inertia-wordpress

Inertia.js 的 WordPress 适配器

维护者

详情

github.com/kirilldorozhynskyi/inertia-wordpress

源代码

问题

安装次数: 9

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

公开问题: 0

0.5.7 2024-08-31 07:48 UTC

MIT 1fa1aadb637ba917612629e8864532310c5b5c7e

pluginwordpressinertia.js

This package is auto-updated.

Last update: 2024-10-01 00:25:59 UTC

README

WordPress 的非官方 Inertia.js 服务器端适配器。

安装

选项 1：通过 composer 安装包。（推荐）

composer require boxybird/inertia-wordpress

选项 2：克隆或下载作为插件，并在 WordPress 管理员中激活之前运行 composer install。

基本示例主题

示例电影 CPT WordPress 项目

Inertia 文档

根模板示例

位置： /wp-content/themes/your-theme/app.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php wp_head(); ?>
    </head>
    <body>

        <?php bb_inject_inertia(); ?> // Adds Inertia to the page

        <?php wp_footer(); ?>
    </body>
</html>

根模板文件覆盖

位置： /wp-content/themes/your-theme/functions.php

默认情况下，WordPress 适配器将使用 app.php，位于 .../your-theme/app.php。如果您想使用不同的文件名，可以更改它。例如 .../your-theme/layout.php。

<?php

add_action('init', function () {
    Inertia::setRootView('layout.php');
});

Inertia 函数输出覆盖

默认情况下，bb_inject_inertia() 函数返回 <div id="app" data-page="{...inertiaJsonData}"></div>。如果您需要覆盖 div id，可以做到。

// Override 'id="app"' to 'id="my_app"' and add classes
<?php bb_inject_inertia('my_app', 'bg-blue-100 font-mono p-4'); ?>

Inertia 响应示例

基本

位置： /wp-content/themes/your-theme/index.php

<?php

use BoxyBird\Inertia\Inertia;

global $wp_query;

Inertia::render('Index', [
    'posts' => $wp_query->posts,
]);

不那么基本

位置： /wp-content/themes/your-theme/index.php

这看起来可能很复杂，然而可以将其视为“控制器”。它为您提供了一个处理所有业务逻辑的地方，从而使您的 JavaScript 文件更容易推理。

<?php

use BoxyBird\Inertia\Inertia;

global $wp_query;

// Build $posts array
$posts = array_map(function ($post) {
    return [
        'id'      => $post->ID,
        'title'   => get_the_title($post->ID),
        'link'    => get_the_permalink($post->ID),
        'image'   => get_the_post_thumbnail_url($post->ID),
        'content' => apply_filters('the_content', get_the_content(null, false, $post->ID)),
    ];
}, $wp_query->posts);

// Build $pagination array
$current_page = isset($wp_query->query['paged']) ? (int) $wp_query->query['paged'] : 1;
$prev_page    = $current_page > 1 ? $current_page - 1 : false;
$next_page    = $current_page + 1;

$pagination = [
    'prev_page'    => $prev_page,
    'next_page'    => $next_page,
    'current_page' => $current_page,
    'total_pages'  => $wp_query->max_num_pages,
    'total_posts'  => (int) $wp_query->found_posts,
];

// Return Inertia view with data
Inertia::render('Posts/Index', [
    'posts'      => $posts,
    'pagination' => $pagination,
]);

快速提示

您可能想知道上面的这个代码行做了什么

'content' => apply_filters('the_content', get_the_content(null, false, $post->ID));

因为我们不能在传统的主题模板设置之外使用 WordPress 函数 the_content()，所以我们需要使用 get_the_content()。然而，我们首先需要应用其他插件和 WordPress 已注册的过滤器。

事实上，我们不能使用任何使用 echo 而不是 return 的 WordPress 函数。

但别担心。WordPress 通常提供解决方案来解决这个问题：get_the_title() 与 the_title()，get_the_ID() 与 the_ID()，等等...

参考： https://developer.wordpress.org/reference/functions/

共享数据

位置： /wp-content/themes/your-theme/functions.php

add_action('init', function () {
    // Synchronously using key/value
    Inertia::share('site_name', get_bloginfo('name'));

    // Synchronously using array
    Inertia::share([
        'primary_menu' => array_map(function ($menu_item) {
            return [
                'id'   => $menu_item->ID,
                'link' => $menu_item->url,
                'name' => $menu_item->title,
            ];
        }, wp_get_nav_menu_items('Primary Menu'))
    ]);

    // Lazily using key/callback
    Inertia::share('auth', function () {
        if (is_user_logged_in()) {
            return [
                'user' => wp_get_current_user()
            ];
        }
    });

    // Lazily on partial reloads
    Inertia::share('auth', Inertia::lazy(function () {
        if (is_user_logged_in()) {
            return [
                'user' => wp_get_current_user()
            ];
        }
    }));

    // Multiple values
    Inertia::share([
        // Synchronously
        'site' => [
            'name'       => get_bloginfo('name'),
            'description'=> get_bloginfo('description'),
        ],
        // Lazily
        'auth' => function () {
            if (is_user_logged_in()) {
                return [
                    'user' => wp_get_current_user()
                ];
            }
        }
    ]);
});

资产版本控制

位置： /wp-content/themes/your-theme/functions.php

可选，但有助于缓存失效。

add_action('init', function () {
    // If you're using Laravel Mix, you can
    // use the mix-manifest.json for this.
    $version = md5_file(get_stylesheet_directory() . '/mix-manifest.json');

    Inertia::version($version);
});