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é ^^

Particlesjs-realdev
Thêm Particles JS vào Website cùng RealDev

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.?

Particles-js-realdev
Thêm Particles JS vào Website không hề khó khi chỉ cần Copy Paste

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.

Xem thêm: Flatsome A-Z Activator Plugin Kích hoạt bản quyền cho mọi phiên 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][Comments] để Đạo có thêm động lực chia sẻ nhiều hơn. ^^

Trân trọng.!

4.9/5 - (44 Yêu thích)
Install_wordpress Hướng dẫn cài đặt WordPress cho người mới bắt đầuWordpress-dashboard Tổng quan cơ bản về WordPress DashboardWordpress Cài đặt giao diện cho website và cách chọn Themes WordPress tốtWordpress Tạo Website WordPress mới và Tất tần tật các thứ cần chuẩn bịBạn đang xem: Thêm Particles JS vào tất cả các loại WebsiteCách sửa theme Twenty Twenty Two trực tiếp trên Website Cach-sua-theme-twenty-twenty-two-truc-tiep-tren-website-screenshot[Cập nhật] Tạo Call To Action WordPress với Popup siêu đẹp | Code and Share by RealDev Realdev-call-to-action-popupSecurity Headers lên A+ chỉ với Copy Paste Security Headers

3 thoughts on “Thêm Particles JS vào tất cả các loại Website

  1. Thìn :

    Bác làm theo cái của thằng này mới đẹp này https://developers.zalo.me/

    • RealDev :

      Tích hợp thì đơn giản thôi bác ạ, cảm ơn bác đã gợi ý ^^

Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Hướng dẫn rất chi tiết và dễ hiểu.Tôi đã làm theo hướng dẫn này thành công.Cảm ơn bạn đã chia sẻ kinh nghiệm.Tutorial rất hữu ích.Tôi đã áp dụng hướng dẫn này vào công việc của mình.Chất lượng hướng dẫn thực sự tốt.Hướng dẫn giúp tôi giải quyết vấn đề một cách hiệu quả.Cảm ơn bạn vì đã chia sẻ hướng dẫn này.Tutorial giúp tôi tiết kiệm rất nhiều thời gian.Tôi đã tìm thấy giải pháp từ hướng dẫn này.Chia sẻ hướng dẫn thực sự có giá trị.Tôi rất hài lòng với chất lượng của hướng dẫn.Tutorial thực sự hữu ích cho công việc của tôi.Cảm ơn bạn đã giúp tôi hiểu rõ hơn về vấn đề này.Hướng dẫn đưa ra giải pháp thực sự tốt.

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đã Copy vào Bộ nhớ tạm