將Gridster插入WordPress模板

我的WordPress插件存在問題，我想將Gridster插入插件，但不起作用。將Gridster插入WordPress模板

在這裏我加載的文件，這是正確的文件夾中。

function add_my_stylesheet() 
{ 
    wp_enqueue_style('myCSS', plugins_url('/css/bootstrap.css', __FILE__), false); 
    wp_enqueue_style("gridster-style", plugins_url('/css/jquery.gridster.min.css', __FILE__), false); 
} 
add_action('admin_print_styles', 'add_my_stylesheet'); 



function add_my_scripts() 
{ 
    //I tried wp_register_script as well as wp_enqueue_script 
    wp_register_script("jquery-gridster", plugins_url('/js/jquery.min.js', __FILE__)); 
    wp_register_script("gridster-script", plugins_url('/js/jquery.gridster.min.js', __FILE__ )); 
    wp_register_script("gridster-script-extra", plugins_url(  '/js/jquery. gridster.with-extras.min.js', __FILE__)); 

} 
add_action('wp_register_scripts', 'add_my_scripts');

這是預期輸出的代碼示例，這當然不起作用。

echo' 

<section class="demo"> 
     <div class="gridster"> 
      <ul> 
       <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li> 
       <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li> 
       <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li> 
      </ul> 
     </div> 
    </section> 

    <script type="text/javascript"> 
    var gridster; 

    $(function() { 
     gridtster = $(".gridster > ul").gridster({ 
      widget_margins: [10, 10], 
      widget_base_dimensions: [140, 140], 
      min_cols: 6 
     }).data("gridster"); 
    }); 
</script>';

我試圖把它放置在模板頭文件，以及在該插件，但它只能說明我的文字，我不能拖放他們。

來源

2016-01-04 Michael

你有沒有排隊這些腳本？它看起來像你只是註冊他們... – rnevius

是的，我這樣做，我只是試圖註冊他們，因爲我認爲它會幫助。 – Michael

註冊腳本實際上不會包含在你的頁面中......你應該使用'wp_enqueue_script（）'和'wp_enqueue_scripts'動作鉤子 – rnevius

邁克爾 - 再次提問！

WordPress是偉大的，但它有一些技巧/細微差別，它如何工作。

首先，註冊一個腳本很有用（例如，如果你想要localize它，或者你可能（或不可能）想在腳註中輸出它（帶有單獨的print_scripts），但是，它確實不輸出腳本到的標記。

此外，根據你到哪兒去註冊它們（在wp_register_script鉤），你可能想改變這一點。

如果你想要的是你的腳本輸出到頁面標記，然後修改您的代碼，如下所示：

function add_my_scripts() 
{ 
    // proper way to include jQuery that is packaged with WordPress 
    wp_enqueue_script('jquery'); 
    // Do not EVER include your own jquery. This will cause all sorts of problems for the users of your plugin! 
    // wp_enqueue_script("jquery-gridster", plugins_url('/js/jquery.min.js', __FILE__)); 
    // you need enqueue here. ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency! 
    wp_enqueue_script("gridster-script", plugins_url('/js/jquery.gridster.min.js', __FILE__ ), array('jquery')); 
    wp_enqueue_script("gridster-script-extra", plugins_url(  '/js/jquery. gridster.with-extras.min.js', __FILE__), array('gridster-script')); 

} 
// and you need to hook the enqueue action here... 
add_action('wp_enqueue_scripts', 'add_my_scripts');

請注意，如果這不適用於您，下一步是查看呈現的源並查看發生了什麼。如果您發現這種方式無效，請告知：

您是否試圖在前端，管理控制檯或兩者上執行此操作？
什麼是在<head>標記內呈現的確切HTML？
如果URL是輸出，但它不正確，那麼我們有一個不同的問題 - 所以建議如果這是正確的。請注意，當您查看源代碼時，通常可以在「查看源代碼」視圖中單擊鏈接到腳本，並且可以立即查看腳本文件是否正在加載（因爲當您單擊該鏈接時，你會看到腳本代碼），或者不會（因爲你會看到404錯誤頁面的標記）。
最後，您可以嘗試刪除的依賴關係。我有時會遇到一些有趣的問題，而這些我都會搗鼓。

來源

2016-01-04 15:09:37

只需要注意......'wp_enqueue_script（'jquery'）;'是多餘的，因爲它被包含在其他腳本中的依賴項中。 – rnevius

@mevius - 的確如此，但我試圖教導邁克爾如何排隊jQuery的正確方法，所以我明確地將其作爲他將來使用的示例/模型。 –

非常感謝，這對我有幫助:)現在我可以在我的前端以及後端拖放盒子。@cale_b你的回答總是有幫助，並且足夠詳細以便於理解，謝謝你。 – Michael

將Gridster插入WordPress模板

回答

相關問題