WordPress教程

关于Astra+Elementor的使用方法

最后更新于 2023 年 8 月 22 日

Astra主题是一款注重性能的轻量级WordPress主题，支持WordPress Gutenberg、Elementor和Beaver Builder三种编辑器，拥有众多的demo，可以一键导入，如果你对代码不熟悉，希望快速搭建一个网站，一定要试试这款主题。Elementor编辑器则是众多编辑器中十分出众的一款，对css属性的覆盖比较完整，支持自定义断点，大部分属性可以针对断点来设置，对responsive设计的支持非常出色。如果你对网站性能有要求，建议使用Astra主题。

本文简单介绍一下用Astra主题和Elementor搭建网站时要解决的一些基本问题，基础搭好，就可以享受犹如拼图游戏一样的网站制作过程了。

以下内容是基于Astra 3.9.3和Elementor3.8.0。

Elementor使用收费版还是免费版

免费版功能较少，略微复杂的网站都需要安装很多插件扩展功能，可能导致网站性能变差。相对的收费版涵盖了许多必备的功能，包括但不限于：

  • 模板编辑器：比如编辑header footer，或定制woocommerce页面模板。
  • 自定义样式：给每个页面写css样式，如果网站页面种类多还是很有用的。
  • 更多的模块：免费版支持的实在太少。
  • Elementor Forms: 可以代替其他收费表单
  • Mega Menus
  • Sticky Headers： 可以代替Sticky Header Effects for Elementor插件。

另外，elementor的licence可以用于测试站点，比如你的域名是*.local、*.dev、test.mydomain.com等和开发相关的域名，不占用网站激活名额，也就是说即使只买一个网站的licence，也可以用在多个站点上，使得开发很方便，详细介绍看这里。

如果不怕麻烦也可以去更便宜的gpl download网站购买，有些甚至支持自动更新。

同步两者的Responsive Breakpoints

Astra主题支持三种编辑器，由主题控制的部分遵守主题的断点设置，比如header、footer和sidebar。Elementor编辑器和Astra的断点设置不同，所以内容区域的Responsive行为会与Header和Footer不一致，但这更多的是个人偏好问题，用默认设置是完全可行的。

下图列出了Astra主题和Elementor的断点以及断点触发时的网站样貌变化，这样就能根据需求来决定如何同步两者的断点设置。

断点和用途AstraElementor
Mobile544px767px
Tablet921px1024px
断点用途小于Mobile断点：多栏布局切换到一栏，仅针对使用astra模板的部分，比如footer、sidebar等等。elementor布局的页面分栏折叠由elementor断点决定。
小于Tablet断点：顶部主菜单切换至手机版		小于Mobile断点：column由多栏切换到一栏布局。
小于Tablet断点：没有特别明显的影响
Astra和Elementor的breakpoint对比，规则为@media (max-width:[breakpoint])

有四种方案，应该根据具体的需求来选择。

方案一

不匹配Astra主题和Elementor编辑器的断点，只用astra控制header和footer，其余部分全部用elementor创建，那可以这样使用：

  • 用astra的mobile breakpoint控制header 菜单何时切换成手机版，用它的tablet breakpoint控制footer Column何时切换成一栏。
  • 用elementor的mobile breakpoint控制内容区域的分栏何时变为一栏结构，可以根据需要设定，不用与Astra的breakpoint有任何关联。

方案二

如果希望手机版菜单和内容区域里变为单栏的行为同时出现，那就更改一下elementor的断点设置，将elementor的mobile breakpoint设为544，tablet breakpoint设为921.

solagirl.net: elementor改变断点设置的截图
用elementor编辑任意页面，并切换到site settings，找到layout选项，就能更改breakpoints

方案三

让Astra服从Elementor的断点设置，在主题的functions.php里添加如下代码即可。

// Update mobile breakpoint
add_filter( 'astra_mobile_breakpoint', function() {
    return 767;
});
// Update tablet breakpoint
add_filter( 'astra_tablet_breakpoint', function() {
    return 1024;
});

方案四

不使用Astra的Header Footer Builder，直接用elementor来制作，安装插件Elementor Header & Footer Builder即可。如果需要在不同页面使用不同的header，用这个方案可能更方便一些。

如果在测试过程中发现临界情况的responsive样式有问题，比如921px时菜单变成了手机版，但header还是desktop的样子，这可能与电脑屏幕的缩放有关，viewport的实际宽度可能是921.121px这样，所以导致responsive样式失效。由于实际设备很少有这个尺寸的，所以忽略也没关系。通常会将断点写成921.9px这样来规避这个问题，但Astra的断点必须是整数，所以不用过分纠结这个问题。

设定内容区域宽度

设计网站时内容宽度很重要，而Astra的container width决定的是Header和Footer的宽度，Elementor的container width决定了内容区域的宽度，二者不一定要一样，但在开始制作网站前应该设定号。

  • Astra主题：依次打开Appearance > Customize > Global > Container，找到Container Width选项，使用elementor建议选择全宽模板Fullwidth Stretched，astra还可以单独给page和post选择container样式，分别在customizer的Blog和Page选项卡下。
  • Elementor：依次打开Site Settings > Layout，找到Container Width。

自定义字体

除了使用Google Fonts或Adobe Fonts等网络字体之外，很多设计者会使用一些不常见的字体，因此对任何编辑器而言，支持自定义字体是必须的。这一点Astra和Elementor都做的很好， Sola用过很多带有这个功能的收费主题，但遇到过不少bug。

