Mindfusion教程：使用MindFusion JavaScript组件与WordPress Elementor插件

下载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 /目录中。路径应该是：

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

接下来，将MindFusion.Scheduling.js和FirstSchedule.js文件复制到名为“js”的新文件夹中，该文件夹位于放置calendar-themes文件夹的同一位置。路径应该是：

http://www.yoursite.any/wp-content/themes/your-theme/js/FirstSchedule.js
http://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="http://ubydesign.net/wp-content/themes/twentyseventeen/calendar-themes/first-theme.css" rel="stylesheet">

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

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

页眉/页脚设置的样子：

标题引用日历的CSS主题，页脚添加对所需JavaScript文件的引用。

转载于:https://juejin.im/post/5cb982135188251ad954e774