构建WordPress旋转木制插件：第3部分-＆＃＆按-PHP中文网

构建WordPress旋转木制插件：第3部分

钥匙要点

>使轮播箭头起作用，使用wp_enqueue_script（）函数创建JavaScript文件并链接到WordPress，该函数放置在display_carousel（）函数条件中，以确保仅在显示旋转器时包含它。 >
。
>

>没有样式，我们在本教程的第一部分中构建的WordPress旋转木马只是项目列表，但从某种意义上来说，它至少是有用的。我们在本教程的第二部分中添加的CSS增强了轮播的显示，但是现在问题是只有第一项向用户显示，并且无法显示其余项目。

>我们将箭头添加到我们的旋转木马中，以允许用户在不同的项目之间导航，现在是时候让它们有用的JavaScript。

>在本教程的延续中，我们将学习如何正确包含我们的脚本，然后我们编写一个脚本，该脚本将启动一个函数，该函数在用户击中箭头时会为项目动画。

>链接JavaScript文件

>在这里，我们将使用JavaScript使我们的箭头有用。至于CSS部分，创建一个新文件。我称其为carousel.js，并将其放在插件文件夹的根部。

我们需要向WordPress表示我们正在使用JavaScript文件。为此，我们将使用wp_enqueue_script（）函数。

前两个参数与WP_ENQUEUE_STYLE（）相同。然后我们找到一个数组。此数组列出了依赖项，我们的脚本需要工作的脚本。我选择使用jQuery来解决浏览器兼容性问题，因此我向WordPress表示我想使用它：正如我们在文章中看到的有关WordPress中的脚本（'jquery'的脚本）中所见，“ jQuery”是WordPress的公认价值。

。

第四参数是脚本的版本编号。这里不是很重要（有关更多信息，请参见之前链接的文章），但是我们需要使用最后一个参数并将其设置为true，以便我们的脚本将包含在页脚中。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

登录后复制

选择页脚而不是标题的优点是，我们可以在任何地方使用WP_ENQUEUE_SCRIPT（）。与WP_ENQUEUE_STYLE（）一样，我们没有在WP_head（）之前使用它的约束。然后，我们只有在必要时才能够包含我们的脚本：仅当我们显示旋转木马时。

>放置wp_enqueue_script（）的最佳场所，因此在我们的display_carousel（）函数的条件下。我们只有在有项目显示时才显示旋转木马，因此我们将包含具有相同条件的脚本。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

登录后复制

现在我们准备好编辑我们的JavaScript文件。

我们想做什么？

>

首先，我们将所有代码封装在函数中。为了防止与其他库发生冲突，WordPress禁用在jQuery中使用$。我们可以通过此功能再次启用它。

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

登录后复制

即使没有修改我们的HTML代码，也有许多不同的方法来制作轮播。在这里，我建议您移动UL块。它连续包含我们的所有项目，因此我们可以通过设置其位置来水平移动以显示一个或另一个项目。请参阅下面已经在本教程的上一部分中看到的架构，以查看我们想做什么。

要移动它，我们将使用其左侧CSS属性进行播放。默认情况下，它设置为0，因此“显示”第一个项目。第一个项目足够大，可以填充旋转频率块和第二个项目，而第二个项目旁边的第二项则无法看到溢出属性。

> 为了显示第二个项目，我们必须将UL块移到左侧，以便将第二个项目的左侧与旋转木马块的左侧对齐。这可以通过负左侧边缘来实现。为了测试我们需要使用的值，我们可以尝试一些CSS代码（我们不需要它，我们就立即删除了它）。

这条简单的线应该得到解释。如果测试它，则应该看到未显示第一项，而是看到第二个项目。您可以测试另一个值，以更好地了解发生了什么。使用-50px，我们将UL块50像素移向左侧。我在上面的CSS中向您展示的值，因为轮播的宽度为900像素，我可以显示第二个项目，值为-900px。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

登录后复制

但是，我们可以使用百分比。优点是该百分比相对于容器。在这里，“ 100％”等于“ 900像素”，因此，如果我们给出-100％的值，我们隐藏了第一个项目并显示第二个项目。使用百分比使您可以修改容器的宽度，而无需修改边距 - 左属性的值。

显示另一个项目的功能

首先，我们将编写将显示另一个项目的功能。这个将接受一个参数，方向。如果我们要显示上一项，则必须将此方向设置为-1，并且，如果要显示下一个项目，则必须将其设置为1。>。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

登录后复制

我们要去哪里？

>

要确定要分配给边缘左侧的值，我们需要知道我们的位置。有多种可能的方法可以实现这一目标，我选择了一种仅使用边距左属性的当前值的方法。

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

登录后复制

第一行检索UL块。正如我们稍后将重复使用的那样，将其存储在变量中是一个好主意。第二行似乎有些怪异。目的是存储代表当前显示的项目的整数。第一个项目将以0为代表，第二项by 1等。

