技巧汇总

Powered by WordPress + Blocksy + Stackable Gutenberg Blocks

技巧汇总

1. 尽量使用主题预设配色里的颜色，这样通过主题自定义里，可以随时改变整站的颜色配色
2. 添加区块按照标准流程：列 =》内列 =》多个具体区块（Stackable 插件以为例）
3. 每添加一个区块“列”，块宽度选择“全部对齐”，内容宽度选择“居中对齐”，并且设置好填充的上下边距离，让每一大块内容具有相同的边界距离
4. 编辑时利用列表显示（文档概览 Shift+Alt+O），能够精确定位修改哪个层级
5. 列表显示里移动区块，便捷精确，不易出错
6. 列表显示里，充分利用创建副本、复制、粘贴来创建属性相同的区块
7. 复制粘贴文本时，使用“粘贴为纯文本”，不会改变当前区块的风格参数
8. 使用区块“列”来建立表格，稍显麻烦却非常灵活，Stackable 没有表格区块，古腾堡的表格功能极为有限
9. 不推荐同时使用二种构建器编辑，容易出问题，且影响速度
10.个人习惯仅供参考：Hero 上/下填充：300/200 px，边距：0；每页面里的内容块，背景颜色区分，上下填充 120px，边距：0，平板 2/3，手机 1/2
11.习惯：标题与文字之间距离：24px，文字段落之间：12px

Remove Footer Credit 插件

大多数免费主题的页脚版权，都带有品牌信息，而且无法修改，在使用这个插件之前，我都是直接修改源代码，每次升级后都要重新修改

Remove Footer Credit 插件可以直接拦截源代码输出，替换成设置好的代码输出，因此只要在插件里设置好拦截代码，和替换代码，就可以改变版权信息，绝大多数情况，升级主题也不受影响

如何知道原代码？打开网站主页，鼠标右击 “查看页面源代码” 即可，快捷键 “Ctrl + U”，然后找到一般都是带 “Footer” 单词的地方，尽量找到最小代码来替换，能保留原主题的格式

在后台 ”工具“ =》”Remove Footer Credit“ 里设置：

Step 1: Enter text/HTML to remove (one per line)
步骤1：输入需删除的文本/HTML内容（每行一条）
© 2026 XXX Created for free using WordPress and
                    <a target="_blank" href="https://colibriwp.com">Colibri</a>

说明：就把源代码原封不动复制到这里
Step 2: Enter your own footer credit (one per line)
步骤2：输入你自己的页脚信息（每行一条）
<span style="text-align:center; font-size:16px; color:#333;">© 2026 <a href="https://buisite.moimage.cn" target="_blank" style="text-decoration:none;">BuiSite</a></span>

说明：选择“代码”标签，把自己的版权代码输入到这里，都在一行里，中间不要有回车

每年跨年时，源代码中的年份会变，要即时调整；从此享受付费主题的功能了！

SVG 文件制作与优化

SVG 文件一般是用于图标的矢量图形，使用 Adobe Illustrator（Ai） 可以制作，但在用于网络图标（Icon）时，直接导出的 SVG 不能改变颜色，需要优化，具体步骤：

1. Ai 新建一个正方形画板，如：256 x 256 px、72 ppi，更改图层名称，复制或绘制一个图形，尽量不要有 “描边” ，图形的四周留出一些空间

2. 图形有多个图案组合的，通过 ”路径查找器“ 复合成一个单一路径的图形

3. 绘制完成后，导出图形为 SVG 格式类型，勾选 ”使用画板“ 和 ”全部“ 选项

4. 在 SVG 选项里选择：① 样式：内联样式，② 字体：转换为轮廓，③ 图像：保留，④ 对象 ID：图层名称，⑤ 小数：2，⑥ 勾选：响应，然后确认

5. 这时导出的 SVG 直接用于图标不能变色，还需优化

