wordpress主题编辑插件

Wordpress建站教程:给WooCommerce产品页面激活古腾堡编辑器

继续分享wordpress建站教程。默认情况下WooCommerce产品页面都是使用的经典编辑器样式,这样兼容性更好,使用起来也比较简单,用户几乎没有上手难度。

作者:悦然WordPress建站

但是对于用习惯了古腾堡编辑器的用户来说,经典编辑器的样式还是太简陋了,没办法制作更复杂更漂亮的产品详情页。

想要制作更漂亮的产品详情页我们一般可以使用Elementor Pro编辑器,它可以极大限度的对产品页面模板和详情内容进行定制,如上图所示。不过Elementor Pro编辑器需要付费,如果你不需要定制页面模板,那么使用它似乎有点浪费了。

接下来悦然wordpress建站给大家分享一个折中的办法——使用古腾堡编辑器来编辑WooCommerce产品详情页,这样就不需要额外的插件了,只需要给WooCommerce产品页面激活古腾堡编辑器即可。激活后如上图所示,产品页面可以使用古腾堡区块来编辑,可以添加更加丰富的页面效果。

(此处已添加小程序,请到今日头条客户端查看)

下面分享代码和方法。

步骤一:复制下面的代码

// WooCommerce产品编辑页面激活古腾堡编辑器 悦然worrdpress建站整理分享// 如不能查看完整代码,请打开链接获取:www.zsxxfx.com/30035.htmlfunction j0e_activate_gutenberg_product( $can_edit, $post_type ) {if ( $post_type == 'product' ) { $can_edit = true; } return $can_edit;}add_filter( 'use_block_editor_for_post_type', 'j0e_activate_gutenberg_product', 10, 2 );// enable taxonomy fields for woocommerce with gutenberg onfunction j0e_enable_taxonomy_rest( $args ) { $args['show_in_rest'] = true; return $args;}add_filter( 'woocommerce_taxonomy_args_product_cat', 'j0e_enable_taxonomy_rest' );add_filter( 'woocommerce_taxonomy_args_product_tag', 'j0e_enable_taxonomy_rest' );步骤二:把代码添加到Functions.Php文件中

把上面的代码加到wordpress建站主题的functions.php文件中即可生效。建议大家最好是添加到子主题或者是使用Code Snippets插件添加,这样代码效果不会受主题更新的影响。

总结

其实WooCommerce产品页面默认使用经典编辑器肯定是有所考虑的,而给WooCommerce产品页面激活古腾堡编辑器的方法并不复杂,为什么网上的分享这么少?为什么使用的人并不多呢?因为默认的编辑器更稳定,对于产品较多的用户来说,使用经典编辑来编辑产品会更简单,效率会更高。所以这个方法悦然wordpress建站并不是很建议大家去用,如非必须,最好就用默认编辑器吧。

Avada页面编辑器Avada Builder快速入门指南

Avada主题的一个特色之处便是带有自己的页面编辑器,这个插件叫做Avada Builder,它是由ThemeFusion公司设计开发的。

Avada Builder是确保Avada主题能够正常运作必需要安装激活的两个插件之一(另一个是Avada Core),而且需要注意的是,在安装Avada Builder插件之前,需要先安装Avada Core插件。

通过这个易于使用且功能齐全的页面编辑器,创建网页变得更加简单,无需具备专业代码知识也可设计复杂的网页布局,创建出高端大气的网页。

后端线框页面编辑器Avada Builder

Avada Builder在之前的主题的版本中叫做Fusion Builder,是应用在后端接口的线框页面编辑器(back-end wireframe editor)。

另外,需要注意的是,Fusion Builder从Avada 7.0版本开始,已重新更名为Avada Builder。

后端线框页面编辑器Avada Builder顶部导航工具栏介绍:

这个是固定跟随的导航菜单栏,当你向下滑动页面的时候,这个菜单栏会始终固定在页面编辑器操作界面的顶部位置,以方便你可以随时访问菜单栏上的工具,这些有用的工具包含众多设置选项,可以帮助有效编辑和管理页面。

从左至右,菜单栏上的工具依次是:

