So erstellen Sie ein WordPress -Thema von Grund auf neu: letzte Schritte

In diesem Artikel werden wir unseren Aufstieg zum Erstellen eines WordPress-Themas von Grund auf abschließen und uns darauf konzentrieren, unsere Vorlagen zu verfeinern, Meta-Informationen hinzuzufügen, Miniaturansichten, Seitenleisten, benutzerfreundliche Steuerelemente und mehr.

Dies ist der dritte und letzte Teil der WordPress -Serie zum Erstellen eines WordPress -Themas. Teil 1 stellte WordPress -Themen vor, und in Teil 2 haben wir ein grundlegendes Thema erstellt. Wir haben die saubere Blog -Vorlage von Startbootstrap verwendet, um unserem WordPress -Thema Stil hinzuzufügen. Der Code, den wir bisher geschrieben haben, ist auf Github verfügbar.

Wir haben bisher Single.php, Page.php, Archive.php und Index.php hinzugefügt, aber wir haben die Aufgabe für diesen Teil der Aufgabe gelassen. Wir haben Funktionen.php eingeführt - eine Datei, mit der WordPress automatisch Funktionen in unserem Thema enthalten, und wir haben Funktionen hinzugefügt. Wir haben unserem Header.php eine dynamische Headerfunktion hinzugefügt und diese Funktionalität in unsere Funktionen unterteilt. Im Idealfall sollte dies in eine separate Datei organisiert werden - möglicherweise in einem INC -Ordner in unserem Thema -, um die Dinge sauber zu halten.

In Teil 2 haben wir auch Partials eingeführt - footer.php und header.php.

Key Takeaways

• Verwenden Sie `functions.php`, um themenspezifische Funktionen hinzuzufügen und Code effektiv in separate Dateien für die sauberere Struktur zu organisieren.
• Implementieren Sie Vorlagenteile für eine konsistente und modulare HTML -Struktur über verschiedene Vorlagen wie `Single.php` und` index.php`.
• Aktivieren und Verwalten von Post Thumbnails in WordPress-Themen mit ul add_theme_support ("Post-Thumbnails"); "Für Bilder.
• Registrieren Sie mehrere Seitenleisten und widgetisierte Bereiche über `functions.php`, um die dynamische Inhaltsverwaltung über WordPress -Widgets zu ermöglichen.
• Anpassen von Site-Erscheinungsbild und Layout dynamisch mit der WordPress Customizer-API, wodurch benutzerfreundliche Steuerelemente für Hintergrundbilder und mehr aktiviert werden können.
• Anpassung der einzelnen Beiträge und Seiten durch die Verwendung von Vorlagenhierarchieprinzipien und `get_template_part` für strukturierte und spezifische Inhaltsanzeige.

Verfeinerung der Vorlagen

Im vorherigen Artikel haben wir unser

Tag - das Öffnen - in Header.php getrennt und Php body_class () hinzugefügt; ?> dazu. Dies fügt dem Körper einige semantische Klassen hinzu, die uns sagen, ob wir auf einer Seite sind, ob wir angemeldet sind oder nicht, und so weiter - und ermöglicht es uns, verschiedene Elemente unserer Website abhängig von den besuchten Seiten und anderen zu stylen Dinge.

Wenn wir die Startseite besuchen und die Browserkonsole öffnen, um diese Klassen zu inspizieren, werden wir feststellen, dass uns die aktuellen Vorlageninformationen unter diesen Klassen fehlen:

Um die Dinge zu ändern, die WordPress anzeigen, müssen wir wissen, welche Datei verwendet wird. In unserem Fall wird Index.php als Standard -Fallback -Vorlage verwendet. Diese Infografik zeigt die Hierarchie der verwendeten Vorlagen. Es kann sehr praktisch sein, wenn sie überschreiben oder Themen erstellen.

