Github'daki Javascript Eklentisini Nasıl Kurabilirim?

Wordpress temasına particles efekti eklemek için GitHub veya Codepen kodlarını wp temaya nasıl entegre ederim.
.zip dosyasını https://vincentgarreau.com/particles.js/#default indirdim.

Github'da ki bütün eklentilerin bir döküman sayfası olur. Bu döküman sayfasında eklentinin nasıl kullanılacağı yazar. Bazen Getting Started başlığı altında, bazen Installation başlığı altında, bazen de Usage başlığı altında bulunur. Particles.js eklentisinde de Usage başlığı altında yazıyor.

https://github.com/VincentGarreau/particles.js/#usage

Eklenti dökümanına göre öncelikle sayfa da particles-js adında bir id tanımlanacak, sayfaya particles.js kütüphanesi eklenecek (cdn kullanabiliriz), son olarak da particles.json dosyası oluşturulacak ya da json kodları aşağıdaki örnekte olduğu gibi fonksiyona eklenecek.

Toparlamak gerekirse aşağıdaki kodu kullanabilirsin.

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

<!-- Styles./ -->
<style>
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
</style>
<!-- ./Styles -->

<!-- Scripts./ -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS(
	'particles-js', 
	{
		"particles": {
		  "number": {
		    "value": 80,
		    "density": {
		      "enable": true,
		      "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": 0.5,
		    "random": false,
		    "anim": {
		      "enable": false,
		      "speed": 1,
		      "opacity_min": 0.1,
		      "sync": false
		    }
		  },
		  "size": {
		    "value": 10,
		    "random": true,
		    "anim": {
		      "enable": false,
		      "speed": 80,
		      "size_min": 0.1,
		      "sync": false
		    }
		  },
		  "line_linked": {
		    "enable": true,
		    "distance": 300,
		    "color": "#ffffff",
		    "opacity": 0.4,
		    "width": 2
		  },
		  "move": {
		    "enable": true,
		    "speed": 12,
		    "direction": "none",
		    "random": false,
		    "straight": false,
		    "out_mode": "out",
		    "bounce": false,
		    "attract": {
		      "enable": false,
		      "rotateX": 600,
		      "rotateY": 1200
		    }
		  }
		},
		"interactivity": {
		  "detect_on": "canvas",
		  "events": {
		    "onhover": {
		      "enable": false,
		      "mode": "repulse"
		    },
		    "onclick": {
		      "enable": true,
		      "mode": "push"
		    },
		    "resize": true
		  },
		  "modes": {
		    "grab": {
		      "distance": 800,
		      "line_linked": {
		        "opacity": 1
		      }
		    },
		    "bubble": {
		      "distance": 800,
		      "size": 80,
		      "duration": 2,
		      "opacity": 0.8,
		      "speed": 3
		    },
		    "repulse": {
		      "distance": 400,
		      "duration": 0.4
		    },
		    "push": {
		      "particles_nb": 4
		    },
		    "remove": {
		      "particles_nb": 2
		    }
		  }
		},
		"retina_detect": true
	}, 
	function() {
		console.log('callback - particles.js config loaded');
	}
);
</script>
<!-- ./Scripts -->

Hocam sağolasınız, Wordpress özelleştirme paneline yazabileceğim şekilde html olmadan  css ve js olarak nasıl yazabilirim? CSS ID yazmam gerekiyor Elementor Sayfa Oluşturucıuya.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git