方法一 —— 用Astra开发的插件

Astra主题支持自定义字体，方法是到Appearance > Astra Options中找到custom fonts，点击Activate，会自定安装custom fonts插件，之后就可以上传字体文件了。安装好的字体会自动显示在Elementor的字体列表里，十分方便。

Astra的新版本有了自己的Dashboard，菜单也挪到Dashboard根目录下，下面这个界面没有了，那我们可以直接到WordPress官网下载custom fonts插件。

方法二 —— 用Elementor的filter，即写代码的方法

如果你想直接引入字体，不用插件。那就制作好的网络字体文件放到主题文件夹下，并使用@font-face规则引入，例如：

@font-face {
    font-family: 'ryujin_attackregular';
    src: url('ryujinattack-webfont.woff2') format('woff2'),
         url('ryujinattack-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

接下来有两种选择，一种是让elementor支持这个字体，使用如下代码即可。

// Define a custom font group
add_filter( 'elementor/fonts/groups', function( $font_groups ){
    $new_groups['group-name'] = 'My Font Group';
    return $new_groups + $font_groups;
});

// Add your fonts, key is the name of the font, value is the group name.
add_filter( 'elementor/fonts/additional_fonts', function($fonts){
    $fonts['ryujin_attackregular'] = 'group-name';
    return $fonts;
});

另外一种是直接在css里定义基础字体，然后在elementor的Site Settings > Global Fonts里将所有字体设为default，让elementor使用主题的字体，比如在样式表里定义：

body{
  font-family: ryujin_attackregular,sans-serif;
}

elementor也有上传自定义字体的功能，但我们不仅要在编辑器里使用，也要在主题的样式表里使用，所以最好自己管理字体文件，只是让elementor知道有这些字体就行了。

Astra主题手机菜单

打开Customize > Header Builder > Off-Cavans Menu > Configure Menu from Here ，给Off-Canvas Menu指定一个菜单即可。

Off-Canvas Menu这个菜单位置就是留给手机版的，直接在WordPress的Menu下设置亦可。

如何设置Astra主题手机版菜单-sola
Astra主题网站收集菜单的设置

控制Elementor的Column Order

方法一：选中一个section，在Advanced选项卡的Responsive菜单下，有两个反转顺序的选项，如下图所示：

让column按相反的顺序排列

方法二：用代码添加一个”Responsive Column Order“的选项，手动填写数字来控制flex-box的order属性，可以随意改变顺序。

function bleye_add_responsive_column_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order', 'bleye-elementor-extras' ),
			'type' => \Elementor\Controls_Manager::NUMBER,
			'separator' => 'before',
			'selectors' => [
				'{{WRAPPER}}' => '-webkit-order: {{VALUE}}; -ms-flex-order: {{VALUE}}; order: {{VALUE}};',
			],
		]
	);
}
add_action( 'elementor/element/column/layout/before_section_end', 'bleye_add_responsive_column_order', 10, 2 );

代码来自：
How to Reorder Stacking Multiple Columns in Elementor – with Order Control

Elementor快速复制内容

复制全文

使用插件Duplicate Post，基本能将所有内容复制过去，不会丢失有用的custom fields。

复制样式

打开Navigator，右键单击要复制的元素，从弹出菜单中选择copy。再右键单击要应用样式的元素，选择paste style。

复制整个section或元素

打开Navigator，右键单击要复制的元素，从弹出菜单中选择copy。再右键单击某个元素，选择paste，这样就会把要复制的元素至于这个元素后面。

注意

复制操作可以跨页进行，这样就能很方便的将一个section拷贝到另外的页面，不用借助save template操作。

禁用产品页面图集的zoom和lightbox效果

add_action( 'after_setup_theme', 'sola_remove_woocommerce_features',100);
function sola_remove_woocommerce_features(){
	remove_theme_support( 'wc-product-gallery-lightbox' );
	remove_theme_support( 'wc-product-gallery-zoom' );
}

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'sola_remove_image_gallery_link');
function sola_remove_image_gallery_link( $html ){
	return strip_tags( $html, array('div','img') );
}

第一个add_action禁用了woocommerce的zoom和lightbox功能，但elementor默认会给所有图片添加lightbox效果，所以我们有两个选择：

  1. 在elementor全局设置中禁用lightbox，这样点击图片就会在新窗口直接打开图片，不太好。
  2. 去掉图片上的链接，没有链接就不会触发elementor的lightbox效果，也不会在新窗口打开图片

以上代码是针对选择2的。

使用Elementor时需要注意的问题

  1. 不同主题可能会更改elementor选项的位置，比如Elementor的button element的全宽设定，默认情况下需要将alignment设为justified，再到Advanced选项卡的position菜单下控制宽度。但Astra主题移除了button的position选项卡，将宽度设置和margin padding的设置放在一起，按钮宽度的控制也不再依赖justified这个选项。
  2. 在elementor的text editor里直接输入shortcode代码，输出时可能会产生空的p标签，产生样式问题。将shortcode放入elementor的shortcode element里可以避免这个问题。
  3. 如果出现responsive样式不管用的情况，需要重新生成elementor的样式。方法是打开Elementor > Tools，点击第一个按钮“Regenerate Files & Data”，即可刷新样式。

暂时只想到这些，未完待续。

2条评论