ca88亚洲城唯一官方网站 ca88亚洲城建站资源平台 Thu, 10 Jan 2019 01:12:11 +0800 zh-CN hourly 1 ca88亚洲城 5.0.3 发布,修复37个错误 /wordpress-5-0-3.html /wordpress-5-0-3.html#comments Thu, 10 Jan 2019 01:12:11 +0000 /?p=80910 ca88亚洲城 5.0.3 已经发布,一共修复了37个错误,以及7项性能优化。该版本的主要目的是微调新的区块编辑器,以及修复一些错误。主要修复内容如下:

  • 已经在捆绑主题中添加了15个块编辑器相关的错误修复和改进。请务必更新这些内容以获得改进的区块编辑体验。
  • 已修复2个区块编辑器相关的国际化(I18N)错误
  • 禁用JavaScript的用户现在在尝试使用块编辑器时会看到通知。
  • 在外观定制器中的一些PHP错误已得到修复。
  • 上传常见文件类型(如CSV)的一些问题已得到修复。

要了解更多更新细节,可以查看官方日志:https://make.wordpress.org/core/2019/01/09/wordpress-5-0-3/

现在已经可以在后台看到新版本推送了,需要的朋友们可以自行更新。

]]>
/wordpress-5-0-3.html/feed/ 2
ca88亚洲城博客主题:爱前端 /shop/wordpress-blog-theme-iux/ /shop/wordpress-blog-theme-iux/#comments Wed, 09 Jan 2019 00:15:32 +0000 /?post_type=download&p=80841 “爱前端”是一款由主题巴巴团队原创设计开发的ca88亚洲城主题,这款主题页面布局简约大气,设计细节精美考究,内置功能非常强大,通过后台的主题设置面板,你可以轻松自定义各种主题选项,让自己的ca88亚洲城网站变得更漂亮,更好用,更专业。这款“爱前端”主题非常适合用于各类型博客,个人网站,资讯网站和自媒体网站。

主题演示1:

主题演示2:?

爱前端主题特色

  • 响应式设计(完美兼容PC,平板电脑,智能手机等各种设备)
  • 强大的主题设置面板
  • 无限主题颜色
  • 专题列表 + 专题页面
  • 三级下拉菜单支持
  • 首页幻灯片展示置顶文章
  • 文章列表自动获取4张缩略图展示文章内置相册
  • 缩略图(特色图片)自动裁剪功能
  • 专属自定义小工具(广告;带缩略图的最新文章,随机文章,浏览最多的文章和评论最多的文章,等。)
  • 文章页支持ca88亚洲城相册幻灯片展示
  • 文章页支持百度分享
  • 文章页支持点赞功能
  • 文章页支持打赏功能
  • 文章页展示相关文章
  • 文章页展示作者说明
  • 全宽页面模板
  • 侧边栏广告显示功能
  • 完美兼容IE9+、Chrome、Firefox、Safari、360等主流浏览器,针对mac OS等Retina屏幕优化显示
  • 100% ca88亚洲城代码标准验证通过
  • 100% W3C验证通过
  • 主题完全开源,无任何隐藏代码,零广告,零风险
  • 一次购买,永久免费更新
  • 一次购买,终身售后技术支持

如果您对这款“爱前端”ca88亚洲城主题有任何问题,欢迎给我们留言,我们会在第一时间给您答复。

售前和售后问题,都可以通过和我们在线交谈:

注:本商品由 主题巴巴( QQ:3599145122)?投放销售,一切售后均由 主题巴巴 提供,本站(ca88亚洲城唯一官方网站)不负责售后服务,请知悉,谢谢。

]]>
/shop/wordpress-blog-theme-iux/feed/ 1
ca88亚洲城 添加投票调查问卷功能 Democracy Poll /wordpress-democracy-poll.html /wordpress-democracy-poll.html#respond Tue, 08 Jan 2019 00:38:30 +0000 /?p=80824 Democracy Poll 是一个问卷调查投票插件,它添加了一个聪明且方便的系统来创建具有不同功能的各种民意调查,例如:

  • 添加新的民意调查
  • 适用于缓存插件:wp total cache,wp super cache等…
  • 用户可以添加自己的答案(民主),必要时可以禁用该选项
  • 多个投票:用户可以多个答案而不是一个答案(可以根据需要禁用)
  • 在事先指定的日期之后结束民意调查
  • 当一些可用时显示随机投票
  • 对未注册用户关闭投票
  • 快捷编辑选定的投票:管理员的“编辑”键
  • 投票数量编辑
  • 用户可以在启用重新投票选项时更改其意见
  • 通过IP,Cookie,WP配置文件(针对授权用户)记住用户。投票历史可以清理
  • 在任何文章中插入新的投票:[demоcracy](简码)
  • 小工具(可被禁用)
  • .css或.js文件可能被禁用或嵌入到HTML代码中
  • 支持多站点

在后台插件安装界面搜索?Democracy Poll 即可在线安装,或者到官方下载?https://wordpress.org/plugins/democracy-poll/

倡萌已将该插件汉化,,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

1、如果你要在PHP模板中调用,可以使用下面的函数,数字 3 就是投票的id:

<?php democracy_poll( 3 ); ?>

2、也可以在文章中使用简码调用:

[democracy id="2"]

3.如果要随机显示投票,可以使用简码:

[democracy]

4、如果要调用所有投票归档,可以使用函数:

<?php democracy_archives( $hide_active, $before_title, $after_title ); ?>

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/wordpress-democracy-poll.html/feed/ 0
同一服务器多个ca88亚洲城站点使用Memcached冲突的解决办法 /memcached-conflict-resolution-for-wordpress.html /memcached-conflict-resolution-for-wordpress.html#respond Sun, 06 Jan 2019 00:03:13 +0000 /?p=80509 缙哥哥开启了一个公益站点“琅嬛百科”,方便大家检索中医药相关的内容,由于需要经常搜索,所以开启了?Memcached?内存缓存,以便减少服务器压力,提高访问速度,改善用户体验度。由于跟缙哥哥博客放在同一台服务器上,开启后自动跳转到博客地址……

缙哥哥就纳闷了,明明数据库不是同一个,数据库前缀也不同,网站文件也不同,怎么就冲突了呢?后来一想就明白了,用的是同个内存啊,既然如此,用 CACHE_KAY 把两个网站区分开就好了嘛!

区分Memcached缓存

进入ca88亚洲城站点根目录,编辑根目录下的wp-config.php文件,在

/* 好了!请不要再继续编辑。请保存本文件。使用愉快! */

该代码注释上方添加以下代码

/* 同服务器多站点Memcached内存缓存分离 - https://www.dujin.org/12476.html  */
define('WP_CACHE_KEY_SALT', 'www.dujin.org');

这里引号中间 www.dujin.org?只是为了与其他站点区别 Memcached?缓存数据,避免冲突而已,你可以改成自己的网址,也可以不改。记得保存 wp-config.php 文件,然后重启下(个人建议)就OK了!

原文出处:

]]>
/memcached-conflict-resolution-for-wordpress.html/feed/ 0
开启或关闭 ca88亚洲城 发送的通知邮件 /manage-notification-emails.html /manage-notification-emails.html#comments Sat, 05 Jan 2019 00:28:41 +0000 /?p=80700 ca88亚洲城 默认有一套邮件通知机制,对于网站的一些用户交互操作都会有相关的邮件通知,但是有时候,我们希望可以关闭一些邮件通知,对于小白用户来说,这是不好做到的,所以倡萌今天就分享一个小插件 Manage Notification E-mails,让你可以自由开启或关闭这些邮件通知。插件的具体功能直接看下图吧,很简单:

在后台插件安装界面搜索?Manage Notification E-mails 即可在线安装,或者到官方下载?https://wordpress.org/plugins/manage-notification-emails/

倡萌已经该插件汉化,,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/manage-notification-emails.html/feed/ 1
使用 Notifications Center 自定义 ca88亚洲城 各种通知邮件 /notifications-center.html /notifications-center.html#comments Fri, 04 Jan 2019 00:31:13 +0000 /?p=80691 Notifications Center (通知中心)是一个可以自定义覆盖 ca88亚洲城 各种通知邮件的插件,如果你需要调整 ca88亚洲城 默认的通知邮件内容以及显示的样式的话,可以试试这个插件。Notifications Center 允许你设置不同的发件人和收件人信息,支持对特定用户、角色、邮箱地址 等发送通知,支持对文章内容状态更改、用户操作、评论相关操作的邮件定制。

文章(适用于任何自定义文章类型):

  • 一篇文章待审核
  • 文章发布
  • 文章被移动到回收站
  • 文章被移动到草稿
  • 文章设置为定时发布

评论 :

  • 评论发表
  • 评论正在等待审核(覆盖WP默认电子邮件)
  • 评论得到回复

系统:

  • ca88亚洲城 将核心升级到新版本
  • 用户要求密码重置
  • 新用户注册

在后台插件安装界面搜索?Notifications Center 即可在线安装,或者到官方下载:https://wordpress.org/plugins/notifications-center/

倡萌已将该插件汉化,,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

翻译完插件后,才想起来之前分享过类似功能的插件?Better Notifications for ca88亚洲城,o(* ̄︶ ̄*)o

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/notifications-center.html/feed/ 2
ca88亚洲城 禁止多人同时登录一个账号,可设定最大登录数 /loggedin.html /loggedin.html#respond Thu, 03 Jan 2019 00:04:52 +0000 /?p=80664 对于会员制的网站,尽可能避免多人同时登录一个会员账号应该是比较需要的,倡萌此前已经分享过?Prevent Concurrent Logins?和?Wp Single Login?两个插件,都可以满足需求,只是这两个插件很久没有更新了,不知道和新版的WP兼容如何,今天倡萌再推荐一个类似插件?Loggedin,和之前两个不太一样的是,它支持设置最大活跃登录数,也就是一个账号允许多少个客户端同时登录,还可以通过钩子排除掉一些用和用户角色。已测试兼容 ca88亚洲城 5.0+

Loggedin 使用很简单,直接在后台插件安装界面搜索?Loggedin 即可在线安装,或者到官方下载?https://wordpress.org/plugins/loggedin/,启用插件后,在 设置 – 常规 界面,就可以看到设置选项:

