So erstellen Sie ein WordPress -Thema von Grund auf neu: Die Grundlagen

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!