[Tutorials] Thêm Particles JS vào tất cả các loại Website

Thêm Particles JS vào Website là Bài Hướng dẫn mà RealDev muốn chia sẻ với mọi người. Cùng RealDev bắt đầu nhé ^^

Thông thường, khi bạn muốn Website của mình có tí gì đó gọi là “Technology” , “Công nghệ” nên thường tìm đến các hiệu ứng giúp cho Website được đẹp hơn. Và thật tuyệt khi tác giả: @VincentGarreau chia sẻ với chúng ta về Paricles JS.

Thêm Particles JS vào Website có khó không.?

Câu trả lời là không, rất dễ là đằng khác vì RealDev đã làm sẵn các việc. Và bạn chỉ việc Copy – Paste là có thể dùng ngay được. Thật tuyệt đúng không.?

Cách để Thêm Particles JS vào Website WordPress

Để Thêm Particles JS vào Website WordPress trước hết Bạn cần xác định được Website mình đang sử dụng có phải là WP không.? Và cùng tìm hiểu cách chọn theme WordPress sang xịn mịn này sẽ giúp bạn được ít nhiều kiến thức.

Thông thường các Website ở Việt Nam chủ yếu sử dụng Elementor Builder và Flatsome Theme để thiết kế Website nên chúng ta có thể sử dụng được ngay. Các website sử dụng theme hoặc builder khác thì Bạn cần hiểu cách thêm HTML vào Website của Bạn.

Thêm Particles với Website sử dụng Theme Flatsome Version 1

Trước hết bạn cần thêm mã HTML này vào Trang / Bài viết / Khu vực bạn muốn

<div id="particles-js"></div>

Tiếp theo, bạn truy cập vào Flatsome / Avanced / Global Settings và dán đoạn Code sau vào Footer hoặc Body:

<script src="https://cdn.realdev.vn/particlesjs/version-1/particles.min.js"></script>

Tiếp theo, cũng tại vị trí Flatsome / Avanced / Global Settings. Bạn Copy mã này và dán vào Footer hoặc Body:

<script>
particlesJS("particles-js",{particles:{number:{value:380,density:{enable:!0,value_area:800}},color:{value:"#ffffff"},shape:{type:"circle",stroke:{width:0,color:"#000000"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:.5,random:!1,anim:{enable:!1,speed:1,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:40,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:150,color:"#ffffff",opacity:.4,width:1},move:{enable:!0,speed:6,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:140,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!0});
</script>

Nâng Cao: Trong mã Script bạn vừa Copy có đoạn: “img/github.svg” . Bạn có thể copy đường dẫn hình ảnh để làm hình nền cho Particles. Quá dễ đúng không.? Nâng cao gì kỳ cục =)))

Sau khi đã thêm 03 mục trên. Bạn tiến hành tải lại trang mà bạn mới thêm mã HTML ở trên và thưởng thức.

Phiên bản Particles JS Version 1 mà mình đã Demo ở đây. Bạn vui lòng xem qua nhé:

Thêm Particles vào Website sử dụng Theme Flatsome Version 2

Cách làm cũng tương tự như Version 1. Tuy nhiên điểm khác biệt là ở File Particles.js. Vì thế, Bạn cần xóa JS Version 1 nếu đã có từ trước, và tiến thêm JS Version 2 cũng tại đường dẫn: Flatsome / Avanced / Global Settings và dán đoạn Code sau vào Footer hoặc Body:

<script src="https://cdn.realdev.vn/particlesjs/version-2/app.js"></script>
<script src="https://cdn.realdev.vn/particlesjs/version-2/particles.min.js"></script>

Lưu ý: Bạn phải xóa File .js và mã <script> mà bạn đã copy từ trước nếu dùng Version 1 nhé

Phiên bản Particles JS Version 2 mà mình đã Demo ở đây. Bạn vui lòng xem qua nhé:

Thêm Particles Javascript với các Theme khác.

Cách làm cũng tương tự ở Copy – Paste. Tuy nhiên Bạn cần kiểm tra xem Theme / Builder của Bạn có thể thêm được các mã vào vị trí Footer hoặc Body hay không.?

Trong trường hợp không thể thêm theo thông thường giống Flatsome. Bạn cần cài đặt Plugin mang tên Insert Header and Footer có sẵn trên kho Plugins miễn phí của WordPress.

Lưu ý: Có nhiều Plugin mang tên: Insert Header and Footer. Bạn cài đặt Plugin nào cũng được.

Tôi không muốn cài Plugin Insert Header and Footer thì làm thế nào.?

Bạn có sẽ sử dụng Function.php để xử lý vấn đề này.

Bước 1: Bạn truy cập vào Giao diện (Themes) / Theme File Editor / function.php

Bước 2: Tùy vào phiên bản Bạn copy mã khác nhau. Mình sẽ cập nhật cách làm trong thời gian sớm nhất.

Bước 3: Lưu lại và Tải lại trang mà bạn vừa thêm Particles

Tổng kết

Như vậy là Vĩnh Minh Đạo đã hướng dẫn các Bạn thêm Particles Javascript vào Website của mình. Chỉ với vài bước đơn giản Copy Paste. Chúc Bạn thành công. Hãy comment nếu cần sự giúp đỡ. Và đừng quên tặng lại mình [5 Sao] nhé ^^. Xin cám ơn.

Các Chia sẻ Tài nguyên của RealDev cam kết đều là Bản gốc, Sạch sẽ, đa phần đã được Kích hoạt Bản quyền sẵn chỉ việc Cài và Xài dành cho Cá nhân trải nghiệm. RealDev không khuyến khích và không chịu trách nhiệm nếu Bạn sử dụng cho mục đích thương mại.

Hãy mua ủng hộ Tác giả để họ có động lực thêm các tính năng mới vào Plugin / Themes.

Và cũng đừng quên dành tặng Vĩnh Minh Đạo [5 Sao] và [Comments] để Đạo có thêm động lực chia sẻ nhiều hơn. ^^

Trân trọng.!