Yalnızca Belirli Bir WordPress Sayfasına JavaScript Nasıl Eklenir?

Hedeflenen bir WordPress Sayfasına JavaScript Uygulamak

WordPress, web sitesi yönetimini ve özelleştirmesini basitleştiren, kullanımı kolay bir platformdur. Ancak, belirli bir sayfada JavaScript'in çalıştırılması da dahil olmak üzere bazı değişikliklerin uygulanması zor olabilir. Web sitenizin "Başlık" bölümüne eklediğiniz bir komut dosyasının artık her sayfada mevcut olması mümkündür. Bu tipik bir ilk kez zorluktur.

Bir JavaScript dosyasının koşullu olarak nasıl uygulanacağını anlamak, onu belirli bir sayfayı hedeflemek için kullanırken çok önemlidir. JavaScript beklenmedik sonuçlara yol açabilir ve baştan sona kullanıldığında web sitenizin hızını düşürebilir. Komut dosyasını gerekli sayfayla sınırlamanın çok önemli olmasının nedeni budur.

Bu makalede, WordPress yapılandırmanızı, JavaScript'in yalnızca ihtiyacınız olan sayfalarda başlatılmasını sağlayacak şekilde değiştirme sürecinde size yol göstereceğiz. Cevap geliştirici olmayanlar için de anlaşılabilir; Bu kılavuz yeni başlayanlar için hazırlanmıştır.

Bu dersi bitirdiğinizde WordPress'te sayfaya özel komut dosyalarını rahatça kullanabileceksiniz. JavaScript'inizin yalnızca olması gerektiği yerde çalıştığından emin olmak ve web sitenizin performansını artırmak için gereken kod ve prosedür konusunda size rehberlik edeceğiz.

Belirli WordPress Sayfalarında JavaScript'in Rolünü Anlamak

Betiği doğrudan "Başlık" bölümüne yerleştirme şekli, bir komut dosyası çalıştırmanız gerektiğinde betiğin her sayfaya yüklenmesine neden olabilir. JavaScript Belirli bir WordPress sayfasındaki dosya. Kullanıcı deneyimi ve performans açısından bu ideal değil. Önceki seçenekler, komut dosyasını yalnızca belirtilen sayfayla sınırlandırarak komut dosyalarını işlemenin daha etkili bir yolunu sunar. Örneğin, WordPress'in is_page() Kullanıcının kimliğine veya bilgisine göre belirli bir sayfayı görüp görmediğini belirleme yöntemi. Bu, JavaScript dosyasının yalnızca gerektiğinde yüklenmesini sağlamak için kullanılan ana tekniktir.

İlk yöntem, koşullu etiketleri kullanır. işlevler.php ile birlikte dosyalayın wp_enqueue_script(). Bu teknik, uygun bağımlılık yönetimini sağlayacak ve betiği sayfanın uygun alanına yükleyecek şekilde komut dosyaları ekleyen temel bir WordPress özelliğinden yararlanır. aracılığıyla wp_enqueue_scripts eylem kancası, JavaScript işlevi yalnızca WordPress, gereksinimleri karşılayan bir sayfayı işlediğinde eklenecektir. is_page() gereklilik. Etkili olmasının yanı sıra, bu, önemsiz sitelerde anlamsız komut dosyası yürütülmesini de durdurur.

Kısa kod kullanmak ikinci stratejinin bir parçasıdır. WordPress kısa kodları, bir sayfaya veya gönderiye dinamik materyal eklemeyi kolaylaştırır. add_shortcode() özel bir kısa kod oluşturmak için kullanılabilir; bu, komut dosyasını gerektiği gibi içerik alanına koşullu olarak eklemenizi sağlar. Komut dosyasını bir web sitesinin veya gönderinin tam sayfası yerine belirli bölümlerde kullanmak istiyorsanız bu size daha fazla seçenek sunar. Ayrıca, PHP dosyalarında doğrudan değişiklik yapmaktan rahatsız olan kişiler için daha ulaşılabilir bir seçenektir.

Başka bir yöntem, URL'lerde belirli kalıpları aramak için jQuery'yi kullandığından, URL'de belirli parametrelere sahip sayfalara komut dosyalarını dinamik olarak yüklemek için mükemmeldir. window.location.href Ve $.getScript() bu yaklaşımda belirli bir dizenin URL'ye dahil edilip edilmediğini belirlemek ve JavaScript dosyasını uygun şekilde yüklemek için kullanılır. Bu yaklaşım, URL yapısının bir komut dosyası kullanımını gerektirdiği e-ticaret siteleri veya benzersiz izleme kodlarına sahip açılış sayfaları gibi durumlarda işe yarar. Bu tekniklerin tümü modülerdir, yeniden kullanılabilir ve komut dosyalarının yalnızca gerektiğinde yüklenmesini sağlar, bu da kullanıcı deneyimini ve performansını artırır.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

WordPress Sayfalarına JavaScript Yüklemeyi Optimize Etme

Belirli WordPress sayfalarında JavaScript kullanırken betiğin yüklendiği yer çok önemli bir husustur. WordPress varsayılan olarak komut dosyalarının sayfaya yüklenmesine izin verir alt bilgi veya başlık. Performans nedenleriyle, özellikle harici kaynaklar kullanıldığında, genellikle betiğin altbilgiye yüklenmesi önerilir. Bu, kullanıcıların JavaScript yürütmesini sayfanın yüklenmesi bitene kadar erteleyerek daha hızlı sayfa yüklemelerinin keyfini çıkarabilmeleri içindir.

değiştirebilirsiniz wp_enqueue_script() altbilgiye bir komut dosyasını ileterek yükleme yöntemi doğru son parametre olarak Bunu yaparak, betiğin son gövde etiketinden ve sayfa içeriğinin geri kalanından önce yüklendiğinden emin olabilirsiniz. Daha az önemli komut dosyaları geciktirildiğinden ve daha önemli kaynaklara öncelik verildiğinden, bu teknik görünen yükleme süresinin kısaltılmasına yardımcı olur. Bu optimizasyon acemiler için pek fazla görünmese de WordPress sitesinin hızı ve işlevselliği üzerinde büyük etkisi vardır.

Önbellek bozma ve sürüm kontrolü diğer iki önemli unsurdur. WordPress kullanımı kolay bir yöntem sağlar wp_enqueue_script() Komut dosyalarına sürüm numarası ekleme işlevi. Sürüm bağımsız değişkeni ekleyerek kullanıcıların önbelleklerinden güncel olmayan JavaScript almamalarını sağlayabilirsiniz. Bu, betiğin en son sürümünün sürekli olarak yüklenmesini sağlar; bu, bir betiği geliştirirken veya yükseltirken son derece faydalıdır. Bu prosedür, komut dosyası çakışması olasılığını azaltır ve web sitesinin işlevselliğini artırır.