Eine Möglichkeit, um in WordPress auf einzelnen Seiten (pages) der Beiträgen (posts) eigene JavaScripte oder CSS-Styles verwenden zu können ist, diese als Custom-Fields im Beitrag oder der Seite einzugeben und und diesen mit Hilfe einer „add_action“-Anweisung in der „functions.php“ über den Hook „wp_header“ im HTML-Header von Seiten und Beiträgen ausgeben zu lassen.

Zur praktischen Eingabe von JavaScript und CSS-Code eignet sich das Plugin „Advanced Custom Fields“ und das Zusatzplugin „Advanced Custom Fields: Code Area Field“!

1. Installation von „Advanced Custom Fields“

2. Installation von „Advanced Custom Fields: Code Area Field“

3. Unter dem neuen Menüpunkt „Eigene Felder“ muss nun eine neue Feld-Gruppe mit zB. dem Namen „Advanced Custom Fields“ angelegt werden.

4. Danach wird dieser Gruppe ein neues Feld „Code-Area“ mit dem namen „header“ hinzugefügt. Folgende Regel muss dabei definiert weren, damit sichergestellt ist, dass die Felder nur bei Seiten und Beiträgen angezeigt werden.

Zeige diese Felder wenn
„Artikel-Typ“ „ist gleich“ „post“
oder
„Artikel-Typ“ „ist gleich“ „page“

Das neue Feld muss über „veröffentlichen“ bzw. „aktualisieren“ gespeichert werden.

Die Konfiguration des neuen Feldes der Code-Area sieht folgendermaßen aus:

5. Erweiterung der „functions.php“ über Design > Editor um folgende Funktion:

function acf_header() {
  global $post;
  $content = "";
  if ($post->post_type == 'post' or $post->post_type == 'page') {
    $content = get_post_meta($post->ID, "header", true).$content;
  }
  echo $content; // echo, kein return!
}

add_action('wp_head','acf_header');

6. Nun kann beim Editieren von Seiten und Beiträgen unterhalb des Inhaltes zusätzlich in einem Code-Editor HTML-Code eingegeben werden.

Wichtig ist dabei, dass der Inhalt der Code-Area 1:1 im Header ausgegeben wird. Es ist demnach wichtig, <script>-Tags für JavaScript- und <style>-Tags für CSS-Code zu verwenden!