一旦有多个人(客户端)登录同一个账号,超过了设定的活跃登录数,就会出现如下提示:

倡萌已经该插件汉化,,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

下面分享下官方提供的排除用户和用户角色的代码示例,按照需求修改好代码,然后添加到主题的 functions.php 文件即可:

排除某些用户

//排除某些用户,不受最大活跃登录数限制
function f_loggedin_bypass_users( $bypass, $user_id ) {

    // 在 array( ) 中输入用户id,多个id用英文逗号隔开
    $allowed_users = array( 1, 2, 3, 4, 5 );

    return in_array( $user_id, $allowed_users );

}

add_filter( 'loggedin_bypass', 'f_loggedin_bypass_users', 10, 2 );

排除某些用户角色

//排除某些用户角色,不受最大活跃登录数限制
function f_loggedin_bypass_roles( $prevent, $user_id ) {

    // 在 array( ) 中输入用角色名,多个用户角色使用英文逗号隔开
    $allowed_roles = array( 'administrator', 'editor' );

    $user = get_user_by( 'id', $user_id );

    $roles = ! empty( $user->roles ) ? $user->roles : array();

    return ! empty( array_intersect( $roles, $allowed_roles ) );

}

add_filter( 'loggedin_bypass', 'f_loggedin_bypass_roles', 10, 2 );

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/loggedin.html/feed/ 0
ca88亚洲城 通知插件 DW Notifications /wordpress-dw-notifications.html /wordpress-dw-notifications.html#comments Wed, 02 Jan 2019 00:07:48 +0000 /?p=80623 如果想给网站添加一个通知功能,用来发布网站公告和网站动态,可以试试?DW Notifications 插件。通过简码直接添加到导航菜单中,就可以出现类似下面的界面,可以获取网站的一些动态以及发布自定义通知等,看起来还不错!

如果要添加到菜单,直接在 外观 – 菜单,自定义链接 添加简码即可,当然,还可以添加简码到小工具或其他页面:

[dw_notif]

主要功能:

A – 与DW问答插件集成

  • 从提交的新问题中获取通知。
  • 从提交的新答案中获取通知。
  • 从提交的新评论中获取通知。
  • 从其他标记/提及的用户处获取通知

B – 常规功能

  • 在左侧底部显示弹出通知。
  • 提交文章/博客时获取通知。
  • 手动添加通知。
  • 向所有/已注册/未注册用户发送通知。
  • 通知中支持自定义链接。
  • 选择css类型。
  • 在菜单中添加短代码

懂开发的朋友可以看下插件代码,扩展更多通知类型也是相对简单的。

在后台插件安装界面搜索?DW Notifications 即可在线安装,或者到官方下载:https://wordpress.org/plugins/dw-notifications/

倡萌已将该插件汉化(部分字段无法汉化),,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/wordpress-dw-notifications.html/feed/ 1
ca88亚洲城 自动重新发布旧文章 WP Auto Republish /wp-auto-republish.html /wp-auto-republish.html#respond Mon, 31 Dec 2018 23:31:11 +0000 /?p=80595 倡萌之前在为一个公司搭建网站的时候,对方要求可以定期自动更新旧文章的时间,这个对于大多数的公司网站来说,他们的网站内的文章基本都是很少更新的,但是又不希望访客看到是N年前的旧文章,所以这个功能还是有所需求的。今天倡萌就和大家分享?WP Auto Republish 这个插件,很简单就实现了我们的需求。

WP Auto Republish插件通过将发布日期重置为当前日期来帮助恢复旧文章。这会将旧文章推送到您的首页、存档页面的顶部,然后返回RSS源。非常适合拥有大量常绿内容的网站。

你可能需要它的几个原因:

  1. 您网站的新访问者未看到您的旧内容。这将有助于他们发现它。
  2. 旧内容不会显示在搜索引擎上基于日期的搜索中,但重置日期可以使它们再次焕然一新
  3. 人们喜欢分享和链接到新内容,他们通过查看发布日期来确定。
  4. 它会通过将旧文章移回首页和RSS源来突出显示旧文章。
  5. WP Auto Republish将改善您的博客可见性,流量和SEO
  6. 如果做得好,谷歌也会喜欢更新的内容

这个插件有什么作用?

此插件通过将发布日期重置为当前日期并将旧文章推送到首页,存档页面顶部以及返回RSS源,帮助恢复旧文章。

  • 允许您将旧文章发布日期更改为当前日期。
  • 允许您设置最小重新发布间隔和随机间隔。
  • 允许您显示原始发布日期之前/之后。
  • 允许您按类别/标签排除/包含文章。
  • 允许您按其ID强制排除/包含文章。
  • 允许您设置旧的文章选择方法。
  • 允许wordpress根据本地时区自动设置新的发布时间。
  • 允许wordpress在重新发布后自动清除缓存。

在后台插件安装界面搜索?WP Auto Republish 即可在线安装,或者到官方下载?https://wordpress.org/plugins/wp-auto-republish/

倡萌将?WP Auto Republish 汉化(部分字段不支持汉化),,解压后将里面的文件上传到 wp-content/languages/plugins 目录即可生效,同时避免插件升级时丢失语言。

警告:如果您的固定链接结构中包含日期,请勿使用此插件!因为它会修改你原来文章的网址,不利于SEO!!!

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/wp-auto-republish.html/feed/ 0
ca88亚洲城 免费杂志主题 Start Magazine /wordpress-theme-start-magazine.html /wordpress-theme-start-magazine.html#respond Sun, 30 Dec 2018 23:51:08 +0000 /?p=80563 Start Magazine 是一个干净而美丽的ca88亚洲城杂志主题。它专为在线杂志、报纸、新闻门户网站、编辑、博主和内容发布商而设。它提供简单而优雅的外观,并帮助您以有吸引力的方式呈现您的内容。它包含多个自定义选项和自定义小工具,使您可以轻松简化网站设置。安装或定制过程不需要高级编程知识,因为主题非常直观且对用户很友好。这个主题具有响应式布局,可以从普通桌面屏幕适应平板电脑和手机等移动设备。主题针对性能和SEO进行了优化,可帮助您的网站获得更高的排名。

主要功能

  • 使用Customizer API的主题选项
  • 响应式设计
  • 自定义小工具
  • 自定义菜单
  • 菜单设置
  • 徽标和标题自定义
  • 分页选项
  • 页脚小工具

  • 主题在线预览:https://demo.axlethemes.com/start-magazine/
  • 主题下载地址:
  • 主题帮助文档:https://axlethemes.com/documentation/start-magazine/

Start Magazine 主题还有收费版本,48美元一份,需要的可以自己到官方去购买。

]]>
/wordpress-theme-start-magazine.html/feed/ 0
功能不错的性能优化插件 WP Performance /wp-performance.html /wp-performance.html#comments Sun, 30 Dec 2018 00:11:20 +0000 /?p=80504 倡萌最近看到一款新出的ca88亚洲城性能优化插件?WP Performance,看了下插件的功能,觉得非常不错,特地翻译和推荐给大家。

WP Performance 是一个性能优化插件,旨在通过为您的ca88亚洲城网站添加各种性能调整,使“加速”过程更简单一些。此插件从动态内容生成静态html文件,并使用mod_rewrite加载缓存文件。

主要功能

  • 页面缓存
  • 缓存预加载
  • 浏览器缓存
  • GZIP 压缩
  • 压缩 CSS、JS 和 HTML
  • 异步加载 CSS、JavaScript
  • 合并 CSS、JavaScript
  • 禁用 CSS、JavaScript
  • DNS 预加载(Prefetch)
  • 关键 CSS 路径生成器
  • 数据清理
  • 导出/导入设置
  • 延迟加载图片
  • 响应式图片
  • 重新生成缩略图
  • CDN

具体功能见截图:

在后台插件安装界面搜索?WP Performance 即可在线安装,或者到官方地址下载:https://wordpress.org/plugins/wp-performance/

倡萌已将该插件汉化,并已提交给作者集成到插件中。

注:如果提示 WP Performance: 缺少 . htaccess 文件的写入权限,说明你网站根目录下没有? . htaccess 文件,或者该文件不可写,需要设置 755 读写权限。如果没有这个文件,可以下载?,解压后,复制里面的? . htaccess 文件到你网站根目录(即 wp-config.php 同目录)

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/wp-performance.html/feed/ 6
使用Local by Flywheel搭建ca88亚洲城本地运行环境:管理数据库 /local-by-flywheel-wordpress-3.html /local-by-flywheel-wordpress-3.html#respond Sat, 29 Dec 2018 00:12:35 +0000 /?p=80468 上一节中,我们已经创建了站点,以及简单介绍了基本的操作,今天我们来讲下如何管理网站数据库。Local by Flywheel 所使用的数据库管理工具名为?Adminer,是一个非常小巧的工具,只有一个文件,但是具备了常用的管理功能,可以说是一个精简的PhpMyadmin,如果你会用PhpMyadmin,那这个??Adminer 就不在话下了。

PhpMyadmin 入门:/series/phpmyadmin/

首先,请先运行网站,然后按照下图点击进入数据库管理界面:

从上面的按钮进来就是当前网站所用的数据库的管理界面,常用功能都已经附上了中文说明,一般也就是导出导入、以及执行SQL命令 用的比较多点,其他的很少用了。

导出数据库

点击左边的 Export(导出)链接进入到导出界面,全选数据库表,然后格式选择 gzip 压缩,最后点击 Export 按钮即可导出下载:

 

导入数据库

同样在左边点击 Import (导入)链接,进入到导入界面,选择数据库文件,然后点击 Execute(执行)即可导入:

执行SQL命令

点击左边的 SQL command 链接,进入到执行窗口,输入你的sql命令,然后点击下面的? Execute(执行)即可:

创建新数据库

点击最上面的面包屑导航中的 Server 进入到下图界面,然后点击 Create new database :

接着输入数据库名称、选择数据库编码格式,然后点击 Save 按钮即可:

