自己动手为wordpress注册一个Carousel轮播区块

要为WordPress注册一个Carousel轮播区块，你可以创建一个自定义Gutenberg块。以下是一个简单的示例，说明如何创建一个Carousel轮播区块：

1. 在你的主题目录中创建一个名为`carousel-block`的子文件夹。在这个文件夹中，创建一个名为`carousel-block.php`的文件。将以下代码添加到该文件中：

```php
<?php
/*
Plugin Name: Carousel Block
Description: A simple Carousel block for WordPress Gutenberg.
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

function carousel_block_register() {
    wp_register_script(
        'carousel-block-editor',
        plugins_url('carousel-block-editor.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
        filemtime(plugin_dir_path(__FILE__) . 'carousel-block-editor.js')
    );

    wp_register_style(
        'carousel-block-editor',
        plugins_url('carousel-block-editor.css', __FILE__),
        array(),
        filemtime(plugin_dir_path(__FILE__) . 'carousel-block-editor.css')
    );

    register_block_type('carousel-block/carousel', array(
        'editor_script' => 'carousel-block-editor',
        'editor_style' => 'carousel-block-editor',
    ));
}
add_action('init', 'carousel_block_register');
```

2. 在`carousel-block`文件夹中创建一个名为`carousel-block-editor.js`的文件，并将以下代码添加到该文件中：

```javascript
const { registerBlockType } = wp.blocks;
const { RichText, MediaUpload } = wp.editor;
const { Button } = wp.components;

registerBlockType('carousel-block/carousel', {
    title: 'Carousel',
    icon: 'images-alt',
    category: 'common',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: 'h2',
        },
        imageUrl: {
            type: 'string',
            source: 'attribute',
            attribute: 'src',
            selector: 'img',
        },
        imageId: {
            type: 'number',
        },
    },
    edit({ attributes, setAttributes }) {
        const { title, imageUrl, imageId } = attributes;

        const onSelectImage = (image) => {
            setAttributes({
                imageUrl: image.url,
                imageId: image.id,
            });
        };

        return (
            <div className="carousel-block">
                <h2>Carousel</h2>
                <RichText
                    tagName="h2"
                    value={title}
                    onChange={(value) => setAttributes({ title: value })}
                    placeholder="Title..."
                />
               <MediaUpload
                    onSelect={onSelectImage}
                    type="image"
                    value={imageId}
                    render={({ open }) => (
                       <Button onClick={open}>
                            {imageUrl ? 'Edit Image' : 'Select Image'}
                        </Button>
                    )}
                />
                {imageUrl && <img src={imageUrl} alt={title} />}
            </div>
        );
    },
    save({ attributes }) {
        const { title, imageUrl } = attributes;
        return (
            <div className="carousel-block">
                <h2>{title}</h2>
                {imageUrl && <img src={imageUrl} alt={title} />}
            </div>
        );
    },
});
```

3. 在`carousel-block`文件夹中创建一个名为`carousel-block-editor.css`的文件，并将以下代码添加到该文件中：

```css
.carousel-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.carousel-block h2 {
    margin-bottom: 10px;
}

.carousel-block img {
    max-width: 100%;
    height: auto;
}
```

4. 在你的主题的`functions.php`文件中，添加以下代码以激活Carousel轮播区块插件：

```php
function my_theme_register_carousel_block() {
    include_once('carousel-block/carousel-block.php');
}
add_action('init', 'my_theme_register_carousel_block');
```

现在，你应该能够在WordPress编辑器中看到一个名为“Carousel”的新块。你可以在编辑器中添加Carousel块，设置标题和图片，然后将其添加到页面中。

请注意，这个示例仅用于演示目的，实际项目中可能需要更多的功能和优化。在使用此插件时，请确保遵循WordPress最佳实践和安全性原则。

来源 https://www.mymoban.com/wp/