当前位置: 首页 > news >正文

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

相关文章:

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

要为WordPress注册一个Carousel轮播区块&#xff0c;你可以创建一个自定义Gutenberg块。以下是一个简单的示例&#xff0c;说明如何创建一个Carousel轮播区块&#xff1a; 1. 在你的主题目录中创建一个名为carousel-block的子文件夹。在这个文件夹中&#xff0c;创建一个名为c…...

基于Springboot的实习生管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的实习生管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…...

良心实用的电脑桌面便利贴,好用的便利贴便签小工具

在日常办公中&#xff0c;上班族经常需要记录临时任务、重要提醒或者突发的灵感。比如&#xff0c;在紧张的项目会议中&#xff0c;忽然想到一个改进的点子&#xff0c;或者是在处理邮件时&#xff0c;需要记下对某个客户的回复要点。在这些场景下&#xff0c;如果能直接在电脑…...

Eayswoole 报错 crontab info is abnormal

在执行一个指定的定时任务时 如 php easyswoole crontab show 报错 crontab info is abnormal 如下图所示&#xff1a; 查询了半天 修改了如下配置&#xff1a; 旧的 // 创建定时任务实例 $crontab new \EasySwoole\Crontab\Crontab($crontabConfig); 修改后&#…...

移动 App 入侵与逆向破解技术-iOS 篇

如果您有耐心看完这篇文章&#xff0c;您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术&#xff0c;另外&#xff0c;通过“入侵”&#xff0c;将帮助您理解如何规避常见的安全漏洞&#xff0c;文章大纲&#xff1a; 简单介绍ios二进制文件结构与入侵的原理介绍入…...

2024服贸会,参展企业媒体宣传报道攻略

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 2024年中国国际服务贸易交易会&#xff08;简称“服贸会”&#xff09;是一个重要的国际贸易平台&#xff0c;对于参展企业来说&#xff0c;有效的媒体宣传报道对于提升品牌知名度、扩大…...

CI/CD笔记.Gitlab系列.新用户管理

CI/CD笔记.Gitlab系列 新用户管理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_285502…...

前端 JS 经典:JS 基础类型和 typeof

前言&#xff1a;JS 基础类型就 8 种&#xff0c;这是官方确定的&#xff0c;毋庸置疑。其中原始类型 7 种&#xff0c;对象类型 1 种。而 typeof 关键字是用来判断数据是属于什么类型的。 1. 原始类型 Number、Boolean、String、BigInt、symbol、Undefined、null typeof 18…...

Java入门基础学习笔记11——关键字和标识符

1、关键字 关键字是java中已经被赋予特定意义的&#xff0c;有特殊作用的一些单词&#xff0c;不可以把这些单词作为标识符来使用。 注意&#xff1a;关键字是java用了的&#xff0c;我们就不能用来作为&#xff1a;类名、变量名、否则会报错。 标识符&#xff1a; 标识符就是…...

设计模式-解释器模式(Interpreter)

1. 概念 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;它用于定义一个语言的文法&#xff0c;并解析语言中的表达式。具体来说&#xff0c;解释器模式通过定义一个解释器来解释语言中的表达式&#xff0c;从而实现对语言的解析和执…...

机器视觉任务中语义分割方法的进化历史

机器视觉任务中语义分割方法的进化历史 一、基于传统方法的图像分割二、基于卷积神经网络的图像分割三、基于Attention机制的图像分割四、语义分割模型的挑战与改进 在图像处理领域&#xff0c;传统图像分割技术扮演着重要角色。 一、基于传统方法的图像分割 这些方法包括大津…...

Java并发编程: Synchronized锁升级

文章目录 一、jdk8 markword实现表二、使用工具来查看锁升级三、默认synchronized(o&#xff09; 一、jdk8 markword实现表 为什么有自旋锁还需要重量级锁&#xff1a; 自旋消耗CPU资源&#xff0c;如果锁的时间长&#xff0c;或者自旋线程多&#xff0c;CPU会被大量消耗。重量…...

Atcoder C - Routing

https://atcoder.jp/contests/arc177/tasks/arc177_c 思路&#xff1a;该问题可以归约为最短路问题&#xff0c;问题中的条件1和条件2是相互独立的&#xff0c;可以分开考虑&#xff0c;从地图中的一个点&#xff0c;沿上下左右四个方向走&#xff0c;所花费的代价为&#xff1…...

升级! 测试萌新Python学习之连通数据库Pymsql增删改及封装(四)

pymysql 数据库概述python对数据库的增删改查pymysql核心操作事务事务操作pymysql工具类封装每日复习ChatGPT的回答 数据库概述 分类 关系型数据库: 安全 如, mysql oracle SQLite…database tables 行列 非关系型数据库: 高效 如, redis mongoDB…数据存储结构多样 键值对…...

【大数据】containered学习笔记

文章目录 1. Containerd安装1.1 YUM方式安装 【后端&网络&大数据&数据库目录贴】 1. Containerd安装 1.1 YUM方式安装 获取YUM源 获取阿里云YUM源 wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 查…...

「TypeScript」TypeScript入门练手题

前言 TypeScript 越来越火&#xff0c;现在很多前端团队都使用它&#xff0c;因此咱们前端码农要想胜任以后的前端工作&#xff0c;就要更加熟悉它。 入门练手题 interface A {x: number;y: number; }type T Partial<A>;const a: T { x: 0, y: 0 }; const b: T { …...

k8s 使用Docker和Containerd对比分析

目录 k8s 使用Docker和Containerd对比分析 互动1&#xff1a;docker build构建的镜像和containerd镜像通用吗&#xff1f; 互动2&#xff1a;k8s1.24之前版本和1.24及1.24之后版本区别&#xff1f; k8s 使用Docker和Containerd对比分析 如果你使用Docker作为K8S容器运行时的…...

MySQL 通过 systemd 启动时 hang 住了……

mysqld&#xff1a;哥&#xff0c;我起不来了…… 作者&#xff1a;贲绍华&#xff0c;爱可生研发中心工程师&#xff0c;负责项目的需求与维护工作。其他身份&#xff1a;柯基铲屎官。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编…...

pat乙1033-旧键盘打字

1测试点2&#xff1a; 输入的字符串如果为空&#xff0c;要用getline(cin,s)&#xff0c;而不是cin>>s&#xff0c;否则程序做不了 2题目说的如果上键坏了那大写字母打印不了&#xff0c;不是大写转小写打印啦&#xff0c;认真读题 3两个for循环长这样&#xff0c;break…...

Ubuntu安装VScode

Ubuntu安装VScode 前言&#xff1a; 1、Ubuntu安装VScode比较方便 2、我更喜欢source insight 1、获取到linux版本的VScode安装包 VSCode 下载地址是&#xff1a;https://code.visualstudio.com/ 2、得到安装包 3、复制到ubuntu中&#xff0c;使用命令安装 sudo dpkg -i cod…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...