到这里就简单介绍完了数据库的操作了,如果还有什么问题,可以进行评论提问。

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/local-by-flywheel-wordpress-3.html/feed/ 0
使用Local by Flywheel搭建ca88亚洲城本地运行环境:创建站点 /local-by-flywheel-wordpress-2.html /local-by-flywheel-wordpress-2.html#respond Thu, 27 Dec 2018 23:40:23 +0000 /?p=80422 在上一节中,我们已经安装好?Local by Flywheel,并进行了简单的设置,下来我们来创建站点。

创建站点

点击下图的 加号 :

输入网站名称,设置网站域名和目录:

选择网站环境 Custom 的参数:

设置网站用户名、密码和邮箱:

点击了 ADD SITE 按钮,如果之前没有安装过这个环境组件,可能需要一些时间去安装:

管理站点

创建好站点后,就是下图界面,网站已经自动启动了,在网站列表中右键,有各种操作,以及其他的操作请看界面:

特别要说下的是,软件可以启用外观访问网址,但是网址已经被国家防火墙屏蔽了,国内没办法正常访问。后续会想办法搭建环境来实现这个功能。

数据库管理信息和入口,后续会专门讲下数据库管理面板的操作:

在 SSL 选项卡,可以开启 Https,仅支持本地访问:

这里有一个邮件调试工具,可以看到网站发送邮件的信息,对于需要测试邮件发送功能的开发,是很好的辅助工具:

如果你安装了软件的扩展程序,可以看到更多管理菜单:

站点文件目录

打开网站目录,我们可以看到3个文件夹,如下图:

各种文件夹功能如下:

  • app/public? ?网站文件目录
  • app/sql? ?网站数据库目录(只要关闭软件或站点,就会看到这个目录)
  • conf? ? 各种环境的配置文件目录
  • logs? ? 环境组件的各种日志文件目录

今天的教程就先到这里,下一节我们将详细讲讲数据库管理面板的操作。

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/local-by-flywheel-wordpress-2.html/feed/ 0
使用Local by Flywheel搭建ca88亚洲城本地运行环境:简介及安装 /local-by-flywheel-wordpress-1.html /local-by-flywheel-wordpress-1.html#comments Wed, 26 Dec 2018 23:52:14 +0000 /?p=80326 倡萌此前一直推荐Windows系统下使用 phpstudy 作为本地环境搭建工具,在我们的ca88亚洲城入门视频教程也是基于phpstudy教学的。最近在学习老外的教程的时候,发现一个非常不错的本地环境搭建工具 Local by Flywheel,据说该工具之前是收费的,被Flywheel公司收购后,升级并免费提供下载使用。

Local by Flywheel 简介

Local by Flywheel 是一个用来搭建php本地开发环境的工具,它是基于VirtualBox虚拟机,并采用 Docker 容器技术运行本地网站的,这使得本地网站运行的效率要高于phpstudy(至少倡萌在使用phpstudy的时候,网站操作总感觉偶尔有些卡)。简单说下它的优缺点吧。

优点:

  • 每个网站一个Docker容器运行,php、mysql、 Nginx 或 Apache 都可以自定义和修改配置
  • 网站的文件和数据库都可以映射到本地电脑,直接就可以编辑
  • 带有简单的数据库可视化管理工具(比phpmyadmin简单)
  • 创建ca88亚洲城站点很简单,输入域名-设置环境-用户名、密码、邮箱,然后就一键搞定
  • 可以选择是否开启ca88亚洲城多站点模式
  • 一键开启ssl证书访问,在本地访问https的时候不会报证书错误
  • 支持克隆、导入、导出和保存为蓝本
  • 自带各种日志文件,可以方便调试和查错
  • 自带邮件记录,可以方便查看网站发送的邮件情况,对于开发中的邮件功能的调试非常有用
  • 支持一键生成外网访问网址,让别人可以在外网访问你本地的网站!(可惜网址被高墙屏蔽了)
  • 支持对每个网站进行SSH和WP-CLI命令操作

缺点:

  • 安装包有些大,毕竟要安装VirtualBox虚拟机
  • 启动速度也有些慢,还是VirtualBox拖速度

好了,更多的介绍在后续文章中继续吧!

Local by Flywheel 安装

访问官方网站?,按照下图所示,点击 FREE DOWNLOAD! 按钮:

会弹出对话框,选择你要下载的系统版本,然后填写必要的信息,然后点击底部的按钮即可下载:

下载到自己的电脑后,双击程序进行安装:

自动执行一小会,就会进到到环境安装界面,直接点击 LET’S GO! 按钮继续安装,这个过程需要等待几分钟,可能会有几次弹窗提问操作,注意全部选择 Yes,直到安装完成!

Local by Flywheel 设置

为了更加方便以后使用,我们先来设置一下参数,按照下图在左上角右键,点击 Preferences,进入设置界面:

APPRARANCE & BEHAVIOR 选项卡,可以设置软件的外观,有亮色和黑色可选:

NEW SITE DEFAULTS 选项卡可以设置新站点的默认参数:

EXPORTING 选项卡可以设置导出要排除的文件格式:

ADVANCED 选项卡,可以开启更快的Docker卷等:

BULEPRINTS 选项卡可以看到设置的站点蓝本,也可以叫做模板,当然,当前我们还没有将任何一个站点保存为蓝本,所以下图还没有显示:

Local by Flywheel 安装扩展

Local by Flywheel 自带了几个扩展程序,可以按照需要进行安装使用:

Local by Flywheel 启动优化

Local by Flywheel 是采用?Oracle VM VirtualBox 虚拟机来搭建环境的,现在我们可以在windows系统菜单中,找到?Oracle VM VirtualBox 这个程序,开启后,就可以看到下图界面,在?Local by Flywheel 上右键 -设置,

然后切换到 系统 菜单,【主板】选项卡将内存调整大些,记得点击 OK 保存:

切换到【处理器】选项卡,可以设置CPU核数,记得点击 OK 保存:

然后重启后,Local by Flywheel 的启动和运行可能会好一些。当然,也要看你的电脑本身的配置,配置好的话,性能就好些。

好了,今天就先到这里,下次我们就来说说如何添加站点,以及站点的一些管理功能。

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/local-by-flywheel-wordpress-1.html/feed/ 1
ca88亚洲城 为评论添加星级评分功能,支持自定义文章类型 /wordpress-stars-rating-reviews-plus.html /wordpress-stars-rating-reviews-plus.html#respond Wed, 26 Dec 2018 01:20:20 +0000 /?p=80235 有些时候,我们需要为ca88亚洲城自带的评论功能添加一个星级评分功能,倡萌之前推荐过?Fa Comment Rating,今天再补充两个不错的插件。

Stars Rating

一个简单易用的插件,可为文章、页面和自定义文章类型的评论添加星级评分功能。允许设置哪些文章类型启用该功能,还可以为单个文章、页面等启用/禁用星级评分功能。并提供简码 [stars_rating_avg] 来显示平均评分。

Stars Rating下载地址:

Reviews Plus

一个免费的ca88亚洲城插件,允许管理和显示客户对产品、服务或任何其他文章类型内容的评论。可以为任何ca88亚洲城页面、文章或自定义文章类型的评论启用星级评分功能。比上面的插件更好的地方,就是它可以为每一种启用了该功能的文章类型添加一个单独的评论管理界面,并且可以替换掉?WooCommerce 自带的点评功能。

Reviews Plus 下载地址:

声明:本文为 倡萌@ca88亚洲城唯一官方网站 原创,未经许可,禁止转载或他用!

]]>
/wordpress-stars-rating-reviews-plus.html/feed/ 0
ca88亚洲城 Gutenberg Block API:扩展块 /wordpress-gutenberg-block-api-extending-blocks.html /wordpress-gutenberg-block-api-extending-blocks.html#respond Mon, 24 Dec 2018 23:48:39 +0000 /?p=80224 欢迎回到我们使用ca88亚洲城 Gutenberg Block API创建自定义块的系列教程。本教程是关于扩展我们在上一篇文章中创建的随机图像块。我们已经添加了一个下拉控件来选择图像类别。下来将添加更多选项,来进行更多自定义。

具体来说,我们将看到如何在编辑器的各个部分添加块设置。没错,您不仅限于直接在块本身上添加块控件!

最终的my-custom-block?插件代码会提供下载。只需到您的计算机,然后像安装任何其他ca88亚洲城插件一样进行安装。您还可以在我们的中找到源代码。

Gutenberg正在以合理的速度开发,自上一个教程发布以来,已有一个新的重要版本。本教程中使用的Gutenberg版本已更新至3.0.1,并且某些编辑器UI可能与本系列之前的教程中显示的屏幕截图略有不同。

开始扩展吧!

我们在上一个教程中添加的下拉控件位于编辑器内部,直接位于随机图像的标记下方。这很方便,但我们也有其他选择。

我们还可以将块控件添加到弹出工具栏(在选择块时显示)和块检查器面板。

在上面的界面截图中,我们可以看到段落块[1]的工具栏控件,以及面板检查器[3]中的相关控件。位置[2]显示我们的随机图像块的下拉控件。

您可能已经在考虑为自己的块设置选择哪个位置,但您不必只选择其中一个位置。它们不是相互排斥的。例如,对于段落块(如上所示),您可以看到块检查器面板和工具栏之间的设置是分开的。

此外,在编辑器中的不同位置有两个独立的控件可以影响相同的设置。你可能不想经常这样做,但还是要知道如何实现它,所以我们稍后会看到如何做到这一点。

直接块设置

让我们最简单为块添加功能的方法开始,该功能直接位于块的edit?函数内。我们已经使用这种方法添加了我们的随机图像下拉控件,因为它只需要很少的额外工作。

我们不会为块本身添加新的控件,但我们可以调整下拉控件的行为,使其更加直观。为了使其尽可能靠近前端渲染,除非选择了块,否则我们可以限制下拉显示。

我们现在就做这个修改吧。如果您上次关注本教程,在您喜欢的编辑器中打开/my-custom-block/src/random-image/index.js。这是我们随机图像块的主要JavaScript文件。

传递给所有块的一个工具是isSelected,它保存了块的可见性状态。我们可以使用它来有条件地显示类别下拉控件。

