如何在 wordpress 的小部件区域添加按钮以在社交媒体上分享当前页面？

Question

我在 WordPress 网站的自定义小部件区域中编写了如下代码，我设置为显示不同社交媒体的共享按钮。 但我希望这些按钮能够共享访问者正在查看的当前页面。 怎么可能做到这一点？？ 任何帮助都感激不尽。 感谢您的时间！

<div class="wpb_wrapper footer_snsShare pc hide-on-single-post">
    <h2 class="p1" style="text-align: center;"><span class="s1"><b>SNS</b></span><b>でシェア！</b></h2>
    <ul>
        <li>
            <a href="https://www.facebook.com/sharer/sharer.php?u=https://tintroom.jp/" target="_blank"
                class="qbutton  left white default btn_snsShare btn_fb" style="color: #333333; font-size: 32px; "
                rel="noopener noreferrer">FACEBOOK<span aria-hidden="true"
                    class="qode_icon_font_elegant social_facebook_circle qode_button_icon_element"
                    style="color: #1877f2;"></span></a>
        </li>
        <li>
            <a href="http://twitter.com/share?url=https://tintroom.jp/" target="_blank"
                class="qbutton  left white default btn_snsShare btn_twitter"
                style="color: #333333; font-size: 32px; " rel="noopener noreferrer">Twitter<span aria-hidden="true"
                    class="qode_icon_font_elegant social_twitter_circle qode_button_icon_element"
                    style="color: #1da1f2;"></span></a>
        </li>
        <li>
            <a href="http://line.me/R/msg/text/?https://tintroom.jp/" target="_blank"
                class="qbutton  left white default btn_snsShare btn_line" style="color: #333333; font-size: 34px; "
                rel="noopener noreferrer">LINE<span aria-hidden="true"
                    class="qode-icon-kiko kikos kiko-line qode_button_icon_element"
                    style="color: #00b900;"></span></a>
        </li>
    </ul>
</div>

Answer 1

您可以使用一些 javascript 代码将当前的 url 添加到所有共享链接。 像这样：

<div class="wpb_wrapper footer_snsShare pc hide-on-single-post">
    <h2 class="p1" style="text-align: center;"><span class="s1"><b>SNS</b></span><b>でシェア！</b></h2>
    <ul>
        <li>
            <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank"
                class="qbutton  left white default btn_snsShare btn_fb" style="color: #333333; font-size: 32px; "
                rel="noopener noreferrer">FACEBOOK<span aria-hidden="true"
                    class="qode_icon_font_elegant social_facebook_circle qode_button_icon_element"
                    style="color: #1877f2;"></span></a>
        </li>
        <li>
            <a href="http://twitter.com/share?url=" target="_blank"
                class="qbutton  left white default btn_snsShare btn_twitter"
                style="color: #333333; font-size: 32px; " rel="noopener noreferrer">Twitter<span aria-hidden="true"
                    class="qode_icon_font_elegant social_twitter_circle qode_button_icon_element"
                    style="color: #1da1f2;"></span></a>
        </li>
        <li>
            <a href="http://line.me/R/msg/text/?" target="_blank"
                class="qbutton  left white default btn_snsShare btn_line" style="color: #333333; font-size: 34px; "
                rel="noopener noreferrer">LINE<span aria-hidden="true"
                    class="qode-icon-kiko kikos kiko-line qode_button_icon_element"
                    style="color: #00b900;"></span></a>
        </li>
    </ul>
</div> 
<script>
  var links = document.getElementsByClassName("btn_snsShare");
  var curUrl = window.location.href;
  for (var i = 0; i < links.length; i++){
    var href= links[i].getAttribute("href");
    links[i].setAttribute("href",href + curUrl);
  }
</script>