Wordpress Multisite,将动态内容注入到#site; new.php'

时间:2016-06-02 08:43:17

标签: javascript php jquery wordpress wordpress-plugin

我在solution here找到dennisg并由Hans Helge编辑。我正在使用的部分是在外部文件中使用IIFE和jQuery注入额外的表单字段。

(function($) {
    $(document).ready(function() {
        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">New field</th>')
        ).append(
            $('<td></td>').append(
                $('<input class="regular-text" type="text" title="New Field" name="blog[new_field]">')
            ).append(
                $('<p>Explanation about your new field</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);

到目前为止,我已成功将PHP压缩到上面的js中。当我用.php而不是.js

后缀文件名时,以下似乎工作正常
<?php
$user_def_cats = array('Subject', 'Person', 'Client');
?>
(function($) {
    $(document).ready(function() {
        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">Site Category</th>')
        ).append(
            $('<td></td>').append(
                $('<select name="blog[blog_cats]" ><?php
foreach ($user_def_cats as $key => $val) {
    echo "<option value=\"" . ($key + 1) . "\" >" . $val . "</option>";

}
?></select>')
            ).append(
                $('<p>Blog Category (Allows creation of different blog listings.)</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);

因此,这适用于样本数据:

$user_def_cats = array('Subject', 'Person', 'Client');

接下来,我尝试使用PHP访问动态内容(&#39;主题&#39;人物&#39; ...等),因为需要一次主插件文件,所以我可以调用一个使用get_site_option()检索动态表单数据的方法。

require_once WP_PLUGIN_DIR . '/' . plugin_basename(__FILE__);

上面包含这一行,我收到一个错误:

  

未捕获的SyntaxError:意外的令牌&lt;   http://wpmu.net/wp-content/plugins/list-all-blogs-i3/js/add_site_cat_frm_elem.php?ver=4.4.3   第1行

这可能是因为我调用的插件文件正在回显东西,这是在任何合法的js代码之外。例如。 echo&#34;嗨&#34 ;;导致同样的错误。

在网上阅读我看到也许更好的解决方案是将我的所有动态内容保存到data.json文件中(而不是wp_sitemeta使用update_site_option()),然后是AJAX / get_json访问数据。这样可以避免PHP和JS的某种尴尬交叉。

也许有更好的方法可以将带有dyn内容的表单字段添加到admin site-new.php页面中?

对此事的任何启示都将不胜感激。

1 个答案:

答案 0 :(得分:0)

行。在我的插件文件中,我现在有了这个脚本,它使用wp_localize_script()来引入注入服务器端数据的IIFE:

wp_register_script('add_site_cat_frm_elem',
plugins_url('js/add_site_cat_frm_elem.js', __FILE__));

// Only way I can see to easily inject dynamic data into js file.
wp_localize_script('add_site_cat_frm_elem', 'user_def_cats', $this->user_def_cats);

wp_enqueue_script('add_site_cat_frm_elem');

在这个例子中, $ this-&gt; user_def_cat 包含使用get_site_option()从wp_sitemeta提取的数据。

最后,我的js文件看起来像这样,其中所述数据用于构建select表单元素的选项:

(function($) {
    $(document).ready(function() {

       var  myOptions = '';

        user_def_cats.forEach(function(val,i,user_def_cats){
                myOptions += '<option value="'+ i  +'">' + val + '</option>';
        });

        $('<tr class="form-field form-required"></tr>').append(
            $('<th scope="row">Site Category</th>')
        ).append(
            $('<td></td>').append(
                $('<select name="blog[blog_cats]" >' + myOptions + '</select>')
            ).append(
                $('<p>Blog Category (Allows creation of different blog listings.)</p>')
            )
        ).insertAfter('#wpbody-content table tr:eq(2)');
    });
})(jQuery);