首先,isSelected?从props?对象中拉出并将其添加到edit?函数内的常量列表中。这很有用,所以我们可以用缩短的名称(即isSelected?而不是props.isSelected)来引用它。

const { attributes: { category }, setAttributes, isSelected } = props;

接下来,我们可以使用此属性来确定是否应显示下拉控件:

{ isSelected && (
    <form onSubmit={ setCategory }>
        <select value={ category } onChange={ setCategory }>
            <option value="animals">Animals</option>
            <option value="arch">Architecture</option>
            <option value="nature">Nature</option>
            <option value="people">People</option>
            <option value="tech">Tech</option>
        </select>
    </form>
) }

这是一种测试isSelected的简便方法?,因为我们无法在JSX代码中使用完整的JavaScript?if?语句。

确保您仍在观看文件并进行更改,以便将任何块的源代码(JSX,ES6 +,Sass等)转换为有效的JavaScript和CSS。如果您当前没有在文件中查看更改,请在my-custom-block插件根文件夹中打开命令行窗口并输入npm start

打开Gutenberg编辑器并添加随机图像块。这次,如果尚未单击块,则下拉控件不可见。

这为块提供了更好的互动体验。

如果您使用了任何核心Gutenberg块(例如段落块),那么您将熟悉工具栏设置。选择“段落”块后,会出现一个弹出工具栏,其中包含用于格式化文本的按钮。这种类型的控件非常适用于具有开/关类型状态的块设置 – 例如,文本对齐或格式(如粗体或斜体)。

我们将使用内置对齐工具栏控件来允许下拉图像类别控件设置左对齐(默认),右对齐或居中对齐。

首先,我们需要从wp.blocks中提取AlignmentToolBar?和BlockControls?组件。这些允许我们在选中块时在上方的浮动工具栏中显示对齐控件。这些是我们可以在自己的块中使用的核心组件的一部分。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType
} = wp.blocks;

BlockControls?组件充当工具栏容器,并将AlignmentToolbar?放在里面。

我们仍然需要手动设置对齐工具栏的行为,我们可以添加新categoryAlign?属性来存储块的对齐状态(左,右或居中)。

我们的attributes?对象现在包含两个设置。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string'
        default: ''
    }
}

categoryAlign?属性的默认值为空字符串,这将导致默认情况下不应用对齐。

要引用新属性,我们可以将此值拉出到自己的常量变量中,就像我们对下拉category?属性所做的那样。

const { attributes: { category, categoryAlign }, setAttributes, isSelected } = props;

我们现在需要做的就是将两个新组件放入edit?函数中并配置属性。

<BlockControls>
    <AlignmentToolbar
        value={ categoryAlign }
        onChange={ value => setAttributes( { categoryAlign: value } ) }
    />
</BlockControls>

正如你所看到的,我们需要做的是,当工具栏按钮被点击时,分配Alignmenttoolbar?的?value属性给categoryAlign?属性,并调用setAttributes?函数。此函数会更新categoryAlign?属性并使所有内容保持同步。

要应用下拉控件的对齐样式,我们需要向表单元素添加样式属性。

<form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>

请注意,我们不需要此控件来影响前端的任何内容,因此我们不需要向块的save?函数添加任何代码。

块检查器面板为您提供了添加块控件的空间,是更复杂控件的理想位置。

我们将专注于向检查器面板添加两个下拉控件。第一个将是类别下拉控件的副本,用来选择随机图像的类型。这演示了如何通过多个控件来更新公共属性。

更新一个控件后,相应的控件也会自动更新!但实际上,您通常只需要一个设置一个控件。

第二个下拉控件将??允许您选择应用于随机图像的滤镜。?Web服务支持两种类型的过滤器 —— grayscale 和 sepia ——我们可以在它们之间选择,只需添加sepia?或grayscale?到HTTP请求的网址中。如果我们不指定过滤器,则将返回标准彩色图像。

两个下拉列表的代码非常相似,因此我们将它们一起添加。

首先,让我们定义我们需要的新块和组件。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType,
    InspectorControls
} = wp.blocks;
 
const {
    PanelBody,
    PanelRow
} = wp.components;
 
const {
    Fragment
} = wp.element;

在这里,新的变量是InspectorControlsPanelBodyPanelRow,和Fragment,这些都是用来帮助创建Inspector面板UI。

当您需要从edit?或save?函数返回多个顶级元素但不想将它们包装在将要输出的元素中时,<Fragment>?组件会非常有用。

<Fragment>?不会在前端输出任何标记,就像一个看不见的容器。它只是一种返回多个顶级元素的便捷方式,并且是以前返回元素数组的方法的替代方法。

我们只需要添加一个名为 imageFilter?的新属性,因为现有category?属性可以重用。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string',
        default: ''
    },
    imageFilter: {
        type: 'string',
        default: ''
    }
}

edit?函数内部,我们需要引用新属性来添加一个新变量。

const { attributes: { category, categoryAlign, imageFilter }, setAttributes, isSelected } = props;

添加块检查器面板非常简单。我们将使用的组件结构如下:

<InspectorControls>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
</InspectorControls>

<InspectorControls>?组件作为块检查器容器,<PanelBody>?定义了各个可折叠部分。在每个组件中,您可以拥有任意数量的<PanelRow>?组件,而这些组件又包含了您的控件。

我们已经为可以重用的类别下拉控件定义了标记。为此,将其抽象为一个单独的函数:

function showForm() {
    return (
        <form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>
            <select id="image-category" value={ category } onChange={ setCategory }>
                <option value="animals">Animals</option>
                <option value="arch">Architecture</option>
                <option value="nature">Nature</option>
                <option value="people">People</option>
                <option value="tech">Tech</option>
            </select>
        </form>
    );
}

然后,只要我们需要渲染类别下拉控件,就可以引用此函数。块检查器面板的标记需要在块标记之外,因此我们可以在返回之前使用<Fragment>?组件将它们包裹起来。

接下来,我们需要为类别和图像过滤器下拉列表添加块检查器组件。这些需要在<PanelRow>?组件内部定义,我们还必须定义一个新的回调函数来处理onChange?事件。这与上一个教程中的类别下拉代码非常相似,所以现在应该对它比较熟悉了。

把所有代码放在一起,现在edit方法的return函数看起来是这样的:

return (
    <Fragment>
        <InspectorControls>
            <PanelBody title={ __('Image Settings') }>
                <PanelRow>
                    <label>Set Filter</label>
                    { showForm() }
                </PanelRow>
                <PanelRow>
                    <label>Set Filter</label>
                    <form onSubmit={ setFilter }>
                        <select id="image-filter" value={ imageFilter } onChange={ setFilter }>
                            <option value="">None</option>
                            <option value="sepia">Sepia</option>
                            <option value="grayscale">Grayscale</option>
                        </select>
                    </form>
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <div className={ props.className }>
            <BlockControls>
                <AlignmentToolbar
                    value={ categoryAlign }
                    onChange={ value => setAttributes( { categoryAlign: value } ) }
                />
            </BlockControls>
            <RandomImage filter={ imageFilter } category={ category } />
            { isSelected && ( showForm() ) }
        </div>
    </Fragment>
);

setFilter?回调被定义为:

function setFilter( event ) {
    const selected = event.target.querySelector( '#image-filter option:checked' );
    setAttributes( { imageFilter: selected.value } );
    event.preventDefault();
}

要获取过滤后的图像,我们需要在RandomImage?每次更改下拉列表时更新组件以接受新的过滤器值。

function RandomImage( { category, filter } ) {
    if(filter) {
        filter = '/' + filter;
    }
    const src = 'https://placeimg.com/320/220/' + category + filter;
    return <img src={ src } alt={ category } />;
}

请注意我们是如何在edit?方法中使用这个新的组件属性将新的过滤器值发送到PlaceIMG。

<RandomImage filter={ imageFilter } category={ category } />

所有代码更改会创建一个新的块检查器面板,其中包含两个下拉控件来更改图像类别和过滤器。

要使新的过滤器属性也适用于前端,我们只需要更新save方法。

save: function( props ) {
    const { attributes: { category, imageFilter } } = props;
    return (
        <div>
            <RandomImage filter={ imageFilter } category={ category } />
        </div>
    );
}

小结

在这篇文章中,我们介绍了向块添加设置的三种不同方法:

  • 弹出工具栏
  • 直接在块内部
  • 块检查器面板

我们只为每个块添加了基本设置,但我们可以轻松地做更多,比如添加对多个图像的支持,添加图像标题以及控制样式(如边框颜色、半径或随机图像尺寸)。

我敢肯定,到目前为止,你可能已经有了一些创建自己的自定义块的想法。我很想知道你在自己的项目中找到哪些有用的块!

我们刚刚在Envato Tuts +开始使用Gutenberg,如果你想在未来的教程中看到Gutenberg块开发的任何特定方面更深入的内容,请通过评论告诉我们。

原文:?,发布于 2018年6月18日,由?倡萌@ca88亚洲城唯一官方网站?翻译,未经许可,禁止转载译文和他用!

 

]]>
/wordpress-gutenberg-block-api-extending-blocks.html/feed/ 0
ca88亚洲城 Gutenberg Block API:创建自定义块 /wordpress-gutenberg-block-api-creating-custom-blocks.html /wordpress-gutenberg-block-api-creating-custom-blocks.html#respond Mon, 24 Dec 2018 00:05:43 +0000 /?p=80205 新的ca88亚洲城编辑器(代号为Gutenberg)将于5.0版本发布。现在是在它进入ca88亚洲城核心之前掌握它的最佳时机。 在本系列中,我将向您展示如何使用Block API并创建您自己的内容块,您可以使用它们来构建您的帖子和页面。

上一篇文章中,我们了解了如何使用create-guten-block工具包创建一个插件,其中包含一个可供我们使用的样本块。我们可以根据需要轻松扩展它,但是知道如何从头开始创建块以充分理解Gutenberg块开发的所有方面是个好主意。

在这篇文章中,我们将在?my-custom-block?插件中创建第二个块,以显示?Web服务中的随机图像。您还可以通过从下拉选择控件中选择图像类别来自定义块。

