用Javascript混合Wordpress函數

我修改了一個現有的Wordpress插件。現在我想將這些代碼重構成一個自己的插件。因此，頁面的所有者能夠更新原始插件而不破壞/覆蓋我的更改。該代碼是一個非常簡單的JavaScript代碼片段，它將get_metadata值放入文本字段中。用Javascript混合Wordpress函數

我是全新的WordPress插件。

什麼是最基本的需求得到代碼加載與用戶數據。（例如，在底部的腳本？）

$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插件一些骷髏，但是它們都含有大量的管理，國際化功能，和功能的東西。我完全不知所措，並沒有找到一個「簡單」的解決方案。但是，我認爲會有一個... :-)

在此先感謝

來源

2017-10-09 Jan

正是在必要情況下做到這一點在你的主題。這個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);

可以使用wp_localize_script函數的值在my_js_library.js文件。

來源

2017-10-09 17:22:34

只是爲了擴大一點Jayman的答案，你需要插件本身的最低限度是你的插件的文件夾名稱和index.php，就像下面的例子。您還需要在該文件夾中添加一個script.js文件，該文件將包含您要添加的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();

來源

2017-10-09 17:33:11 light

我最後創建了一個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'); 
?>

現在我能夠通過

console.log(my_vars.bandname);

從我script.js變量調用該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.

的風格。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 
*/

來源

2017-10-09 20:05:43 Jan

用Javascript混合Wordpress函數

回答

相關問題