下載Mindfusion最新版本

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

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

一、添加HTML標(biāo)記

Js Scheduler需要一個(gè)與之關(guān)聯(lián)的元素。我們?cè)诰W(wǎng)頁(yè)的位置創(chuàng)建一個(gè)HTML Elementor小部件，我們希望在其中顯示計(jì)劃。然后我們?cè)谄渲袑懭?創(chuàng)建日歷div的HTML代碼：

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

二、復(fù)制JavaScript和CSS文件

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

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

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

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

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

使用新創(chuàng)建的“js”和“calendar-themes”文件夾的WordPress博客的目錄結(jié)構(gòu)。

獲取頁(yè)眉/頁(yè)腳WordPress插件

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

在那里我們放入“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>

頁(yè)眉/頁(yè)腳設(shè)置的樣子：

標(biāo)題引用日歷的CSS主題，頁(yè)腳添加對(duì)所需JavaScript文件的引用。