自定义Javascript在Wordpress中不起作用

如何解决自定义Javascript在Wordpress中不起作用

我的目的是为网格中的每个投资组合卡添加一个摘录（目前，这些摘录仅显示图像，标题和类别）。

我找到了一种将摘录插入卡中并迭代所有卡的方法，但是即使循环按预期方式工作（摘录每个迭代），摘录也不会插入所有卡中。如果我指定targetsArray的特定索引，则摘录仅插入一张卡中。我将这一行注释掉以供参考。

window.onload = function() {
    let targets = document.querySelectorAll('.entry-title');
    let newElem = document.createElement('p');
    let excerpt = 'This will be the excerpt...';
    newElem.innerHTML = excerpt;
    
    let targetsArray = [];
    
    for (let i = 0; i < targets.length; i++) {
      targetsArray.push(targets[i]);
    }
    
    targetsArray.forEach(target => {
      console.log(target);
      target.parentNode.insertBefore(newElem,target.nextSibling);
    });
    // targetsArray[1].parentNode.insertBefore(newElem,targetsArray[1].nextSibling);
    
  };

注意：如果您想知道为什么我没有使用简单的方法将节点列表转换为数组，那是因为它们没有用。

我尝试过

const targets = [...document.querySelectorAll(".entry-title")];

和...

Array.from(targets)

作为参考，这是我尝试对这些页面进行更改的页面 equipourkids.org

解决方法

我不知道您是否出于特定原因尝试使用纯JS进行操作，但是默认情况下，WordPress已加载jQuery（如果您未将其删除），那么使用jQuery进行操作应该比这简单得多

let targets = $('.entry-title');
let newElem = $('<p>This will be the excerpt...</p>')
        
targets.each(function (idx,item){
    $(item).parent().insertBefore(newElem);
});

我只是不明白您想根据您的HTML结构在何处插入这些摘录。应该在entry-info里面还是什么？