如何使用wordpress的paper.js从人群中脱颖而出

技术教程 2022年3月15日

1416 0 8

你想绘制，油漆和动画你的WordPress页面创建一个独特的东西，合法地酷吗?例如，你没有秘密地秘密地想要水母游泳吗?

谁没有！

嗯-今天是你的幸运日，因为我们将覆盖paper.js，这是一个辉煌的JavaScript库，它使网站像PataTap和Paperoids一样.

如果您之前使用过paper.js并且只想发现如何将paper.js与Wordpress 集成，请随时跳过介绍！

目录:

什么是paper.js?
我可以用paper.js做什么，谁是谁?
如何在我的网站上安装paper.js?
如何为wordpress设置paper.js?

paper.js?

paper.js 是一个JavaScript框架，允许您使用图形脚本进行强盗.它是一种自称为瑞士军刀的矢量图形脚本，由设计师和开发人员都喜欢.

paper.js是一个开源向量图形脚本框架，在HTML5 Canvas的顶部运行.它提供了一个干净的场景图/文档对象模型和许多强大的功能，可以创建和与向量图形和Bezier曲线一起创建和工作，全部在设计精心设计，一致和清洁的编程界面中整齐地包装.
paper.js是基于并主要兼容Scriptographer，一个用于Adobe Illustrator的脚本环境，具有积极的脚本运动员和超过10年的发展.
paper.js易于学习初学者，并且有很多掌握中级和高级用户.
这是一种简单的方法，让您的网站更有趣，更有趣的方式让您的网站更容易眼睛.

让我们这样做:如果jquery是类固醇上的javascript，纸张.蘑菇是javascript -这就是所有创造力来自的东西.

基本概念:帆布和paperscript

画布是一个html5元素，字面上充当画布.我知道，对吧！它是图形的容器.您必须使用脚本实际绘制图形.默认情况下，元素既没有内容也没有边框.

如果您在纸张文件中仔细观察到下面的文件或下面的示例中，您将看到它而不是"文本/javascript"我们有"文本/paperscript".

加载GIST 94F9CF90F0AED55CE009CE6A418AB100

paperscript是一个专门用于paper.js的域特定语言，所以除非包含paper.js，否则它不会工作.

我可以用paper.js做什么，谁是谁?

在paper.js中，您可以轻松地以任何颜色和尺寸绘制路径和形状.您可以创建项目，对象，栅格，交互式工具和图层.您可以为项目设置动画，添加数学操作，甚至创建自己的游戏.简而言之，您可以在Paper.js中做的真的仅限于您的创造力和想象力.

paper.js的基本功能:

文档对象模块
创建路径和段
动画
鼠标和键盘交互

SVG导入和导出
光栅图像和颜色平均
矢量几何
数学运作
对象转换

请注意，在本教程中，我 no t旨在解释paper.js的每个属性和功能.我将专注于在WordPress中设置Paper.js.如果您想了解有关Caper.js的功能和特定功能的更多信息，您可以在其官方网站上找到伟大的教程.

还请记住纸张.js是一个JavaScript框架.你可以在技术上在vanilla javascript中做同样的事情，但它会带你的行和代码线.

熟悉JavaScript和矢量绘图应用程序，如Adobe Illustrator将找到非常直观的Paper.js，最有可能从中获利.您可以同样地在Paper.js中创建路径.当然，需要基本的JavaScript知识.

如何在我的网站上安装paper.js?

如果您有节点或Bower，可以使用 NPM安装纸张或 Bower安装纸张命令.否则，要在您的网站上包含paper.js，您必须首先从http://paperjs.org/download/从官方网站下载.

解压缩项目文件夹中的下载文件(即在资产中).

在HTML文件的头部内添加以下脚本:

加载GIST 99D1B558CDD489970FA907338F7D88CD

别忘了在你的身体中添加画布元素-你在paperscript中所做的一切都将在画布上可见.

您无需在HTML的头部写脚本-您也可以创建一个单独的Paperscript文件并将其添加到类似的HTML:

加载主旨crogroo/5d790bc192817b42f0b64495c8cf7de6

如何将paper.js添加到WordPress?

为了完成本教程并将Paper.js的令人敬畏功能添加到WordPress站点，您必须可以访问CPANEL和文件管理器.好的?酷，让我们走吧！

步骤1:创建子主题

您可以手动创建您的子主题.我很懒，所以我正在使用一个孩子主题生成插件(你可以在创建孩子主题后删除插件).在本教程中，我将使用Astra主题作为我的孩子主题的父母.

步骤2:下载最新版本的paper.js

下载最新版本http://paperjs.org/download/
解压缩下载的文件并打开"dist"文件夹.在那里，您将找到纸质核心和纸张完整的JavaScript文件.我将使用纸full-min.js ，因为它比 Paper-full.js .

