In diesem Tutorial untersucht wir die WordPress -Themendateistruktur in der Tiefe und lernen, wie man ein grundlegendes WordPress -Thema von Grund auf erstellt.

Im ersten Teil dieser Serie haben wir WordPress -Themen und die grundlegende Terminologie in Bezug auf die Entwicklung von WordPress -Themen vorgestellt. Wir haben Vorlagen , partielle , Vorlagenhierarchie , WordPress -Post -Typen , den style.css styleSheet, WordPress, abgedeckt Filter und Aktion Hooks, WordPress -Schleife , bedingte Tags , und wir haben uns kurz eine typische einfache WordPress -Themendateistruktur angesehen.

Key Takeaways

• Beginnen Sie mit der Einrichtung eines blo?en Mindestthemas mit einer Index.php und style.css -Datei, um sicherzustellen, dass WordPress Ihr neues Thema erkennt.
• Integrieren Sie Bootstrap für reaktionsschnelles Design und ?sthetik und ?ndern Sie Vorlagendateien so, dass die HTML- und CSS -Klassen von Bootstrap einbezogen werden.
• Verwenden Sie die Datei functions.php, um benutzerdefinierte Funktionen, Enqueue -Stile und Skripte hinzuzufügen und WordPress -Hooks effektiv zu verwalten.
• Passen Sie die dynamische Ausgabe der Header- und Navigationsmenüs an, indem Sie WordPress -Hooks und -bedingungen an verschiedene Seitentypen anpassen.
• Stellen Sie sicher, dass Ihr Thema auf mobilen Ger?ten reaktionsschnell und benutzerfreundlich ist, indem Sie CSS anpassen und Medienabfragen verwenden.

Erstellen des blo?en Mindestthemas

Das erste, was wir tun, ist ein Plugin zu installieren, mit dem wir WordPress -Posts und andere Inhalte erstellen k?nnen. Auf diese Weise k?nnen wir unsere Entwicklungswebsite schnell füllen, ohne zu viel Zeit zu verlieren. Ein Plugin, das diesen Zweck dient, ist Fakerpress von Gustavo Bordoni, der im WordPress -Plugin -Repository erh?ltlich ist.

Wir installieren und aktivieren das Plugin über WP-Cli.

Wenn wir uns jetzt beim Administrator Dashboard anmelden, werden wir feststellen, dass Fakerpress installiert ist und alle Arten von Inhalten im Stapel erstellen k?nnen, einschlie?lich der benutzerdefinierten Post -Typen, die wir haben.

Mit diesem Plugin erstellen wir jetzt einige gef?lschte Inhalte. Dies ist das Ergebnis, das die Standard - zwanzig Ventum WordPress -Thema verwendet:

Jetzt tauchen wir schnell ein und richten ein blo?es Mindestthema ein, das aus der Datei Catch-All Index.php und style.css besteht, die wir für das WordPress-Templating-System ben?tigen, um das Thema zu erkennen:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Dies ist der Stil.css, der vorerst nur aus Meta -CSS -Kommentaren besteht. Diese Kommentare sind erforderlich.

Dies ist die Index.php -Datei. Es wird alle Anfragen vorerst erfassen:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Wir laden jetzt das minimale Thema, das wir haben, hoch und aktivieren. Ich aktiviere es mit WP-CLI:

Das Thema ist jetzt für WordPress sichtbar und aktiv:

Wir haben keinen Screenshot bereitgestellt, daher ist die Anzeige im Backend einfach.

Wenn wir unsere Website jetzt im Browser besuchen, sehen wir dies:

offensichtlich haben wir Arbeit zu tun.

Wenn wir den Quellcode der Startseite anzeigen, werden wir feststellen, dass die Funktion wp_head () viele Standard -WordPress -Tags in der wie CSS, JavaScript, Link und Meta -Tags ausgab.

Die Funktion bloginfo () wird verwendet, um Websiteinformationen auszugeben.

Unsere Startseite ist leer, da wir nichts innerhalb der Schleife ausgeben - ein Muster, das WordPress in allen Vorlagen verwendet, um Inhalte auszugeben.