但首先我们将学习块脚本和样式如何排队引入,然后再转到最重要的registerBlockType()?函数,这对于在Gutenberg中创建块是至关重要的。

排队块脚本和样式

要添加块所需的JavaScript和CSS,我们可以使用Gutenberg提供的两个新的ca88亚洲城钩子:

  • enqueue_block_editor_assets
  • enqueue_block_assets

这些仅在Gutenberg插件处于活动状态时可用,并且它们以类似于标准ca88亚洲城挂钩的方式工作以排队脚本。但是,它们专门用于与Gutenberg块一起使用。

enqueue_block_editor_assets?钩子只在管理编辑界面增加了脚本和样式。这使得它非常适合排队引入JavaScript来注册块和引入CSS来在块设置进行用户界面元素设置。

但是,对于块输出,您希望块在编辑器中的渲染方式与在大多数情况下在前端的渲染相同。 使用enqueue_block_assets?可以轻松实现,因为样式会自动添加到编辑器和前端。如果需要,您还可以使用此钩子加载JavaScript。

但您可能想知道如何在前端排队脚本和样式。没有ca88亚洲城钩子允许你直接执行此操作,但是你可以通过在enqueue_block_assets?钩子回调函数中添加条件语句来解决这个问题。

add_action( 'enqueue_block_assets', 'load_front_end scripts' );
function load_front_end scripts() {
    if( !is_admin() {
        // enqueue front end only scripts and styles here
    }
}

要使用这两个新钩子来排队脚本和样式,您可以像平常使用wp_enqueue_style()?wp_enqueue_scripts()?函数一样操作。

但是,您需要确保使用正确的脚本依赖项。要在编辑器上排队脚本,可以使用以下依赖项:

  • 脚本:array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-components' )
  • 样式:array( 'wp-edit-blocks' )

在为编辑器和前端排队样式时,您可以使用此依赖项:

  • array( 'wp-blocks' )

这里值得一提的是,我们的?my-custom-block?插件排队的实际文件是JavaScript和CSS?的编译版本,而不是包含JSX和Sass源代码的文件。

手动排队文件时,这是要记住的事情。如果您尝试将包含React,ES6 +或Sass的原始源代码排入队列,那么您将遇到许多错误。

这就是为什么使用工具包很有用的原因,例如create-guten-block?它会自动处理和排队脚本!

注册Gutenberg区块

要创建一个新块,我们需要通过调用registerBlockType()?并传入块名称和配置对象来向Gutenberg注册它。此对象具有许多需要正确解释的属性。

首先,让我们来看看块名称。这是第一个参数,是一个由两部分组成的字符串,命名空间和块名称本身,由正斜杠字符分隔。

例如:

registerBlockType(
    'block-namespace/block-name',
    {
        // configuration object
    }
);

如果您在插件中注册了几个块,那么您可以使用相同的命名空间来组织所有块。 但是,命名空间必须是插件的唯一名称,这有助于防止命名冲突。如果已经通过另一个插件注册了具有相同名称的块,则会发生这种情况。

第二个registerBlockType()?参数是设置对象,需要指定许多属性:

  • title?(字符串):在编辑器中显示为可搜索的块标签
  • description?(可选字符串):描述块的用途
  • icon?(可选的Dashicon或JSX元素):与块关联的图标
  • category?(字符串):在“?添加块”??对话框中块出现的位置
  • keywords?(可选数组):块搜索中最多使用三个关键词
  • attributes?(可选对象):处理动态块数据
  • edit?(函数):一个返回要在编辑器中呈现的标记的函数
  • save?(函数):一个返回要在前端渲染的标记的函数
  • useOnce?(可选布尔值):限制块被多次添加
  • supports?(可选对象):定义块支持的功能

假设我们使用JSX进行块开发,这是registerBlockType()?一个非常简单的块的示例调用:

registerBlockType(
    'my-unique-namespace/ultimate-block',
    {
        title: __( 'The Best Block Ever', 'domain' ),
        icon: 'wordpress',
        category: 'common',
        keywords: [ __( 'sample', 'domain' ), __( 'Gutenberg', 'domain' ), __( 'block', 'domain' ) ],
        edit: () => <h2>Welcome to the Gutenberg Editor!</h2>,
        save: () => <h2>How am I looking on the front end?</h2>
    }
);

注意,我们并没有包括对一个条目的??descriptionattributesuseOnce,和supports属性?可以安全地省略任何可选字段(与块无关)。 例如,由于此块不涉及任何动态数据,因此我们无需担心指定任何属性。

现在让我们逐一详细介绍registerBlockType()配置对象属性。

标题和说明

在编辑器中插入或搜索块时,标题将显示在可用块列表中。

它也会显示在块检查器窗口中,以及块描述(如果已定义)。如果块检查器当前不可见,那么您可以使用Gutenberg编辑器右上角的齿轮图标来切换可见性。

理想情况下,标题和描述字段都应包含在i18n函数中,以允许翻译成其他语言。

类别

目前有五种块类别:

  • common
  • formatting
  • layout
  • widgets
  • embed

这些确定了在“?添加块”??窗口中列出块的类别部分。

”??选项卡包含“公共块”,“?格式”,“?布局元素?”和“?小工具”??类别,而“?嵌入”??类别具有自己的选项卡。

目前Gutenberg已修复了类别,但未来可能会有所变化。这将是有用的,例如,如果您在单个插件中开发多个块,并且您希望它们全部列在一个公共类别下,以便用户可以更容易地找到它们。

图标

默认情况下,您的块被分配了盾牌,但您可以通过在icon字段中指定自定义Dashicon来覆盖它。

每个Dashicon都带有前缀,dashicons-?后跟一个唯一的字符串。例如,齿轮图标具有名称dashicons-admin-generic。 要将其用作块图标,只需删除要识别的dashicons-?前缀,例如??icon: 'admin-generic'

但是,您不仅限于使用Dashicons作为图标属性。该函数还接受JSX元素,这意味着您可以使用任何图像或SVG元素作为块图标。

只需确保图标大小与其他块图标保持一致,默认情况下为20 x 20像素。

关键词

最多可选择三个可翻译关键词,以便在用户搜索块时使您的区块脱颖而出。最好选择与块功能密切相关的关键词,以获得最佳效果。

keywords: [
    __( 'search', 'domain' ),
    __( 'for', 'domain' ),
    __( 'me', 'domain' ),
]

您甚至可以将公司和/或插件名称声明为关键词,这样,如果您有多个块,则用户可以开始键入您的公司名称,所有块都将显示在搜索结果中。

虽然添加关键字完全是可选的,但它是让用户更容易找到您的块的好方法。

属性

属性有助于管理块中的动态数据。此属性是可选的,因为对于输出静态内容的非常简单的块,您不需要它。

但是,如果您的块处理可能更改的数据(例如可编辑文本区域的内容)或您需要存储块设置,那么使用属性是可行的方法。

属性通过将动态块数据保存在数据库或post meta中的帖子内容中来工作。在本教程中,我们将仅使用存储数据的属性以及帖子内容。

要检索存储在帖子内容中的属性数据,我们需要指定它在标记中的位置。我们可以通过指定指向属性数据的CSS选择器来完成此操作。

例如,如果我们的块包含标记,我们可以使用其title?字段作为我们的属性,如下所示:

attributes: {
    linktitle: {
        source: 'attribute',
        selector: 'a',
        attribute: 'title'
    }
}

这里,属性名称是linktitle,它是一个任意字符串,可以是你喜欢的任何东西。

例如,我们可以使用<a title="some title">?属性来存储通过块设置中的文本框输入的链接标题 。这样做突然使标题字段动态化,并允许您在编辑器中更改其值。

保存帖子后,属性值将插入到链接??title?字段中。同样,加载编辑器时,title将从内容中检索标记的值并将其插入到linktitle?属性中。

您可以使用更多方法source?来确定如何通过属性存储或检索块内容。例如,您可以使用'text'源从段落元素中提取内部文本。

attributes: {
    paragraph: {
    source: 'text',
    selector: 'p'
    }
}

您还可以使用children?源将元素的所有子节点提取到数组中并将其存储在属性中。

attributes: {
    editablecontent: {
        source: 'children',
        selector: '.parent'
    }
}

这将选择具有类的元素.parent?并将所有子节点存储在editablecontent?属性中。

如果未指定源,则在保存到数据库时,属性值将作为发布标记的一部分保存在HTML注释中。在帖子在前端呈现之前,这些注释被删除。

当我们在本教程后面开始实现随机图像块时,我们将看到这种类型属性的具体示例。

属性可能需要一点点来习惯,所以如果你没有完全理解它们,请不要担心。我建议您查看?Gutenberg手册的部分,了解更多详细信息和示例。

编辑

edit函数控制块在编辑器界面中的显示方式。动态数据将作为props(包括已定义的任何自定义属性)传递到每个块。

通常的做法是添加??className={ props.className }?到主块元素以输出特定于块的CSS类。ca88亚洲城不会在编辑器中为您添加此内容,因此如果您想要包含它,则必须手动为每个块添加它。

使用props.className是标准做法,因为它提供了一种为每个块定制CSS样式的方法。 生成的CSS类的格式是.wp-block-{namespace}-{name}。如您所见,这基于块命名空间/名称,使其成为唯一块标识符的理想选择。

编辑功能要求您通过该render()方法返回有效标记,然后使用该方法在编辑器中渲染块。

保存

edit函数类似,save?显示块在前端的可视化效果。它还通过props接收动态块数据(如果已定义)。

一个主要区别是props.className?内部不可使用save,但这不是问题,因为它是由Gutenberg自动插入的。

支持

supports?属性接受布尔值的对象,以确定您的块是否支持某些核心功能。

您可以设置的可用对象属性如下。

  • anchor?(默认为false):允许您直接链接到特定块
  • customClassName?(true):在块的检查器中添加一个字段来定义用于该块的自定义className
  • className?(true):根据块名称向块根元素添加一个className
  • html?(true):允许直接编辑块标记

useOnce?属性

这是一个有用的属性,允许您限制块多次添加到页面。核心的?更多?块就是一个例子,如果已存在则无法添加到页面。

如您所见,一旦添加了更多块,块图标将变灰并且无法选择。该useOnce?属性默认设置为false

让我们变得有创意!

现在是时候使用我们迄今为止所获得的知识来实现??一个块的可靠实例,它比简单地输出静态内容更有趣。

我们将构建一个块,将通过外部请求获得的随机图像输出到?网站,该网站返回一个随机图像。此外,您还可以选择通过选择下拉控件返回的图像类别。

为方便起见,我们将新块添加到同一个??my-custom-block??插件中,而不是创建一个全新的插件。默认块的代码位于/src/block??文件夹内,因此在/src中添加另一个名为random-image的文件夹,并添加三个新文件:

  • index.js:注册我们的新块
  • editor.scss:用于编辑器样式
  • style.scss:编辑器和前端的样式

或者,如果您不想手动输入所有内容,您可以复制/src/block文件夹并重命名它。但是,请确保,在新的块文件夹内重命名block.jsindex.js

我们使用index.js?作为主块文件名,因为这允许我们简化blocks.js中的import语句。我们可以只指定块文件夹的路径,而不必包含块的路径和完整文件名,import?将自动查找index.js??文件。

打开/src/blocks.js??并在文件顶部添加对我们新块的引用,直接在现有import语句下面。

import './random-image';

/src/random-image/index.js中,添加以下代码以启动我们的新块。

//  Import CSS.
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n;
const { registerBlockType, query } = wp.blocks;
 
registerBlockType( 'cgb/block-random-image', {
    title: __( 'Random Image' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'random' ),
        __( 'image' )
    ],
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <h3>Random image block (editor)</h3>
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <h3>Random image block (front end)</h3>
            </div>
        );
    }
} );

