H1 titel "importeren" via custom class

[vacances2000]

Beste,
Ik zoek naar een manier om via een on-page custom class de h1 titel te importeren van de webpage ? Enig idee of dit via css kan, javascript ?

Vele dank.

Jonathan

 

[Aar]

Wat wil je precies bereiken?

 

[Gouwepeer]

Gaat het om jouw Wordpress site?

on-page custom class de h1 titel te importeren van de webpage

Een class is via de CSS geregeld. Graag iets meer informatie zodat we kunnen helpen.
Indien jij een class van jouw wordpress site voor een losstaande pagina wilt gebruiken kan je naar een externe stylesheet (de CSS van jouw WP site) gebruiken, maar het is mij nu niet duidelijk wat nou precies jouw bedoeling is.

 

[vacances2000]

Beste allen,
Ik zoek een zo simpel mogelijke oplossing voor het volgende:
Vanaf de product page kan een email / offerteaanvraag verstuurd worden. In de email zou ik graag een aatal gegevens van deze product page dynamish willen overnemen waaronder de h1 titel zodat ik weet in de email op welk product de klant reageert.

Deze code kan in een snippet geplaatst worden of nog beter de h1 titel wordt via deze code wordt geplaatst in het custom class veld van de plugin .

Indien verdere vragen, hoor ik het wel.

Vg
Jonathan

 

[Aar]

Een WordPress oplossing? Of in vanilla PHP?

 

[vacances2000]

Een WordPress oplossing? Of in vanilla PHP?

Liefst wordpress idd

 

[vacances2000]

Gaat het om jouw Wordpress site?

Een class is via de CSS geregeld. Graag iets meer informatie zodat we kunnen helpen.
Indien jij een class van jouw wordpress site voor een losstaande pagina wilt gebruiken kan je naar een externe stylesheet (de CSS van jouw WP site) gebruiken, maar het is mij nu niet duidelijk wat nou precies jouw bedoeling is.

Idd, mijn site

 

[Gouwepeer]

Vanaf de product page kan een email / offerteaanvraag verstuurd worden. In de email zou ik graag een aatal gegevens van deze product page dynamish willen overnemen waaronder de h1 titel zodat ik weet in de email op welk product de klant reageert.

De simpelste oplossing is een link zoals <a href="mailto:info@mijnWordpressSite.nl?subject=Naam van artikel">Klik hier om een mail te sturen</a> zodat in de mail automatisch een onderwerp zal worden geplaatst. Zo'n link kan je voor elke artikel apart aanmaken maar je kan dit ook via php of met javascript automatisch laten aanmaken. Mogelijk heeft Wordpress zelf ook een plugin waarmee dit mogelijk is.

 

[vacances2000]

@Gouwepeer Dank voor je antwoord. Ik zoek toch echt een stukje code (geen plugin) die ik in een snippet kan plaatsen of nog beter in een custom class. Zoals je wellicht weet laten sommige plugins het toe om een custom class toe te voegen. Zie afbeelding.

De bedoeling is de H1 titel / productnaam dynamisch over te nemen net als dat je dat kunt doen met heading in Elementor en dan dynamisch de h1 titel selecteren van wordpress.

Met x 100 producten en nog vele toe te voegen, wil je dit liever niet manueel doen. Ik vermoed dat het iets van php of css/html zal zijn.

Vg.

 

[Gouwepeer]

Ik zoek toch echt een stukje code

Hopelijk kan jij hier iets mee:
Onderstaande script heeft een link waarmee het mailprogramma van de bezoeker automatisch wordt geopend, jouw mailadres gelijk als ontvanger staat ingesteld en als onderwerp de tekst van de <h1> tags over neemt. Zorg hierbij wel dat elk artikel binnen eigen <div> tags staan:

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".email-link").forEach(link => {
                link.addEventListener("click", function (event) {
                    event.preventDefault(); // Voorkom de standaardactie

                    let parentDiv = this.closest("div"); // Zoek de dichtstbijzijnde <div>
                    let subject = parentDiv.querySelector("h1")?.textContent.trim() || "Geen onderwerp"; // Haal de <h1>-tekst op

                    let email = "info@jouwemailadres.nl";  //pas hierin het emailadres aan naar het gewenste adres
                    let mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}`;

                    window.location.href = mailtoLink; // Open de e-maillink
                });
            });
        });
    </script>

In deze script moet je uiteraard wel het emailadres aanpassen.
Als voorbeeld heb ik 3 artikelen in de html gezet:

<div>
    <h1>Product 1</h1>
    <p>Dit is een beschrijving over het 1e product.</p>
    <a href="#" class="email-link">Stuur een e-mail met de vraag over dit product</a>
</div>

<div>
    <h1>Product 2</h1>
    <p>Dit is een beschrijving over het 2e product.</p>
    <a href="#" class="email-link">Stuur een e-mail met de vraag over dit product</a>
</div>

<div>
    <h1>Product 3</h1>
    <p>Dit is een beschrijving over het 3e product.</p>
    <a href="#" class="email-link">Stuur een e-mail met de vraag over dit product</a>
</div>

Het js zal bij het mailen over het 3e product product 3 als onderwerp in de mail zetten. De tekst tussen de <h1> tags geeft dus gelijk het onderwerp in de mail aan.
In deze online editor kan je het voorbeeld van de code bekijken en wijzigen om het effect daarvan te zien.