Pixelbart

Wie du Änderungen an deiner WordPress Seite vornimmst, ohne das Theme zu berühren.

Oft findet man im Internet Schnipsel für die functions.php und zögert auch nicht, diese dann einzufügen. Dann passiert aber etwas unglaubliches: Das WordPress Theme muss aktualisiert werden und die ganzen Änderungen sind weg. Hier ein kleiner, aber nützlicher Tipp wie du Änderungen vornimmst und neue Inhalte hinzufügst ohne das Updates Auswirkungen darauf haben.

Du erstellst ein einfaches Plugin – denn die Plugin Datei funktioniert wie die functions.php. Alles was du dort einfügst, also in die functions.php kannst du auch in ein Plugin schreiben. Das ist kein großer Aufwand und alle Probleme sind Geschichte.

Ich mache das selbst immer und es ist einfacher besser. Vor allem weil ich mir meine Themes auch kaufe und nur mit Plugins erweitere. Anpassungen nehme ich dann ebenfalls mit Hilfe eines Plugins vor.

Das Plugin erstellen

Das klingt komplizierter als es ist. Wenn du keine Seite zum Testen hast, kannst du einfach einen Ordner erstellen. Du kannst ihn nennen wie du möchtest. In unserem Beispiel nennen wir den Ordner: custom-functions

In diesen Ordner packen wir jetzt eine custom-functions.php Datei hinein und diese Datei füllen wir jetzt mit folgendem Inhalt:

/**
 * Plugin Name: Mein eigenes Plugin
 * Plugin URI: #
 * Description: Ein Plugin mit benutzerdefinierten Funktionen.
 * Version: 1.0
 * Author: Dein Name
 * Author URI: #
 */Code-Sprache: JSON / JSON mit Kommentaren (json)

Danach speichern wir das Ganze und haben unser eigenes Plugin geschrieben. Es reicht auch die Zeile Plugin Name damit das Plugin von WordPress erkannt wird:

/**
 * Plugin Name: Mein eigenes Plugin
 */Code-Sprache: JSON / JSON mit Kommentaren (json)

CSS hinzufügen

Um CSS hinzuzufügen, ohne den Customizer oder andere Plugins zu verwenden, erstellen wir jetzt einfach eine custom.css Datei im custom-functions Ordner. Haben wir das erledigt fügen wir nun folgende Zeilen ans Ende unserer custom-functions.php Datei, damit die CSS-Datei auch auf unserer Webseite verwendet wird:

// Eigenes CSS
add_action( 'wp_enqueue_scripts', 'my_custom_css_31012017' );
function my_custom_css_31012017() {
  $file = plugins_url( 'custom.css', __FILE__ );
  wp_enqueue_style( 'my_custom_css', $file, [], false, false );
}Code-Sprache: PHP (php)

Schon wird der CSS-Code aus unser Datei verwendet und wir müssen nicht mehr im Theme herumspielen.

JS hinzufügen

Das Gleiche funktioniert auch wunderbar mit JavaScript. Dazu editieren wir unsere CSS-Zeilen in der custom-functions.php ein wenig und erstellen im Nachgang die Datei custom.js in unserem custom-functions Ordner. Der neue Code sollte nun so aussehen:

// Eigene scripte
add_action( 'wp_enqueue_scripts', 'my_custom_scripts_31012017' );
function my_custom_scripts_31012017() {
  $file = plugins_url( 'custom.js', __FILE__ );
  wp_enqueue_script( 'my_custom_js', $file, [ 'jquery' ], false, true );

  $file = plugins_url( 'custom.css', __FILE__ );
  wp_enqueue_style( 'my_custom_css', $file, [], false, false );
}Code-Sprache: PHP (php)

Fertig!

Jetzt können wir mit Hilfe unseres Plugins, unseren CSS- und JavaScript-Code auf der Webseite manipulieren, ohne das Updates gestoppt werden müssen. Auch den Code für die functions.php aus dem letzten Beitrag, kann bequem in die custom-functions.php Datei eingefügt und genutzt werden. So wird deine Seite automatisch ein wenig optimiert.

Zusammenfassung

  1. Erstelle den Ordner: custom-functions
  2. Erstelle darin die Dateien: custom-functions.php, custom.css und custom.js.
  3. Öffne die custom-functions.php und füge folgenden Code ein:
/**
 * Plugin Name: Mein eigenes Plugin
 * Plugin URI: #
 * Description: Ein Plugin mit benutzerdefinierten Funktionen.
 * Version: 1.0
 * Author: Dein Name
 * Author URI: #
 */

// Direkten Zugriff verhindern
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

// Eigene Scripte
add_action( 'wp_enqueue_scripts', 'my_custom_scripts_31012017' );
function my_custom_scripts_31012017() {
  // eigenes js
  $file = plugins_url( 'custom.js', __FILE__ );
  wp_enqueue_script( 'my_custom_js', $file, [ 'jquery' ], false, true );

  // eigenes css
  $file = plugins_url( 'custom.css', __FILE__ );
  wp_enqueue_style( 'my_custom_css', $file, [], false, false );
}Code-Sprache: PHP (php)

Außerdem interessant:

Die Kollegen von Perun.net haben in einem Beitrag super erklärt wie du CSS-Anpassungen vornehmen kannst, ohne ein Child-Theme oder Plugin zu installieren:

WordPress: kleinere CSS-Anpassungen ohne Child-Theme und Plugins vornehmen » perun.net

In

,
,