步骤3:通过文件管理器

将paper-full.min.js文件上传到子主题文件夹中

这非常简单，我希望.我的孩子主题的位置是/WP-Content/Themes/Astra-Child/

步骤4:将paper-full.min.js脚本串入您的页面

让我们将JavaScript添加到我们的WordPress网站上，正确的方式，带有eNqueing.

我们还在文件管理器中.转到您的子主题并打开函数.php 文件.您鼓励在更改之前备份函数.php .将以下代码复制到函数中.

加载GIST 50B3749538A9781A9469A1297C9914C1

此脚本将浏览纸张.js库."enqueue_paper"只是我给出此功能的名称.它可以是任何东西，但你必须以相同的准确名称(句柄)稍后再电.

请注意，此代码将在整个WordPress网站中浏览 Paper-Full.Min.js 脚本.检查控制台-如果它没有显示错误，它会正确排序.您甚至可以在 paper-full.min.js 文件中添加Console.log("已连接")或警报("已连接")以确保所有内容顺利运行.

我想向特定页面添加paper.js脚本，以便我必须将条件标记添加到我的功能.

如下:

加载GIST F5BB8FD05EFFED9E89C53D3E6950EAA3
在这种情况下， 148 是我页面的ID.你的可能会有所不同.看到您的帖子或页面ID的最快方式是在后端编辑时检查其URL.例如，我的页面有这个网址:

mydomain.com/wp-admin/post.php?post= 148 &forth =编辑

post =后的数字是页面的ID.

eNqueuing背后的理论

如果您没有查看此帖子，这就是延时的作品.您必须使用WP_ENQueue_script，而不是在HTML文件的标题或页脚中添加脚本.这是为了确保各种脚本不会混淆并打破网站.

so，wp_enqueue_script函数寄存器和键入脚本.让我们解剖它:

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );

$句柄只是一个名字-一个唯一的标识符，您可以再次调用该函数.
$ source -将文件的URL源或相对于WordPress根目录插入脚本的路径.SRC需要在单引号内，如上面的示例中.($ src ='')
$依赖关系-插入先前注册脚本的句柄，在其上运行您的新脚本取决于.这通常是图书馆.
$版本-非常自我解释，对吗?默认值为false.
$ in_footer -默认值为false -这意味着您正在将脚本放在HTML的头部.真的会把它放在之前.

我们不会将$ Version和$ IN_FOOTER添加为默认设置， FALSE，适合我们的需求.在我们的情况下，我们将创建一个 paper-example.js 文件，该文件取决于paper.js库.

请记住，有许多流行的库，如jQuery，已包含WordPress.您不必键入它们，只添加它们作为依赖关系.

步骤5:浏览您的paper-example.js脚本并将paper-full.min.js添加为依赖关系

首先，让我们在文件管理器中创建一个新文件.调用它 paper-example.js 并将其保存在保存纸Full.min.js的同一个位置.如果要确保正确输入文件，请添加console.log("已连接").

要添加依赖于划分的脚本，我们将简单地将句柄"纸张纤维结构"添加到数组.如果我们有更多的脚本要添加为依赖项，我们可以通过将它们添加到数组中以单行进行.

加载GIST 2F641F24390DAB710D23DCBA121F3A4E

现在应该正确连接，但我们仍有两个主要的事情要做.

步骤6:创建画布

我们需要创建一个纸张.将显示纸张.脚本的画布.默认情况下，这应该是如何看的:

加载GIST 5FAB547E386D301A9BAC2FD377860D2D

canvas是一个html5元素，无法添加WP文本编辑器.最简单的方法是您是使用页面构建器或支持编写自定义代码的插件.您将能够将Canvas元素放在页面上，在一行或div内(我用Divi和Siteorigin页面构建器测试).

您可以在CSS中拟合CSVAS，如您将拟合任何其他HTML元素.我将以下代码添加到我的子主题的style.css文件中以使其脱颖而出:

加载GIST B5EF5A731507D8A119DECC4391FAF7F2

注意:您可以在页面上有多个画布.只是不要忘记给他们不同的ID.

步骤7:直接使用JavaScript

使用paper.js

如果将任何Paperscript演示代码复制到Paper-example.js中，您可能会受到"未定义"错误的挫败感.我在这里告诉你，不幸的是，他们是预期的.

问题是WordPress不支持Paperscript，这意味着我们必须围绕这一点.我们需要直接使用javascript使用paper.js，如paper.js文档所示:http://perjs.org/tutorials/getting-started/using-javascript-directly/.

要这样做，所以您需要创建一个全局范围并定义其中的变量.