如何使用JavaScript重命名H1文本(在Wordpress上)

本文介绍了如何使用JavaScript重命名H1文本(在Wordpress上)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为任何单个页面的标题重命名h1文本，使用脚本可以吗?

I would like to rename a h1 text in the header for any single page, is it possible with a script?

标题行是:

推荐答案

类似

我包装了一个页面加载事件，然后使用最接近的已知选择器

I wrap in a page load event and then use the closest known selector

如果您有class ="titoloheader"，则该代码甚至比使用

If you have class="titoloheader" the code is even simpler than using

div[data-row=middle] h1

如果只想更改带有/articoli/的页面，则可以测试路径名:

If you want to change only on pages with /articoli/ you can test pathname:

 const url = new URL(location.href); 
 if (url.pathname.split("/").indexOf("articoli") !=-1) {
   document.querySelector("h1.titoloheader").innerText = "Hello"
  }  
})

如果要在page-id-X上进行更改，可以执行以下操作:

If you want to change on page-id-X, you can do this:

香草JS

const pageTitles = {
  "41": "Hello",
  "44": "Goodbye",
  "47": "Ciao",
  "3": "Arriverderci",
  "313": "Hey",
  "316": " Bye",
  "318": " This is silly",
  "50": "The end"
};

const changeHeader = () => {
  let id = [...document.body.classList] // all the classes of the body tag
    .filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id
  if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last -
  if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list
    document.querySelector("h1.titoloheader").innerText = pageTitles[id]; // change the header
  }
};

window.addEventListener("load", changeHeader); // when the page loads

<body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic">

  <div data-row="middle" data-columns="1">
    <div class="ct-container">
      <div data-column="middle">
        <div data-items="">
          <div class="ct-header-text " data-id="text">
            <div class="entry-content">
              <h1 class="titoloheader">Benvenuti</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

jQuery

const pageTitles = {
  "41": "Hello",
  "44": "Goodbye",
  "47": "Ciao",
  "3": "Arriverderci",
  "313": "Hey",
  "316": " Bye",
  "318": " This is silly",
  "50": "The end"
};

const changeHeader = () => {
  let id = [...document.body.classList] // all the classes of the body tag
    .filter(classStr => classStr.startsWith("page-id")); // find the one that starts with page-id
  if (id.length)[, , id] = id[0].split("-") // if found (an array) grab the last part after last -
  if (id && Object.keys(pageTitles).includes(id)) { // do we find that ID in the list
    $("h1.titoloheader").text(pageTitles[id]); // change the header
  }
};

$(document).ready(changeHeader);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <body class="home page-template-default page page-id-47 logged-in admin-bar no-customize-support ct-loading" data-link="type-1" data-forms="classic">
<div data-row="middle" data-columns="1">
  <div class="ct-container">
    <div data-column="middle">
      <div data-items="">
        <div class="ct-header-text " data-id="text">
          <div class="entry-content">
            <h1 class="titoloheader">Benvenuti</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这篇关于如何使用JavaScript重命名H1文本(在Wordpress上)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！