用Elementor创建Sticky Header

最后更新于 2023 年 2 月 1 日

Elementor收费版自带Sticky Header，但免费版也能很简单的实现这个效果。只需要安装两个插件，基本对所有主题都适用，即便像Astra主题这种自带header Footer Builder的，也能用elementor重建header。

需要安装两个插件

Elementor肯定必装，排除了，还需要装下面这俩：

• Elementor Header & Footer Builder
  用elementor来摆header和footer，创建多少都行，可以实现不同页面、不同用户显示不同的header。
• Sticky Header Effects for Elementor
  给elementor做的菜单添加sticky效果，注意必须用elementor，astra自带的header builder弄出来的菜单是不行的。

先创建一个菜单

到Dashboard > Appearance > Elementor Header & Footer Builder菜单下，点击Add New创建一个新的header，填写标题、type of template选择header。

接下来用elementor编辑，简单的header选择两栏设计，左边放Logo（Image Element），右边放菜单（Navigation Menu Element）即可，这里不赘述方法，看看插件视频介绍就行了。

开启Sticky Header功能

找到最外层的Section Element，打开Advanced选项卡，里面有一个子选项卡叫做Sticky Header Effects，这里就是开启sticky header的地方。

Enable On：控制sticky功能在哪些尺寸下显示。

Scroll Distance：填写一个大于自己header高度数值即可。

Background Color：菜单进入sticky状态后的背景色。

Border Bottom：给菜单加底部线条，如果这个是阴影效果可能会更好。

Shrink Logo：sticky后缩小logo，这样能减小菜单的高度。

Blur Background：sticky菜单下的背景虚化，需要将background color设置为半透明的颜色才能看出来。

根据需要设定选项，你就能获得一个工作良好的elementor sticky header。

创建的header/footer不显示

用Elementor Header & Footer Builder插件创建的header或footer没显示出来，还是显示了主题自带的，如果你确定规则设置没有问题，那么可以参考sola的经历。

规则：Astra主题，创建了全站显示的footer。

结果：在普通页面和一些产品页面能正确显示，某些产品页面不能显示。

特征：经观察，不显示的页面的产品有上百个属性。

结论：该插件会针对post的taxonomy配置sql语句，代码如下：

// 代码位置：wp-content/plugins/header-footer-elementor/inc/lib/target-rule/class-astra-target-rules-fields.php line 1324. 
// Version 1.6.13

$taxonomies = get_object_taxonomies( $q_obj->post_type );
$terms      = wp_get_post_terms( $q_obj->ID, $taxonomies );

foreach ( $terms as $key => $term ) {
	$meta_args .= " OR pm.meta_value LIKE '%\"tax-{$term->term_id}-single-{$term->taxonomy}\"%'";
}

woocommerce产品的属性也是taxonomy，所以产生了大量LIKE查询，而且该插件的LIKE字符串没有使用$wpdb->esc_like()函数，结果导致$wpdb->get_results()无法获得结果。

总结：如果你的post有大量taxonomy，比如文章分类、产品属性等等，hosting分配的资源不是特别多，慎用这个插件。

替代：Elementor Header & Footer Builder支持在不同页面显示不同的header&footer，比较复杂，越复杂越容易出问题。如果只需要全站替换，可以使用ElementsKit。