搜索
首页CMS教程WordPress构建WordPress旋转木制插件:第3部分

构建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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
wordpress怎么加评论框wordpress怎么加评论框Apr 20, 2025 pm 12:15 PM

在 WordPress 网站上启用评论功能,可以为访客提供参与讨论和分享反馈的平台。为此,请按照以下步骤操作:启用评论:在仪表盘中,导航至“设置”>“讨论”,并选中“允许评论”复选框。创建评论表单:在编辑器中,单击“添加块”并搜索“评论”块,将其添加到内容中。自定义评论表单:通过设置标题、标签、占位符和按钮文本来定制评论块。保存更改:单击“更新”以保存评论框并将其添加到页面或文章中。

wordpress怎么复制子站wordpress怎么复制子站Apr 20, 2025 pm 12:12 PM

如何复制 WordPress 子站?步骤:在主站创建子站。在主站克隆子站。将克隆导入目标位置。更新域名(可选)。分开插件和主题。

wordpress怎么写页头wordpress怎么写页头Apr 20, 2025 pm 12:09 PM

在WordPress中创建自定义页头的步骤如下:编辑主题文件“header.php”。添加您的网站名称和描述。创建导航菜单。添加搜索栏。保存更改并查看您的自定义页头。

wordpress评论怎么显示wordpress评论怎么显示Apr 20, 2025 pm 12:06 PM

WordPress 网站中启用评论功能:1. 登录管理面板,转到 "设置"-"讨论",勾选 "允许评论";2. 选择显示评论的位置;3. 自定义评论表单;4. 管理评论,批准、拒绝或删除;5. 使用 <?php comments_template(); ?> 标签显示评论;6. 启用嵌套评论;7. 调整评论外形;8. 使用插件和验证码防止垃圾评论;9. 鼓励用户使用 Gravatar 头像;10. 创建评论指

wordpress怎么上传源码wordpress怎么上传源码Apr 20, 2025 pm 12:03 PM

可以通过 WordPress 安装 FTP 插件,配置 FTP 连接,然后使用文件管理器上传源码。步骤包括:安装 FTP 插件、配置连接、浏览上传位置、上传文件、检查上传成功。

wordpress代码怎么复制wordpress代码怎么复制Apr 20, 2025 pm 12:00 PM

如何复制 WordPress 代码?从管理界面复制:登录 WordPress 网站,导航到目标位置,选择代码并按 Ctrl C (Windows)/Command C (Mac) 复制代码。从文件复制:使用 SSH 或 FTP 连接到服务器,导航到主题或插件文件,选择代码并按 Ctrl C (Windows)/Command C (Mac) 复制代码。

wordpress出现错误怎么办wordpress出现错误怎么办Apr 20, 2025 am 11:57 AM

WordPress 错误解决指南:500 内部服务器错误:禁用插件或检查服务器错误日志。404 未找到页面:检查 permalink 并确保页面链接正确。白屏死机:增加服务器 PHP 内存限制。数据库连接错误:检查数据库服务器状态和 WordPress 配置。其他技巧:启用调试模式、检查错误日志和寻求支持。预防错误:定期更新 WordPress、仅安装必要插件、定期备份网站和优化网站性能。

wordpress怎么关闭评论wordpress怎么关闭评论Apr 20, 2025 am 11:54 AM

如何在 WordPress 中关闭评论?特定文章或页面:在编辑器中取消选中“讨论”下的“允许评论”。整个网站:在“设置”->“讨论”中取消选中“允许发表评论”。使用插件:安装 Disable Comments 等插件禁用评论。编辑主题文件:通过编辑 comments.php 文件移除评论表单。自定义代码:使用 add_filter() 函数禁用评论。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

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

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

mPDF

mPDF

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

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

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