Wordpress İçeriklerinin İçerisine HTML + JS Kod Ekleme HK.

Selamlar, wordpress site içeriklerine hesaplama kodları eklemek istiyorum html + js olan örnek hesaplama kodları aşağıda bunu nasıl işlevsel bir şekilde içerilere ekleyebilirim.

<div style="max-width: 400px; margin: 20px auto; padding: 20px; border: 2px solid #ccc; border-radius: 10px;">
  <h3>Çözünürlük Ürünü (Ksp) Hesaplayıcı</h3>
  <label>Aⁿ⁺ iyon derişimi (mol/L):</label>
  <input type="number" id="aIon" step="any" class="form-control" /><br>

  <label>Aⁿ⁺ iyon katsayısı (x):</label>
  <input type="number" id="aCoeff" step="1" class="form-control" /><br>

  <label>Bᵐ⁻ iyon derişimi (mol/L):</label>
  <input type="number" id="bIon" step="any" class="form-control" /><br>

  <label>Bᵐ⁻ iyon katsayısı (y):</label>
  <input type="number" id="bCoeff" step="1" class="form-control" /><br>

  <button onclick="calculateKsp()" style="margin-top:10px; padding:8px 16px;">Hesapla</button>
  <p id="result" style="font-weight: bold; margin-top: 10px;"></p>
</div>

<script>
  function calculateKsp() {
    const a = parseFloat(document.getElementById('aIon').value);
    const x = parseInt(document.getElementById('aCoeff').value);
    const b = parseFloat(document.getElementById('bIon').value);
    const y = parseInt(document.getElementById('bCoeff').value);

    if (isNaN(a) || isNaN(b) || isNaN(x) || isNaN(y)) {
      document.getElementById('result').textContent = "Lütfen tüm alanları doldurun.";
      return;
    }

    const ksp = Math.pow(a, x) * Math.pow(b, y);
    document.getElementById('result').textContent = "Ksp = " + ksp.toExponential(3);
  }
</script>

https://sercansevincer.com/wordpress...turma-kisakod/
Shortcode diyoruz biz buna. Yukarıda verdiğim linkte bahsedilmiş

Özel html bloğu var. İçerisine yapıştırırsanız çalışacaktır.

Buradan anladığım kadarıyla functions.php dosyasının içerisine kodları ekleyerek kısa kod ile çekmem gerekiyor fakat 100 lerce içeriğe farklı farklı hesaplamalar ekleyeceğim için bu yöntem çok işime yaramayacaktır.

Wordpress sisteminin içerisinde HTML ekleme özelliği var. Onu çalıştırıp oraya kodlarınızı eklerseniz yazıların içerisinde direkt gözükecektir. Siz ben her seferinde bununla uğraşmak istemiyorum özel bir alan yaparak olsun diyorsanız @Onur89TR; 'nin bahsettiği yöntemi deneyebilirsiniz.

gutenberg editörü kurun. ordaki html/css bloğunda script çalışacaktır muhtemelen. standart WP editöründe sorun yaşayabilirsiniz.

Yanıtlarınız için teşekkürler gutenberg üzerinde çalıştı.