Im vorherigen Artikel haben wir damit begonnen, die Archiv.php -Schleife zu verfeinern, Meta -Informationen hinzugefügt und in den ausgegebenen Artikeln die Miniaturansichten veröffentlichen. Wir werden diese Schleife in eine separate Datei trennen, sie in archive.php und index.php einbeziehen und die Verfeinerung beenden.

Erstens ersetzen wir den Inhalt in beiden Dateien zwischen dem Zeitpunkt und dem Ende durch eine einzige Zeile, die die Teildatei anfordert

<span><span><?php </span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span></span></span>

Sobald wir das getan haben, werden wir den Inhalt, den wir in archive.php ersetzt haben

Sobald wir diese Änderungen auf den Server hochladen, werden wir feststellen

<span><span><span><div> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>>

<span><span><span><header> class<span>="entry-header"</span>></header></span>
</span>    <span><span><?php </span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 id="">', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 id="a-href-esc-url-get-permalink-rel-bookmark-a"><a href="'%20.%20esc_url(%20get_permalink()%20)%20.%20'" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div> class<span>="entry-meta"</span>>
            <span><span><?php </span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></span></span></span></span>
</div></span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></span>></span><!-- .entry-header -->
</span>
        <span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>            <span><span><?php </span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

Dies bedeutet, dass unsere teilweisen Werke.

veröffentlicht Miniaturansichten

Wir können sehen, dass keiner unserer gefälschten Beiträge im Allgemeinen Bilder hat und keine

Bilder

im Besonderen vorhanden sind. Wenn wir zum WordPress -Dashboard gehen und versuchen, unserem Beitrag/unserer Seite die

-Fotografie hinzuzufügen, wird in der Seitenleiste rechts kein Feld zum Upload von Dateien vorhanden. (Für diejenigen, die mit WordPress nicht vertraut sind, kann hier mehr über diese Funktion gelesen werden.) post thumbnails werden in WordPress -Themen standardmäßig nicht aktiviert. Es ist eine Funktion, die speziell in neuen Themen eingeschaltet werden muss. Die meisten Themen haben es aktiviert.

Um dies zu tun, schließen wir add_theme_support ('post-thumbnails') ein; Linie zu unseren Funktionen.php.

Jetzt sind Miniaturansichten aktiviert.

Jetzt können wir unsere WordPress-Installation des gesamten Inhalts mit dem WP-CLI-Befehl WP-Site leer leeren-Allow-Root (oder wir können es manuell aus dem WordPress-Dashboard ausführen) und sie mit Fakerpress neu aufzusetzen. Es sollte Beiträge und Seiten mit vorgestellten Bildern ausfüllen, die es aus dem Internet greift. (Wir müssen das obere Menü wie zuvor neu erstellen und Seiten und Beiträge zuweisen.)

Ein Tipp: Wenn wir Themen zum Verkauf bauen, oder im Allgemeinen Themen, die an ein breiteres Publikum veröffentlicht werden, möchten wir möglicherweise

Themeneinheitstestdaten

von Automattic bereitgestellt, da es möglicherweise bereitgestellt werden kann Inhalt zum Testen eines größeren Umfangs der Fälle und Themendetails.

Wir können Bildgrößen für Fakerpress angeben, aber es wird höchstwahrscheinlich immer noch zu einem chaotischen Look führen.

Wenn wir ein Thema erstellen, besteht eine der Techniken, die zum Erreichen eines polierten, standardisierten Erscheinungsbilds verwendet werden,

Miniaturgrößen

. Dies sind Standardgrößen, die WordPress in allen hochgeladenen Bildnutzungen an die Anpassung angeht. Wir verwenden die WordPress

add_image_size () , um mehrere Bildgrößen hinzuzufügen, die unser Thema verwendet:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span></span></span>

Dann geben wir eine der formatierten Bilder mit the_post_thumbnail () in unserem content.php:

aus.

<span><span><span><div> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>>

<span><span><span><header> class<span>="entry-header"</span>></header></span>
</span>    <span><span><?php </span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 id="">', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 id="a-href-esc-url-get-permalink-rel-bookmark-a"><a href="'%20.%20esc_url(%20get_permalink()%20)%20.%20'" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div> class<span>="entry-meta"</span>>
            <span><span><?php </span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></span></span></span></span>