这将设置我们块的框架,并且非常类似于create-guten-block?工具包生成的样板块代码。

我们通过导入编辑器和前端样式表开始,然后我们将从中选取一些常用的功能wp.i18n?和?wp.blocks?为本地变量。

registerBlockType()里面,值已进入了titleiconcategory,和keywords属性,而edit?和save?功能目前只输出静态内容。

将随机图像块添加到新页面以查看到目前为止生成的输出。

确保您仍在观看文件以进行更改,以便将任何块源代码(JSX,ES6 +,Sass等)转换为有效的JavaScript和CSS。如果您当前没有在文件中查看更改,请在my-custom-block??插件根文件夹中打开命令行窗口并输入npm start

您可能想知道为什么我们不必添加任何PHP代码来排队其他块脚本。my-custom-block?块的块脚本是通过init.php排队,但是我们不需要专门为我们的新块排队脚本,因为create-guten-block已为我们操作了。

只要我们将主块文件导入src/blocks.js(如上所述),我们就不需要做任何额外的工作了。所有JSX,ES6 +和Sass代码将自动编译为以下文件:

  • dist/blocks.style.build.css:编辑器和前端的样式
  • dist/blocks.build.js: 仅用于编辑器的JavaScript
  • dist/blocks.editor.build.css:?仅用于编辑器的样式

这些文件包含所有块的JavaScript和CSS,因此只需要将一组文件排入队列,无论创建的块数是多少!

我们现在准备为我们的块添加一些交互性,我们可以通过首先添加一个属性来存储图像类别来实现。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    }
}

这将创建一个名为category的属性,该属性存储一个默认值为'nature'的字符串。 我们没有在标记中指定存储和检索属性值的位置,因此将使用特殊的HTML注释。如果省略属性源,这是默认行为。

我们需要一些改变图像类别的方法,可以通过选择下拉控件来完成。将edit函数更新为以下内容:

edit: function( props ) {
    const { attributes: { category }, setAttributes } = props;
    function setCategory( event ) {
        const selected = event.target.querySelector( 'option:checked' );
        setAttributes( { category: selected.value } );
        event.preventDefault();
    }
    return (
        <div className={ props.className }>
            Current category is: {category}
            <form onSubmit={ setCategory }>
                <select value={ category } onChange={ setCategory }>
                    <option value="animals">Animals</option>
                    <option value="arch">Architecture</option>
                    <option value="nature">Nature</option>
                    <option value="people">People</option>
                    <option value="tech">Tech</option>
                </select>
            </form>
        </div>
    );
}

这是它的样子:

这与之前的静态edit函数完全不同,所以让我们来看看这些变化。

首先,我们添加了一个选择下拉控件,其中有几个选项与?站点上可用的图像类别相匹配。

当下拉值更改时,将调用setCategory函数,该函数将查找当前选定的类别,然后依次调用?setAttributes?函数。 这是Gutenberg的核心功能,可以正确更新属性值。建议您仅使用此功能更新属性。

现在,每当选择新类别时,属性值都会更新并传递回edit函数,该函数会更新输出消息。

我们必须完成最后一步才能显示随机图像。我们需要创建一个简单的组件,该组件将接收当前类别并输出带有从PlaceIMG站点获得的随机图像的<img>标签。

我们需要对PlaceIMG提出的请求是以下形式:

我们现在将保持宽度和高度不变,因此我们只需要将当前类别添加到请求URL的末尾。例如,如果该类别是'nature',则完整请求网址为:。

添加RandomImage组件到registerBlockType()上面:

function RandomImage( { category } ) {
    const src = 'https://placeimg.com/320/220/' + category;
    return <img src={ src } alt={ category } />;
}

要使用它,只需将其添加到编辑函数中并删除静态输出消息。同时我们在这里,也为保存函数做同样的事情。

完整的index.js文件现在应如下所示:

//  Import CSS.
import './style.scss';
import './editor.scss';
 
const { __ } = wp.i18n;
const { registerBlockType, query } = wp.blocks;
 
function RandomImage( { category } ) {
    const src = 'https://placeimg.com/320/220/' + category;
    return <img src={ src } alt={ category } />;
}
 
registerBlockType( 'cgb/block-random-image', {
    title: __( 'Random Image' ),
    icon: 'format-image',
    category: 'common',
    keywords: [
        __( 'random' ),
        __( 'image' )
    ],
    attributes: {
        category: {
            type: 'string',
            default: 'nature'
        }
    },
    edit: function( props ) {
        const { attributes: { category }, setAttributes } = props;
        function setCategory( event ) {
            const selected = event.target.querySelector( 'option:checked' );
            setAttributes( { category: selected.value } );
            event.preventDefault();
        }
 
        return (
            <div className={ props.className }>
                <RandomImage category={ category } />
                <form onSubmit={ setCategory }>
                    <select value={ category } onChange={ setCategory }>
                        <option value="animals">Animals</option>
                        <option value="arch">Architecture</option>
                        <option value="nature">Nature</option>
                        <option value="people">People</option>
                        <option value="tech">Tech</option>
                    </select>
                </form>
            </div>
        );
    },
    save: function( props ) {
        const { attributes: { category } } = props;
        return (
            <div>
                <RandomImage category={ category } />
            </div>
        );
    }
} );

最后(暂时),将以下样式添加到editor.scss以在图像周围添加彩色边框。

.wp-block-cgb-block-random-image  {
    select {
        padding: 2px;
        margin: 7px 0 5px 2px;
        border-radius: 3px;
    }
}

你还需要style.css中的一些样式??。

.wp-block-cgb-block-random-image  {
    background: #f3e88e;
    color: #fff;
    border: 2px solid #ead9a6;
    border-radius: 10px;
    padding: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
 
    img {
        border-radius: inherit;
        border: 1px dotted #caac69;
        display: grid;
    }
}

只要在编辑器或前端刷新页面,就会显示一个新的随机图像。

如果您看到一遍又一遍地显示相同的图像,则可以进行?以防止从浏览器缓存中提供图像。

小结

在本教程中,我们已经介绍了很多内容。如果你已经完成了所有的工作,那就给自己一个当之无愧的点赞吧! Gutenberg?区块开发可以带来很多乐趣,但在第一次曝光时掌握每个概念绝对具有挑战性。

在此过程中,我们学习了如何将块脚本和样式排入队列并深入介绍了registerBlockType()函数。

我们通过将理论付诸实践并从头开始创建自定义块来使用PlaceIMG Web服务显示特定类别的随机图像。

在本系列教程的下一部分也是最后一部分中,我们将通过块检查器中的设置面板为随机图像块添加更多功能。

如果您一直关注本教程并且只是想在不输入所有内容的情况下试验代码,那么您将能够在下一个教程中下载最终的my-custom-block插件。

原文:?,发布于 2018年5月23日,由?倡萌@ca88亚洲城唯一官方网站?翻译,未经许可,禁止转载和挪用译文!

]]>
/wordpress-gutenberg-block-api-creating-custom-blocks.html/feed/ 0
ca88亚洲城 Gutenberg Block API:块外观 /wordpress-gutenberg-block-api-block-look-and-feel.html /wordpress-gutenberg-block-api-block-look-and-feel.html#respond Sun, 23 Dec 2018 00:04:05 +0000 /?p=80173 新的ca88亚洲城编辑器(代号为Gutenberg)将于5.0版本发布。现在是在它进入ca88亚洲城核心之前掌握它的最佳时机。 在本系列中,我将向您展示如何使用Block API并创建您自己的内容块,您可以使用它们来构建您的帖子和页面。

本系列的第一篇文章中,我们概述了Block API并创建了一个简单的测试块。我们稍后会仔细研究Block API,但首先让我们编辑我们在上一篇文章中创建的默认块,以了解对现有块进行更改是多么容易。

如果您还记得,我们的自定义块在前端和后端的呈现方式不同,以证明您可以完全控制块在编辑器中的呈现方式以及站点访问者看到块的样子。

如果你一直在关注,那么打开块源代码所在的/wp-content/plugins/my-custom-block/src/block文件夹。该文件夹包含一个JavaScript文件和两个Sass文件,它们控制块的行为以及它在编辑器和前端的呈现方式。

block.js?JavaScript文件中包含了,这是在编译过程中为有效的JavaScript transpiled。同样,两个Sass文件也转换为标准CSS。

在构建过程中,这些文件需要处理才能在插件的?dist/?文件夹中创建分发文件。这些是ca88亚洲城排队引入的实际文件,因为它们包含所有浏览器都能理解的有效JavaScript和CSS。

