Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn tạo Social Share Button cho WordPress
Hướng dẫn tạo Social Share Button cho WordPress
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo Social Share Button cho WordPress

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/

Bước 2: Add the Script vào phần Footer

Sau khi upload lên thu mục trên website, bạn thêm đoạn code sau vào file function.php

Sau dó tạo một file js trong cùng folder dó, đặt tên là wptuts-social.js

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/

Sau dó quay lại file function.php và sửa đoạn code bên trên thành thế này

Bước 4: HTML

Chúng ta cùng tạo mã HTML cho button của chúng ta

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

Tương tự là add vào sau bài post của bạn

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:
social share button before hover
Sau khi hover:
social share button after hover

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.848 hits
%d bloggers like this: