WordPress'e nasıl basit bir jQuery betiği eklerim?

Codex'i ve WordPress'te jQuery kullanımı hakkında birkaç blog yazısını okudum ve bu çok sinir bozucu. functions.phpDosyaya jQuery yükleyebildiğim kadarıyla var , ama oradaki tüm kılavuzlar berbat çünkü zaten bir ton WordPress deneyiminiz olduğunu varsayıyorlar. Örneğin, functions.phpdosya üzerinden jQuery yüklediğime göre, şimdi tek yapmam gereken jQuery'imi yüklemek olduğunu söylüyorlar.

Bunu tam olarak nasıl yaparım? Özellikle hangi dosyalara kod eklerim? Tek bir WordPress sayfası için tam olarak nasıl eklerim?

Eğitimler hakkında ne demek istediğini biliyorum. İşte bunu nasıl yapıyorum:

Önce senaryonuzu yazmanız gerekiyor. Tema klasörünüzde 'js' gibi bir klasör oluşturun. Javascript'iniz için bu klasörde bir dosya oluşturun. Örneğin, script.js. JQuery komut dosyanızı bu dosyaya ekleyin ( <script>.js dosyasında etiketlere ihtiyacınız yoktur ).

JQuery betiğinizin (wp-content / themes / your-theme / js / your-scrript.js içinde) nasıl görünebileceğine ilişkin bir örnek aşağıda verilmiştir:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

İşlevin başında $ değil jQuery kullandığıma dikkat edin.

Tamam, şimdi temanızın functions.php dosyasını açın. Bu wp_enqueue_script()işlevi kullanmak isteyeceksiniz, böylece betiğinizi eklerken aynı zamanda WordPress'e jQuery'ye dayandığını söyleyebilirsiniz. İşte bunu nasıl yapacağınız:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Temanızın doğru yerlerde wp_head ve wp_footer'a sahip olduğunu varsayarsak, bu işe yaramalıdır. Eğer daha fazla yardıma ihtiyacınız varsa bana bildirin.

WordPress soruları en üstünde istenebilir WordPress Answers .

Çok fazla araştırmadan sonra nihayet en son WordPress ile çalışan bir şey buldum. İşte izlenecek adımlar:

1. Temanızın dizinini bulun, özel j'leriniz için dizinde bir klasör oluşturun ( bu örnekte custom_js ).
2. Özel jQuery'nizi bu dizindeki bir .js dosyasına koyun ( bu örnekte jquery_test.js ).

3. Özel jQuery .js dosyanızın şöyle göründüğünden emin olun:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);
   

4. Temanın dizinine gidin, functions.php dosyasını açın

5. Üst tarafa aşağıdaki gibi görünen bir kod ekleyin:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');
   

6. Çalıştığından emin olmak için sitenize göz atın!

Temanıza komut dosyaları eklemek için wordpress çocuk teması kullanıyorsanız , get_template_directory_uri işlevini get_stylesheet_directory_uri olarak değiştirmelisiniz, örneğin:

Ana Tema:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Çocuk Teması:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / siteniz / wp-içerik / temalar / ana-tema

get_stylesheet_directory_uri: / siteniz / wp-içerik / temalar / alt tema

JQuery veya javascript temanın function.php dosyasına ekleyebilirsiniz. Kod aşağıdaki gibidir:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Daha fazla ayrıntı için bu eğiticiyi ziyaret edin: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Komut dosyasını işlevler aracılığıyla yerleştirmenin yanı sıra, herhangi bir şablonda üstbilgiye, altbilgiye, herhangi bir şablona bir bağlantı (yani bir bağlantı rel etiketi) dahil edebilirsiniz. Sadece yolun doğru olduğundan emin olmalısın. Buna benzer bir şey kullanmanızı öneririm (temanızın dizininde olduğunuzu varsayarak).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

İyi bir uygulama, bunu kapanış gövde etiketinin hemen önüne veya en azından altbilginizden hemen önce eklemektir. Ayrıca php içerir veya bu dosyayı içeri çekmek için başka yöntemler de kullanabilirsiniz.

<script type="javascript"><?php include('your-file.js');?></script>

** # Yöntem 1: ** jquery kodunuzu ayrı bir js dosyasına koymayı deneyin.

Şimdi bu betiği functions.php dosyasına kaydedin.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Şimdi bitirdiniz.

