钥匙要点
- >使轮播箭头起作用,使用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来阻止错误。
- >
>我们将箭头添加到我们的旋转木马中,以允许用户在不同的项目之间导航,现在是时候让它们有用的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块。它连续包含我们的所有项目,因此我们可以通过设置其位置来水平移动以显示一个或另一个项目。请参阅下面已经在本教程的上一部分中看到的架构,以查看我们想做什么。
>

> 为了显示第二个项目,我们必须将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中文网其他相关文章!

为WordPress开发选择正确的集成开发环境(IDE) 十年来,我探索了WordPress开发的许多集成开发环境(IDE)。 纯粹的品种 - 从免费到商业,基本到FEA

本教程演示了使用面向对象的编程(OOP)原理构建WordPress插件,利用Dribbble API。 让我们在保留原始含义和结构的同时完善文本以清晰和简洁。 object-ori

将PHP数据传递给JavaScript的最佳实践:WP_LOCALIZE_SCRIPT和WP_ADD_INLINE_SCRIPT的比较 在PHP文件中将数据存储在静态字符串中是建议的练习。 如果在您的JavaScript代码中需要此数据,请合并

本指南演示了如何使用WordPress PDF插件在WordPress帖子和页面中嵌入和保护PDF文件。 PDFS为从目录到演示文稿提供了一种用户友好的,普遍访问的格式。 此方法ENS

WordPress对初学者来说容易上手。1.登录后台后,用户界面直观,简洁的仪表板提供所有必要功能链接。2.基本操作包括创建和编辑内容,所见即所得的编辑器简化了内容创建。3.初学者可以通过插件和主题扩展网站功能,学习曲线存在但可以通过实践掌握。

人们选择使用WordPress是因为其强大和灵活性。1)WordPress是一个开源的CMS,易用性和可扩展性强,适合各种网站需求。2)它有丰富的主题和插件,生态系统庞大,社区支持强大。3)WordPress的工作原理基于主题、插件和核心功能,使用PHP和MySQL处理数据,支持性能优化。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),