如何将WordPress固定链接传入SVG实现动态内部链接？

问题描述 #

我有一个用作Hero Image的SVG文件，已经用锚标签包裹特定路径实现了静态内部链接，但希望能在WordPress后台修改链接地址，实现动态链接。请问是否可行？该如何将动态链接数据传递到SVG文件中？

当前SVG代码片段：

<a href="/contact">
    <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
    <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

理想效果代码：

<a href="<?php echo $hero_link['url'];?>">
    <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
    <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
</a>

可行解决方案 #

方法1：将SVG直接嵌入主题模板（推荐） #

直接把SVG代码写入WordPress主题的模板文件（比如header.php或自定义Hero模板），这样就能直接用PHP变量调用后台设置的链接，是最直接的方案。

步骤：

1. 添加后台可编辑的链接字段
   用Advanced Custom Fields（ACF）插件或原生自定义字段，创建一个名为hero_link的链接字段，它会返回包含url、title、target的数组，方便管理员在后台编辑。

2. 修改模板中的SVG代码
   在模板文件中嵌入SVG，并替换链接部分为PHP动态输出：

   <?php 
   $hero_link = get_field('hero_link'); // 从ACF获取链接数据
   if( $hero_link ): ?>
   <svg width="xxx" height="xxx" viewBox="0 0 xxx xxx" fill="none" xmlns="http://www.w3.org/2000/svg">
       <!-- SVG定义部分（如渐变、滤镜等） -->
       <defs>
           <linearGradient id="paint2_linear_102_609" ...>
               <!-- 渐变代码 -->
           </linearGradient>
       </defs>
       
       <a href="<?php echo esc_url($hero_link['url']); ?>" target="<?php echo esc_attr($hero_link['target'] ?: '_self'); ?>">
           <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
           <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
       </a>
       
       <!-- SVG其他元素 -->
   </svg>
   <?php endif; ?>
   

   注意用esc_url()和esc_attr()做安全转义，避免XSS漏洞。

方法2：用PHP动态生成独立SVG文件 #

如果需要保持SVG文件的独立性，可以创建一个PHP文件来输出SVG内容，实现动态链接。

步骤：

1. 创建hero-svg.php文件
   将SVG代码写入该文件，替换链接部分为PHP变量：

   <?php
   header('Content-Type: image/svg+xml'); // 声明内容类型为SVG
   // 从后台获取链接，这里用WordPress选项示例，也可以用ACF
   $hero_link_url = get_option('hero_link_url', '/contact');
   $hero_link_target = get_option('hero_link_target', '_self');
   ?>
   <svg width="xxx" height="xxx" viewBox="0 0 xxx xxx" fill="none" xmlns="http://www.w3.org/2000/svg">
       <!-- SVG定义部分 -->
       <defs>
           <linearGradient id="paint2_linear_102_609" ...>
               <!-- 渐变代码 -->
           </linearGradient>
       </defs>
       
       <a href="<?php echo esc_url($hero_link_url); ?>" target="<?php echo esc_attr($hero_link_target); ?>">
           <path d="M137.46 267.676C162.545 267.676 182.88 247.34 182.88 222.256C182.88 197.171 162.545 176.836 137.46 176.836C112.375 176.836 92.04 197.171 92.04 222.256C92.04 247.34 112.375 267.676 137.46 267.676Z" fill="url(#paint2_linear_102_609)"/>
           <path d="M137.46 259.306C157.922 259.306 174.51 242.718 174.51 222.256C174.51 201.794 157.922 185.206 137.46 185.206C116.998 185.206 100.41 201.794 100.41 222.256C100.41 242.718 116.998 259.306 137.46 259.306Z" fill="white"/>
       </a>
       
       <!-- SVG其他元素 -->
   </svg>
   

2. 在模板中引用该文件
   用<img>标签或直接嵌入：

   <img src="<?php echo get_stylesheet_directory_uri(); ?>/hero-svg.php" alt="Hero Image" />
   

3. 添加后台设置选项
   在主题的functions.php中添加代码，在WordPress后台“设置”菜单下添加链接编辑项：

   add_action('admin_init', 'hero_link_settings_init');
   function hero_link_settings_init() {
       register_setting('general', 'hero_link_url');
       register_setting('general', 'hero_link_target');
       
       // 添加链接地址字段
       add_settings_field(
           'hero_link_url',
           'Hero图片链接地址',
           'hero_link_url_render',
           'general'
       );
       
       // 添加链接打开方式字段
       add_settings_field(
           'hero_link_target',
           '链接打开方式',
           'hero_link_target_render',
           'general'
       );
   }
   
   function hero_link_url_render() {
       $value = get_option('hero_link_url', '/contact');
       echo '<input type="url" name="hero_link_url" value="' . esc_attr($value) . '" class="regular-text">';
   }
   
   function hero_link_target_render() {
       $value = get_option('hero_link_target', '_self');
       echo '<select name="hero_link_target">
               <option value="_self"' . selected($value, '_self', false) . '>当前窗口</option>
               <option value="_blank"' . selected($value, '_blank', false) . '>新窗口</option>
             </select>';
   }
   

方法3：用JavaScript动态修改链接 #

如果不想修改模板或创建PHP文件，可以通过前端JS读取后台传递的链接，再修改SVG中的锚点。

步骤：

1. 在模板中输出链接数据
   在页面头部或Hero区域输出JS变量：

   <?php 
   $hero_link = get_field('hero_link');
   if( $hero_link ): ?>
   <script>
       const heroLinkUrl = "<?php echo esc_js($hero_link['url']); ?>";
       const heroLinkTarget = "<?php echo esc_js($hero_link['target'] ?: '_self'); ?>";
   </script>
   <?php endif; ?>
   

2. 修改SVG链接
   如果是内联SVG，直接用JS选择器修改；如果是<img>引入的SVG，需要先将其转换为内联元素（可以用JS实现），再修改：

   document.addEventListener('DOMContentLoaded', function() {
       // 选择SVG中的锚点
       const svgLink = document.querySelector('svg a[href="/contact"]');
       if(svgLink && heroLinkUrl) {
           svgLink.href.baseVal = heroLinkUrl;
           svgLink.target = heroLinkTarget;
       }
   });
   

内容的提问来源于stack exchange，提问作者RRhodes