Komut dosyasını işlevlere <head>kaydetmek, sayfa yüklendiğinde bölümde geldiği için faydalıdır, bu nedenle her zaman header.php'nin bir parçasıdır. Böylece her yeni html içeriği yazdığınızda kodunuzu tekrarlamanız gerekmez.

# Yöntem 2: komut dosyası kodunu, <script>etiketinin altındaki sayfa gövdesinin içine yerleştirin . O zaman onu işlevlere kaydetmeniz gerekmez.

Bu eklentiyi kullanarak özel javascript veya jquery ekleyebilirsiniz.
https://wordpress.org/plugins/custom-javascript-editor/

JQuery kullandığınızda jquery noconflict modunu kullanmayı unutmayın

Sayfaya dahil edilecek komut dosyanızı nasıl ekleyeceğiniz burada birçok öğretici ve cevap var. Ama bulamadığım şey, bu kodu nasıl düzgün çalışacak şekilde yapılandıracağım. Bunun nedeni, $ 'ın bu JQuery biçiminde kullanılmamasıdır.

İşte kodum ve bunu şablon olarak kullanabilirsiniz.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

Buradan cevap: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

WordPress bir süredir ortalıkta olmasına ve temalara ve eklentilere komut dosyası ekleme yöntemi yıllardır aynı olmasına rağmen, komut dosyalarını tam olarak nasıl eklemeniz gerektiği konusunda hala bazı karışıklıklar var. Öyleyse açıklığa kavuşturalım.

JQuery hala en yaygın kullanılan Javascript çerçevesi olduğundan, temanıza veya eklentinize nasıl basit bir komut dosyası ekleyebileceğinize bir göz atalım.

jQuery'nin Uyumluluk Modu

WordPress'e betik eklemeye başlamadan önce jQuery'nin uyumluluk moduna bakalım. WordPress, kodunuzla kullanmanız gereken bir jQuery kopyası ile önceden paketlenmiş olarak gelir. WordPress 'jQuery yüklendiğinde, diğer dil kitaplıklarıyla çakışmaları önlemek için bir mekanizma olan uyumluluk modunu kullanır.

Bunun anlamı, dolar işaretini diğer projelerde olduğu gibi doğrudan kullanamayacağınızdır. WordPress için jQuery yazarken bunun yerine jQuery kullanmanız gerekir. Ne demek istediğimi görmek için aşağıdaki koda bir göz atın:

Gördüğüm çözümler, bir temaya javascript özellikleri ekleme perspektifindendir. Ancak OP, özellikle, " Tek bir WordPress sayfası için tam olarak nasıl eklerim ?" Diye sordu. Bu, tek tek gönderilerin farklı javascript destekli "widget'lara" sahip olabileceği Wordpress blogumda javascript'i nasıl kullandığım gibi görünüyor. Örneğin, bir gönderi, kullanıcının değişkenleri (kaydırıcılar, onay kutuları, metin giriş alanları) değiştirmesine ve sonuçları çizmesine veya listelemesine izin verebilir.

JavaScript perspektifinden başlayarak:

1. JavaScript işlevlerinizi ayrı bir ".js" dosyasına yazın

Gönderinizin html'sine önemli miktarda JavaScript eklemeyi aklınızdan bile geçirmeyin — kodunuzla bir JavaScript dosyası veya dosyaları oluşturun.

2. JavaScript'inizi gönderinizin html'si ile arayüzleyin

JavaScript widget'iniz html kontrolleri ve alanlarıyla etkileşime girerse, bu öğeleri JavaScript'ten nasıl sorgulayacağınızı ve ayarlayacağınızı ve ayrıca UI öğelerinin JavaScript işlevlerinizi çağırmasına nasıl izin vereceğinizi anlamanız gerekir. Burada bir çift örnek var; ilk olarak, JavaScript'ten:

var val = document.getElementById(“AM_Freq_A_3”).value;

Ve html'den:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. JavaScript widget'ınızın başlatma işlevini çağırmak için jQuery kullanın

Bunu, sayfa hazır olduğunda JavaScript widget'ınızı yapılandıran ve çizen işlevinizin adını kullanarak .js dosyanıza ekleyin:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. Gönderinizin html kodunda, gönderiniz için gereken komut dosyalarını yükleyin

