搜索

首页 >CMS教程 >WordPress >构建WordPress旋转木制插件：第3部分

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

Christopher Nolan
Christopher Nolan原创
2025-02-16 08:34:09735浏览

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

钥匙要点

  • >使轮播箭头起作用，使用wp_enqueue_script（）函数创建JavaScript文件并链接到WordPress，该函数放置在display_carousel（）函数条件中，以确保仅在显示旋转器时包含它。 >
    • >旋转木马的UL块水平移动以通过调整其左侧CSS属性来显示不同的项目；负左侧边缘将下一个项目的左侧与旋转木块的左侧对齐。
    • >创建一个函数，carousel_show_another_link（），以根据方向参数显示另一个项目（上一个项目的-1，下一个项目为1）;它计算出新项目的索引以显示并在移动UL块之前检查它是否存在。
  • 。
    • >在相应的箭头事件上创建并附加了两个函数，Carousel_previous_link（）和carousel_next_link（），并使用适当的参数调用carousel_show_another_link（）函数；在文档准备就绪时，通过将UL块的边距左侧属性初始化为0来阻止错误。
  • >
>没有样式，我们在本教程的第一部分中构建的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块。它连续包含我们的所有项目，因此我们可以通过设置其位置来水平移动以显示一个或另一个项目。请参阅下面已经在本教程的上一部分中看到的架构，以查看我们想做什么。

>

构建WordPress旋转木制插件：第3部分要移动它，我们将使用其左侧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中文网其他相关文章！

php JavaScript jquery css less html Integer Array if for while include require try Error using finally Property JS number function default dom this display position overflow margin animation ul li idea bug WordPress Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：All You Need to Know About the New WordPress Site Icon API下一篇：Handling POST Requests the WordPress Way

相关文章

查看更多