Astra主题添加社交分享按钮（无插件）

Astra主题添加社交分享按钮

　　在社交媒体上分享文章有助于提高与分享文章的网站的互动。我们将使用HTML、CSS、PHP来创建社交分享按钮，这是一个相对简单的技术教程，但需要逐步在Astra WordPress主题中实现共享按钮代码。

　　我们将使用带有SVG图标的CSS和PHP代码，在没有插件的情况下在Astra主题添加社交分享按钮。

什么是社交分享按钮？

　　访客有时喜欢与朋友分享他们从网站上阅读的信息，这些位于网站文章的开头和结尾的按钮，允许读者将内容的链接分享到他们使用的社交媒体平台。社交媒体分享按钮的位置完全取决于网站所有者的偏好。

　　社交分享按钮的用处：

• 改善了读者的体验。
• 网站上的社交分享按钮有助于品牌曝光。
• 会影响您网站的SEO性能，决定网站在搜索结果中在社交网络上的参与度。
• 有助于在电子商务网站上获得更多销售。

社交分享按钮URL的列表

　　以下是一些社交分享按钮URL的列表，可以根据需要添加更多。

　　Facebook社交分享网址

https://www.facebook.com/sharer.php?u=[post-url]

　　Twitter社交分享网址

https://twitter.com/share?text=[post-title]&url=[post-url]&via=[via]

　　Pinterest社交分享网址

https://pinterest.com/pin/create/button/?url=[post-url]&media=[post-image]&description=[post-title]

　　Linkedin社交分享网址

https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]

　　WhatsApp社交分享网址

https://api.whatsapp.com/send?text=[post-title][post-url]

　　Reddit社交分享网址

https://reddit.com/submit?url=[post-url]&title=[post-title]

在Astra主题中添加社交分享按钮的过程

　　由于我们已经提到本教程仅适用于Astra Pro主题，因此对于Astra免费版本，您需要使用插件。如果您还没有Astra高级主题，那么您可以购买Astra Addons插件来解锁许多功能。

　　1、安装Astra Addon插件

　　如果您使用的是免费版的Astra Theme，那么您需要先安装Astra Addon Plugin，可参考（图文）安装WordPress插件3种方法

　　2、激活自定义布局模块

　　激活Astra pro插件后，Astra Pro 4.0+版本中，点击“Astra”->”Dashbord”，激活”自定义布局”功能（2022.1.14更新）。

　　3、在自定义布局模块添加社交分享代码

　　转到“ 外观 ”->“ Astra选项 ”->“ 自定义布局 ”。单击添加新按钮以添加自定义布局。现在，启用位于框顶部的“代码编辑器”选项。

　　在这里，为社交分享按钮添加标题，然后在Layout Option下选择“Hooks”选项。现在，您将能够看到更多Hooks选项。

　　将以下代码复制并粘贴到代码段框中。

<?php
　　$wplogoutURL = urlencode(get_the_permalink());
　　$wplogoutTitle = urlencode(get_the_title());
　　$wplogoutImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
　　?>
　　<div class="wplogout-social-wrapper">
　　<span class="hide-on-mobile">Share on:</span>
　　<a class="wplogout-social-sharing wplogout-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $wplogoutURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
　　<a class="wplogout-social-sharing wplogout-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $wplogoutTitle;?>&amp;url=<?php echo $wplogoutURL;?>&amp;via=wplogout" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
　　<a class="wplogout-social-sharing wplogout-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $wplogoutURL; ?>&amp;media=<?php echo $wplogoutImage;   ?>&amp;description=<?php echo $wplogoutTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
　　<a class="wplogout-social-sharing wplogout-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $wplogoutURL; ?>&amp;title=<?php echo $wplogoutTitle; ?>&amp;mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>

　　</div>

　　4、调整自定义挂钩设置

　　现在，要在Astra主题中显示社交分享按钮的位置。如果想在单个帖子或页面中的内容之后显示共享按钮，请在Action选项下选择entry_content_after。此外，如果您想在内容之前显示，请选择entry_content_before。

　　现在在Display On选项上，选择All Singular选项。在Responsive Visibility选项中，可以根据需要检查该选项。除了这些选项之外，您可以保留所有设置。

　　推荐：Astra主题如何添加自定义PHP代码？

使用CSS代码美化社交分享按钮

　　要使用CSS代码设置社交分享按钮的样式，需要转到“外观”->“自定义“->“额外CSS“。复制并粘贴以下CSS代码并点击发布按钮。

.wplogout-social-wrapper {
    margin: 30px 0;
    font-size: 0;
}

.wplogout-social-wrapper span {
    font-weight: bold;
    padding-right: 10px;
    font-size: 16px;
}

.wplogout-social-sharing {
    font-size: 17px;
    padding: 7px 20px;
}

@media only screen and (max-width: 600px) {
    .wplogout-social-sharing {
        font-size: 17px;
        padding: 7px 12px;
        display: inline-block;
    }
}
	
@media only screen and (max-width: 600px){
.hide-on-mobile {
		display:none;
	}
}

.wplogout-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}

.wplogout-social-sharing:first-of-type {
    border-radius: 100px 0 0 100px;
}

.wplogout-social-sharing:last-of-type {
    border-radius: 0 100px 100px 0;
}

.wplogout-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);

}

.wplogout-social-twitter {
    fill: #fff;
    background-color: rgba(29, 161, 242, 1);
}

.wplogout-social-pinterest {
    fill: #fff;
    background-color: rgba(189, 8, 28, 1);
}

.wplogout-social-linkedin {
    fill: #fff;
    background-color: rgba(0, 119, 181, 1);
}
	
a.wplogout-social-sharing:hover {
   opacity: 0.8;
}

总结

　　以上是晓得博客为你介绍的Astra主题添加社交分享按钮的全部内容，在WordPress建站中向网站添加社交分享按钮非常简单，网站上并不是必须有它。但这必不可少的，尤其是还没有太多流量的情况下。

　　推荐：Astra主题建站教程