How to rename h1 text with javascript (on wordpress)

问题

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

The line of the title is:

回答1:

Like this

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

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

div[data-row=middle] h1

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"
  }  
})

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

Vanilla 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>

回答2:

To change the text of the h1 element in your example when the page loads, you can use:

window.addEventListener('load', event => {
  const h1Element = document.querySelector("#main-container .entry-content h1");
  h1Element.innerText = 'New H1 Text';
});

If you don't make the change to the H1 in the window load event callback, the element you're targeting likely won't be available in the DOM when you try to access it with document.querySelector.

回答3:

jQuery:

$('#main-container div[data-row="middle"] .entry-content h1').html('Your New Title');

Vanila JS:

var el = document.querySelector("#main-container div[data-row="middle"] .entry-content h1");
el.innerHTML= "Your New Title";

回答4:

Here is a simple example from W3 schools

<!DOCTYPE HTML>
<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>

If you notice, they add a unique id to the h1 tag. This way way you can access the tag directly.

https://www.w3schools.com/tags/att_id.asp

来源：https://stackoverflow.com/questions/61685066/how-to-rename-h1-text-with-javascript-on-wordpress

标签

javascript

html

wordpress

header