6. 使用 ”记事本“ 软件打开 SVG 文件，在每一个 <path d=”……”/> 的 “/>” 之前修改成或加上 【空格】+【fill=”currentColor”】或【空格】+【style=”fill: currentColor;”】，然后保存
注：【fill=”currentColor”】或【style=”fill: currentColor;”】是控制图形填色颜色的，【stroke=”currentColor”】或【style=”stroke: currentColor;”】是控制图形描边颜色的

7. 经过这样修改后的 SVG 文件就可以变色了

8. 也可以使用 “Inkscape” 软件优化，或者直接制作

9. 演示图标：

演示图标

SVG 插件

无论 Stackable Gutenberg Blocks 还是 Kadence Blocks 的 “图标” 、“图标列表” 区块，都不完美，弥补不足，试用了三个插件：SVG Icons、SVG Block、Icon List Block，这三个插件都支持 SVG 文件上传或图标库选择，我推荐 SVG Icons，有专门详细说明

1. SVG Icons 插件很有特色，先上传 SVG 文件到 SVG Icons 中，再通过短代码插入文本中，可以像文字一样显示，随字体大小一起缩放，改变颜色，用于做图标列表非常方便

短代码格式如下（单位 em）：

[shp-icon icon="star-fill"] 五角星图标（文字颜色：绿色）

五角星图标

[shp-icon icon="star-fill" color="#FF0000" scale-factor="2" top-shift="0.6"] 五角星图标

五角星图标

输出演示：

 SVG Icons 插件我给三星半好评

  与文字完全融合

2. 在古腾堡的 ”嵌入区块组“ 中添加了 ”SVG Icon“ 区块，只能使用已上传的 SVG 文件，可以变色，不可以改大小，有点不方便。能用容器大小控制，或者文本短代码方式加入

3. 又研究了一下带描边的图形，制作了一个如下的图形，红色描边，黄色填色，看看此插件是否能正确显示：
说明：“列” 分为4个等宽的 “内列”，并限制最大宽度、最小高度都为 256 px，1：PNG 图像，设置大小256 x auto px；2：短代码插入文字，并设置参数【color=”#fff100″ scale-factor=”16″ top-shift=”-0.006″】，字体大小 16 px（通过参数放大16倍）、行高 1 px；3：SVG Icon 区块插入；4：SVG Block 区块插入（SVG Block 插件，可以分别设置 Fill 和 Stroke 的颜色），大小 256 px，Fill 黄色、Stroke 红色

结论：

SVG Icon 区块和短代码，把填色和描边的颜色都改变了，无法单独设置，区块要通过控制容器大小来控制图标大小，有点麻烦；短代码插入时，由于插件初始设置全局下移 0.15 em，短代码要设置负值修正

SVG Block 区块可以做到单独设置，还可以设置大小，单独使用图标还是 SVG Block 插件灵活

Kadence Blocks 字体最大只有 “200 px”，短代码只能通过参数再放大，但同样参数，结果图标右偏，左边距设置 “-5 px” 才正常，其实高度还是比其它的高出 “2 px”，响应式又不一样，左偏了很多，每种设备要自己单独设置位置，逻辑很多地方不一样，不太明白

针对 Kadence Blocks 插件，有 “图标列表” 的区块，“文本(高级)” 区块，也自带图标库，但都不能上传，比 SVG Icons 短代码更方便，因此不太需要此插件

经过深度使用，Stackable 确实在很多地方设置更精细，设置逻辑也更合理，Kadence Blocks 总有点不顺手，时不时出点意外

网站主机

   云服务器
   2 vCPU，4G RAM，5Mbps
   Linux

软件环境

   Ubuntu 24.04.1 LTS
   nginx 1.29.4
   MySQL 9.0.1
   PHP 8.5.2

建站工具
  • WordPress
  • Blocksy
  • Stackable Gutenberg Blocks
  • Blocksy Companion
备选方案
  • Kadence
  • Kadence Blocks
  • Starter Templates by Kadence WP

搭建网站入门经验，也是一个样板网站，结构虽然简单，却美观大气，并完美适配不同设备显示效果，足以胜任信息展示的企业网站

  • Shanghai, China
  • 021 16162828
  • 13801602828