</div></span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></span>></span><!-- .entry-header -->
</span>
        <span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>            <span><span><?php </span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

Um eine gut formatierte Auszug in unserer Archiv- oder Blog -Liste zu erreichen, werden wir die Schriftgröße erhöhen, aber um dies zu tun, werden wir die Anzahl der von the_excerpt ausgegebenen Wörter reduzieren (). :

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

Um das Bild zu schweben (erst erwähnte Miniaturansichten) und Auszug, fügen wir dem übergeordneten Element -Selektor in unserem CSS Folgendes hinzu:

<span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>    <span><span><?php </span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></span>></span>
</span></span></span>

(Wir decken hier nicht die kleineren Styling -Anpassungen ab, die für das Thema selbst nicht von entscheidender Bedeutung sind.)

Jetzt können wir unsere Schriftgröße erhöhen und den Auszug um das Bild umgehen lassen, indem wir das Bild schweben (zusammen mit dem A -übergeordneten Element):

Wir werden später auch post_thumbnails auf einzelnen Posts/Seiten verwenden.

Themen -Seitenleisten

Themen -Seitenleisten sind widgetisierte Bereiche im Thema. Sie müssen im WordPress -System registriert werden, damit wir verschiedene Widgets in diese Bereiche platzieren können. Sobald wir das tun, drucken wir diese Widgets in unseren Vorlagendateien oder ausgaben oder geben wir aus.

Wir registrieren eine Reihe von Seitenleisten in unserem Thema, die im Github -Repository des Themas angezeigt werden. Wir tun dies, indem wir unseren Funktionen den folgenden Code hinzufügen.php:

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

Hier zeigen wir, wie man zwei Seitenleisten registriert. Weitere Details zur Funktion von Register_SideBar () finden Sie unter WordPress.org.

Wir registrieren elf Seitenleisten, müssen jedoch nicht alle in allen Seitenvorlagen oder Website -Standorten ausgeben. Wenn sie auf der aktuell angepassten Seite ausgegeben werden, können sie in der Customizer unter Widgets:

zugegriffen werden:

Hier ist ein Beispiel für die tatsächliche Ausgabe der Seitenleiste oder des Widget -Bereichs in der Fußzeile.php - was bedeutet, dass sie global angezeigt werden kann:

<span><span>.home .post-preview.post</span> {
</span>    <span>overflow: hidden;
</span><span>}
</span>

Hier verwenden wir eine Sidebar -ID, die wir in der Funktion register_sidebar für die obere boden_center_sidebar verwendet haben.

Wir haben auch die Breite des zentralen Inhaltsbehälters auf der Homepage abhängig davon abhängig davon

<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'home_header', 'bsimple' ),
</span>        <span>'description'   => __( 'home_header', 'bsimple' ),
</span>        <span>'id'            => 'h_h',
</span>        <span>'class'         => 'home_header',
</span>        <span>'before_widget' => ' <div>',
        <span>'after_widget'  => '</span>
</div>',
</span>        <span>'before_title'  => '<h2>',
</h2></span>        <span>'after_title'   => '',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'archive_sidebar_1', 'bsimple' ),
</span>        <span>'description'   => __( 'Archive Sidebar no 1', 'bsimple' ),
</span>        <span>'id'            => 'a_s_1',
</span>        <span>'class'         => 'archive_sidebar_1',
</span>        <span>'before_widget' => ' <div>',
        <span>'after_widget'  => '</span>
</div>',
</span>        <span>'before_title'  => '<h2>',
</h2></span>        <span>'after_title'   => '',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'bottom_center_sidebar', 'bsimple' ),
</span>        <span>'description'   => __( 'Bottom Center Sidebar', 'bsimple' ),
</span>        <span>'id'            => 'b_c_s',
</span>        <span>'class'         => 'bottom_center_sidebar',
</span>        <span>'before_widget' => '<div>',
        <span>'after_widget'  => '</span>