Builder:页面编辑器的工作区域。

Library :访问存储库,可快速调用存储库中已保存的模板内容等,部署应用到当前页面。

Toggle All Containers:将当前页面上的所有容器(Container)进行折叠或展开。

Custom CSS:为当前页面插入自定义的CSS样式,对当前页面进行更灵活的个性化设计。

Save page layout:将当前页面布局保存为模板存储到存储库Lirary中。

Delete page layout:删除当前页面布局。

History:显示最近25个历史修改记录,可以选择退回到做出相应修改动作前的页面,从这里重新开始进行页面设计。

传统的后端页面编辑器有一个特点,就是可以通过拖拽(drag-and-drop)的方式来自由调整页面模块组件的位置,快速设计出令你满意的页面布局。

而且,为了更好的编辑和管理当前页面内容,还可以选择为每个容器都自定义一个特定的名称,

前端实时页面编辑器Avada Live

从Avada 6.0版本开始,在原来页面编辑器的基础上拓展了一个新功能,增加了一个前端的实时页面编辑器(front-end live editor),叫做Fusion Builder Live,做为后端页面编辑器的一个补充,使得网页设计更加直观,简易和快速。

另外,需要注意的是,Fusion Builder Live从Avada 7.0版本开始,已重新更名为Avada Live。

前端实时页面编辑器Avada Live顶部导航工具栏介绍:

从左至右,菜单栏上的工具依次是:

Avada Builder Icon:Avada Builder的图标,当鼠标移动到其上面时会显示当前页面编辑器的版本。

Toggle Sidebar:打开或关闭左侧侧边栏。

Library: 访问存储库,可快速调用存储库中已保存的模板内容等,部署应用到当前页面。

History: 显示最近25个历史修改记录,可以选择退回到做出相应修改动作前的页面,从这里重新开始进行页面设计。

Preferences: 实时页面编辑器Avada Live的一些首选项设置。

Add New:点击可选择添加一个新的Post, Page, Portfolio, FAQ 或者 Avada Form。

Clear Layout:删除当前页面布局。

Support:提供了联系支持的链接,官方视频/文档教程链接以及操作Avada Live的一些常用快捷键。

Responsive:响应式编辑模式,可预览在不同大小设备显示下的页面效果且切换到在当前设备模型下进行页面设计编辑。

Toggle Wireframe: 将Avada Live中编辑器界面切换到Avada Builder,使用线框组件工具进行页面编辑。

Preview:关闭左侧边栏面板以及顶部导航栏中的左侧工具栏,然后预览当前页面效果。

Publish / Draft:发布当前页面或将当前页面存为草稿。

Save:保存当前页面所有内容。

Exit:暂停启用并退出Avada Live页面编辑器,有3个选项可选,直接在当前页面退出Avada LIve但仍旧停留在当前页面,退出并跳转到后端线框页面编辑器Avada Builder,退出并跳转到Avada主题后台仪表盘。

启用Avada Live的时候是直接在前端浏览器界面可视化编辑设计页面内容,所作的任何更改都会立即更新并作用于页面,所见即所得的工作方式可实时预览页面效果。同时,用Avada Live创建编辑网页的时候,可以在创建的当前页面中直接访问Avada Global Options 以及 Avada Page Options并对页面效果进行相应的设置,这可以大大加快工作流程,提高工作效率。

Avada Builder VS Avada Live

总的来说,在最新的Avada主题的Avada Builder页面编辑器插件中,共提供有前端和后端两个不同的应用接口,分别是Avada Builder(支持后端模块化页面编辑)和Avada Live(支持前端可视化页面编辑),可根据个人实际需求自由切换使用。Avada Builder和Avada Live除了在工作界面和工作流程上存在一些细微差异之外,这两个版本的页面编辑器本质上是一样的,使用的都是相同的结构和控件(容器-列-元素)来创建或编辑页面,这两个编辑器创建页面生成的内容相同,代码一致,因而它们之间具有完全的兼容性。你甚至可以在Avada Live中将编辑器界面视图切换到Avada Builder,使用线框组件工具进行页面编辑,此时它本质上就是在前端Avada Live工作界面中的后端Avada Builder页面编辑器。

