Willkommen beim WP Wegerl.at 'Lesemodus' + Tastaturnavigation!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus sowie die Tastaturbedienung.
WP Wegerl.at: Einzigartige Designs, optimiert für das Nutzererlebnis.
Individuelle Felder, CSS JS gezielt
smilies.4-user.de
@EWP, Plug-in und WordPress-Tipps

CSS und JS gezielt nutzen:
Individuelle Felder; Code per ID/Slug

Lesedauer so 10 Min.
Lernzeit ein wenig mehr Edit Icon 2024 Juli Calendar Icon 2024-Juli
Illustration Ramdlon
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.



Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.



Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.



Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.



Bei der Entwicklung individueller Beiträge oder Seiten kann es sinnvoll sein, spezifische CSS- und JavaScript-Codeabschnitte nur bei Bedarf zu laden, um die Leistung der Website zu optimieren. In diesem Beitrag zeigen wir, wie man mit "Individuellen Feldern" für einzelne Beiträge und Seiten gezielt CSS- und JavaScript-Code einfügen kann. Außerdem erläutern wir, wie das Laden von CSS- und JavaScript-Code per ID oder Slug funktioniert. Diese Methoden bieten Flexibilität und eine effiziente Möglichkeit, spezifische Anpassungen vorzunehmen, ohne die gesamte Website zu beeinflussen.

Das ist ein Beitrag im Zusammenhang: WordPress: 'Individuelle Felder'.

A) Durch 'Individuelle Felder' CSS und JS gezielt anwenden

Um individuelles CSS und JavaScript für einzelne Seiten oder Beiträge zu verwenden, können wir den WordPress-Editor nutzen. Die 'Individuellen Felder' bieten sich dazu an, um benutzerdefinierten CSS- und JS-Code direkt in diese Felder einzugeben. Diese Methode verwendet benutzerdefinierte Felder (Custom Fields) und fügt den Code direkt in den Beitrag oder die Seite ein. Sicherheitshinweis: Achte darauf, dass der Code sicher ist und keine potenziellen Sicherheitslücken enthält. Unsichere Eingaben können dein WordPress-Setup anfällig für Angriffe machen.

  1. Code in der functions.php einfügen und
  2. 'Individuelles-Feld' erstellen und hinzufügen.

1. Code in der functions.php einfügen

Es sind zwei PHP-Codes zur Wahl.

  • Der erste fügt das JS direkt in den HTML-Code ein, was Sicherheitsrisiken birgt, insbesondere durch XSS-Angriffe.
  • Der zweite Code verwendet wp_register_script, wp_enqueue_script und wp_add_inline_script, um den JavaScript-Code sicher und standardkonform hinzuzufügen.

Den folgenden Code in die functions.php des Child-Themes einfügen.

/* ===  CSS und JS gezielt einsetzen – Individuelle Felder === */

function enqueue_custom_css_js() {
    if (is_single() || is_page()) {
        global $post;
        $custom_css = get_post_meta($post->ID, 'custom_css', true);
        $custom_js = get_post_meta($post->ID, 'custom_js', true);

        if (!empty($custom_css)) {
            echo '<style>' . esc_html($custom_css) . '</style>';
        }

        if (!empty($custom_js)) {
            add_action('wp_footer', function() use ($custom_js) {
                echo '<script type="text/javascript">' . $custom_js . '</script>';
            });
        }
    }
}
add_action('wp_head', 'enqueue_custom_css_js', 100);

/* = Ende CSS und JS gezielt einsetzen – Individuelle Felder = */
  1. Benutzerdefinierte Felder abrufen:
    • get_post_meta($post->ID, 'custom_css', true) und get_post_meta($post->ID, 'custom_js', true) rufen die Werte der benutzerdefinierten Felder custom_css und custom_js für den aktuellen Beitrag oder die Seite ab.
  2. CSS-Code einbinden:
    • Wenn custom_css nicht leer ist, wird der CSS-Code innerhalb eines <style>-Tags direkt im <head>-Bereich der Seite eingefügt.
  3. JavaScript-Code einbinden:
    • Wenn custom_js nicht leer ist, wird ein wp_footer-Hook verwendet, um den JavaScript-Code am Ende der Seite innerhalb eines <script>-Tags einzufügen.

Sicherheitsaspekte

Die Funktion esc_html() schützt den CSS-Code vor schädlichen HTML-Tags und -Attributen, was dazu beiträgt, XSS-Angriffe (Cross-Site Scripting) zu vermeiden. Dies ist besonders wichtig, da der CSS-Code direkt in den <style>-Tag eingebettet wird.

