如何避免WordPress网站中HTML代码重复（社交分享按钮场景）

当然可以！用WordPress的短代码（Shortcode）完全能解决你重复复制代码的痛点，而且实现起来非常直观，还能完美获取文章的动态数据（比如链接、标题）。下面是具体的实现步骤：

1. 在主题functions.php中注册短代码函数 #

打开你当前使用主题的functions.php文件，添加以下代码——这段代码会生成社交分享按钮的HTML，并正确获取当前文章的链接、标题等信息：

function my_social_share_shortcode() {
    // 获取当前文章的核心数据
    $post_id = get_the_ID();
    $permalink = urlencode(get_permalink($post_id));
    $post_title = urlencode(get_the_title($post_id));

    // 构建分享按钮容器
    $share_html = '<div class="social-share-buttons">';
    
    // Facebook分享按钮（对应你提供的代码）
    $share_html .= '<a href="http://www.facebook.com/sharer/sharer.php?u=' . $permalink . '" class="fb" target="_blank" rel="noopener noreferrer">';
    $share_html .= '<i class="fab fa-facebook-f"></i></a>';
    
    // Twitter分享按钮（示例，你可以按这个逻辑添加其他平台）
    $share_html .= '<a href="https://twitter.com/intent/tweet?url=' . $permalink . '&text=' . $post_title . '" class="twitter" target="_blank" rel="noopener noreferrer">';
    $share_html .= '<i class="fab fa-twitter"></i></a>';
    
    // 可继续添加LinkedIn、Pinterest等其他平台的分享代码
    $share_html .= '</div>';

    return $share_html;
}
// 注册短代码，命名为social_share
add_shortcode('social_share', 'my_social_share_shortcode');

2. 在需要的位置调用短代码 #

现在你不需要再复制粘贴重复的HTML了，只需要在想要显示分享按钮的地方调用这个短代码即可：

方式一：在主题模板文件中调用 #

比如在single.php（文章详情页模板）里的文章顶部和底部位置，插入以下代码：

<?php echo do_shortcode('[social_share]'); ?>

方式二：在文章编辑器中调用 #

如果你是在后台编辑文章时想插入分享按钮，直接在内容框里输入[social_share]即可，发布后会自动渲染成分享按钮。

额外说明 #

• 以后如果需要修改分享按钮的样式、添加/移除社交平台，只需要修改functions.php里的my_social_share_shortcode函数，所有调用的地方都会同步更新，再也不用逐个修改重复代码。
• 代码里的target="_blank"和rel="noopener noreferrer"是为了提升用户体验和安全性，避免跳转页面时的潜在风险。
• 确保你的主题已经加载了Font Awesome图标库（因为你用到了fab fa-facebook-f这类图标类），如果没有加载，需要先在主题中引入Font Awesome。

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