不写代码，怎么用插件管理文章自定义字段？
lyc054211在现代网站设计中，醒目的社交图标能提升互动率与品牌曝光度。本文介绍使用 GeneratePress 与 GenerateBlocks 插件（免费版本）创建一个简洁、美观、在桌面端左侧悬浮显示的社交图标栏，并在移动端隐藏。
一、准备工作
本教程适用于使用 GeneratePress 主题的网站，所需工具如下：
- GenerateBlocks 插件（免费版）
- GeneratePress 主题（建议配合 GP Premium 使用 Block Element）
二、新建元素（Block Element）
- 登录 WordPress 后台，进入「外观」→「元素（Elements）」→ 添加新元素
- 命名为 Sticky Social Icons
- 元素类型选择 Hook
- 钩子位置设置为
after_header - 显示规则选择 Entire Site（整站）
三、添加容器并设置样式
- 添加一个 Container 块
- 设置宽度为「Contained Width」，宽度数值为 48px
- 删除所有默认内边距
- 设置 z-index 为 99，使其显示在页面上方
- 添加两个 CSS 类：
sticky-social-icons（用于后续 CSS 定位）hide-on-mobile（系统内建类，在移动端隐藏）
如果你有GenerateBlocks Pro你就可以点击启用 Hide on moblie按钮。
四、添加社交图标按钮
- 在容器中添加一个 Buttons 块
- 插入按钮，选择社交图标（如 Facebook）
- 删除按钮文字，仅保留图标
- 设置四边内边距为 15px
- 添加 1px 底部边框，用作图标之间的分隔线
- 复制按钮并替换为其他图标（如 Twitter、LinkedIn）
- 最后一个按钮移除底部边框
- 设置按钮容器为垂直堆叠并填满水平空间
五、添加自定义 CSS 实现定位
进入「外观 → 自定义 → 附加 CSS」，粘贴以下样式：
.sticky-social-icons {
position: fixed;
left: 20px;
top: 200px;
}
数值部分可以按实际页面位置进行微调。
六、添加阴影效果（可选，需 Pro 版）
使用 GenerateBlocks Pro 时，可以添加按钮阴影增强立体感：
- 选中容器块，进入「效果（Effects）」设置
- 启用 Box Shadow，调整以下参数：
- 水平和垂直偏移量
- 模糊程度
- 颜色深浅
- 点击更新，刷新页面预览效果
七、最终效果
实现了一个固定在页面左侧的社交按钮栏，页面滚动时仍然显示，移动端不显示，适配多种设备和视觉需求。
结语
使用 GeneratePress 与 GenerateBlocks，即便不使用复杂插件，也能创建专业级的悬浮社交按钮。想添加鼠标悬停动画、透明度渐变等高级样式，还可以扩展 CSS 代码实现。
最近更新
了解 宝藏号 的更多信息订阅后即可通过电子邮件收到最新文章。 © 版权声明 文章版权归作者所有，未经允许请勿转载。 相关文章
lyc054211
WordPress 用户管理指南lyc054211
在Blocksy主题中使用动态数据块提升网站内容展示lyc054211
在 WordPress 6.7 中自动将 HEIC 图像转换为 JPEGlyc054211 暂无评论... |
|---|