Für JavaScript ist esc_html() nicht geeignet, da JavaScript-Code nicht auf dieselbe Weise behandelt werden kann wie CSS-Code. Stattdessen wird der JavaScript-Code direkt als Inline-Skript im Footer eingefügt. Dies bedeutet:

  1. Inline-Skripte im Footer:
    • Inline-JavaScript im Footer hat den Vorteil, dass es das Rendern der Seite nicht blockiert und erst geladen wird, nachdem der gesamte HTML-Inhalt geladen ist.
  2. Sicherheitsaspekte:
    • Da esc_html() für JavaScript nicht verwendet werden kann, liegt die Sicherheit des JavaScript-Codes in der Verantwortung des Entwicklers. Es ist wichtig, sicherzustellen, dass der eingegebene JavaScript-Code keine Sicherheitsrisiken birgt.
  3. Empfohlene Praxis:
    • Für zusätzliche Sicherheit und bessere Wartbarkeit kann es sinnvoll sein, JavaScript-Code in externen Dateien zu speichern und diese Dateien über WordPress-Methoden einzubinden. Dies reduziert die Sicherheitsrisiken und erleichtert die Verwaltung des Codes.

Zusammengefasst: Während esc_html() den CSS-Code schützt, ist es bei JavaScript wichtig, sichere Codepraktiken zu beachten und bei Bedarf externe Dateien zu verwenden, um zusätzliche Sicherheit zu gewährleisten.

Sicherheitsverbesserungen

Der Hauptunterschied zwischen den beiden Versionen liegt in der Handhabung des JavaScript-Codes.

  1. Sicheres Hinzufügen von JavaScript:
    • Ursprünglicher Code: Der JavaScript-Code wurde direkt in den HTML-Code eingefügt, was Sicherheitsrisiken birgt, insbesondere durch XSS-Angriffe.
    • Verbesserter Code: Verwendet wp_register_script, wp_enqueue_script und wp_add_inline_script, um den JavaScript-Code sicher und standardkonform hinzuzufügen.
function enqueue_custom_css_js() {
    if (is_single() || is_page()) {
        global $post;
        $custom_css = get_post_meta($post->ID, 'custom_css', true);
        $custom_js = get_post_meta($post->ID, 'custom_js', true);

        if (!empty($custom_css)) {
            echo '<style>' . esc_html($custom_css) . '</style>';
        }

        if (!empty($custom_js)) {
            $handle = 'custom-js-' . $post->ID;
            wp_register_script($handle, '');
            wp_enqueue_script($handle);
            wp_add_inline_script($handle, $custom_js);
        }
    }
}
add_action('wp_head', 'enqueue_custom_css_js', 100);

Warum dieser Code sicherer ist:

  1. Inline-Scripting vermeiden:
    • Verbesserter Code: Durch die Nutzung von wp_add_inline_script wird der JavaScript-Code nicht direkt im HTML ausgegeben, sondern als Teil des WordPress-Skript-Managements behandelt. Dies verhindert, dass schädlicher Code direkt auf der Seite platziert wird.
  2. Standardkonformität:
    • Verbesserter Code: Die Verwendung von wp_register_script und wp_enqueue_script stellt sicher, dass das JavaScript korrekt in die Warteschlange aufgenommen wird, was Konflikte mit anderen Plug-ins und Themes verhindert.
  3. Einfache Wartung und Erweiterung:
    • Verbesserter Code: Der Umgang mit Skripten über die WordPress-Funktionen erleichtert zukünftige Änderungen und Erweiterungen des Codes.

Der verbesserte Code bietet eine sicherere und robustere Methode zum Einfügen von JavaScript in deine WordPress-Seiten, indem er den JavaScript-Code nicht direkt in den HTML-Code schreibt, sondern die WordPress-eigenen Funktionen zur Verwaltung und Einreihung von Skripten verwendet.

Für weitere Informationen und Anleitungen zur Verwendung von JavaScript in externen Dateien, siehe den eingangs genannten Beitrag.

2. 'Individuelles-Feld' erstellen und hinzufügen

Als Nächstes können wir die individuellen Felder im WordPress-Editor hinzufügen:

  1. Einen Beitrag oder eine Seite im WordPress-Editor öffnen.
  2. Nach unten zum Abschnitt 'Individuelle Felder' scrollen.
  3. Zwei neue Felder hinzufügen:
    • custom_css für benutzerdefiniertes CSS
    • custom_js für benutzerdefiniertes JavaScript
  4. Im Feld "Wert" ist der erwünschte Code einzugeben.