如何访问Avada页面编辑器?

首先,这里有一个地方需要注意一下的,那就是在创建一个新的Page或者Post的时候,Avada Builder默认是没有激活启用的,但可以通过设置来全局启用Avada Builder为默认的页面编辑器。

方法如下: 在后台Avada仪表盘的顶部菜单栏中找到 Options > Builder Options > Avada Builder Auto Activation ,点击On启用 。

启用后,以后每当你在你编辑页面的时候,页面编辑器Avada Builder就会自动加载启用。但如果不设置则wordpress后台默认是启用wordpress自带的页面编辑器的。

最后,别忘记保存设置

好,那么现在就来看一下如何能够找到这个页面编辑器Avada Builder:

有几种方法都可以访问Avada Builder,具体取决于你当前所在的位置。

方式一:如果你在Wordpress默认的编辑器中打开了一个页面page或者帖子post的时候,如下所示:

此时,通过点击顶部的这两个按钮,都可以访问启用Avada后端页面编辑器Avada builder或者Avada前端页面编辑器Avada Live,而且当前是没有设置默认的页面编辑器是Avada Builder的,如果设置了全局启用Avada Builder为默认的编辑器的话之后,则在新建或者编辑页面的时候,看到的页面会是这样子的:

此时页面默认启用的就是Avada Builder而不是Wordpress默认的编辑器了,当然你也可以点击按钮 Defult Editor,切换回来。

方式二:在登录到Wordpress后台的状态下,选择一个page页面或者post在前端浏览器中打开,如下所示:

此时,在顶部导航条中可找到Edit Page和Edit Live这两个菜单选项卡,其中,

点击Edit Page则当前页面就会以编辑状态跳转到一个新页面中打开并启用Avada后端编辑器Avada Builder(当然,这里的前提是你已经设置Avada Builder为默认的页面编辑器了,否则新页面中打开的就是Wordpress默认的页面编辑器);点击Edit Live则当前页面就会以编辑状态跳转到一个新页面中打开并启用Avada前端编辑器Avada Live。

方式三:如果你此时在Wordpress后台的page或者post版块的位置,如下所示:

鼠标移动到page标题上面的时候,下方就会显示一个操作菜单列表,此时,点击Edit,当前页面就会以编辑状态跳转打开并启用Avada后端编辑器Avada Builder(当然,这里的前提依然是你已经设置Avada Builder为默认的页面编辑器了);点击Avada Live则当前页面就会以编辑状态跳转打开并启用Avada前端编辑器Avada Live。

方式四:在Wordpress后台的pages或者post版块的位置,如下所示,在顶部的Page右侧的Add New菜单栏中,在下拉菜单列表,选择创建一个新页面,选择Add New并点击右侧下拉提示框按钮,如下所示:

此时,便可以在下拉框中选择启用Avada后端页面编辑器或者是启用Avada前端页面编辑器来创建新页面了,而第三个选择则是Wordpress后台默认的页面编辑器古腾堡。

Avada Builder启动页面 Starter Page

无论什么时候,当用Avada Builder页面编辑器创建新页面或者编辑一个空页面的时候,首先会看到 starter page,这个就是页面编辑器的启动页面,叫做Starter Page。无论是使用Avada Builder或者是Avada Live,都会从Starter page开始页面的创建及编辑。这个是从Avada 5.0版本开始新增加的一个功能,启动页面starter page中主要包含了一些有用的向导信息和链接可以帮助用户更快更方便的开始页面的创作。

这是后端线框页面编辑器Avada Builder的starter page启动页面,其中:

+Container 按钮:为当前页面添加线框组件Container(容器)。

+Prebuilt Page:直接从存储库中导入演示站点的单页面或者已保存的页面模板。

Icon Control Descriptions: 在使用Avada Builder页面编辑器过程中经常会遇到的一些工具图标的简要描述。例如导航栏上常用的一些工具图标也会在这里有相应的对应简短说明

Getting Started Video:有关Avada Builder页面编辑器的官方视频教程。

