Question

请耐心等待我，我有点新手，我想用whatsaap图标为我的wordpress主题添加社交分享按钮，我真的不知道如何与它相处。

但我想我可以从

开始

使用font-awesome，这是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

我认为这可能有所帮助。在post loo中使用此代码[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.'&amp;url='.$crunchifyURL.'&amp;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.'&amp;text='.$crunchifyTitle;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$crunchifyURL.'&amp;title='.$crunchifyTitle;
$whatsappURL = 'whatsapp://send?text='.$crunchifyTitle . ' ' . $crunchifyURL;

// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&amp;media='.$crunchifyThumbnail[0].'&amp;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。

使用短代码+ whatsapp添加社交分享按钮

1 个答案: