整合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