Với sự bùng nổ các mạng xã hội lớn trên thế giới, thì việc lan tỏa thông tin là không hề nhỏ chút nào. Bài viết sau sẽ hướng dẫn các bạn tạo một nút Social Share Button cho wordpress
Bước 1: Upload the Javascript
Ðể làm được bài này, thì bạn cần phải download gói javascipt socialite này về, và upload vào thu mục wp-content/themes/your-theme-folder/js/
Sau khi upload lên thu mục trên website, bạn thêm đoạn code sau vào file function.php
|
1 2 3 4 5 6 7 |
function wptuts_load_socialite() { // Register Socialite wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true ); // Now enqueue Socialite wp_enqueue_script( 'socialite' ); } add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' ); |
Sau dó tạo một file js trong cùng folder dó, đặt tên là wptuts-social.js
|
1 2 3 4 5 |
jQuery(document).ready(function($) { $('.social-buttons').one('mouseenter', function() { Socialite.load($(this)[0]); }); }); |
Bước 3: CSS cho nó
Tạo mới một file css có tên wptuts-social.css và đặt trong thu mục wp-content/themes/your-theme-folder/css/
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* * Socialite Look-a-like defaults */ .social-buttons { display: block; list-style: none; padding: 0; margin: 20px; } .social-buttons > li { display: block; margin: 0; padding: 10px; float: left; } .social-buttons .socialite { display: block; position: relative; background: url('https://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png') 0 0 no-repeat; } .social-buttons .socialite-loaded { background: none !important; } .social-buttons .twitter-share { width: 55px; height: 65px; background-position: 0 0; } .social-buttons .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; } .social-buttons .facebook-like { width: 50px; height: 65px; background-position: -145px 0; } .social-buttons .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; } .vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } |
Sau dó quay lại file function.php và sửa đoạn code bên trên thành thế này
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wptuts_load_socialite() { // Register Socialite wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true ); // Register social initialiser script wp_register_script( 'wptuts-social', get_template_directory_uri() . '/js/wptuts-social.js', array('jquery', 'socialite'), '', true ); // Now enqueue Socialite wp_enqueue_script( 'wptuts-social' ); // Register social CSS wp_register_style( 'wptuts-social', get_template_directory_uri() . '/css/wptuts-social.css'); // Now enqueue social wp_enqueue_style( 'wptuts-social' ); } add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' ); |
Bước 4: HTML
Chúng ta cùng tạo mã HTML cho button của chúng ta
|
1 2 3 4 5 6 |
<ul class="social-buttons cf"> <li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li> <li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li> <li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li> <li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li> </ul> |
Với đoạn mã HTML bên trên, bạn có thể đặt chúng ở:
- Dưới phần post meta trong file single.php
- Dưới phần content trong file single.php
- Hoặc ngoài file index.php
Bướcc 5: Add HTML vào WordPress
Bạn có thể bắt WordPress tự động thêm đoạn mã HTML trên kia và trướcc bài post của bạn bằng cách thay đổi file function.php nhu sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function social_before_the_content( $content ) { $custom_content = ' <ul class="social-buttons cf"> <li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li> <li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li> <li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li> <li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li> </ul> '; $custom_content .= $content; return $custom_content; } add_filter( 'the_content', 'social_before_the_content' ); |
Tương tự là add vào sau bài post của bạn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function social_after_the_content( $content ) { $custom_content .= $content; $custom_content .= ' <ul class="social-buttons cf"> <li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li> <li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li> <li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li> <li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li> </ul> '; return $custom_content; } add_filter( 'the_content', 'social_after_the_content' ); |
Vậy là bạn dã làm xong rồi dó. cùng chiêm ngưỡng thành quả nhé.
Trước khi hover:
.png.1)
Sau khi hover:
.png.1)
