How to rename h1 text with javascript (on wordpress)
Question
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:
5 answers
solution1
1 ACCPTED 2020-05-08 18:07:44
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>
solution2
0 2020-05-08 17:59:00
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";
solution3
0 2020-05-08 18:14:45
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.
solution4
0 2021-10-19 22:36:47
Sometimes text can be replaced using pure CSS
See the collection of answers here:
How can I replace text with CSS?
Cons:
- Doesn't supported by all browsers, check your requirements and browser compatibility list.
- Old text will remain hidden, can be problem for some screen reader.
Pros:
- Sometimes you cannot inject your JavaScript directly.
solution5
-1 2020-05-08 18:13:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.