Die Codex -Seite zur Schleife geht tief in Details darüber ein. Eine typische Struktur für die Schleife - die auf PHP basiert, w?hrend Kontrollstruktur - sieht folgenderma?en aus:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Wir müssen das w?hrend der Schleife mit Inhalten füllen-oder mit WordPress-Tags inhaltsausgabe.

Wenn wir unsere Schleife ?ndern, indem wir the_title (), the_excerpt () hinzufügen und html markup und the_id () hinzufügen, um so zu sehen:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

wir erhalten jetzt eine Liste von Beitr?gen auf unserer Startseite, ohne dass der Stil angewendet wird:

WordPress zeigt eine Blog -Seite - eine Archivseite für alle Blog -Beitr?ge - standardm??ig.

Wenn wir jetzt eine einzelne Post-URL besuchen-so etwas wie http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/-Wir werden so etwas sehen:

Unser Loop , wenn auch sehr grob, funktioniert tats?chlich.

unser Thema in Dateien strukturieren und Bootstrap Markup

anwenden

Wir werden jetzt Teilungen wie Header.php und foote.php und verschiedene spezialisierte Vorlagen implementieren, die alle mit Twitter Bootstrap -Markup sind, damit wir es leichter stylen k?nnen.

Beginnend mit index.php ersetzen wir alle Inhalte vor und nach der Schleife durch Get_header () und get_foter () Funktionen:

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Dies bedeutet, dass wir alle Inhalte in den von uns erw?hnten Teilungen bereitstellen müssen.

entspricht dem, was wir gesagt haben - dass wir Twitter Bootstrap -Thema verwenden - unsere Header.php -Datei sieht folgenderma?en aus:

/**
 *
 * @package Botega_Scratch_Theme
 */

get_header(); ?>

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

unsere footer.php -Datei sieht so aus:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

Wir verwenden Bootstrap -Klassen in unseren HTML -Tags und wp_head () und WP_FOOTER () FIRE WP_HEAD und WP_FOOLER -Action -Hooks.

Das n?chste, was wir tun werden, ist, die CSS und JavaScript von Clean Bootstrap -Vorlage von Startbootstrap.com zu enthalten, die mit einer MIT -Lizenz geliefert werden, damit wir sie frei verwenden k?nnen. Auf diese Weise wird unser Thema mit vordefinierten Stilen, Reaktionsf?higkeit ausgestattet, und wir werden es immer noch weiter stylen k?nnen.

Funktionen.php

functions.php ist eine Datei, die mit jedem ernsthaften WordPress -Thema enth?lt. Dies ist eine Datei, die als Plugin -Archiv eines armen Mannes fungiert. Es erm?glicht uns, jede benutzerdefinierte Funktionalit?t in unser Thema aufzunehmen.

Wir werden diese Datei zun?chst verwenden, um Bootstrap und die Stile und Skripte unseres Bootstrap -Themas einzuschlie?en:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Dies ist eine WordPress-idiomatische Methode, um Skripte und Stile in ein Thema aufzunehmen. Es erm?glicht uns zu spezifizieren, dass die Position der Skripte aufgenommen wird (Header vs Fu?zeile) und die Priorit?t von Enqueinging. Wir k?nnen sogar die Abh?ngigkeit jeder bestimmten Ressource auf der anderen Seite angeben. Dadurch wird sichergestellt, dass die Ressourcen in der richtigen Reihenfolge geladen werden.

Wir verwenden hier den Action -Hook wp_enqueue_scripts. Wir k?nnen im Codex mehr darüber erfahren. (Wir haben im vorherigen Artikel Aktionshaken behandelt.)

In unserer benutzerdefinierten Funktion bSimple_scripts () - die wir an WP_ENQUEUE_Scripts -Aktionshaken anschlie?en - verwenden wir zwei WordPress -Funktionen, um unsere Skripte und Stile zu laden - wp_enqueue_script () und wp_enqueue_style (). Argumente für diese Funktionen - wie in seinen verknüpften Referenzseiten angegeben - erm?glichen es uns, die von uns erw?hnte Flexibilit?t vollst?ndig zu nutzen.