WordPress 'Individuelles Feld'

Falls die 'Individuelle Felder' nicht sichtbar sind, können diese im Editor rechts oben unter "Ansicht anpassen" Bildschirm-Elemente angehakt werden. Beispiel: Der Name (1) custom_css geht aus dem PHP-Code hervor, der Wert (2) ist das erwünschte CSS und mit Klick auf "Individuelles Feld hinzufügen" (3) wird das 'Individuelle Feld' erstellt. Nach der Erstellung kann das 'Individuelle Feld' nach Bedarf aktualisiert oder gelöscht werden.

Mit 'Individuelle Felder' können nun gezielt CSS und JavaScript für einzelne Beiträge und Seiten eingebunden werden. Dies gibt Flexibilität für spezifische Anpassungen, ohne globale Änderungen vornehmen zu müssen.

Mit individuellem Code –
kreative Freiheit auf jeder Seite,
dabei stets die Sicherheitsaspekte im Blick.

Danke an ChatGPT, das war’s auch schon! – Na ja, es hat ein wenig gedauert, bis alles funktionierte, aber wir haben es gern getan.

B) Code per ID oder Slug

  • JS und CSS im WordPress-Editor & gezielte Alternativen.

Im folgenden Abschnitt geht es um die Möglichkeiten und Sicherheitsaspekte beim Einfügen von JavaScript und CSS direkt im WordPress-Editor. Es wird erläutert, warum das direkte Einfügen von JavaScript im Editor problematisch ist und welche Maßnahmen WordPress ergreift, um die Sicherheit der Website zu gewährleisten. Darüber hinaus werden alternative Methoden vorgestellt, um spezifische Anforderungen zu erfüllen und gezielten Code-Einsatz zu ermöglichen, indem IDs und Klassen verwendet werden, die WordPress für einzelne Seiten und Beiträge generiert. Diese Ansätze helfen, den Code präzise und sicher anzuwenden.

Was ist eine ID? – Eine ID (Identifikationsnummer) ist eine eindeutige Zahl, die von WordPress automatisch jeder Seite und jedem Beitrag zugewiesen wird. Diese Zahl dient dazu, Inhalte intern eindeutig zu identifizieren und auf sie zuzugreifen. Die ID ist in der URL der Bearbeitungsseite oder im Beitrags- und Seitenübersichtsbildschirm. Zum Beispiel in der URL www.deineseite.de/wp-admin/post.php?post=123&action=edit ist die ID 123.

Weiteres zu IDs im Beitrag IDs und Classen in WordPress.

Was ist ein Slug? – Ein Slug ist der Teil der URL, der eine bestimmte Seite oder einen bestimmten Beitrag eindeutig identifiziert. Er wird automatisch von WordPress generiert, kann aber auch manuell angepasst werden, um die Lesbarkeit und SEO-Freundlichkeit zu verbessern. Beispielsweise ist in der URL www.deineseite.de/beispiel-beitrag der Slug beispiel-beitrag.

JS im Editor-Text?

  • Es ist eine häufige Überlegung, aber JavaScript sollte nicht direkt im Editor-Text eingefügt werden.

Das Einfügen von JavaScript (JS) direkt im WordPress-Editor kann problematisch sein, da WordPress aus Sicherheitsgründen JavaScript aus Beiträgen und Seiten herausfiltert. Diese Maßnahme soll Cross-Site Scripting (XSS) Angriffe verhindern und die Integrität der Website schützen.

  • Sicherheit: WordPress filtert JavaScript aus Beiträgen und Seiten, um Cross-Site Scripting (XSS) Angriffe zu verhindern. Dies ist eine Sicherheitsmaßnahme, um die Integrität der Website zu schützen.

Andere Methoden können hilfreich sein, um spezifische Anforderungen zu erfüllen und ermöglichen auch den gezielten Einsatz von IDs, um Code präzise einzufügen und anzuwenden.

JavaScript per ID oder Slug

Um JavaScript nur für eine oder mehrere bestimmte Seiten oder Beiträge anzuwenden, können spezifische Klassen oder IDs verwendet werden, die WordPress für diese Seiten generiert.

JS-Code über die functions.php einfügen

Das JavaScript kann direkt mittels functions.php eingefügt werden:

function mein_custom_script() {
    // Array mit den IDs oder Slugs der Seiten und Beiträge, auf denen das Skript eingefügt werden soll
    $pages_and_posts = array('123', '456', '789', 'slug-von-seite', 'slug-von-beitrag'); // IDs und Slugs der Seiten und Beiträge

    // Überprüfen, ob die aktuelle Seite oder der aktuelle Beitrag in dem Array enthalten ist
    if (is_page($pages_and_posts) || is_single($pages_and_posts)) {
        ?>
        <script>
            // Dein JavaScript-Code hier
            console.log("JavaScript funktioniert!");
        </script>
        <?php
    }
}
add_action('wp_footer', 'mein_custom_script');
  1. Array mit IDs und Slugs: Das Array $pages_and_posts enthält die IDs und Slugs der Seiten und Beiträge, auf denen das Skript eingefügt werden soll.
  2. is_page() und is_single(): Diese Funktionen überprüfen, ob die aktuelle Seite (is_page()) oder der aktuelle Beitrag (is_single()) in dem Array enthalten ist.
  3. Einfügen des Skripts: Wenn eine Übereinstimmung gefunden wird, wird der JavaScript-Code im Footer der Seite eingefügt.
  • IDs und Slugs: Es können sowohl IDs als auch Slugs verwendet werden. Im Array pages_and_posts sind sie als Strings angegeben.
  • is_page($pages_and_posts) || is_single($pages_and_posts): Diese Bedingung stellt sicher, dass die Überprüfung sowohl für Seiten als auch für Beiträge durchgeführt wird.

JS-Code im Child-Theme in der .js-Datei

Im Child-Theme, z.B. scripts.js, kann der JavaScript-Code gezielt eingefügt werden:

document.addEventListener('DOMContentLoaded', function() {
    // Array mit den Klassen der Seiten und Beiträge
    var pagesAndPosts = [
        'page-id-123', 
        'page-id-456', 
        'page-id-789', 
        'postid-123', 
        'postid-456', 
        'postid-789', 
        'slug-von-seite', 
        'slug-von-beitrag'
    ];

    // Überprüfen, ob der Body eine der Klassen enthält
    pagesAndPosts.forEach(function(className) {
        if (document.body.classList.contains(className)) {
            // Dein JavaScript-Code hier
            console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag: " + className);
            // Weitere JavaScript-Aktionen hier
        }
    });
});
  1. DOMContentLoaded Event: Der Code wird ausgeführt, sobald das DOM vollständig geladen ist.
  2. Array pagesAndPosts: Enthält die Klassen, die den spezifischen Seiten und Beiträgen zugewiesen sind.
    • Klassen wie page-id-123 sind für Seiten mit der ID 123.
    • Klassen wie postid-123 sind für Beiträge mit der ID 123.
    • Klassen wie slug-von-seite-1 sind für Seiten oder Beiträge mit entsprechenden Slugs.
  3. forEach Schleife: Durchläuft das Array pagesAndPosts und überprüft, ob der Body-Tag eine der angegebenen Klassen enthält.
  4. document.body.classList.contains(className): Überprüft, ob der Body-Tag die Klasse className enthält.
  5. JavaScript-Code: Wenn die Bedingung erfüllt ist, wird der gewünschte JavaScript-Code ausgeführt.

Beispiel-Anwendung: Dieser Code kann als Schablone verwendet werden und der spezifische JavaScript-Code ist innerhalb des if-Blocks einzufügen. Zum Beispiel:

if (document.body.classList.contains(className)) {
    // Dein spezifischer JavaScript-Code hier
    console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag: ");
    // Beispiel: Ändere den Hintergrund der Seite
    document.body.style.backgroundColor = 'lightblue';
}

Performance-Aspekte

Die Verwendung eines Arrays und die Überprüfung mehrerer Klassen im body-Tag haben im Allgemeinen keine signifikanten Performance-Nachteile, besonders wenn die Anzahl der zu überprüfenden Seiten und Beiträge moderat ist. Browser sind sehr effizient im Umgang mit DOM-Manipulationen und Klassenüberprüfungen. Trotzdem gibt es einige Aspekte, die man beachten sollte, um sicherzustellen, dass der Code so effizient wie möglich bleibt. 🙂

  1. DOMContentLoaded Event:
    • Das DOMContentLoaded-Event wird ausgelöst, sobald das DOM vollständig geladen ist, aber bevor alle Bilder und Stylesheets geladen sind. Dies stellt sicher, dass dein Skript so früh wie möglich ausgeführt wird.
  2. Array-Größe:
    • Wenn das Array pagesAndPosts sehr groß ist, kann dies die Performance leicht beeinträchtigen, da jeder Eintrag im Array überprüft werden muss. Bei einer normalen Anzahl von Seiten und Beiträgen (z.B. weniger als 100) ist dies jedoch vernachlässigbar.
  3. Klassenüberprüfung:
    • Die Methode document.body.classList.contains(className) ist sehr effizient, da sie auf die interne Klassenliste des Body-Elements zugreift.