幸运的是,该create-guten-block?工具包通过监视块文件的更改来处理构建和转换。 这是一个非常好的功能,因为它让我们不用担心。我们可以专注于编写块代码(和样式),插件文件将自动更新。真实太棒了!

只需确保从插件根文件夹中运行命令?npm start?以触发文件监视。

是时候编辑一些代码!

不要担心在?block.js?中的JSX代码的细节,因为我们稍后会详细介绍它。现在,让我们专注于对前端视图和后端视图的块输出进行一些简单的更改。

打开block.js,找到?edit?传递给第二个参数的对象的方法registerBlockType(),并用以下内容替换它:

edit: function( props ) {
  return (
    <div className={ props.className }>
      <h3>Editor View</h3>
      <p>This is our custom block inside the editor.</p>
      <p>Let's add an unordered list!</p>
      <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Pear</li>
        <li>Plum</li>
      </ul>
    </div>
  );
},

此方法控制块在编辑器窗口中的呈现方式。现在找到?save?方法并将其替换为:

save: function( props ) {
  return (
    <div>
      <h3>Frontend View</h3>
      <p>This is our custom block as seen by site visitors.</p>
      <p>Let's add an ordered list!</p>
      <ol>
        <li>Red</li>
        <li>Blue</li>
        <li>Pink</li>
        <li>Brown</li>
      </ol>
    </div>
  );
},

此方法用于在前端渲染块输出。

style.scss中,将所有样式替换为:

.wp-block-cgb-block-my-custom-block  {
  background: #a7d9f1;
  color: #ffffff;
  border: 1px solid #62afd4;
  border-radius: 15px;
  margin: 0 auto;
  max-width: 740px;
  padding: 1.5rem;
 
  ol, ul {
    margin-left: 20px !important;
  }
 
  li {
    margin-bottom: 0;
  }
 
  h3 {
    color: #ffffff;
    margin-top: 0;
  }
}

然后,在editor.scss中,将所有样式替换为:

.wp-block-cgb-block-my-custom-block {
  background: #cba7f1;
  border: 1px solid #a170d6;
}

您可以在下面的屏幕截图中看到这些更改如何影响块的渲染,具体取决于我们是在编辑器窗口还是在前端查看它。

我们还没有排队引入块的脚本,但它足以让我们知道,?editor.scss?样式只适用于编辑窗口,而?style.scss?都会被添加到编辑窗口和前端。因此,可以从style.scss中省略在编辑器和前端中同时使用的样式 。

注意我们在Sass文件中引用了一个冗长的CSS选择器来定位我们的块元素。

.wp-block-cgb-block-my-custom-block

这个类由Gutenberg自动添加到前端的块容器元素中,但我们必须在编辑器窗口中手动应用它以获得相同的类,如?edit?下面的方法所示。

<div className={ props.className }>
  <!-- Block code goes here -->
</div>

Gutenberg生成的类名确定如下:wp-block-[block namespace]-[block name

在我们的例子中,我们使用?create-guten-block?工具包创建我们的块,默认情况下使用?cgb?命名空间,而?block-my-custom-block?是基于我们指定的块名称。 这会导致将CSS类名?wp-block-cgb-block-my-custom-block?添加到块容器中。Gutenberg在内部使用命名空间和块名称来唯一标识块。

在那里对块文件进行更改时,我发现了一些值得一提的痛点。

首先,在对?edit?方法进行更改时,我发现自己必须先清除浏览器缓存,然后才能刷新编辑器窗口以查看最新的更改。 这种情况并非一直发生,但情况往往如此。如果您发现同样的事情发生在您身上,请清除浏览器缓存并重试。

其次,在编辑?save?方法的内容时,编辑器窗口在下次刷新时似乎发生了一些奇怪的事情。

为了证明这一点,我在?save?方法中添加了一个新的列表项(<li>Indigo</li>),然后刷新了帖子编辑器(当然,必须再次清除缓存之后!)。这是结果:

如果选择“?转换为块”??或“?编辑为HTML”,??则会显示该?save?方法的内容,该内容应在前端而非编辑器中查看。

这非常令人困惑,使事情恢复正常的唯一明显方法是从编辑器窗口中删除块并再次重新插入。正如我在上一篇文章中所提到的,Gutenberg仍然是一项正在进行中的工作,这就是一个很好的例子!

希望在未来的版本中这将更加直观,但是现在它只是需要注意的事项。更改?save?函数时,请准备删除编辑器窗口中的相关块并再次添加。

如前所述,saveedit方法的输出可能完全不同。但是,在大多数情况下,您可能希望前端输出与编辑器输出匹配,以便编辑体验与前端渲染尽可能一致。

在我们上面的设计示例中,我仅在编辑器和前端视图中添加了不同的内容和样式以用于演示目的。

Block API概述

Block API由添加到全局??管理对象的一组JavaScript?对象组成。因为?wp?是全局性的,我们不需要在我们的源代码中专门导入它 – 它可以按需提供。

在?wp?可用的对象取决于您当前正在查看的管理页面。例如,如果您要自定义站点,则?wp?包含主要的定制功能API对象。

但是,目前Gutenberg 块 API仅适用于帖子编辑器。我预计,当帖子编辑器和网站定制器之间的集成越来越近时,这将会发生变化。

您可以通过打开Gutenberg编辑器并在浏览器控制台中输入wp来查看wp的结构。

如您所见,wp包含许多对象,但我们最感兴趣的对象是:

通过这些对象,您可以访问创建一些非常复杂的块所需的所有工具。尝试在浏览器控制台中键入其完整对象名称以进一步探索这些对象。

例如,如果您键入wp.blocks?并展开对象,您将看到其中一个可用的函数registerBlockType()。这是一个非常重要的功能,我们将在下一篇文章中深入介绍

wp.elements对象

该对象是React(和ReactDom)之上的抽象层,它以可预测和一致的方式公开React功能。即使底层实现被完全修改或改变,这仍然是正确的。

只要界面保持不变,与Block API交互的插件将不会受到影响。

wp.blocks对象

创建块(registerBlockType())的核心功能都包含在wp.blocks?一般块管理所需的其他功能中,例如:

  • getBlockType()
  • getBlockContent()
  • getBlockAttributes()
  • hasBlockSupport()
  • isValidBlock()

此对象还包含一组可重用的块,您可以将这些块包含在您自己的块中,以提供无需额外开销的功能。这些开箱即用的现成块可以大大加快块开发速度,我们将在下一篇文章中使用其中的一些,因为我们将进一步深入研究块的创建。

一些可用的是:

  • 对齐工具栏
  • 自动完成
  • 媒体上传器
  • 调色板
  • 富文本编辑器

wp.components对象

wp.components?对象还包含可重用的组件,但这些组件更通用,通常用于在编辑器窗口中创建其他UI元素,例如块设置的控制面板。

这些包括:

  • 按钮
  • 复选框
  • 代码编辑器
  • 破折号图标
  • 日期/时间
  • 下拉列表
  • 菜单项
  • 单选按钮
  • 范围控制

wp.data对象

数据模块在Gutenberg编辑器中管理应用程序状态,其中包括存储每个块的设置。我们将在本系列的最后一篇文章中介绍可以在块中添加设置的不同方法。

wp.data?在Redux之上实现,所以当Gutenberg与核心合并时,我们不仅可以访问React,还可以访问由Redux提供支持的完整集中式数据存储!

wp.??i18n对象

插件和主题已经能够轻松地翻译PHP字符串多年了,并且通过wp.i18n?对象,也可以使用类似的方法在JavaScript中翻译字符串。这意味着您的块中包含的所有字符串(包括块名称,关键字和标签)都可以翻译成任何语言。

如果您之前使用过标准的PHP翻译功能,那么您将感觉宾至如归,因为这个过程几乎是一样的。我认为这是一个聪明的举动,因为它将鼓励开发人员从一开始就在他们的块中启用字符串翻译。

在块代码中,翻译字符串非常简单:

wp.i18n.__( 'This string is translatable', 'text-domain' );

小结

在本教程中,我们实现了一个基本块并编辑了代码。我们还看到,我们可以完全控制块的渲染,并且与前端相比,编辑器中可以有不同的块视图。

编辑器仍有一些问题可能会让你不时感到惊讶 – 这提醒人们,Gutenberg仍在开发中,可能还没有准备好在生产网站上使用。

最后,我们总结了块API,它在全局wp?JavaScript对象上引入了几个新对象来创建和管理块。

在下一篇文章中,我们将加快步伐并创建一个更全面的块。为此,我们将深入探索?registerBlockType()这个函数。我们还将仔细研究正确排队块脚本。

原文:?,发布于 2018年5月9日,由?倡萌@ca88亚洲城唯一官方网站?翻译,未经许可,禁止转载和挪用译文!

]]>
/wordpress-gutenberg-block-api-block-look-and-feel.html/feed/ 0
ca88亚洲城 Gutenberg Block API:简介 /wordpress-gutenberg-block-api-an-introduction.html /wordpress-gutenberg-block-api-an-introduction.html#respond Sat, 22 Dec 2018 05:50:21 +0000 /?p=80159

从今天开始,倡萌将和大家分享《ca88亚洲城 Gutenberg Block API》系列教程,该教程出自?ENVATO TUTS+,由英国开发者? 撰写。如果你的英文水平比较好,建议直接到官方看原版:,倡萌水平有限,翻译可能不那么好,请见谅。

该系列文章是从2018年4月25日开始写的,当时 ca88亚洲城 5.0 还没有发布,所以教程可能不一定十分符合当前你看到的?Gutenberg 编辑器,但是依旧很有帮助。在翻译过程中,倡萌也会按照作者原来的行文进行,有些事件表述可能会和当前不太符合,请知晓。

新的ca88亚洲城编辑器(代号为Gutenberg)将于5.0版本发布。现在是在它进入ca88亚洲城核心之前掌握它的最佳时机。

我将向您展示如何使用块API(Block API)并创建您自己的内容块,您可以使用它们来构建您的文章和页面。

还没有确定何时发布ca88亚洲城 5.0的确切日期,但它应该会在接下来的几个月内完成。在此之前,Gutenberg作为独立插件提供。