Wordpress kod düzenleyicide, genellikle yazının sonunda betikleri belirtirim. Örneğin, ana dizinimde bir betikler klasörüm var. İçeride, bazı yayınlarımın paylaşabileceği ortak JavaScript içeren bir yardımcı programlar dizinim var - bu durumda, kendi matematik yardımcı program işlevimden bazıları ve flotr2 çizim kitaplığı. Örneğin, medya yöneticisini kullanmak yerine, postaya özgü JavaScript'i başka bir dizinde, alt dizinlerle tarihe göre gruplamayı daha uygun buluyorum.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. JQuery'yi sırala

Wordpress jQuery'yi kaydeder, ancak Wordpress'e ihtiyacınız olduğunu söylemediğiniz sürece mevcut değildir. Bunu yapmazsanız, jQuery komutu başarısız olur. Birçok kaynak size bu komutu functions.php dosyanıza nasıl ekleyeceğinizi anlatır, ancak diğer bazı önemli ayrıntıları bildiğinizi varsayar.

İlk olarak, bir temayı düzenlemek kötü bir fikirdir; temanın gelecekteki herhangi bir güncellemesi değişikliklerinizi silecektir. Bir çocuk teması oluşturun. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Çocuğun functions.php dosyası, ana temanın aynı isimli dosyasını geçersiz kılmaz, ona ekler. Alt tema öğreticisi, üst ve alt style.css dosyasının nasıl sıralanacağını gösterir. JQuery'yi de kuyruğa almak için bu işleve başka bir satır ekleyebiliriz. İşte alt tema için tüm functions.php dosyam:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

WordPress eklentisine komut dosyası eklemek için önceden tanımlanmış WordPress işlevini kullanabilirsiniz.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Bak yazı size WordPress eklentisi jQuery ve CSS uygulamak ne kadar kolay olduğunu anlamak için yardımcı olur.

Komut dosyasını işlevler aracılığıyla yerleştirmenin yanı sıra, herhangi bir şablonda üstbilgiye, altbilgiye, herhangi bir şablona bir bağlantı (yani bir bağlantı rel etiketi) dahil edebilirsiniz.

Hayır. WordPress'te asla böyle bir harici komut dosyasına bağlantı eklememelisiniz. Bunları functions.php dosyası aracılığıyla sıralamak, betiklerin doğru sırada yüklenmesini sağlar.

Bunları sıraya koymamak, doğru yazılmış olmasına rağmen betiğinizin çalışmamasına neden olabilir.

betiğinizi başka bir dosyaya yazabilir ve dosyanızı bu şekilde sıraya koyabilirsiniz image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

yerine /js/image-ticker.jssize sizin js dosya yolunu koymak gerekir.

WordPress'te, komut dosyalarını web sitenize eklemenin doğru yolu aşağıdaki işlevleri kullanmaktır.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Bu işlevlere kancanın içinde denir wp_enqueue_script.

Daha fazla ayrıntı ve örnek için, wp_register_script & wp_enqueue_script kullanarak Wordpress'te JS dosyaları ekleme konusuna bakabilirsiniz.

Misal:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"Google'ımız var" cit. Komut dosyasını wordpress içinde doğru kullanmak için barındırılan kitaplıkları ekleyin. gibi Google

Seçtiğiniz kitaplığı seçtikten sonra, özel komut dosyanızın önüne bağlamanız gerekir: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

ve kendi senaryonuzdan sonra

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Yalnızca jquery yüklemeniz mi gerekiyor?

1) Diğer kılavuzların dediği gibi, betiğinizi functions.php dosyanıza şu şekilde kaydedin:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) jQuery'yi kaydetmemize gerek olmadığına dikkat edin çünkü zaten çekirdekte. Wp_footer () 'in footer.php içinde ve wp_head ()' in header.php içinde çağrıldığından emin olun (komut dosyası etiketini buradan çıkaracaktır) ve jQuery her sayfaya yükleyecektir. JQuery'yi WordPress ile kuyruğa aldığınızda, "çakışma yok" modunda olacaktır, bu nedenle $ yerine jQuery kullanmanız gerekir. İsterseniz jQuery'nin kaydını silebilir ve wp_deregister_script ('jquery') yaparak kendinizinkini yeniden kaydedebilirsiniz.

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');