ショートカットでソーシャルシェアボタンを追加する+ whatsapp

Question

私はちょっと新しくこれに慣れています。私は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]のどこにショートコードを入れてください。

/* 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のプラグインを使用して自由にしようとするテンプレート部分に<?php echo do_shortcode([acardio-social]) ?>を使用し、私は彼らがプラグインだろうと考えていますあなたが挙げたこの機能の1つ、例えばwhatsappを持っています。

軽量化js。