Optimierung für eine einzelne Seite oder einen Beitrag?

Falls der Code nur für eine bestimmte Seite oder einen bestimmten Beitrag ausführt werden sollte, kann der Code weiter optimiert werden, indem direkt die spezifische Klasse überprüft wird. Hier ein Beispiel für eine einzelne Seite oder einen Beitrag:

document.addEventListener('DOMContentLoaded', function() {
    // Spezifische Klasse für eine Seite oder einen Beitrag
    var specificClass = 'page-id-123'; // Ersetze dies durch die tatsächliche Klasse

    // Überprüfen, ob der Body die spezifische Klasse enthält
    if (document.body.classList.contains(specificClass)) {
        // Dein JavaScript-Code hier
        console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag!");
        // Beispiel: Ändere den Hintergrund der Seite
        document.body.style.backgroundColor = 'lightblue';
    }
});

Vergleich der beiden Ansätze

Mehrere Seiten und Beiträge (Flexibilität):

  • Vorteile: Flexibel und erweiterbar, so können einfach neue Seiten und Beiträge hinzufügt werden, indem das Array aktualisiert wird.
  • Nachteile: Minimaler Overhead durch die Schleife und Array-Überprüfung, aber in der Praxis meist unbedeutend.

Einzelne Seite oder Beitrag (Effizienz):

  • Vorteile: Maximale Effizienz, da nur eine einzige Überprüfung durchgeführt wird.
  • Nachteile: Weniger flexibel, erfordert Codeänderungen, wenn weitere Seiten oder Beiträge hinzufügt werden sollten.

Schlussfolgerung: Für die meisten Anwendungsfälle ist der Unterschied in der Performance zwischen den beiden Ansätzen vernachlässigbar, besonders bei einer moderaten Anzahl von Seiten und Beiträgen. Der flexible Ansatz mit dem Array ist meistens vorzuziehen, da er einfacher zu warten und zu erweitern ist. Wenn jedoch sicher ist, dass der Code nur für eine einzelne Seite oder einen Beitrag ist und maximale Effizienz wünschst ist, ist der direkte Ansatz mit einer einzelnen Klassenüberprüfung eine gute Wahl.

CSS im Editor-Text?

Ähnlich wie bei JavaScript könnte die Theorie aufkommen, CSS direkt im Text-Editor einzufügen.

Das Einfügen von CSS-Code im 'Text'-Editor von WordPress kann funktionieren und ist eine einfache Methode, um Stile nur für eine bestimmte Seite zu verwenden. Beachte jedoch, dass dies nicht den Best Practices von WordPress entspricht und nur als temporäre Lösung angesehen werden sollte. Ideal ist es, CSS über das Customizer-Tool oder in einer .css-Datei im Child-Theme zu integrieren.

<style>
.ausnahme-beispiel {
    font-size: 20px; 
    color: #333;
    background-color: #f9f9f9;
    padding: 5px;
    margin: 20px 0;
    border: 2px solid #0073aa;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 2; 
    transition: all 0.3s ease;
}
</style>

Nach dem Umschalten auf visuell folgt die Form von oben:

<style>
.ausnahme-beispiel {<br />
    font-size: 20px;<br />
    color: #333;<br />
    background-color: #f9f9f9;<br />
    padding: 5px;<br />
    margin: 20px 0;<br />
    border: 2px solid #0073aa;<br />
    border-radius: 10px;<br />
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);<br />
    font-family: 'Arial', sans-serif;<br />
    line-height: 2;<br />
    transition: all 0.3s ease;<br />
}<br />
</style>

Das macht das CSS unbrauchbar. Folglich sollte die Eingabe dieser Form (komprimiert) erfolgen:

<style>.ausnahme-beispiel {font-size: 24px;color: #333;background-color: #f9f9f9;padding: 5px;margin: 20px 0;border: 2px solid #0073aa;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);font-family: 'Arial', sans-serif;line-height: 2;}</style>

Nur als Beispiel, statt zu stylen, könnte man dies auch im HTML auszeichnen.

Das Einfügen von CSS-Code wie in deinem Beispiel direkt im Editor stellt im Allgemeinen kein Sicherheitsrisiko dar, solange nur autorisierte Benutzer dies tun können und keine schädlichen Kombinationen mit JavaScript oder HTML verwendet werden.

Beispiel Styling:

Allerdings ist zu beachten, dass man vor dem Umschalten in den visuellen Modus den Cursor außerhalb des Style-Tags setzt. Andernfalls kann es zu einer Umformatierung kommen, die das CSS unbrauchbar macht:

<style>.ausnahme-beispiel {font-size<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>: 24px;</style>

CSS per ID

Ebenso wie beim JavaScript kann CSS für bestimmte Seiten oder Beiträge anwendet werden.

Um das CSS nur für eine bestimmte Seite oder einen bestimmten Beitrag anzuwenden, sind ebensolche Classen oder IDs zu verwenden, die WordPress für diese Seiten generiert. Hier ist ein Beispiel, wie das CSS angepasst werden kann:

.postid-123 .ausnahme-beispiel {
    font-size: 24px;
    color: #333;
    background-color: #f9f9f9;
    padding: 5px;
    margin: 20px 0;
    border: 2px solid #0073aa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: "Arial", sans-serif;
    line-height: 2;
}

Fazit

Mit individuellen Feldern in WordPress kannst du jede Seite und jeden Beitrag gezielt und effizient anpassen. Anstatt globale Änderungen vorzunehmen oder auf externe Plug-ins angewiesen zu sein, kannst du spezifische CSS- und JavaScript-Codes direkt einfügen. Zudem ermöglicht das Laden von CSS- und JavaScript-Code per ID oder Slug eine noch präzisere Steuerung. Diese Methoden bieten maximale Flexibilität und verbessern die Leistung der Website, ohne die gesamte Seite zu beeinträchtigen. Cleverer geht es nicht!

Anhang: Beispiel Scroll-basierte Animationen

  • Zum Beispiel läuft die Animation, nur auf der einen Seite und in diesem Abschnitt:

1. HTML-Struktur

<div class="content-section">
  <div class="scroll-animation">
    <h2>Erster Abschnitt</h2>
    <p>Dieser Text wird animiert, wenn er ins Blickfeld scrollt.</p>
  </div>
  <div class="scroll-animation">
    <h2>Zweiter Abschnitt</h2>
    <p>Auch dieser Text wird animiert, wenn er ins Blickfeld scrollt.</p>
  </div>
  <div class="scroll-animation">
    <h2>Dritter Abschnitt</h2>
    <p>Schließlich wird auch dieser Text animiert.</p>
  </div>
</div>

HTML: Die HTML-Struktur enthält mehrere Abschnitte, die jeweils eine Klasse scroll-animation haben.

2. custom_css:

.content-section {
  padding: 50px;
  background: #f9f9f9;
}

.scroll-animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  margin-bottom: 30px;
}

.scroll-animation.in-view {
  opacity: 1;
  transform: translateY(0);
}

CSS: Anfangs sind die Elemente nicht sichtbar (opacity: 0) und leicht nach unten verschoben (translateY(20px)). Wenn sie ins Sichtfeld scrollen, wird die Klasse in-view hinzugefügt, was die Elemente sichtbar macht und ihre Position ändert.

3. custom_js:

document.addEventListener("DOMContentLoaded", function() {
  const scrollElements = document.querySelectorAll(".scroll-animation");

  const elementInView = (el, dividend = 1) => {
    const elementTop = el.getBoundingClientRect().top;
    return (
      elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
    );
  };

  const displayScrollElement = (element) => {
    element.classList.add("in-view");
  };

  const handleScrollAnimation = () => {
    scrollElements.forEach((el) => {
      if (elementInView(el, 1.25)) {
        displayScrollElement(el);
      }
    });
  };

  window.addEventListener("scroll", () => {
    handleScrollAnimation();
  });
});

JavaScript: Das Skript prüft, ob die Elemente ins Sichtfeld scrollen und fügt die Klasse in-view hinzu, um die Animation zu triggern.

Wir können nun CSS und JS verwenden, ohne die gesamte Website zu belasten.

wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 Juli

👉🏿 Das könnte Dich auch ansprechen