自己动手为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轮播区块,你可以创建一个自定义Gutenberg块。以下是一个简单的示例,说明如何创建一个Carousel轮播区块: 1. 在你的主题目录中创建一个名为carousel-block的子文件夹。在这个文件夹中,创建一个名为c…...
基于Springboot的实习生管理系统(有报告)。Javaee项目,springboot项目。
演示视频: 基于Springboot的实习生管理系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&a…...
良心实用的电脑桌面便利贴,好用的便利贴便签小工具
在日常办公中,上班族经常需要记录临时任务、重要提醒或者突发的灵感。比如,在紧张的项目会议中,忽然想到一个改进的点子,或者是在处理邮件时,需要记下对某个客户的回复要点。在这些场景下,如果能直接在电脑…...
Eayswoole 报错 crontab info is abnormal
在执行一个指定的定时任务时 如 php easyswoole crontab show 报错 crontab info is abnormal 如下图所示: 查询了半天 修改了如下配置: 旧的 // 创建定时任务实例 $crontab new \EasySwoole\Crontab\Crontab($crontabConfig); 修改后&#…...
移动 App 入侵与逆向破解技术-iOS 篇
如果您有耐心看完这篇文章,您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术,另外,通过“入侵”,将帮助您理解如何规避常见的安全漏洞,文章大纲: 简单介绍ios二进制文件结构与入侵的原理介绍入…...
2024服贸会,参展企业媒体宣传报道攻略
传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 2024年中国国际服务贸易交易会(简称“服贸会”)是一个重要的国际贸易平台,对于参展企业来说,有效的媒体宣传报道对于提升品牌知名度、扩大…...
CI/CD笔记.Gitlab系列.新用户管理
CI/CD笔记.Gitlab系列 新用户管理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_285502…...
前端 JS 经典:JS 基础类型和 typeof
前言:JS 基础类型就 8 种,这是官方确定的,毋庸置疑。其中原始类型 7 种,对象类型 1 种。而 typeof 关键字是用来判断数据是属于什么类型的。 1. 原始类型 Number、Boolean、String、BigInt、symbol、Undefined、null typeof 18…...
Java入门基础学习笔记11——关键字和标识符
1、关键字 关键字是java中已经被赋予特定意义的,有特殊作用的一些单词,不可以把这些单词作为标识符来使用。 注意:关键字是java用了的,我们就不能用来作为:类名、变量名、否则会报错。 标识符: 标识符就是…...
设计模式-解释器模式(Interpreter)
1. 概念 解释器模式(Interpreter Pattern)是一种行为型设计模式,它用于定义一个语言的文法,并解析语言中的表达式。具体来说,解释器模式通过定义一个解释器来解释语言中的表达式,从而实现对语言的解析和执…...
机器视觉任务中语义分割方法的进化历史
机器视觉任务中语义分割方法的进化历史 一、基于传统方法的图像分割二、基于卷积神经网络的图像分割三、基于Attention机制的图像分割四、语义分割模型的挑战与改进 在图像处理领域,传统图像分割技术扮演着重要角色。 一、基于传统方法的图像分割 这些方法包括大津…...
Java并发编程: Synchronized锁升级
文章目录 一、jdk8 markword实现表二、使用工具来查看锁升级三、默认synchronized(o) 一、jdk8 markword实现表 为什么有自旋锁还需要重量级锁: 自旋消耗CPU资源,如果锁的时间长,或者自旋线程多,CPU会被大量消耗。重量…...
Atcoder C - Routing
https://atcoder.jp/contests/arc177/tasks/arc177_c 思路:该问题可以归约为最短路问题,问题中的条件1和条件2是相互独立的,可以分开考虑,从地图中的一个点,沿上下左右四个方向走,所花费的代价为࿱…...
升级! 测试萌新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 越来越火,现在很多前端团队都使用它,因此咱们前端码农要想胜任以后的前端工作,就要更加熟悉它。 入门练手题 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:docker build构建的镜像和containerd镜像通用吗? 互动2:k8s1.24之前版本和1.24及1.24之后版本区别? k8s 使用Docker和Containerd对比分析 如果你使用Docker作为K8S容器运行时的…...
MySQL 通过 systemd 启动时 hang 住了……
mysqld:哥,我起不来了…… 作者:贲绍华,爱可生研发中心工程师,负责项目的需求与维护工作。其他身份:柯基铲屎官。 爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编…...
pat乙1033-旧键盘打字
1测试点2: 输入的字符串如果为空,要用getline(cin,s),而不是cin>>s,否则程序做不了 2题目说的如果上键坏了那大写字母打印不了,不是大写转小写打印啦,认真读题 3两个for循环长这样,break…...
Ubuntu安装VScode
Ubuntu安装VScode 前言: 1、Ubuntu安装VScode比较方便 2、我更喜欢source insight 1、获取到linux版本的VScode安装包 VSCode 下载地址是:https://code.visualstudio.com/ 2、得到安装包 3、复制到ubuntu中,使用命令安装 sudo dpkg -i cod…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
