Wie füge ich WordPress-Widgets hinzu?Theme-Integration Widgets-Bereich

Benutzerdefinierte Menüfunktionen und Seitenleisten-Widgets, jaWordPressAusgewählte Funktionen im Thema.

• Das Erstellen eines Themas, wenn es diese beiden Funktionen nicht enthält, ist wie eine Hähnchenrippe ...

Chen Weiliangim Vorherigeneine Webseite bauenIn diesem Tutorial teile ich, wie man ein WordPress-Theme gibtBenutzerdefiniertes Menü hinzufügen.

Dieser Artikel beschreibt, wie Sie beim Erstellen eines Designs benutzerdefinierte Widget-Funktionen hinzufügen.

Genau wie das Hinzufügen benutzerdefinierter Menüs zu Designs dauert das benutzerdefinierte Hinzufügen von Widgets nur 3 Schritte.

Der erste Schritt, die Gadget-Registrierung

Um das Widget zu verwenden, müssen Sie sich zuerst registrieren, die Datei functions.php unter dem WordPress-Theme öffnen,

Fügen Sie in der Datei functions.php den folgenden Code hinzu:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

Ändern Sie die li- und h2-Tags in functions.php so, dass sie den Tags in sidebar.php entsprechen:

Die li- und Modul-h2-Titel von 'before_widget' und 'after_widget' modifizieren den Code entsprechend der tatsächlichen Situation.

(vielleicht ohne Modifikation)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

Der obige Code registriert einen Widget-Bereich namens "top-sidebar":

• Der angezeigte Name ist „Top Sidebar“.
• Fügen Sie dem Titel ein h2-Tag hinzu.
• Inhaltselemente sind mit li gekennzeichnet.

登录WordPress-BackendDashboard, gehen Sie zu Aussehen → Widgets.

Wenn Sie den Top Sidebar-Widget-Bereich auf der rechten Seite des Bildes unten sehen können, bedeutet dies, dass die Registrierung erfolgreich war ▼

Der zweite Schritt, Gadget-Anruf

Nachdem das Gadget registriert wurde, kann es in der Vorlagendatei des Themas aufgerufen werden, und der folgende Code kann in der Datei sidebar.php aufgerufen werden.

1) Fügen Sie in der Datei sidebar.php unter dem größten li- oder div-Tag ▼ ein

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) In der Datei sidebar.php, die größteoderFügen Sie oben ▼ hinzu

<?php endif; ?>

Schritt XNUMX: Richten Sie Widgets ein

1) Das Gadget wird registriert, und die Anzeigeposition wird auch in der Themendatei definiert.

• Sie können den Widget-Gruppenbereich im WordPress-Hintergrund ▼ einstellen

2) Aktualisieren Sie nach dem Speichern die Startseite.

• Die Seitenleiste unserer Website wird wie im Bild unten aussehen ▼

Sie können das Bild oben sehen, das anzeigt, dass unser Gadget erstellt wurde und wie gewohnt läuft.

Wie füge ich mehrere WordPress-Widgets in verschiedenen Bereichen hinzu?

Wiederholen Sie die Schritte XNUMX und XNUMX, um Ihre WordPress-Design-Widgets an verschiedenen Orten zu unterstützen.

Angenommen, Sie müssen der Kopfzeile, der Seitenleiste und dem unteren Rand des Designs ein Widget hinzufügen.

1) Zuerst müssen Sie den folgenden Code in die Datei functions.php kopieren ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) Fügen Sie als Nächstes den folgenden Code zu den Dateien header.php, sidebar.php und footer.php hinzu.

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

Seitenleiste.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

Das ist ein Erfolg!

• Natürlich kannst du auch diverse Details im Code nach deinen Bedürfnissen modifizieren ^_^
• Die 2 obigen Schritte ermöglichen es dem Rest des Designs, die Funktionalität des Widgets zu integrieren.

Geben Sie als Nächstes weiterhin Tipps zur Verwendung von Widgets in WordPress.

Widget-Tipps für das WordPress-Theme-Integrations-Widget

Benutzerdefinierte Widgets effizient verwalten:

1) Nachdem Sie dem Design Widgets hinzugefügt haben, können Sie eine separate Datei erstellen und benennenwidgets.php.

• Um den gesamten benutzerdefinierten Widget-Code, der in Schritt 1 hinzugefügt wurde, in diesem Ordner zu speichern.

2) Fügen Sie den Code zur Datei functions.php hinzu:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) Speichern Sie den gesamten benutzerdefinierten Widget-Widget-Code, der in Schritt 1 hinzugefügt wurde, in der Datei widgets.php.

Diese Methode stellt sicher, dass alle Widgets reibungslos geladen werden und auf allen WordPress-Versionen funktionieren, die Widgets unterstützen.

Auf diese Weise können Sie Ihre WordPress-Designdateien effizienter verwalten.