正文 

当前位置： 首页 > 知识 >

使用属性值为我的 wordpress 库中的每个图像添加自定义链接

     2023-05-09     67

关键词：

【中文标题】使用属性值为我的 wordpress 库中的每个图像添加自定义链接【英文标题】：Using an attribute value to add custom links for each images in my wordpres gallery 【发布时间】：2021-12-28 00:19:41 【问题描述】：

我在我的摄影网站上使用 Elementor Pro，我想为图库中的每张图片设置自定义链接。默认情况下，我只能为每个图像设置一个相同的全局链接，所以这不是很好。

事实上，我想设置一个自定义链接，将用户重定向到特定图像的商店页面。

我在网上找到了一些代码（感谢 elementhow！），它真的很接近我想要的，但我仍然需要更改一些东西。问题是必须手动将所有链接写入数组中，这很不方便（接近 100 个文件并且还在增长，如果我更改顺序，我必须重新排序链接等）。

这是我目前使用的代码：

<style>.e-gallery-itemcursor: pointer; </style>

<script>
document.addEventListener('DOMContentLoaded', function () 

var filteredImages = document.querySelectorAll('.e-gallery-item');

//Edit the links HERE
var links = [
'https://www.mywebsiteurl.com/product/product-name1/',
'https://www.mywebsiteurl.com/product/product-name2/',
'https://www.mywebsiteurl.com/product/product-name3/',
'https://www.mywebsiteurl.com/product/product-name4/',
];

var _loope = function _loope(i) 
filteredImages[i].addEventListener('click', function () 
location = links[i];
);
;

for (var i = 0; i < filteredImages.length; i++) 
_loope(i);


);

</script>

我想在算法中使用一个属性值来自动为每个图像生成链接。我有这个过程，但我不知道如何编码......

这是一张图片的代码，我可以在“alt”中设置我想要的值。

&lt;div class="e-gallery-image elementor-gallery-item__image e-gallery-image-loaded" data-thumbnail="......" data-width="1024" data-height="768" alt="product-name";"&gt;&lt;/div&gt;

我想使用“alt”属性为每个文件创建一个唯一的 url，格式如下：

'https://www......com/product/product-name/'

“product-name”将采用每张图片的“alt”属性的值。

我尝试更改这部分代码（通过尝试使用 filtersImages[i].getAttributes 获取属性值来替换“links[i]”）但没有成功...

    var _loope = function _loope(i) 
filteredImages[i].addEventListener('click', function () 
location = links[i];
);
;

有人可以给我一些关于如何做到这一点的提示吗？我花了 2 年时间没有​​编码，所以我有点生疏了......

【问题讨论】：

【参考方案1】：

我认为这可以满足您的需求，正如您已经完成的那样，您可以使用 class 循环浏览每个图像链接。

您可以使用.attr()函数获取alt的值，然后替换链接的href值。

演示

// Cycle through each image using common class
$(".e-gallery-image").each( function() 

  // Get value of 'alt' for clicked item
  alt = $(this).attr("alt");

  // Update href value
  $(this).attr("href", "https://www.mywebsiteurl.com/product/" + alt );
  
);


// Prove that its worked
$(".e-gallery-image").click( function() 

  // Confirm all is correct
  console.log($(this).attr("href"));
  
  // Assign url to window
  location.href = $(this).attr("href");

);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="e-gallery-image" href="test.com" >Product 1</div>
<div class="e-gallery-image" href="test.com"  >Product 2</div>
<div class="e-gallery-image" href="test.com"  >Product 3</div>
<div class="e-gallery-image" href="test.com"  >Product 4</div>
<div class="e-gallery-image" href="test.com"  >Product 5</div>

【讨论】：

