README

⚠️ 注意：这个项目很有趣，但请使用 HTMX。我发现它是一个更好的、更健壮的工具，可以提供这个包所尝试提供的功能。

一个用于构建由 Alpine.js 启发的 Laravel Livewire 风格 WordPress 组件的主题包。

演示

https://wp-morph.andrewrhyand.com/

演示主题

https://github.com/boxybird/morph-example-theme

安装

通过 composer 安装此包。

cd wp-content/themes/your-theme

composer require boxybird/morph

位置：/wp-config.php

define('BB_MORPH_HASH_KEY', 'SOME_RANDOM_16_CHARACTER_STRING');

位置：/your-theme/functions.php

require_once __DIR__ . '/vendor/autoload.php';

位置：/wp-admin/options-permalink.php

点击 "保存更改" 按钮访问并刷新永久链接

重要

默认情况下，此包预捆绑 Alpine。如果您的站点已经安装了 Alpine，您应该取消预捆绑此包的版本，以避免冲突。

注意：需要 Alpine 3.11.0 或更高版本。

位置：/your-theme/functions.php

add_action('wp_enqueue_scripts', function () {
    wp_dequeue_script('bb-alpine');
});

钩子

$wpMorph({ ... },  {
    onStart: () => {},
    onResponse: res => {},
    onSuccess: data => {},
    onError: error => {},
    onFinish: () => {},
})

默认情况下，morph_component('example'); 函数将寻找与您传入的名称匹配的文件。例如，/your-theme/morph/components/example.php。

您可以通过使用 morph/component/path 过滤器来覆盖此根文件夹路径。

add_filter('morph/component/path', function ($path) {
    $path = get_template_directory() . '/custom-folder/';
    
    return $path;
});

示例计数器

位置：/your-theme/index.php

<?php get_header(); ?>

    <?php morph_component('counter.class'); ?>

    <?php morph_component('counter.procedural'); ?>

<?php get_footer(); ?>

位置：/your-theme/morph/components/counter/class.php

<?php

// Class

[$count] = morph_render(new class {
    public $count;

    public function __construct()
    {
        $this->count = (int) get_option('count', 0);
    }

    public function increment()
    {
        update_option('count', ++$this->count);
    }
});
?>

<div x-data>
    <span><?= $count; ?></span>
    <button x-on:click="$wpMorph('increment')">Increment</button>
</div>

位置：/your-theme/morph/components/counter/procedural.php

<?php

// Procedural

$count = (int) get_option('count', 0);

if ($_POST['increment'] ?? false) {
    update_option('count', ++$count);
}
?>

<div x-data>
    <span><?= $count; ?></span>
    <button x-on:click="$wpMorph('increment')">Increment</button>
</div>

示例事件/监听器

位置：/your-theme/index.php

<?php get_header(); ?>

    <?php morph_component('event'); ?>

    <?php morph_component('listener'); ?>

<?php get_footer(); ?>

位置：/your-theme/morph/components/event.php

<div x-data>
    <button x-on:click="$dispatch('notify', 'A notification from the event.php component.')"
    >Dispatch Event</button>
</div>

位置：/your-theme/morph/components/listener.php

<?php

$notification = $_POST['notification'] ?? null;
?>

<div x-data x-on:notify.window="$wpMorph({ notification: $event.detail })">
    <p><?= $notification; ?></p>
</div>

示例全局监听器

位置：/your-theme/some-js-file.js

document.addEventListener('notify', function ({ detail }) {
    console.log(detail) // A notification from the event.php component.
});

更多示例

https://github.com/boxybird/morph-example-theme/tree/master/resources/components