将JS应用程序集成到wordpress插件中

时间:2015-05-14 13:07:44

标签: javascript php wordpress

为了运行我的js-application,我需要在浏览器中打开index.html,它包含很多指向样式和其他脚本的链接

<script src="js/lib/jquery-2.1.1.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/bootstrap-select.min.js"></script>

我想要make插件,它将包装我的js-application for Wordpress。

<?php
    /*
    Plugin Name: Plugin
    Description: Just plugin
    Author: Me
    Version: 1.0
    */

    function showApp(){     
        $file = readfile("App/index.html", true);
        echo $file;
    }

    add_action('init', 'showApp');

加载样式和相关JS文件时会出现问题。

更新

<?php
    /*
    Plugin Name: Plugin
    Description: Just plugin
    Author: Me
    Version: 1.0
    */
    function showApp(){
        $PATH = 'D:\xampp\htdocs\wp\wp-content\plugins\APP\js\app';

        if (($_SERVER['REQUEST_URI']) == "/wp/2015/05/14/mypage/") {
            if ($handle = opendir($PATH)) {
                echo "Directory handle: $handle\n";
                echo "Entries:\n";

                while (false !== ($entry = readdir($handle))) {
                    echo "$entry\n";
                    enqueue_and_register_my_scripts($entry, $PATH);
                }
                closedir($handle);

                $file = readfile('D:\xampp\htdocs\wp\wp-content\plugins\APP\index.html');
                echo $file;

                die();
            }
        }
    }

    function enqueue_and_register_my_scripts($script, $path){
        wp_register_script($script, $path . $script);
        wp_enqueue_script ($script, $path . $script);
    }

    add_action('init', 'showApp');

这不起作用。

1 个答案:

答案 0 :(得分:0)

注册你的风格第一,想法是你可以根据当前页面(这将是你的APP)有条件地加载这些文件。您只需要制作一个自定义页面。 page-{name}.php

示例

// Always use wp_enqueue_scripts action hook to both enqueue and register scripts
add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){

    // Use `get_stylesheet_directroy_uri() if your script is inside your theme or child theme.
    wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' );

    // Let's enqueue a script only to be used on a specific page of the site
    if ( is_page( 'careers' ) ){

        // Enqueue a script that has both jQuery (automatically registered by WordPress)
        // and my-script (registered earlier) as dependencies.
        wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
    }
}
  

http://jsfiddle.net/75e4ssgv/4/

还有另一种方法可以简单地调用函数来返回文件的路径。因此,如果它们位于主题文件夹中。使用get_stylesheet_directroy_uri()

否则,如果它们纯粹位于不同的路径上,则需要创建一个函数来获取该路径。但如果你使用wordpress更好地坚持其丰富的功能,那就不是很有效了。

编辑:我在阅读我的错误时跳过插件你也可以使用它作为参考。 https://codex.wordpress.org/Function_Reference/wp_register_script#Example_of_Automatic_Dependency_Loading