感谢您的快速回答！但我认为这在我的情况下不起作用，因为我的画廊元素中没有“href”属性。我想我需要在querySelectorAll('.e-gallery-item') 挂钩的每个选择器上使用addEventListener('click') 来添加自定义链接... 已更新，如果您尝试一下应该可以使用 嘿！感谢更新 ！为每张图片添加了href，但是当我单击它们时没有任何反应... :(【参考方案2】：

其实很简单。我试图定位一个父元素并且它有效！如果有人感兴趣，这是我使用的代码：

document.addEventListener('DOMContentLoaded', function () 
    var filteredImages = document.querySelectorAll('YOUR_SELECTOR');
    var _loope = function _loope(i) 
        filteredImages[i].addEventListener('click', function() 
            location = "YOUR_WEBSITE_URL" + filteredImages[i].querySelector("YOUR_SELECTOR").getAttribute("alt");
        );
    ;

    for (var i = 0; i < filteredImages.length; i++) 
        _loope(i);
    
);

【讨论】：

如何在 wordpress 媒体库中显示自动生成的 PDF 缩略图？

】如何在wordpress媒体库中显示自动生成的PDF缩略图？【英文标题】：HowtodisplayautomaticallygeneratedPDFthumbnailsinwordpressmedialibrary?【发布时间】：2020-11-0703:27:24【问题描述】：我在Wordpress媒体库中显示PDF的缩略图时遇到问题（显示PDF时... 查看详情

在 foreach 循环中使用媒体 ID 获取 WordPress 图像

】在foreach循环中使用媒体ID获取WordPress图像【英文标题】：GetWordPressimagesusingmediaIDinaforeachloop【发布时间】：2015-06-1107:41:00【问题描述】：我已经看到如何获取媒体库中的所有图像，反之亦然，从帖子库中获取图像，精选缩略图... 查看详情

如何使用 Promtail / Loki - AlertManager 为我的日志中的每个错误发送警报？

】如何使用Promtail/Loki-AlertManager为我的日志中的每个错误发送警报？【英文标题】：HowtosendalertforeveryerrorinmylogsusingPromtail/Loki-AlertManager?【发布时间】：2020-09-2613:32:58【问题描述】：我正在使用Promtail+Loki来收集我的日志，但我不... 查看详情

联系表 7 中的占位符 - Wordpress

】联系表7中的占位符-Wordpress【英文标题】：PlaceholderinContactform7-Wordpress【发布时间】：2014-08-1004:15:33【问题描述】：我正在为我的客户创建一个网站，但我遇到了问题。我已经使用ContactForm7在wordpress中制作了一个联系表单。这... 查看详情

在python中使用链接库中的方法时出现属性错误

】在python中使用链接库中的方法时出现属性错误【英文标题】：Attributeerrorwhileusingmethodsfromlinkedlibrariesinpython【发布时间】：2014-01-0107:37:28【问题描述】：我正在尝试在我的python代码中使用一些C++方法，并且我正在使用ctypes库。... 查看详情

需要在我的照片库中的一个窗口中将所有照片显示为缩略图

...需要从显示的窗口中选择照片并将所选项目保存到AppBundle使用用户给定的名称。可以告诉我正确的方法，如果可能的话，任何示 查看详情

为啥在尝试使用库中的类时出现“无法解析符号”？

】为啥在尝试使用库中的类时出现“无法解析符号”？【英文标题】：WhydoIget"Cannotresolvesymbol"whentryingtouseclassfromlibrary?为什么在尝试使用库中的类时出现“无法解析符号”？【发布时间】：2018-12-1611:09:50【问题描述】：简... 查看详情

如何使用 JQuery.ajax 从每个 WordPress 帖子中获取缩略图附件？

】如何使用JQuery.ajax从每个WordPress帖子中获取缩略图附件？【英文标题】：HowtouseJQuery.ajaxtogetthethumbnailattachmentfromeachWordPresspost?【发布时间】：2011-10-1300:40:41【问题描述】：我正在尝试获取显示每个WordPress帖子的缩略图附件的JSON... 查看详情

无法在 Android Retrofit 库中为我的课程创建转换器

...ary【发布时间】：2015-11-2819:21:40【问题描述】：我正在从使用Volley迁移到Retrofit，我已经有了之前用于将JSONObject响应转换为实现gson注释的对象的gson类。当我尝试使用改造发出http获取请求时，我的应用程序 查看详情

无法让 ngrok 为我的 WordPress 网站提供服务

】无法让ngrok为我的WordPress网站提供服务【英文标题】：CannotgetngroktoserveupmyWordPresssite【发布时间】：2015-10-0618:00:51【问题描述】：我在OS/X上使用Mamp免费版安装了一个简单的wordpress。版本2.0.19/2.0.19网页界面h#tp#//127.0.0.1:4040转发h#... 查看详情

替换 SumoSelect 库中的选择选项

...ibrery【发布时间】：2019-03-1813:05:03【问题描述】：我正在使用数组为我的selects实现SumoSelect库。例如，我有这个包含汽车品牌的数组varvehicleBrands=[brand:"Honda",brand:"toyota",brand:"hyundai"]我正在使用这个数组来填写 查看详情

外部库中的“TS2729 [错误]：在其初始化之前使用的属性‘边界’”

】外部库中的“TS2729[错误]：在其初始化之前使用的属性‘边界’”【英文标题】："TS2729[ERROR]:Property\'boundary\'usedbeforeitsinitialization"inexternlibrary【发布时间】：2021-07-1301:01:03【问题描述】：今天将我的deno版本更新到1.9后... 查看详情

仅使用 boost 库中的属性树

】仅使用boost库中的属性树【英文标题】：Useonlypropertytreefromboostlibraries【发布时间】：2018-08-1911:00:53【问题描述】：我需要使用boost库中的属性树来解析一个大型XML文件。如何只使用它们而不包括整个boost库？【问题讨论】：***.c... 查看详情

我可以为我的社交网站中的每个用户创建每个表吗？

】我可以为我的社交网站中的每个用户创建每个表吗？【英文标题】：Canicreateeachtableforeachuserinmysocialnetworkingsite?【发布时间】：2011-02-0121:15:39【问题描述】：我正在创建一个功能类似于Facebook的社交网站。我想从我的数据库的架... 查看详情

Wordpress 儿童主题问题

】Wordpress儿童主题问题【英文标题】：Wordpresschildthemeissue【发布时间】：2018-10-0715:32:46【问题描述】：我正在为我的Wordpress主题使用自制的子主题。因为我有很多文件，所以我在我的子主题中添加了一些文件夹并更改了functions.ph... 查看详情

WordPress中的布局更改

】WordPress中的布局更改【英文标题】：LayoutchangesinWordPress【发布时间】：2021-09-0502:26:25【问题描述】：我正在为我的WordPress网站制作一个联系表。当我在标准网页上对其进行测试时，它看起来像这样：但是当我将代码粘贴到WordPr... 查看详情

在没有 WordPress 插件的情况下重新生成缩略图

】在没有WordPress插件的情况下重新生成缩略图【英文标题】：RegeneratethumbnailswithoutaWordPressplugin【发布时间】：2021-08-0120:28:14【问题描述】：我正在开发我的第一个WordPress插件，并且我添加了新的图片尺寸，用户可以选择这些尺... 查看详情

静态库中的 CoreData 自动迁移

...【发布时间】：2014-02-2415:00:28【问题描述】：我目前正在使用MagicalRecord将数据库存储在我的iOS应用程序中。我将核心数据xcdatamodeld存储在一个静态库中，该库是我的应用程序的子项目。应用程序可以很好地读取/写入数据库。我... 查看详情