整合JS应用到WordPress插件

Question

对于运行我的JS-应用程序，我需要在浏览器中的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> 

我想要做的插件，多数民众赞成将包裹我的js - 用于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文件时会发生问题。

UPDATE

<?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'); 

这没有奏效。

Answer 1

注册你的风格第一，这个想法是，你可以根据当前页面（这将是你的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')); 
    } 
} 

https://codex.wordpress.org/Function_Reference/wp_register_script#Example_of_Automatic_Dependency_Loading

也有另一种方法，它能够简单地调用函数返回文件的路径。所以如果他们位于主题文件夹内。使用get_stylesheet_directroy_uri()

否则，如果它们完全位于不同的路径上，则需要创建一个函数来获取该路径。但是，如果你的wordpress在其丰富的功能中更好地使用，这并不是非常有效。

编辑：我读了我的坏的时候跳过了插件，你可以用它作为参考。 https://codex.wordpress.org/Function_Reference/plugins_url