> 为了实现这一目标，我们获得了边距左侧属性的当前值。问题在于，此值大约是-200％，我们希望一个数字：要删除“％”，我们使用ParseInt（）函数将值转换为整数（例如'-200％'变为-200）。由于我们想要一个积极的整数，我们添加了一个“减”标志（例如，从-200获得200个），然后除以100，以获取所需的价值（例如2，而不是200）。

>您可能会想知道为什么我们不使用UL.CSS（'Margin-Left'）获取边距左侧属性的价值。实际上，.css（）是一种jQuery方法，在我们的背景下，似乎是一个更好的主意。问题是这种方法不会给我们一个百分比。使用与上述相同的值，如果当前项目是第三个项目，则保证金左派属性设置为-200％，而.css（）方法将返回-1800px。要使用像素中的此值来计算当前项目，然后我们需要使用大容器的宽度，我更喜欢仅使用UL块。

。

>现在我们可以计算出要显示的项目的索引，这要归功于我们功能的参数中给出的方向。

新项目是否存在？

在显示新项目之前，我们需要测试它是否存在。如果new_link小于或等于-1，或者大于或等于项目总数，则它不存在，我们无法显示，因此移动UL块不是一个好主意。请注意，此测试似乎是多余的，因为当我们无法进一步走时不会显示箭头，但是确保实际上可以完成某件事总是一个好主意。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

登录后复制

首先，我们获得项目总数，这是我们列表中LI标签的数量。这个数字对于我们上面描述的条件很有用，因为我们想要一个不得大于或等于项目数量的正整数（不要忘记我们以0而不是1开始）。

显示新项目

最后，可以通过一条线实现块移动。我们必须计算边缘左侧的新值。为此，让我们考虑一下。对于每个“通过”项目，我们的宽度为100％旅行。这样，保证金的新价值是我们刚刚计算的新项目位置的100倍，而左符号则是左侧的符号。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

登录后复制

>我选择在这里使用jQuery动画，但是您可以自由创建自己的动画，甚至修改了此设置。

一些更实际用途的别名

>现在，我们将每次单击箭头上单击箭头时都会创建功能。这些功能不需要大量的代码，因为他们唯一要做的就是将Carousel_show_another_link（）函数使用正确的参数调用。以下是当我们单击“上一个”箭头时称为函数的代码。

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

登录后复制

请注意返回false;为了防止我们的箭头的默认行为（别忘了它们是链接）。这样，用户单击箭头时，URL不会更改。

显示“下一个”项目的函数完全相同，但1作为carousel_show_another_link（）的参数为1。我选择称其为carousel_next_link（）。

附加事件

>最后，我们必须通过将正确的事件附加到正确的元素来使这些功能有用。我们将在一个新功能中执行此操作，当我们确定创建元素时调用：加载文档时。

我们要将carousel_previous_link（）函数附加到每个“以前”箭头。使用旋转木马的DOM树，我们可以轻松地检索它们，就像我们想在CSS中造型时检索它们一样。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

登录后复制

然后，我们可以以相同的方式将carousel_next_link（）函数连接到右箭头（#carousel ul a.carousel-next）。

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

登录后复制

>您可以测试此代码，但应该出现一个错误：carousel_show_another_link（）函数首次调用我们的UL块的CSS属性边距 - 左侧不存在，因此当我们尝试检索时会发生错误它的值。

为了防止此错误，我们可以初始化此属性的值。仍在文档准备就绪时调用的函数（例如，在附加事件之前），添加以下行。

>将UL块的边距左属性设置为0，为默认值。现在将存在此属性，而无需移动块。

>您现在可以单击箭头，旋转旋转木马已完成！

总结

<span>function carousel_show_another_link(direction) {
</span><span>}</span>

登录后复制

在本教程中，我们使用WordPress Links Manager API浏览了Carousel插件。这是使用此API的一个很好的例子，但这也是查看如何将PHP，HTML，CSS和JavaScript组合到WordPress插件中的好方法。

在结束时，我会说，即使我们保留了生成的HTML代码，也可以选择许多不同的方法来构建转型旋转木马：我们可以选择不同的样式或编写脚本的不同方法。实际上，我们在这里写的脚本只是一个示例，我们可以编写一个完全不同的结果。

>您可以自己决定是否喜欢我们在此处使用的代码。如果没有，请不要犹豫编辑！

即使您喜欢我们在这里所做的事情，您仍然可以增强结果。例如，访问者必须击中箭头才能查看其他项目：您可以尝试使用function settimeout（）。

如果您想查看完成的代码，或者自己尝试插件，则可以在此处下载。

以上是构建WordPress旋转木制插件：第3部分的详细内容。更多信息请关注PHP中文网其他相关文章！