自己动手为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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/7882.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NumPy及Matplotlib基本用法

NumPy及Matplotlib基本用法 导语NumPy导入与生成算术运算N维数组广播元素访问 Matplotlib简单图案绘制多函数绘制图像显示参考文献 导语 深度学习中经常需要对图像和矩阵进行操作&#xff0c;好在python提供了Numpy和Matplotlib库&#xff0c;前者类似一个已经定义的数组类&am…

Error Code: 1449. The user specified as a definer (‘admin‘@‘%‘) does not exist

前言 在进行MySQL数据库迁移或存储过程部署时&#xff0c;您可能会遇到错误 [Err] 1449 - The user specified as a definer (admin%) does not exist。这篇文章将为您提供一个详细的解决方案&#xff0c;帮助您顺利解决这一问题。 错误背景 此错误通常发生在尝试执行一个存…

扫描反代Cloudflare的IP 给网站CDN加速 免费制作自己的CDN加速

Cloudflare的CDN系统基本上每个站长都家喻户晓&#xff0c;大家都知道大陆对于搭建网站的审核力度&#xff0c;以至于Cloudflare并没有大陆的泛播节点&#xff0c;有也是只有香港节点。但是这些节点对于海外是加速效果&#xff0c;对于大陆就是一个字慢&#xff0c;晚高峰的情况…

JavaScript异步编程——02-Ajax入门和发送http请求

同步和异步回顾 同步和异步的简单理解 同步&#xff1a;必须等待前面的任务完成&#xff0c;才能继续后面的任务。 异步&#xff1a;不受当前任务的影响。 拿排队举例&#xff1a; 同步&#xff1a;在银行排队时&#xff0c;只有等到你了&#xff0c;才能够去处理业务。 异…

【C/C++】设计模式——单例模式

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

如何去官网下载windows10操作系统iso镜像

文章目录 一、先从微软中国官网https://www.microsoft.com/zh-cn/进去二、然后按图示一步步点进去三、点击下载工具这个工具会帮你生成windows操作系统iso文件四、下载好后一步步按图示要求成功操作一、先从微软中国官网https://www.microsoft.com/zh-cn/进去 二、然后按图示一…

分享三维地理模型制作实践

前言 地理信息系统&#xff08;GIS&#xff09;是一种用于捕获、存储、检查和显示与地球表面位置相关的数据的计算机系统。GIS可以在一张地图上显示许多不同类型的数据&#xff0c;如街道、建筑物和植被。这使人们能够更容易地看到、分析和理解模式和关系。 GIS可以使用包括位…

Nginx从入门到精通速成

文章目录 一. **Nginx** **的简介**1.1 什么是 **nginx**1.2 正向代理1.3 反向代理1.4 **负载均衡**1.5 动静分离 二. **Nginx** **的安装**三. **Nginx** **的常用的命令**四. **Nginx** **的配置文件**五. **Nginx** **配置实例**反向代理实例**1**5.1 实现效果5.2 准备工作5…

织梦云端:网络信号原理的艺术解码

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的Linux高性能服务器编程系列之《织梦云端&#xff1a;网络信号原理的艺术解码》&#xff0c;在这篇文章中&#xff0c;你将会学习到网络信号原理以及应用&#xff0c;并且我会给出源码进行剖析&#xff0c;以及手绘UML图…

道可云元宇宙每日资讯|《元宇宙医学》创刊

道可云元宇宙每日简报&#xff08;2024年5月6日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 《元宇宙医学》创刊 4月25日至28日&#xff0c;第19届国际呼吸病研讨会&#xff08;ISRD&#xff09;暨第3届国际元宇宙医学协会&#xff08;IAMM&#xff09;联合会议…

Elasticsearch:使用 MongoDB connector 同步数据到 Elasticsearch

MongoDB 是一个基于分布式文件存储的数据库。由 C 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的。Elasticsearch 是一个高效强…

速卖通卖家Tips:从入驻平台到开店费用

速卖通&#xff08;AliExpress&#xff09;不仅是全球最大的出口B2C平台之一&#xff0c;也是无数中小企业出海的跳板。了解速卖通开店流程、入驻条件&#xff0c;以及如何有效经营你的在线店铺&#xff0c;是你成功的关键第一步。 入驻速卖通并不是一个复杂的过程&#xff0c…

Windows Server 2019虚拟机安装

目录 第一步、准备工作 第二步、部署虚拟机 第三步、 Windows Server 2019系统启动配置 第一步、准备工作 下载Windows Server 2019系统镜像 官网下载地址&#xff1a;Windows Server 2019 | Microsoft Evaluation Center VMware Workstation 17下载地址&#xff1a; 链…

Python机器学习项目开发实战:在数据分析竞赛平台遴选最佳算法模型

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python机器学习项目开发实战-在数据分析竞赛平台遴选最佳的算法模型-编程案例实例教程.pdf 1、详细阐述 在Python机器学习项目开发实战中,数据分析竞…

excel如何将多列数据转换为一列?

这个数据整理借用数据透视表也可以做到&#xff1a; 1.先将数据源的表头补齐&#xff0c;“姓名” 2.点击插入选项卡&#xff0c;数据透视表&#xff0c;在弹出对话框中&#xff0c;数据透视位置选择 现有工作表&#xff0c;&#xff08;实际使用时新建也没有问题&#xff09;…

Spring的基本应用

概述&#xff1a;Spring是由Rod Johnson组织开发的一个分层的java SE/EE一站式的轻量级开源框架&#xff0c;以IOC(控制反转)和AOP&#xff08;面向切面&#xff09;为核心&#xff0c;的开发模式。 注&#xff1a;喜欢的朋友可以关注公众号“JAVA学习课堂”系统学习相关技术&a…

Python自动化实战 —— 使用Selenium进行Web自动化!

为了完成一项重复的任务&#xff0c;你需要在网站上进行大量的点击和操作&#xff0c;每次都要浪费大量的时间和精力。Python的Selenium库就可以自动化完成这些任务。 在本篇文章中&#xff0c;我们将会介绍如何使用Python的Selenium库进行Web自动化&#xff0c;以及如何将它应…

学习和分析各种数据结构所要掌握的一个重要知识——CPU的缓存利用率(命中率)

什么是CPU缓存利用率&#xff08;命中率&#xff09;&#xff0c;我们首先要把内存搞清楚。 硬盘是什么&#xff0c;内存是什么&#xff0c;高速缓存是什么&#xff0c;寄存器又是什么&#xff1f; 我们要储存数据就要运用到上面的东西。首先里面的硬盘是可以无电存储的&#…

在项目中使用redisTemplate向redis添加hash类型数据

//首先注入redisTemplate Autowired private RedisTemplate<String, Object> redisTemplate;//获取hash类型的ops HashOperations<String, String, Object> stringObjectObjectHashOperations redisTemplate.opsForHash(); //创建一个一个map并将一个对象的属性拆…

六、yolov8 tensorRT c++语义分割推理(保姆级教程附源码)

yolov8推理流程简单概括: 初始化引擎——>图片预处理——>前向处理——>后处理。 其中: 1、初始化引擎包括: IRuntime* runtime = nullptr; ICudaEngine* engine = nullptr; IExecutionContext* context = nullptr;2、图片预处理resize图片尺寸到指定尺寸; 3…