Wir k?nnen sehen, dass wir Stile aus dem Internet (Google -Schriftarten) und aus unserem Themenordner laden. Daher erstellen wir CSS-, JS- und Webfonts-Verzeichnisse in unserem Themenordner und kopieren die CSS, JavaScript-Dateien und die Fontawesome-Icon-Font-Dateien unseres Bootstrap-Themas.

.

Wir kopieren auch unsere Datei index.php in archive.php, page.php und einzelne.php, die wir ?ndern werden.

Jetzt sieht unsere Themendateistruktur ungef?hr so ??aus:

Einstellen des Markup

Wenn wir jetzt unsere Startseite besuchen, werden wir das Menü oben sehen - obwohl es und die Seite immer noch ein Chaos sind -, da die folgende Zeile in unserem Header immer noch das in DIV eingewickelte Menü und seine eigene UL ausgibt Tags, so dass es nicht von unseren Bootstrap -Stilen betroffen ist:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

Um dies zu l?sen, müssen wir zun?chst zu unserem WP-Admin-Dashboard gehen und-im Customizer-ein neues Menü erstellen. Wir nennen es oberes Menü

. https://uploads.sitepoint.com/wp-content/uploads/2018/11/1542595661customizer.mp4

Nachdem wir dies getan haben, werden wir zu unserer Header.php -Datei gehen. Entfernen Sie diese Zeilen:

<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>

An ihrer Stelle setzen wir diese Zeilen ein:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span>    <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
      <span><span><span><header</span>></span>
</span>         <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span>         <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span>      <span><span><span></header</span>></span>
</span>
        <span><span><?php
</span></span><span>        <span>if ( have_posts() ) :
</span></span><span>            <span>/* Start the Loop */
</span></span><span>            <span>while ( have_posts() ) :
</span></span><span>                <span>the_post();
</span></span><span>            <span>endwhile;
</span></span><span>        <span>endif;
</span></span><span>        <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>

Dadurch wird das Div-Tag und die Duplikation des UL-Tags für uns entfernt. Wir müssen jedoch NAV-ITEM und NAV-Link auf unsere Menüelemente (auf Li bzw. ein Tags) anwenden. Wie werden wir das machen? WP_NAV_MENU liefert dafür keine Argumente. Wir verwenden die NAV_MENU_LINK_ATTRIBUTES und NAV_MENU_CSS_CLASS -Filterhaken. Wir haben dies in unsere Funktionen in unsere functions.php -Datei eingerichtet:

<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span>    <span>while ( have_posts() ) {
</span></span><span>        <span>the_post();
</span></span><span>        <span>//
</span></span><span>        <span>// Post Content here
</span></span><span>        <span>//
</span></span><span>    <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>

Jetzt k?nnen wir neue Attribute in unserem WP_NAV_MENU in unserem Header angeben.php:

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Jetzt k?nnen unsere Top -Menü -Links die in unserem Bootstrap -CSS bereits definierten Stile nutzen.

Dynamischer Header

Um einen dynamischen Header zu verwenden - dh ein anderer Header für die Titelseite, für andere ausgew?hlte Seiten oder für Archive - werden wir eine Funktion dynamic_header () in unserer functions.php -Datei definieren, wo wir Ausgabe unseres Header -Markups abh?ngig von der Seite Der Besucher l?dt.

Jetzt endet unsere Datei header.php wie folgt:

/**
 *
 * @package Botega_Scratch_Theme
 */

get_header(); ?>

    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
    <span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>        <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span>        <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>
    <span><span><?php endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>

Wir werden diese Funktion auch wie folgt definieren:

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * The header for our theme.
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span><span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span><span><span><span><meta</span> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>
<span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span> <span><span><?php body_class(); ?></span></span>></span>
</span>
  <span><span><span><nav</span> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></span>
</span>    <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>      <span><span><span><div</span> class<span>="navbar-header page-scroll"</span>></span>
</span>              <span><span><span><a</span> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></span><span><?php bloginfo( 'name' ); ?></span><span><span></a</span>></span>
</span>      <span><span><span></div</span>></span>
</span>
      <span><span><span><div</span> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>></span>
</span>          <span><span><span><ul</span> class<span>="nav navbar-nav navbar-right"</span>></span>
</span>          <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span>          <span><span><span></ul</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>

Um alle aktuellen URL- oder Postdaten zu verwenden - wie in der Schleife - deklarieren wir eine $ post variable global. Anschlie?end füllen wir einfach eine andere Seite oder fordern Sie F?lle mit dem Füllstoff -Header HTML an, die wir sp?ter fertigstellen. Dies legt die Grundlage für einen wirklich dynamischen Header.

Wir müssen sicherstellen, dass unsere Titelseite - mit dynamischem oberen Menü - auch dann gut aussieht, wenn der Benutzer angemeldet ist. Die Titelseite. Da es sich um eine Position handelt: Behoben, überlagert es die obere Zone auf unserer Website und behandelt das, was da ist. Daher müssen wir einen Offset für unser oberes Menü angeben. Wir werden dies zu unserem Stil hinzufügen. CSS:

Dies stellt sicher, dass der #MaNnav-unser Menücontainer-von oben genügend Versatz enth?lt, sodass er nicht abgedeckt wird, wenn der Benutzer angemeldet ist. Wir k?nnen es leicht ansprechen.

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * Footer template partial
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span>     <span><span><span></div</span>></span>
</span>     <span><!-- /.row -->
</span>  <span><span><span></div</span>></span>
</span>  <span><!-- /.container -->
</span>
  <span><!-- Footer -->
</span>  <span><span><span><footer</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>          <span><span><span><div</span> class<span>="col-lg-8 col-md-10 mx-auto"</span>></span>
</span>          <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span><!-- /.row -->
</span>    <span><span><span></div</span>></span><!-- /.container -->
</span>  <span><span><span></footer</span>></span><!-- /footer -->
</span>
<span><span><?php wp_footer(); ?></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Wir k?nnen sehen, dass wir zwei F?lle in unserem CSS ansprechen - eine Standardeinstellung und eine für kleinere Bildschirme. Dies liegt daran

Auf dem Handy sollten wir jetzt ein reaktionsschnelles, javaScript-betriebenes Dropdown-Menü haben:

Schlussfolgerung

In diesem zweiten Teil zum Erstellen eines WordPress -Themas von Grund auf haben wir ein sehr grundlegendes WordPress -Thema erstellt und Bootstrap -Stile und -Skripte in diese enthalten. Wir haben die Menüausgabe an unsere vordefinierten Stile angepasst. Wir haben auch die Header und Fu?zeile in ihre jeweiligen Partials eingeteilt.

Die Datei functions.php - eine entscheidende Datei in der Themenentwicklung - ist ein weiteres Thema, das wir eingeführt und genutzt haben. Die Headerausgabe wurde in eine eigene Funktion unterteilt, die Einzelheiten des Seitenbesuchs und der von Site-Eigentümer definierten Variablen verwendet, um die endgültige Ausgabe zu bestimmen.

Im dritten Teil des Leitfadens werden wir beenden, bestimmte Vorlagen zu erstellen, unseren Themenfunktionen und -Teilern eine bessere Struktur zu geben und das Styling unserer Website zu beenden.

---

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 (FAQs) zum Erstellen eines WordPress -Themas von Grund auf

Was sind die Voraussetzungen, um ein WordPress -Thema von Grund auf zu erstellen? Dies sind die Kerntechnologien, die bei der Entwicklung von WordPress -Themen verwendet werden. Darüber hinaus sollten Sie mit der WordPress -Plattform selbst vertraut sein, einschlie?lich ihrer Dateistruktur und der Vorlagenhierarchie. Es ist auch hilfreich, eine lokale Entwicklungsumgebung auf Ihrem Computer eingerichtet zu haben, wie z. B. MAMP oder XAMPP, wo Sie Ihr Thema beim Erstellen testen k?nnen. ??>

Der erste Schritt zum Erstellen eines WordPress -Themas von Grund auf besteht darin, ein neues Verzeichnis in Ihrem Ordner "WordPress Themes" zu erstellen. Dies ist das Zuhause für alle Ihre Themendateien. Als n?chstes müssen Sie eine style.css -Datei und eine index.php -Datei erstellen. In der Datei style.csss schreiben Sie alle Ihren CSS -Code. Au?erdem definieren Sie Ihre Themendetails. Die Datei index.php ist die Hauptvorlagendatei für Ihr Thema. Hier schreiben Sie den PHP- und HTML -Code, der das Layout Ihrer Website generiert.

Wie kann ich meinem WordPress -Thema benutzerdefinierte Funktionen hinzufügen? Erstellen einer Datei für Funktionen.php in Ihrem Themenverzeichnis. Diese Datei wirkt wie ein Plugin, sodass Sie Ihrem Thema benutzerdefinierte Funktionen und Funktionen hinzufügen k?nnen. Sie k?nnen es verwenden, um Navigationsmenüs zu registrieren, Seitenleisten, Enqueue -Stile und Skripte und vieles mehr hinzuzufügen. 'Ich muss Medienabfragen in Ihrem CSS -Code verwenden. Mit Medienabfragen k?nnen Sie je nach Gr??e des Benutzers unterschiedliche Stile anwenden. Dies bedeutet, dass Sie ein anderes Layout für Desktop-, Tablet- und Mobilger?te erstellen k?nnen. Sie müssen auch sicherstellen

Wie kann ich die Header und Fu?zeile meines WordPress -Themas anpassen? . In der Header.Php -Datei schreiben Sie den HTML- und PHP -Code für Ihren Header, und in der footer.php -Datei schreiben Sie den Code für Ihre Fu?zeile. Sie k?nnen diese Dateien dann in Ihre anderen Vorlagendateien mit der Funktion get_header () und get_foter () einbeziehen. Ein benutzerdefinierter Beitragstyp in Ihr WordPress -Thema, indem Sie die Funktion register_post_type () in Ihrer Datei "Funktionen.php" verwenden. Mit dieser Funktion k?nnen Sie einen neuen Postyp mit eigenen Beschriftungen, Funktionen und Funktionen definieren. Sie k?nnen dann eine einzelne {postype} .php-Datei und eine Archiv- {postype} .php-Datei erstellen, um die Anzeige Ihres benutzerdefinierten Post-Typs zu steuern.

Wie füge ich meinem WordPress-Thema eine Seitenleiste hinzu?

Sie k?nnen Ihrem WordPress -Thema eine Seitenleiste hinzufügen, indem Sie eine Sidebar.php -Datei in Ihrem Themenverzeichnis erstellen und die Funktion register_sideBar () in Ihrer functions.php -Datei verwenden. Sie k?nnen dann Ihre Seitenleiste in Ihren anderen Vorlagendateien mit der Funktion get_sideBar () anzeigen.

Wie füge ich meinem WordPress -Thema ein Navigationsmenü hinzu? WordPress -Thema mit der Funktion "Register_Nav_Menus () in Ihrer Datei" Funktionen.php ". Mit dieser Funktion k?nnen Sie eine oder mehrere Navigationsmenüs in Ihrem Thema registrieren. Sie k?nnen dann Ihr Menü in Ihren anderen Vorlagendateien mit der Funktion WP_NAV_MENU () anzeigen.

Wie kann ich die Schleife in meinem WordPress -Thema anpassen? Durch ?ndern des Schleifencodes in Ihrer Index.php -Datei oder anderen Vorlagendateien. Die Schleife ist der PHP -Code, den WordPress verwendet, um Beitr?ge anzuzeigen. Sie k?nnen es anpassen, um die angezeigten Art und Weise zu ?ndern, die Anzahl der angezeigten Beitr?ge und mehr.

Wie aktualisiere ich mein WordPress -Thema? auf Ihre Themendateien und laden Sie sie dann auf Ihre WordPress -Site hoch. Wenn Sie ein untergeordnetes Thema verwenden, k?nnen Sie das übergeordnete Thema aktualisieren, ohne Ihre ?nderungen zu verlieren. Wenn Sie kein Kinderthema verwenden, sollten Sie vor dem Aktualisieren eine Sicherung Ihres Themas erstellen, da Updates Ihre ?nderungen überschreiben.

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