这是前端实时页面编辑器Avada Live的starter page启动页面,其中:

+Container 按钮:为当前页面添加线框组件Container(容器)。

+Prebuilt Page:直接从存储库中导入演示站点的单页面或者已保存的页面模板。

Watch Our Get Started Video:有关Avada Builder页面编辑器的官方视频教程。

Avada Builder Docs:有关Avada Builder页面编辑器的官方帮助文档。

可以看到,前端页面编辑器Avada Live的启动页面跟后端页面编辑器Avada Builder的启动页面几乎是相同的。不同的地方就在于,当你在Avada Live中创建一个新页面或者编辑一个空页面的时候,侧边栏中会默认打开Page Options的Page Settings设置选项卡,便于可以快速的为当前页面设置标题,选择模板,添加特色图片等。

Avada Builder页面编辑器新建页面工作流程

Avada页面编辑器Avada Builder的核心是由容器-列-元素(container-column-element)这三个组件构成的页面设计系统,无论是使用传统的后端线框页面编辑器Avada Builder,或者是使用前端实时页面编辑器Avada Live,新建页面的工作流程都是一样的:先往页面添加容器,接着往容器中添加列,最后往列中添加元素。

首先,添加容器,

在这里,可以选择添加一个空容器或者添加一个已经包含了列的容器,一般情况下都是选择往页面中添加已经设计好了的结构恰当的包含了一列或多列的容器。

添加容器之后,接下来便是往容器中添加列了,但如果在添加容器的时候,选择的那些已经包含了列的容器的话,这里就直接可以往列中添加元素了,

点击+ Element按钮,将会弹出Elements窗口,显示所有可添加到列中的元素(例如图片/视频/表格等),目前Avada Builder页面编辑器中共有80多个可用的元素,且这些元素都会不定时的更新优化以及为来还会继续添加新元素。

另外,可单独选中容器Container,列Column或者元素Element,并点击右键,此时通过单击右键的弹出菜单框中可快速访问一些常用功能操作指令(例如编辑/复制/移动/保存等)以及存储库Library。

当在当前页面中添加了具体的容器-列-元素之外,当前页面就已经具有了一定的内容了,此时可以通过预览来查看下具体的页面效果,例如:

这是在新建的页面添加一个表格的效果预览,当然,你可以继续在当前页面中继续添加容器,列和元素,

如上图所示,你可以在当前页面中添加任意多的容器Container,列Column以及元素Element,直至设计出令你满意的页面。

以上便是关于Avada Builder页面编辑器的整体情况概览,如果你也同样在使用Avada主题的话,那么衷心希望本文对你能有所帮助。

2021最好的wordpress主题Blocksy,没有之一

作为一款2019年2月才发布的wordpress主题,经过2年的更新换代,功能越来越强大。作为一个选择障碍非常严重的人,曾经使用过很多知名的wordpress主题,比如Avada,Astra,Divi等。在遇到Blocksy主题之后,毫不犹豫地选择了Blocksy。

虽然它还只是个新物种。但是它采用的编码技术,傻瓜式的可视化编辑网站的页眉、底部、文章、博客、产品、商店等所有的样式。可以定制一切。主题简洁,速度快如闪电。

在知名网站性能评分中,也是非常高的。比如Google、GTmetrix、pingdom等,要知道网站速度无论对于google、百度等SEO来说都是非常看重的。客户在打开一个速度很快的网站,体验感是非常棒的。

并且特别重要的是Blocksy可以搭配各种知名的可视化编辑器,比如Elementor(也是我最喜欢的)、古滕堡、Brizy、海狸等编辑器。如虎添翼,大大提升网站建设的速度,而把主要精力放在网站内容的编辑上面。

如果你是一个暗黑模式爱好者,那Blocksy更是非常贴心地通过一个开关就可以实现暗黑模式,让你聚焦在网页内容编辑上。

借用Blocksy主题的格言,“外在与内在美的平衡,立即免费开始构建您的下一个华丽网站”。如果你也是一个wordpress爱好者墙裂建议安装试用。谁用谁知道