11 Nützliche WordPress-Code-Snippets für Anfänger
WordPress ist eine unglaublich flexible Plattform, die es Benutzern ermöglicht, Webseiten und Blogs aller Art zu erstellen. Ein Grund für diese Flexibilität ist die Möglichkeit, benutzerdefinierten Code in die Seite einzufügen. Für Anfänger mag das einschüchternd wirken, aber mit den richtigen Code-Snippets und etwas Übung kann man WordPress wirklich personalisieren und optimieren. Dieser Artikel stellt 11 nützliche WordPress-Code-Snippets vor, die besonders für Einsteiger geeignet sind. Bevor Sie jedoch Code hinzufügen, ist es wichtig, eine Sicherungskopie Ihrer Webseite zu erstellen. Es empfiehlt sich auch, ein Child-Theme zu verwenden, um Änderungen vorzunehmen, damit Ihre Anpassungen beim Aktualisieren des Haupt-Themes nicht überschrieben werden.
1. Theme-Support für Featured Images hinzufügen
Featured Images (auch Beitragsbilder genannt) sind eine großartige Möglichkeit, die visuellen Aspekte Ihrer Beiträge und Seiten zu verbessern. Wenn Ihr Theme keine Featured Images unterstützt, können Sie dies mit einem einfachen Code-Snippet hinzufügen:
<?php
add_theme_support( 'post-thumbnails' );
?>
Dieser Code muss in die functions.php-Datei Ihres Child-Themes eingefügt werden.
2. Excerpt Länge anpassen
Excerpts (Auszüge) sind kurze Zusammenfassungen Ihrer Beiträge, die oft auf Archivseiten oder in Suchergebnissen angezeigt werden. Standardmäßig begrenzt WordPress die Länge von Excerpts. Sie können die Länge mit folgendem Code anpassen:
<?php
function my_excerpt_length( $length ) {
return 30; // Anzahl der Wörter im Excerpt
}
add_filter( 'excerpt_length', 'my_excerpt_length', 999 );
?>
Ersetzen Sie 30 durch die gewünschte Anzahl an Wörtern. Fügen Sie diesen Code ebenfalls in die functions.php-Datei ein.
3. Read More Link im Excerpt ändern
Manchmal möchten Sie den Standard-“Read More”-Link im Excerpt anpassen. Hier ist ein Code-Snippet, das dies ermöglicht:
<?php
function my_excerpt_more( $more ) {
return ' Weiterlesen';
}
add_filter( 'excerpt_more', 'my_excerpt_more' );
?>
Dieser Code fügt einen “Weiterlesen”-Link mit der CSS-Klasse read-more hinzu. Sie können den Text und die Klasse nach Bedarf anpassen. Fügen Sie diesen Code in die functions.php-Datei ein.
4. Benutzerdefinierte Menüs aktivieren
WordPress ermöglicht die Erstellung benutzerdefinierter Menüs. Um diese Funktion in Ihrem Theme zu aktivieren, verwenden Sie folgendes Snippet:
<?php
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
?>
Dieser Code registriert zwei Menüs: “Header Menu” und “Footer Menu”. Sie können weitere Menüs hinzufügen, indem Sie weitere Array-Elemente hinzufügen. Fügen Sie diesen Code in die functions.php-Datei ein.
5. Login-Logo anpassen
Sie können das WordPress-Logo auf der Login-Seite durch Ihr eigenes Logo ersetzen. Verwenden Sie dazu folgenden Code:
<?php
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(/images/mein-logo.png);
height:100px;
width:300px;
background-size: 300px 100px;
background-repeat: no-repeat;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );
?>
Ersetzen Sie /images/mein-logo.png durch den Pfad zu Ihrem Logo. Dieser Code ändert auch den Link des Logos zurück zur Startseite. Fügen Sie diesen Code in die functions.php-Datei ein.
6. Widgets in Sidebars registrieren
Um Widgets in Sidebars zu verwenden, müssen Sie diese Sidebars zuerst registrieren. Verwenden Sie dazu folgenden Code:
<?php
function my_register_sidebars() {
register_sidebar(
array(
'id' => 'primary-sidebar',
'name' => __( 'Primary Sidebar' ),
'description' => __( 'Die Haupt-Sidebar' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
register_sidebar(
array(
'id' => 'footer-sidebar',
'name' => __( 'Footer Sidebar' ),
'description' => __( 'Die Sidebar im Footer' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'my_register_sidebars' );
?>
Dieser Code registriert zwei Sidebars: “Primary Sidebar” und “Footer Sidebar”. Sie können die IDs, Namen und Beschreibungen anpassen. Fügen Sie diesen Code in die functions.php-Datei ein.
7. TinyMCE Editor anpassen
Der TinyMCE Editor (der visuelle Editor in WordPress) kann mit Code-Snippets angepasst werden. Zum Beispiel können Sie zusätzliche Formatierungsoptionen hinzufügen:
<?php
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
function my_mce_before_init_insert_formats( $init_array ) {
$style_formats = array(
array(
'title' => 'Button',
'selector' => 'a',
'classes' => 'my-button'
),
array(
'title' => 'Red Text',
'inline' => 'span',
'styles' => array(
'color' => '#ff0000'
)
)
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
?>
Dieser Code fügt die Option “Styles” zum Editor hinzu und definiert zwei benutzerdefinierte Stile: “Button” und “Red Text”. Sie müssen dann die entsprechenden CSS-Regeln in Ihrem Theme definieren. Fügen Sie diesen Code in die functions.php-Datei ein.
8. E-Mail-Adresse im Admin-Footer ändern
Sie können die standardmäßige WordPress-E-Mail-Adresse im Footer des Admin-Bereichs ändern:
<?php
function my_admin_footer_text( $text ) {
$text = 'Realisiert von <a href="https://www.meine-webseite.de" target="_blank">Meine Webseite';
return $text;
}
add_filter( 'admin_footer_text', 'my_admin_footer_text' );
?>
Ersetzen Sie https://www.meine-webseite.de durch Ihre eigene URL. Fügen Sie diesen Code in die functions.php-Datei ein.
9. Standardmäßige WordPress Widgets entfernen
Wenn Sie bestimmte standardmäßige WordPress-Widgets nicht verwenden, können Sie diese entfernen:
<?php
function my_unregister_widgets() {
unregister_widget( 'WP_Widget_Pages' );
unregister_widget( 'WP_Widget_Calendar' );
unregister_widget( 'WP_Widget_Archives' );
unregister_widget( 'WP_Widget_Meta' );
unregister_widget( 'WP_Widget_Search' );
unregister_widget( 'WP_Widget_Text' );
unregister_widget( 'WP_Widget_Categories' );
unregister_widget( 'WP_Widget_Recent_Posts' );
unregister_widget( 'WP_Widget_Recent_Comments' );
unregister_widget( 'WP_Widget_RSS' );
unregister_widget( 'WP_Widget_Tag_Cloud' );
unregister_widget( 'WP_Nav_Menu_Widget' );
}
add_action( 'widgets_init', 'my_unregister_widgets' );
?>
Entfernen Sie die Zeilen für die Widgets, die Sie behalten möchten. Fügen Sie diesen Code in die functions.php-Datei ein.
10. Google Analytics Code hinzufügen
Sie können Ihren Google Analytics Tracking-Code direkt in WordPress einfügen, ohne ein Plugin zu verwenden:
<?php
function my_google_analytics() { ?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
<?php }
add_action( 'wp_head', 'my_google_analytics', 10 );
?>
Ersetzen Sie UA-XXXXX-Y durch Ihre Google Analytics Tracking-ID. Fügen Sie diesen Code in die functions.php-Datei ein.
11. Favicon hinzufügen
Ein Favicon ist das kleine Symbol, das im Browser-Tab neben dem Seitentitel angezeigt wird. So fügen Sie ein Favicon hinzu:
<?php
function add_favicon() {
echo '<link rel="shortcut icon" href="'.get_stylesheet_directory_uri().'/favicon.ico" />';
}
add_action('wp_head', 'add_favicon');
?>
Platzieren Sie Ihre favicon.ico Datei im Hauptverzeichnis Ihres Child-Themes und fügen Sie diesen Code in die functions.php-Datei ein.
Wichtige Hinweise
Bevor Sie diese oder andere Code-Snippets verwenden, beachten Sie bitte folgende Punkte:
- Sichern Sie Ihre Webseite, bevor Sie Änderungen vornehmen.
- Verwenden Sie ein Child-Theme, um Änderungen vorzunehmen.
- Testen Sie die Änderungen in einer Staging-Umgebung, bevor Sie sie auf Ihrer Live-Seite implementieren.
Diese Snippets bieten eine solide Grundlage für die Anpassung Ihrer WordPress-Seite. Experimentieren Sie und lernen Sie, wie Sie WordPress noch weiter optimieren können!
Wo Code-Snippets einfügen?
Die meisten der oben genannten Code-Snippets werden in der functions.php-Datei Ihres Child-Themes eingefügt. Es gibt jedoch auch andere Möglichkeiten:
- Child Theme functions.php: Der bevorzugte Ort für Theme-spezifische Anpassungen.
- Code Snippets Plugin: Eine sichere und organisierte Möglichkeit, Code-Snippets hinzuzufügen, ohne die
functions.php-Datei direkt bearbeiten zu müssen. - Plugin für Benutzerdefinierten Code: Ähnlich dem Code Snippets Plugin, bietet aber oft zusätzliche Funktionen.
Unabhängig davon, welche Methode Sie wählen, ist es wichtig, den Code sorgfältig zu testen, um sicherzustellen, dass er ordnungsgemäß funktioniert und keine Konflikte verursacht.
Zusätzliche Ressourcen
Um mehr über WordPress-Code-Snippets und deren Verwendung zu erfahren, empfehlen wir Ihnen, folgende Ressourcen zu konsultieren:
- WordPress Codex
- Offizielle WordPress Dokumentation
- WordPress Entwickler Blogs