如果你还没有试用过Gutenberg编辑器,我强烈建议你试试。直接从您的ca88亚洲城管理员安装非常容易。但是,由于这仍然是新编辑器的测试版,因此不建议您仅在生产站点上使用它。暂时在本地开发站点上测试为好。

此外,如果您想要遵循本教程,安装Gutenberg是关键。这样,您就可以尝试创建自己的自定义块。新编辑器的开发在过去几个月中迅速加快,到目前为止已在2018年发布了几个版本。在撰写本文时,最新版本的Gutenberg目前为2.7.0。每个版本都会添加新功能,并根据用户反馈不断改进编辑器界面。它开始看起来和感觉比以前的版本更光滑。此外,还修复了许多错误,使编辑器更加健壮。

Gutenberg提供了一种通过“块”构建文章内容的新方法,“块”可以堆叠在一起,形成一个完整的页面。每个单独的块独立于其他块而存在,并且可以包含您想要的几乎任何标记、样式和JavaScript。

在本教程中,我们将介绍您需要了解的有关块API的所有信息,以便您可以立即开始创建自己的自定义块。一旦掌握了基础知识,创建更复杂的块就比你想象的要容易!

由于另一个重要原因,Gutenberg项目对ca88亚洲城来说是个大新闻。它建立在React之上。这是正确的,这是第一次在ca88亚洲城中,React将被包含在核心中!这对于主题和插件开发人员来说是个好消息,因为可以通过利用ca88亚洲城核心中包含的React和ReactDOM库轻松地将React添加到任何页面。

很快你就可以直接在React中为所有ca88亚洲城项目创建UI组件。以前,如果您想使用React和ReactDOM库,则必须手动包含它们。将它们放在核心使它更方便。

想想在React中完全创建一个插件选项界面,或者一些很酷的高级定制器控件会有多棒!这些新工具将为开发人员提供很多自由和灵活性,以创建一些出色的交互式用户界面。

我预计未来几年ca88亚洲城的开发将非常有趣!

到底什么是块?

新编辑器中“块”的概念是对当前基于TinyMCE的编辑器的真正转变,所以让我们在深入研究块API之前仔细研究一下“块”是什么。将块视为盒子,每个盒子包含一堆标记、样式和JavaScript,所有这些都包含在称为“块”的实体中。

将块添加到编辑器时,它会显示前端外观的预览。几乎所有块都具有进一步定制其外观和/或行为的设置。

默认情况下,新编辑器中的某些可用块为:

  • 段落
  • 画廊
  • 列表
  • 引用
  • 代码
  • 表格
  • 按钮
  • 分栏

这使您可以使用新编辑器附带的块来添不同的内容类型到编辑器。所有这些块类型都很有用但非常基本,所以期望大量的插件开始出现更全面的块,以添加您可以想到的几乎任何类型的内容。

您可能已经考虑过自己项目所需的一些内容块。如果Gutenberg中没有这些都可用,那么它们可能是创建自己的自定义块的好选择。我建议您尝试本教程系列中介绍的代码,因为这是了解如何使用块API创建自己的块的最佳方法。通过阅读教程,首先要了解块API的工作原理,然后回过头来尝试一些代码并开始创建一些块!

先决条件

这是一个中级到高级的教程,需要你具备一定的ca88亚洲城开发经验。为了充分利用本系列,您至少应具备以下方面的知识:

  • JavaScript (ES6+)
  • React (and ReactDom)
  • JSX
  • Command line
  • Node/NPM
  • PHP
  • ca88亚洲城 插件/主题开发经验
  • ca88亚洲城 本地开发环境

如果你还没有完全了解这些话题,那么先去了解后再继续会更好。我将继续解释概念,但是在每个细节只能是在教程范围之外自己去学习了。

通常的做法是使用JSX在ca88亚洲城中创建自定义块,但这并不是必需的。如果你习惯用vanilla JavaScript开发React组件,你也可以在ca88亚洲城中这样做。选择完全属于你。但是,您将遇到的大多数块代码都将用JSX编写(包括本教程),因此如果您也使用JSX,您会发现理解概念更容易。

Gutenberg项目仍在不断发展,因此即使您阅读本教程,有些事情也可能会发生变化。这可能包括对编辑器界面、新核心组件等的更改。但是,新的编辑器现在非常稳定,最近添加的功能,如嵌套块和拖放重新排序非常令人兴奋。即使有关如何实现块的一些细节可能会发生变化,重要的是要记住块的整体概念以及如何使用它们来创建任何类型的内容。

如果您遇到困难,我建议您查看,该手册会及时更新最新版本。还可以查看上的Gutenberg项目,检查源代码并记录您可能遇到的任何问题。这会帮助项目越来越强大,测试它的人越多。这是在他们正式成为ca88亚洲城的一部分之前开始开发块的另一个重要原因!

环境设置

要按照本教程中的代码进行操作,您需要具备以下条件:

  • 一个本地开发环境
  • 最新版本的ca88亚洲城
  • Gutenberg 插件
  • 一个代码编辑器

如果您还没有设置本地开发环境,那么您可以使用 或 之类的东西,因为它们都有可用的免费版本并支持多种操作系统。(倡萌建议新手可以试试 phpstudy 搭建本地环境,在我们的ca88亚洲城入门视频中有介绍)

确保您运行的是最新版本的ca88亚洲城和Gutenberg插件,以确保您使用的是所有最新功能。此外,还有一些很棒的代码编辑器,所以如果你还没有安装一个代码编辑器,那么看看免费的编辑器,如Visual Studio Code或Atom,这应该是绰绰有余的。

为了轻松创建新的块,我们将使用一个名为 的相对较新的工具包。它允许您快速启动一个新插件,其中包含创建块所需的所有设置和入门代码。它也是一个零配置工具包,因此它的开箱即用方式与 create-react-app 工具包类似,可以轻松地构建新的React应用程序。所以如果你曾经使用过create-react-app,你就会知道会发生什么。

现在让我们来看看我们如何使用这个工具来创建Gutenberg块。在本地开发站点的插件文件夹(/wp-content/plugins/)中打开一个终端窗口,然后输入以下内容:

npx create-guten-block my-custom-block
cd my-custom-block
npm start

(注意:使用npx命令需要npm v5.2 +)

几分钟后,将在名为 my-custom-block 的文件夹中创建一个新插件,其中包含使用React创建块所需的所有文件和工具!不错吧?!ca88亚洲城插件管理界面看到的名称将是 my-custom-block – CGB Gutenberg Block Plugin。继续并激活它。

该插件创建了一个新的块,可供我们在Gutenberg编辑器中使用。要测试我们的新块,请访问文章编辑器,然后单击标记为撰写故事的占位符文本。

接下来,按 / 键显示一个弹出框,我们可以用它来搜索所有可用的块。

注意:还有其他搜索块的方法,但我喜欢使用 / 来显示搜索块窗口非常快速和方便。但请使用您觉得最舒服的方法。

打开搜索框,开始键入 my-custom-block 并选择 my-custom-block – CGB Block。这将在编辑器窗口中显示我们的自定义块。

目前它只是一个样板块,除了在彩色框内显示占位符文本之外,它实际上没有做任何其他事情。但是,它确实突出了创建块的一个有趣方面。

单击“查看文章”以查看文章对网站访问者的外观。

如您所见,渲染块的内容和样式在前端和后端都不同。JavaScript代码在前端也可能不同。渲染差异的原因是因为在创建块时,您需要专门声明单独的前端和后端渲染功能。这是因为很多块需要在帖子编辑器中呈现额外的UI元素以帮助配置块设置。由于这仅与后期编辑器相关,因此在前面渲染块时完全是多余的。因此,您需要在单独的渲染功能中指定需要在前端显示的输出。

虽然这种方法很有意义并且运行良好,但确实会引发代码重复问题。如果您不小心,最终可能会有大量重复的内容定义。在可能的情况下,最好将前端和后端渲染功能的内容分开,以帮助减少重复。我们将在本系列教程中遵循这种方法。

小结

在本教程中,我介绍了块的概念以及为什么新的Gutenberg编辑器在ca88亚洲城 5.0附带时将成为重大新闻。这是对当前基于TinyMCE的编辑器的真正转变。

为了快速创建块,create-guten-block 是一个非常有用的工具,可以让您创建一个包含准备进行自定义的工作启动器的块的完整插件。

我们通过了解如何在新的帖子编辑器中使用我们的自定义块来解决问题,并且我们发现前端和后端的渲染看起来非常不同。在古腾堡,你不需要匹配任何输出!

在第2部分中,我们将详细介绍块API以及如何利用它来创建自己的自定义块。

在此期间,查看我们关于ca88亚洲城 Gutenberg的其他一些帖子:

  • http://code.tutsplus.com/articles/what-is-wordpress-gutenberg–cms-31025
  • http://code.tutsplus.com/tutorials/how-to-prepare-your-plugins-for-wordpress-gutenberg–cms-30877
  • http://code.tutsplus.com/articles/take-a-first-look-at-wordpress-gutenberg-in-our-new-course–cms-30879

原文: ,发布于 2018年4月25日,由 倡萌@ca88亚洲城唯一官方网站 翻译,未经许可,禁止转载和挪用译文!

]]>
/wordpress-gutenberg-block-api-an-introduction.html/feed/ 0
ca88亚洲城 5.0.2 提升Gutenberg编辑器性能 /wordpress-5-0-2.html /wordpress-5-0-2.html#respond Thu, 20 Dec 2018 00:57:12 +0000 /?p=80072 ca88亚洲城 5.0.2 已经发布,该版本是一个维护版本,解决了73个错误。此版本的主要工作是对 Gutenberg 编辑器进行性能改进:累积的性能提升使得200个区块的文章的速度提高了330%。

以下是一些其他亮点:

  • 共包含45个块编辑器改进(14个性能增强和31个错误修复)。
  • 修复了官方自带主题中与块编辑器相关的17个错误。
  • 与脚本加载相关的一些国际化(i18n)问题也得到了修复。

有关更改的完整列表,请参阅或。

]]>
/wordpress-5-0-2.html/feed/ 0