JavascriptでWordpressの機能を混ぜる

Question

私は、既存のWordpressプラグインを修正しました。今はそのコードを独自のプラグインにリファクタリングする必要があります。したがって、ページの所有者は、自分の変更を破棄したり上書きしたりすることなく元のプラグインを更新することができます。コードは、テキストフィールドにget_metadataの値を入れる非常に単純なJavaScriptスニペットです。

私はWordpress Pluginsで全く新しいです。

このコードをロードするための最も基本的なニーズは、とのUserdataです。 （下のスクリプトでたとえば？）

$form_html .= '<script> 
jQuery(document).ready(function(){ 
    function assign_bandname() { 
     var $bandname = "' . get_metadata("user", get_current_user_id(), "band_name", true) . '"; 
     var $container = jQuery(".plugins_class_container").first(); 
     var $bandscope = $container.find(\'input[type=text],select\').filter(\':visible:first\'); 
     $bandscope.val($bandname); 
    } 

    assign_bandname(); 

    jQuery("button").unbind().click(function() { 
     setTimeout(assign_bandname, 800); 
    }) 
}); 
</script>'; 

私はWordpressのプラグインのためのいくつかのスケルトンを見つけましたが、それらは管理者、国際化、および機能の多くのものがロードされています。私はそれに完全に圧倒されており、「簡単な」解決策を見つけられませんでした。しかし、私はそれはあなたのテーマでこれを行うために必要な時間である事前

Answer 1

で1 ... :-)

感謝があるだろうと思います。このWordPressのために私たちにwp_localize_script機能を提供しています。この関数を使用する利点は、header.phpに何かをエンキューする必要がないことです。

は、あなたの関数のファイルにこれを追加します。

wp_enqueue_script('my_js_library', get_template_directory_uri().'/js/myLibrary.js'); 

$dataToBePassed = array(
    'bandname'   => get_current_user_id(), 
); 
wp_localize_script('my_js_library', 'php_vars', $datatoBePassed); 

あなたはmy_js_library.jsファイルにwp_localize_script関数の値を使用することができます。

Answer 2

Jaymanの回答を少しだけ拡張すると、プラグイン自体に必要な最低限のプラグインのフォルダ名は、index.phpのようになります。また、追加するjを含むフォルダにscript.jsファイルを追加することもできます。そのフォルダをwp-content->pluginsに追加してプラグインを有効にするだけです。

Here is a good link talking about the 'Wordpress Way' of passing data to Javascript。

/* 
    Plugin Name: My Plugin 
    Plugin URI: http://allyourbase.com 
    Description: my first plugin 
    Version: 1.0 
    Author: someone 
    Author URI: http://something.com 
*/ 

    /** 
    * initiate the plugin 
    * @return void 
    */ 
    function init(){ 
     add_scripts(); 
    } 

    /** 
    * add plugin scripts 
    */ 
    function add_scripts(){ 

     wp_enqueue_script('script', plugin_dir_url(__FILE__) . 'js/script.js', false, '', true); 

     wp_localize_script('thatgooddata', 'userdata', wp_get_current_user()); 
    } 

    init(); 

Answer 3

私はtemplate-name-childフォルダを作成しました。

• のstyle.css
• screenshot.jpg
• のfunctions.php
• script.js
• のreadme.txt

：そこに以下のファイルを置い

最も重要な部分はfunctions.phpです：

<?php 

// template 
//add_action('wp_enqueue_scripts', 'theme_enqueue_styles'); 

wp_enqueue_scripts('wp_enqueue_scripts', 'theme_enqueue_styles'); 

function theme_enqueue_styles() 
{ 
    // template-name == parent-template-name 
    wp_enqueue_style('template-name', get_template_directory_uri() . '/style.css', array('bootstrap', 'jquery', 'font-awesome')); 
} 

// custom scripts 
function theme_enqueue_scripts() 
{ 
    wp_enqueue_script('frontend-ajax', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), null, true); 
    wp_localize_script('frontend-ajax', 'custom_vars', 
     array(
      'bandname' => get_metadata("user", get_current_user_id(), "band_name", true), 
     ) 
    ); 
} 

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); 
?> 

今私はREADME.TXTが

=== Template Name Child === 
Author: Your Name 
Tags: black, blue, white, light, dark, two-columns, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready 
Requires at least: 4.0 
Tested up to: 4.4.1 
Stable tag: 1.0 
License: GNU General Public License v3 or later 
License URI: http://www.gnu.org/licenses/gpl.html 

== Description == 
Modern & beautiful responsive theme. 

スタイルが含まれてい

console.log(my_vars.bandname); 

によって私script.js変数から呼び出すことができています。CSSには以下が含まれます：

/* 
Theme Name: Template Name Child 
Theme URI: http://example.com/twenty-fifteen-child/ 
Description: Template Name Child Theme 
Author:  Your Name 
Author URI: https://www.yourUrl.com 
Template:  template-name 
Version:  1.0.0 
License:  GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Tags:   dark 
Text Domain: template-name-child 
*/