用于 SVG 的 WordPress 简码

Question

我厌倦了这些图标，如果我继续我会破坏我的网站。

http://slembas.esy.es - 查看页脚中的红色圆形按钮。

我正在尝试插入 SVG 图标。他们应该可以自定义 "fill"。但我不想到处复制和粘贴相同的代码，因为如果我更改图标中的某些内容，我必须分别重写站点中的每个 SVG。我只想编辑一个短代码，它会自动更改。

我举个例子给你一个SVG图标：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z"
  />
</svg>

class="button-icon" - 应自定义填充的 class。

我不是网页设计专家，尤其是 PHP。

Answer 1

一个简单的解决方案是将图标移动到文件中，可能是 icon_facebook.php 或其他文件，然后像这样使用 include：

// icon_facebook.php
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
  <path class="button-icon" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>

然后在您需要的任何地方添加该图标。

// some_page.php
  ...
  include 'icon_facebook.php';

简单，应该能满足您的要求。希望对您有所帮助。

用于 SVG 的 WordPress 简码

WordPress Shortcodes for SVG

php

wordpress

svg

fill

shortcode