下載Mindfusion最新版本

在本文中，我們將介紹如何將MindFusion JavaScript庫與WordPress Elementor插件一起使用的操作步驟。

我們將向您展示如何從“First Schedule”示例中顯示JavaScript Scheduler。可以對任何MindFusion JavaScript庫重復這些步驟。

一、添加HTML標記

Js Scheduler需要一個與之關聯的元素。我們在網頁的位置創建一個HTML Elementor小部件，我們希望在其中顯示計劃。然后我們在其中寫入創建日歷div的HTML代碼：

使用Elementor的小部件為MindFusion JS Scheduler所需的div元素插入代碼

二、復制JavaScript和CSS文件

First Schedule示例需要引用兩個JavaScript文件和一個帶有日歷主題的CSS文件。

我們將在名為“calendar-themes”的新文件夾中使用的主題復制到WordPress網站的目錄中。此文件夾應位于具有您正在使用的WordPress主題名稱的子文件夾中。此子文件夾位于wp / content / themes /目錄中。路徑應該是：

//www.yoursite.any/wp-content/themes/your-theme/calendar-themes/first-theme.css

接下來，將MindFusion.Scheduling.js和FirstSchedule.js文件復制到名為“js”的新文件夾中，該文件夾位于放置calendar-themes文件夾的同一位置。路徑應該是：

//www.yoursite.any/wp-content/themes/your-theme/js/FirstSchedule.js
//www.yoursite.any/wp-content/themes/your-theme/js/MindFusion.Scheduling.js

使用新創建的“js”和“calendar-themes”文件夾的WordPress博客的目錄結構。

獲取頁眉/頁腳WordPress插件

為了本教程的目的，我們安裝了“Insert Headers and Footers”，但任何其他插件都可以。安裝所選插件后，根據插件提供程序的說明添加對調度程序主題和JavaScript文件的引用。在我們的例子中，我們從WordPress儀表板>設置>插入頁眉和頁腳菜單中執行此操作。

在那里我們放入“Scripts in Header”文本框：

 	<link href="//ubydesign.net/wp-content/themes/twentyseventeen/calendar-themes/first-theme.css" rel="stylesheet">

并在“Scripts in Footer”文本框中：

<script src="//ubydesign.net/wp-content/themes/twentyseventeen/js/MindFusion.Scheduling.js" type="text/javascript"></script>
<script src="//ubydesign.net/wp-content/themes/twentyseventeen/js/FirstSchedule.js" type="text/javascript"></script>

頁眉/頁腳設置的樣子：

標題引用日歷的CSS主題，頁腳添加對所需JavaScript文件的引用。