2017-12-01 6 views
0

次のWordpressのプラグインを書いている間は、プラグインのための私のPHPコードです:エラーなしなし実行

<html> 
<head> 
    <title>Grid Demo</title> 
    <link rel="stylesheet" href="css/style.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script src="js/fixtures.js"></script> 
    <script src="js/gridList.js"></script> 
    <script src="js/jquery.gridList.js"></script> 
    <script src="js/load.js"></script> 
</head> 

<?php 

/* 
Plugin Name: Testingplugin 
Plugin URI: http://localhost 
Description: Trying plugin for the first time. 
Version: 1.0 
Author: AIMS 
Author URI: http://localhost 
License: A "Slug" license name e.g. GPL2 
*/ 
// Exampe is from the https://www.youtube.com/watch?v=GAwPa4fP90c 
add_action('admin_menu', 'myfirstpluginactions'); 

function myfirstpluginactions(){ 
    add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page'); 
} 

function display_menu_page(){ 
     ?> 



    <body> 
    <div class="header"> 
     <a href="#remove-row" class="button remove-row">-</a> 
     <a href="#add-row" class="button add-row">+</a> 
     <p> 
      <a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a> 
     </p> 
    </div> 
    <div class="grid-container"> 
     <ul id="grid" class="grid"> 
      <li class="position-highlight"> 
       <div class="inner"></div> 
      </li> 
     </ul> 
    </div> 
    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script> 


    <?php 
} 

私はプラグインを使用してドラッグ可能要素を表示するためのHootsuite Gridリポジトリを使用しています。 問題は出力を取得できず、エラーも発生していないことです。私の推測は、jsの包含に関する問題です。

私はすべてのjsを私のプラグインのjsフォルダに入れました。何が原因か、コードを改善するために何ができるかを教えてください。ここで

は、私は、画面に乗る出力されます。

output image

そして、これは私が期待していたものです。

expected image

+0

すべてのjsファイルが確実に含まれていますか? – ProEvilz

+0

@ ProEvilz私はそれについて少し混乱しています。私は何かエラーを見ることができませんでした。つまり、すべてがうまくいくかもしれません。 –

答えて

2

あなたはwp_enqueue_scriptを使用してJSを追加します()関数を呼び出し、plugins_url()を使用してJSファイルへのパスを取得します。初期の機能をプラグインあなたに追加の線に沿って

何か:あなたのCSSのための

wp_enqueue_script('custom-script-new-name-for-each-script', plugins_url('js/fixtures.js', FILE), array('jquery', 'jquery-ui-core'), time(), true);

また

wp_enqueue_style(plugins_url('css/style.css', FILE));

プラグインフォルダ内のJSファイルごとに上記を行います。あなたが追加したヘッダーhtmlを削除し、WPが要件として追加するので、jqueryの必要はありません。

あなたの機能になるでしょう:

function myfirstpluginactions(){ 
    add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page'); 

wp_enqueue_style(plugins_url('css/style.css', FILE)); 
//Add this for each of your JS scripts 
wp_enqueue_script('custom-script-new-name-for-each-script', plugins_url('js/fixtures.js', FILE), array('jquery', 'jquery-ui-core'), time(), true); 

} 

または別の方法が

<script src="<?php echo plugins_url('js/fixtures.js', FILE); ?>"></script> 

<script src="js/fixtures.js"></script> 

を変更JSなどに右のパスを取得するためにPHPを使用して、現在のコードをラップすることです

+0

正確に私はそれを追加する必要がありますか?あなたが私のコードを参照したり、修正を提案することができる例があれば教えてください。 –

+0

あなたの答えにいくつかの詳細を加えてください。さもなければあなたは下降するかもしれません。 –

+0

これをmyfirstpluginactions()関数に追加するには、wp_enqueue_script( 'custom-script-new-name-for-each-script'、plugins_url( 'js/fixtures.js'、__FILE__ )、array( 'jquery'、 'jquery-ui-core')、time()、true); 'また、 'wp_enqueue_style(plugins_url(' css/style.css '、__FILE__));'あなたのCSSのために。プラグインフォルダ内の各JSファイルに対して上記を行います。あなたが追加したヘッダーhtmlを削除し、WPが要件として追加するので、jqueryの必要はありません。 –

関連する問題