</div>',
</span>        <span>'before_title'  => '<h2>',
</h2></span>        <span>'after_title'   => '',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>

Wir geben Bootstrap -Klassen aus, die von diesen Bedingungen abhängig sind, und stellen Sie sicher, dass das Thema nicht leer aussieht, wenn wir Widgets für Seiten wie home .

einrichten.

Nachdem wir diese Widget -Bereiche mit Widgets und Bildern gefüllt haben, erhalten wir:

Thema entwickelt sich gut. Die Leser werden natürlich das Styling nach ihren Wünschen anpassen.

Customizer api

Wenn wir über das Styling sprechen, erwähnen wir die Customizer-API und zeigen, wie Sie sie verwenden, um die benutzerfreundliche Kontrolle über die Hintergrundbilder für die Header zu erhalten.

Hier ist ein Beispiel dafür, wie wir neue Panel , Abschnitt und Kontrolle in unserem Thema (Funktionen.php wieder):

erstellen:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span></span></span>

Die Hauptsache hier ist der Customize_register -Hook und die Reihenfolge von $ wp_customize -Methoden (add_panel, add_section, add_seting, add_control. Order Aspekte. Der WordPress -Codex hat eine detaillierte Referenz der Customizer -API.

Sobald wir unsere Einstellungen und Steuerelemente in functions.php hinzufügen, fügen wir den folgenden Code am Ende der Funktion bSimple_Scripts () hinzu, die wir erstellt haben, um unsere Skripte und Stile zu untertreffen:

<span><span><span><div> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>>

<span><span><span><header> class<span>="entry-header"</span>></header></span>
</span>    <span><span><?php </span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 id="">', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 id="a-href-esc-url-get-permalink-rel-bookmark-a"><a href="'%20.%20esc_url(%20get_permalink()%20)%20.%20'" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div> class<span>="entry-meta"</span>>
            <span><span><?php </span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></span></span></span></span>
</div></span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></span>></span><!-- .entry-header -->
</span>
        <span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>            <span><span><?php </span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

Wir haben unseren Header -Behältern PHOM-, PFRONT- und PGLOBAL -Klassen hinzugefügt. Jetzt verwenden wir wp_add_inline_style ()

und den Griff im BSIMPLE-Stil, mit dem wir unseren Basisthema-Stil am Anfang verwendet haben-um die gerade erstellten Einstellungen für den Customizer auszugeben. Wir verwenden get_theme_mod (), um jede Einstellung zu erhalten, die wir registriert haben.

Auf diese Weise können wir Bilder für die Header festlegen, die wir in die Funktion dynamic_header () in Teil 2

des Handbuchs unterteilt haben:

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

einzelne Seiten und Beiträge

Die WordPress -Vorlagenhierarchie hilft uns, die genaue URL und den Auftrag zu zielen, das auf Besuch geladen wird, damit wir die HTML -Ausgabe für jeden von diesen atomisch entwerfen können. Oft müssen wir nicht alle Vorlagen erstellen.

Hinzufügen eines generischen Hintergrundbildes für alle Beiträge oder Seiten würde nicht viel Sinn machen. Unsere Customizer -Strategie funktioniert also für Archive, für Blog -Liste von Beiträgen, für die Titelseite und sogar für Begriffe. Für bestimmte Seiten und Beiträge möchten wir jedoch wahrscheinlich die Bilder einzeln festlegen.

wie machen wir das?

In unserer Funktion dynamic_header () haben wir den Header für Seiten enthält. Jetzt verwenden wir jetzt einen Inline -Stil und die Funktion get_the_post_thumbnail_url (), um die Pages ' vorgestelltes Bild zu setzen

als Headerhintergrund:

<span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>    <span><span><?php </span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></span>></span>
</span></span></span>

Jetzt kann der Benutzer ein Header -Bild für jede einzelne Seite festlegen. Wir können dasselbe für den Fall is_single () tun, der dieselbe Lösung für alle Beiträge anwendet - einschließlich benutzerdefinierter Post -Typen.

Diese Zeile ermöglicht es Benutzern, jeder Seite mit dem Namen Subtitle_ ein benutzerdefiniertes Feld hinzuzufügen, und es wird an den Seitenheader ausgegeben:

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

Wenn wir den Abschnitt benutzerdefinierter Felder nicht sehen, können wir ihn über die Bildschirmoptionen in der rechten Ecke des Bearbeitungsbildschirms aktivieren:

Danach werden wir unser Feld unter dem Seitentitel auf Singularseiten angezeigt:

all diese Dinge - und Stile - können auch auf Beiträge angewendet werden.

Wir müssen jetzt auch die Ausgabe in Single.php und page.php formatieren.

Aufgrund der Raumbeschränkungen dieses Handbuchs erstellen wir den Inhalt, den wir in diesen beiden Vorlagen verwenden, aber die Struktur ermöglicht es den Lesern, diese Vorlagen bei Bedarf genauer anzupassen und anzupassen:

<span><span><?php </span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php </span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span></span></span>

Hier verwenden wir ein einspaltendes Layout, 10/12 breit, zentriert mit der MX-Auto-Klasse. Wir verwenden die partielle Inhaltsssingle.php, um den tatsächlichen Inhalt auszugeben.

In diesem Teil verwenden wir the_content () und wp_link_pages ():

<span><span><span><div> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>>

<span><span><span><header> class<span>="entry-header"</span>></header></span>
</span>    <span><span><?php </span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 id="">', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 id="a-href-esc-url-get-permalink-rel-bookmark-a"><a href="'%20.%20esc_url(%20get_permalink()%20)%20.%20'" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div> class<span>="entry-meta"</span>>
            <span><span><?php </span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></span></span></span></span>
</div></span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></span>></span><!-- .entry-header -->
</span>
        <span><span><span><a> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></a></span>
</span>            <span><span><?php </span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

Jetzt haben wir ein grundlegendes Minimum für einzelne Seiten und Beiträge, aber mehr kann mit WordPress -Funktionen hinzugefügt werden. Wir können automatisch angeben, welche Details von WordPress in einem einzelnen Beitrag, einer einzelnen Seite und Seiten zu bestimmten Kategorien usw. ausgegeben werden sollen.

globale Widgets und Fußzeile

Wir haben drei Widget -Bereiche (Seitenleiste) für unsere Fußzeile erstellt und die Ausgabe zu Fußzeile.php hinzugefügt. Wir haben auch einen Abschnitt - oder einen Widget -Bereich - direkt über dem Fußzeile -Tag hinzugefügt. Diese Widgets sind nicht spezifisch für die Homepage, Seiten oder Archive, aber sie sind ziemlich global. Sobald wir ihnen Widgets zuweisen, werden sie seitenweit angezeigt:

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

Was wir bekommen, ist ein einfacher Boden- und Fußzeilenbereich, den wir mit Widgets bevölkern können:

Wir haben jetzt ein minimales, aber funktionales Thema, mit dem wir Inhalte anzeigen können.

Dieser Leitfaden wird hier aufhören, aber als nächstes möchte ein potenzieller Themenbauer möglicherweise sicherstellen, dass alle Anwendungsfälle abgedeckt sind und dass das Thema zu 100% voll ausgestattet ist. Installieren Sie dazu das Themen -Check -Plugin unter anderem, um zu prüfen, was unser Thema fehlt, und sicherzustellen, dass alles den Standards entspricht:

Schlussfolgerung

Dieser Leitfaden soll eine gründliche Einführung in das WordPress -Themenbau sein. Es wird hoffentlich alle grundlegenden WordPress -Themenkonzepte vorgestellt und gezeigt, wie sie zusammenkommen.

Aber es gibt noch Dinge zu lernen - wie Kommentare Teilnehmer, Autorenvorlagen, 404 Seiten und viele andere kleine Details, die behandelt werden sollten, wenn wir mit diesem Thema professioneller werden wollten.

Der erste Code für diese Serie ist hier bei GitHub verfügbar, und die endgültige Version des Themas, das wir in diesem Handbuch erstellt haben, finden Sie hier.

auf diesen Fundamenten kann viel mehr aufgebaut werden, mit Hilfe des umfassenden WordPress -Codex.

---

Es gibt drei Artikel in dieser Serie zum Erstellen eines WordPress -Themas von Grund auf:

• Die Struktur eines Themas
untersagt
• Themengrundlagen
• Verfeinerung des Themas

häufig gestellte Fragen zum Erstellen eines WordPress -Themas von Grund auf

Wie kann ich den Inhalt für eine bestimmte Seiten -ID ohne den

Wrapper in WordPress anzeigen?

Tag für Stylingzwecke. Wenn Sie jedoch den Inhalt ohne die

-Wolpeer anzeigen möchten, können Sie den Filter "The_Content" verwenden. Mit diesem Filter können Sie den Inhalt eines Posts ändern, nachdem er aus der Datenbank abgerufen wurde, bevor er jedoch auf den Bildschirm gedruckt wird. Hier ist ein einfaches Beispiel dafür, wie Sie diesen Filter verwenden können, um die

-Tags zu entfernen:

Funktion remove_p_tags ($ content) {
return strip_tags ($ content, '

') ;
}
add_filter ('the_content', 'remove_p_tags'); Bitte beachten Sie, dass dies alle Beiträge betrifft. Verwenden Sie sie also sorgfältig.

Warum wird meine Titelseite nicht in WordPress geladen? . Hier sind einige gemeinsame Probleme und ihre Lösungen:

1. Falsche Einstellungen: Überprüfen Sie Ihre WordPress -Einstellungen unter Einstellungen> Lesen und stellen Sie sicher, dass die richtige Seite als Titelseite festgelegt ist.

2. Themenprobleme: Das Problem könnte mit Ihrem Thema liegen. Versuchen Sie, zu einem Standard -WordPress -Thema zu wechseln und festzustellen, ob das Problem bestehen bleibt.

3. Plugin -Konflikte: Manchmal können Plugins miteinander oder mit Ihrem Thema in Konflikt stehen, wodurch Ihre Titelseite nicht geladen wird. Versuchen Sie, alle Plugins zu deaktivieren, und reaktivieren sie dann einzeln, um das problematische Plugin zu identifizieren.

4. Verfälschte .htaccess -Datei: Eine beschädigte .htaccess -Datei kann auch dieses Problem verursachen. Versuchen Sie, Ihre .htaccess -Datei in so etwas wie .htaccess_old umzubenennen, und prüfen Sie, ob dies das Problem auflöst. .

Wie kann ich eine Post -ID in einem Popup in WordPress anzeigen? Hier ist ein grundlegendes Beispiel dafür, wie Sie dies tun können:

Erstens müssen Sie die Post -ID erhalten. Sie können dies mit der Funktion get_the_id () in WordPress tun. Diese Funktion gibt die ID des aktuellen Beitrags in der Schleife zurück. Sie können dies mit der Funktion get_post_field () tun. Diese Funktion ruft die Werte eines bestimmten Feldes aus einem Beitrag ab. In diesem Fall möchten Sie das Feld 'post_content' erhalten. ein Popup. Hier ist ein einfaches Beispiel mit der Funktion alert ():

alert (' Php echo $ post_content;?>');

Bitte beachten Sie, dass dies ein sehr grundlegendes Beispiel ist und möglicherweise nicht Arbeiten Sie in allen Situationen perfekt. Für eine robustere Lösung sollten Sie in Betracht ziehen, ein Plugin oder eine fortschrittlichere JavaScript -Bibliothek zum Erstellen von Popups zu verwenden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein WordPress -Thema von Grund auf neu: letzte Schritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!