添加社交分享按鈕與短代碼+ whatsapp

Question

請忍受我，我有點新這個我想添加社會分享按鈕到我的WordPress主題與whatsaap圖標，我真的不知道如何相處。

，但我想我可以使用字體真棒

開始，這裏是HTML框架。

<div class="nerd-social"> 
<li> 
<i class="fa fa-facebook"> </i> 
<i class="fa fa-twitter"> </i> 
<i class="fa fa-google-plus"> </i> 
<i class="fa fa-linkedin"> </i> 
<i class="fa fa-pinterest"> </i> 
<i class="fa fa-whatsapp"> </i> 
</li> 
</div> 

CSS

.nerd-social li{ 
display: inline; 
} 

由於事先:-)

Answer 1

在這裏，我想這可能幫助。請在郵政編碼[acardio-social]之內撥打短碼。使用<?php echo do_shortcode([acardio-social]) ?>模板部分

/* social share icons */ 

/** 
* Creating the call function [acardio-social] 
*/ 
add_shortcode('acardio-social', 'nerd_social_share_plugin_shortcode'); 
function nerd_social_share_plugin_shortcode($attr) { 
global $plugin_code; 
    // Get current page URL 
$crunchifyURL = urlencode(get_permalink()); 

// Get current page title 
$crunchifyTitle = str_replace(' ', '%20', get_the_title()); 

// Get Post Thumbnail for pinterest 
$crunchifyThumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); 

// Construct sharing URL without using any script 
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=Crunchify'; 
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL; 
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL; 
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle; 
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&title='.$crunchifyTitle; 
$whatsappURL = 'whatsapp://send?text='.$crunchifyTitle . ' ' . $crunchifyURL; 

// Based on popular demand added Pinterest too 
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle; 

echo '<div class="crunchify-social">'; 

echo '<div class="acardio-post-social-icons">'; 

echo ' 
    <!--Facebook--> 
    <a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank"><i class="fa fa-facebook"></i>Facebook</a> 

    <!-- twiiter --> 

    <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank"><i class="fa fa-twitter"></i> Twitter</a> 



    <!--Google Plus--> 
    <a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank"><i class="fa fa-google-plus"></i>Google+</a> 

    <!-- whatsapp --> 
    <a class="crunchify-link crunchify-whatsapp" href="'.$whatsappURL.'" target="_blank"><i class="fa fa-whatsapp"></i>WhatsApp</a> 


    <!--Reddit--> 
    <a class="crunchify-link crunchify-googleplus" target="_blank" href="http://reddit.com/submit?url='. get_permalink() .'&amp;title='. the_title('', '', FALSE) .'" rel="nofollow"><i class="fa fa-reddit"></i>Reddit</a> 

    <!--buffer--> 
    <a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank"><i class="fa fa-spinner"></i>Buffer</a> 

    <!--LinkedIn--> 
    <a class="crunchify-link crunchify-linkedin" href="'.$linkedInURL.'" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i>LinkedIn</a> 

    <!--Pinterst--> 
    <a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i class="fa fa-pinterest-p"></i>Pin It</a> 

    ' . 
    " 
</div> 
</div>"; 
} 

CSS

/* Disable WhatsApp button on Desktop - Tutorial link: http://shoutershub.com 
@media screen and (min-width: 1024px) { 
.crunchify-whatsapp { 
display: none !important; 
} 
} 

.crunchify-link { 
padding: 2px 8px 4px 8px !important; 
color: white; 
font-size: 12px; 
border-radius: 2px; 
margin-right: 2px; 
cursor: pointer; 
-moz-background-clip: padding; 
-webkit-background-clip: padding-box; 
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); 
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); 
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); 
margin-top: 2px; 
display: inline-block; 
text-decoration: none; 
} 

.crunchify-link:hover,.crunchify-link:active { 
color: white; 
} 

.crunchify-twitter { 
background: #00aced; 
} 

.crunchify-twitter:hover,.crunchify-twitter:active { 
background: #0084b4; 
} 

.crunchify-facebook { 
background: #3B5997; 
} 

.crunchify-facebook:hover,.crunchify-facebook:active { 
background: #2d4372; 
} 

.crunchify-googleplus { 
background: #D64937; 
} 

.crunchify-googleplus:hover,.crunchify-googleplus:active { 
background: #b53525; 
} 

.crunchify-buffer { 
background: #444; 
} 

.crunchify-buffer:hover,.crunchify-buffer:active { 
background: #222; 
} 

.crunchify-pinterest { 
background: #bd081c; 
} 

.crunchify-pinterest:hover,.crunchify-pinterest:active { 
background: #bd081c; 
} 

.crunchify-linkedin { 
background: #0074A1; 
} 

.crunchify-linkedin:hover,.crunchify-linkedin:active { 
    background: #006288; 
} 

.crunchify-whatsapp { 
background: #43d854; 
} 

.crunchify-whatsapp:hover,.crunchify-whatsapp:active { 
background: #009688; 
} 

.crunchify-social { 
margin: 20px 0px 10px 0px; 
-webkit-font-smoothing: antialiased; 
font-size: 12px; 
} 

.crunchify-social a { 
color: white !important; 
font-size: 14px !important; 
font-family: cabin !important; 
font-weight: 700; 
} 

.crunchify-social .fa { 
border-right: 1px solid #fff3 !important; 
padding-right: 5px !important; 
margin-right: 5px !important; 
} 

一件事，如果你是新的節目，嘗試使用已經取得WordPress插件，它的自由過了，我相信他們會插件有你提到的這個功能之一，例如whatsapp。

重量輕js。