Gutenberg 区块中巧妙融合文本与关联分类：挑战与解决方案

php

2024-03-26 17:46:42

在 Gutenberg 区块中巧妙融合文本与关联分类

Gutenberg 区块为定制化内容布局提供了强大功能，但将文本与关联分类相结合并不像想象中那么容易。让我们探究其背后的挑战和可行的解决方案。

挑战：WordPress 的数据存储

WordPress 使用自定义字段表存储数据，这限制了我们创建复杂数据结构的能力，特别是涉及到文本和分类之间的关系。

解决方案：

1. 自定义后类型 (CPT)

创建一个 CPT 专门存储分类，再创建一个区块使用 get_the_terms() 获取文章的分类。

2. 块属性

使用块属性存储分类 ID 或 slug，然后通过 wp_get_term() 动态获取分类信息。

3. JavaScript

借助 JavaScript，动态创建文本和分类之间的链接。这需要更强的编码技能，但提供了最大的灵活性。

示例代码：使用块属性和 JavaScript

// 块注册代码
register_block_type( 'my-custom-block', [
    'attributes' => [
        'taxonomy' => [
            'type'    => 'string',
            'default' => '',
        ],
        'term' => [
            'type'    => 'string',
            'default' => '',
        ],
    ],
] );

// 脚本代码
wp_enqueue_script( 'my-custom-block-script', plugin_dir_url( __FILE__ ) . 'script.js', [], '1.0.0', true );

// script.js
( function( $ ) {
    $( document ).ready( function() {
        $( '.my-custom-block' ).each( function() {
            var block = $( this );
            var taxonomy = block.attr( 'data-taxonomy' );
            var term = block.attr( 'data-term' );
            var termLink = wp.url.addQueryArgs( '/', {
                taxonomy: taxonomy,
                term: term
            } );
            block.find( 'a' ).attr( 'href', termLink );
        } );
    } );
}( jQuery ) );