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>

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><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" 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</span> class<span>="entry-meta"</span>></span>
</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></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></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>

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

aus.

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" 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</span> class<span>="entry-meta"</span>></span>
</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></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></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</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</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>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</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>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</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>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</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>

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><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" 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</span> class<span>="entry-meta"</span>></span>
</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></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></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</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</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>

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><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" 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</span> class<span>="entry-meta"</span>></span>
</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></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></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></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></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!