Beginnend mit WordPress: Bearbeiten der Struktur Ihrer Site

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Sie haben also Ihre CSS-Chops auf den neuesten Stand gebracht, und Ihre Website sollte jetzt zumindest ein gutes Stück weiter sein, um mit einem Farbschema und vielleicht sogar einigen benutzerdefinierten Schriftarten angepasst zu werden, damit es sich wirklich so anfühlt, als wäre es viel mehr 'du' als es war. Sie denken jedoch, Sie möchten auch einige andere Änderungen vornehmen, und diese Änderungen hängen nicht genau mit dem Stil zusammen. Es ist also wahrscheinlich, dass Sie anfangen müssen, einige der fest codierten, eingebauten Strukturen zu bearbeiten, und das bedeutet, dass Sie anfangen müssen, sich mit den PHP-Dateien Ihrer Site zu befassen.

Oh, aber bevor wir das tun, wenn Sie nach dem Stylesheet suchen, das ich letzte Woche versprochen habe und das die Konvertierung von Twenty Thirteen von Orange nach Blau abschließt: Das ist hier - es gibt möglicherweise einige Elemente des Themas, die ich beim Navigieren übersehen habe Ich habe nicht jedes letzte Post-Format angepasst und es gibt wahrscheinlich andere Dinge, die Sie nicht finden werden. Wenn Sie also wirklich vorhaben, dies für eine Live-Site zu verwenden, müssen Sie einiges mehr tun. Aber es wird Ihnen zumindest einen fairen Einstieg in den Prozess ermöglichen und Sie so einrichten, dass Sie in der Lage sind, alle anderen Anpassungen zu verwalten, die Sie später möglicherweise wünschen.

Wie auch immer, zurück zum Tutorial dieser Woche!

Bevor wir anfangen, brauchen Sie...

FTP-Zugang zu Ihrer Site
Ihre Textbearbeitungssoftware

Was wir tun werden

Bearbeiten der Standard-WordPress-Fußzeile mit benutzerdefiniertem Link/Inhalt
Verschieben der Hauptnavigation vor den Header
Erstellen einer Seitenbeschreibung mithilfe benutzerdefinierter Felder

Als Einführung muss ich etwas mehr über Vorlagen in einem WordPress-Thema und deren Funktionsweise im Kontext eines untergeordneten Themas erklären. Vielleicht erinnern Sie sich daran, dass unser Thema zu diesem Zeitpunkt keine PHP-Vorlagen enthält.

Vielleicht bin ich mir selbst voraus. Sie kennen vielleicht nicht einmal das Template-System, oder? Für wirklich vollständige Erklärungen können Sie hier beginnen:

Referenz

Codex: Einstieg in Vorlagen
Codex: Vorlagen
Codex: Untergeordnete Themen und Vorlagen

Lassen Sie mich jedoch für die Kurzfassung den Codex zitieren, da ich ihn selbst nicht besser sagen könnte:

Vorlagen sind die Dateien, die steuern, wie Ihre WordPress-Site im Web angezeigt wird. Diese Dateien beziehen Informationen aus Ihrer WordPress MySQL-Datenbank und generieren den HTML-Code, der an den Webbrowser gesendet wird. Mit seinem leistungsstarken Theme-System können Sie in WordPress so wenige oder so viele Vorlagen definieren, wie Sie möchten

Wenn Sie sich jetzt Ihr Thema ansehen, werden Sie feststellen, dass sich im Moment tatsächlich keine Vorlagen in Ihrem Themenverzeichnis befinden. Soll ich Sie daran erinnern, warum?

Das habe ich nicht gedacht. Sie erinnern sich, dass unser Thema ein "untergeordnetes Thema" ist und daher alle Vorlagen für unser Thema wieder im übergeordneten Themenverzeichnis gespeichert sind.

Es bleibt also die Frage, wie wir auf diese Dateien zugreifen und sie bearbeiten können, ohne das übergeordnete Thema zu gefährden. Sollte der Themenentwickler das Thema aktualisieren?

Ich bin froh, dass du gefragt hast! Es ist einfach, wir kopieren einfach die Vorlage, die wir bearbeiten möchten, aus dem übergeordneten Verzeichnis in unser untergeordnetes Themenverzeichnis. WordPress ist clever genug, um zuerst im Verzeichnis unseres untergeordneten Themas nach Vorlagen zu suchen. Wenn dort keine erforderliche Datei gefunden wird, wird automatisch auf das übergeordnete Element zurückgegriffen. Alles, was wir in das untergeordnete Themenverzeichnis kopieren, hat Vorrang.

Ok, das ist der Hintergrund. Jetzt gehen wir zu den Dingen über, die es uns ermöglichen, die gewünschten strukturellen Änderungen vorzunehmen.

Erstellen / Kopieren von Dateien in Ihrem untergeordneten Thema

Zunächst gibt es mehrere Möglichkeiten, eine Kopie der Vorlagen, die wir bearbeiten möchten, vom übergeordneten Thema in das untergeordnete Thema zu übertragen.

Methode 1

Sie können in Ihrem FTP-Client per Drag & Drop von Remote zu Local und zurück zu Remote ziehen.

Ziehen Sie in FileZilla Kopien der Vorlagen, die Sie bearbeiten, vom übergeordneten Thema auf Ihren Desktop (oder an eine andere lokale Stelle auf Ihrem Computer) und ziehen Sie sie dann wieder auf Ihren Server in das untergeordnete Themenverzeichnis:

Dadurch wird nichts von der Remote-Datei gelöscht. Es wird lediglich eine Kopie auf Ihrem lokalen Computer erstellt, die Sie dann an einem anderen Speicherort wieder auf die Remote-Maschine kopieren.

Methode 2

Wir können in Text Wrangler auch ein Lesezeichen für unseren FTP-Server einrichten, damit wir bis zu alternativen Speicherorten (wie dem untergeordneten Thema) wie folgt speichern können:

Gehen Sie in Text Wrangler zu Text Wrangler »Setup
Klicken Sie auf der Registerkarte Lesezeichen unten links auf das Pluszeichen (+), um ein neues Lesezeichen zu erstellen

Füllen Sie die Felder mit Ihren FTP-Daten, denselben Anmeldeinformationen, die Sie beim Einrichten von FileZilla verwendet haben.

Wenn Sie sich in FileZilla befinden und eine Datei kopieren möchten, können Sie mit der rechten Maustaste auf die Datei auf Ihrem Server klicken (in unserem Fall footer.php). und wählen Sie Bearbeiten, damit es in Text Wrangler geöffnet wird.

Wählen Sie dann im Text Wrangler File Menü die Option Kopie auf FTP/SFTP-Server speichern. (Wenn Sie FTP auswählen und das Programm Ihnen mitteilt, dass Sie eine Sicherheitsausnahme zulassen müssen, da Sie jedes Mal die Option "Zulassen zulassen" verwenden und mit dem Speichern der Datei fortfahren, müssen Sie dies nur einmal tun.)

Im nächsten Fenster können Sie dann zum Verzeichnis Ihres untergeordneten Themas navigieren und die neue footer.php in Ihrem untergeordneten Thema speichern.

Dadurch wird auch die Datei vom Server nach unten verschoben und wieder an den neuen Speicherort auf diesem Server gesichert. Dies ist etwas komplizierter, aber ich denke, dies sorgt für einen saubereren Prozess, da Sie keine verwaisten Dateien auf Ihrem Desktop haben. Unabhängig davon, wie Sie sich dafür entscheiden, benötigen wir auf jeden Fall eine Kopie von footer.php (oder der Datei, die wir bearbeiten) in unserem untergeordneten Thema, damit wir Änderungen daran vornehmen können!

Bearbeiten der Fußzeile zum Ändern der Site-Info-Details

Die erste Änderung, die ich normalerweise vornehmen muss, wenn meine Auszubildenden diesen Teil des Kurses erreichen, ist das Ändern der Standardeinstellung "Twenty Thirteen Footer"

Meistens möchten sie einen Copyright-Hinweis hinzufügen oder ihn ganz ändern. So oder so wird es Sie wahrscheinlich nicht überraschen zu wissen, dass Sie in der Fußzeilenvorlage (footer.php) mit diesem Teil Ihrer Website herumspielen können. - Öffnen Sie daher anhand der Informationen im obigen Abschnitt die Kopie der footer.php Ihres untergeordneten Themas in Ihrem Texteditor.

Bevor wir also etwas bearbeiten, wollen wir das, was wir sehen, aufschlüsseln.

Ganz oben auf der Seite sehen Sie ein Code-Tag, das so aussieht. Dies weist darauf hin, dass der folgende Text PHP ist, eine Sprache, die vom Server interpretiert und ausgeführt wird, bevor die Seite an den Client(Browser) zurückgesendet wird - das ist das clevere Zeug der Web-Technologie, wir müssen keine dummen Dateien mehr verwenden, die sitzen statisch auf dem Server, der einfach als Antwort auf eine Browseranfrage bereitgestellt wird. Serverseitiges Scripting, wie es PHP ist, ermöglicht so viel mehr eine clevere, dynamische Technologie, die heutzutage viele webbasierte Produkte antreibt (es gibt auch andere Sprachen, aber WordPress ist in PHP geschrieben und daher liegt unser Fokus hier ).

PHP ist kein HTML, aber es funktioniert in und um HTML, weil dies von Browsern gelesen wird. Browser können PHP nicht lesen oder interpretieren, das alles geschieht auf dem Server (und deshalb mussten Sie bei der Bestellung Ihres Hostings in Episode 2 sicherstellen, dass Ihr Host einen Server mit PHP anbot, was natürlich die überwiegende Mehrheit von ihnen ist tun).

In jedem Fall wird beim Lesen der Seite Folgendes angezeigt:

Das öffnende PHP-Tag
Kommentare zu dieser Vorlage, die ihren Platz in der gesamten Site-Struktur angeben (enthält den Fußzeileninhalt, schließt auch den Hauptinhaltsbereich)
Schließen des PHP-Tags
Einige HTML-Tags - mit hilfreichen Kommentaren...
einige HTML-Tags - mit hilfreichen Kommentaren... Das schließende Main </div>, das Öffnen des Abschnitts <footer>
Einige PHP-Tags, z. B. <?php get_sidebar('main'); ?>
Weitere schließende HTML-Tags

Der veröffentlichte Code sieht tatsächlich so aus:

Sie werden feststellen, dass die Seite nur HTML enthält. Alle verschiedenen Vorlagenteile wurden entweder aus dem Thema (sidebar.php und footer.php usw.) oder aus WordPress selbst gezogen. wp_footer(); und werden zu einer HTML-Seite kompiliert. Jede Seite oder jeder Beitrag auf Ihrer Website, die Sie besuchen, wurde auf dieselbe Weise zusammengestellt, je nachdem, wo Sie sich auf Ihrer Website befinden.

Wenn Sie sich auf der Startseite befinden, wird möglicherweise eine home.php- oder eine front-page.php-Vorlage abgerufen. Wenn Sie sich auf dem Blog befinden, handelt es sich wahrscheinlich um eine archive.php-Vorlage. Alle Vorlagen in Ihrem Design werden (vom Server) nach Bedarf zusammengeführt, wenn ein Client (Browser) eine Anforderung an den Server zum Anzeigen Ihrer Site sendet.

Um zu dem zurückzukehren, was wir für diese Übung erreichen möchten, kehren Sie zu Ihrem Texteditor zurück und erhalten Sie eine Vorstellung davon, welche Teile dieses Fußzeilenvorlagencodes Sie möglicherweise bearbeiten möchten.

Wenn Sie genau hinschauen, sehen Sie ein langes PHP-Tag, das anscheinend alle Elemente enthält, die Sie möglicherweise ändern möchten. Zuerst können wir sehen, dass dieses ganze Snippet ein Link zurück zu WordPress.org ist:

	<?php do_action( 'twentythirteen_credits' ); ?>

		<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>

Wenn Sie sich mit dieser Art von Code vertraut gemacht haben, können Sie ihn nach Belieben anpassen. Möglicherweise möchten Sie diesen Abschnitt alle zusammen löschen. In diesem Fall können Sie alles entfernen aus:

1	<div class="site-info">to</div>
2	<!-- .site-info -->

und lassen Sie den gesamten Abschnitt verschwinden und Ihre Site mit dem unteren Rand der Widget-Fußzeile (sidebar.php) beenden.

In diesem Fall möchten wir jedoch die URL zu meiner Website ändern und eine Gutschrift für mich als Entwickler sowie einen Urheberrechtshinweis einreichen, um die Benutzer davon abzuhalten, meine Inhalte wiederzuverwenden.

Zuerst ändern wir die Referenzen in diesem Code-Snippet von twentythirteen in mytheme (der Name unseres Themas) und:

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Dann ändern wir die URL von wordpress.org zu thewebprincess.com - damit sie wieder auf meine Seite verlinkt:

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Dann ändern wir den Link-Titel von "Semantic Personal Publishing Platform" in "Web Development and WordPress Training" (dies ist ein Link zu mir, sagen wir Google, was ich tun kann):

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Dann ändern wir den Text "Proudly Powered by" in "Lovingly Crafted by".

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'WordPress' ); ?></a>

Dann ändern wir das Wort "WordPress" in "The Web Princess":

<?php do_action( 'mytheme_credits' ); ?>

	<a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a>

Schließlich möchten wir es mit unserem Copyright-Hinweis anpassen und den Namen des Kunden nach unserem Link und ein PHP-Tag hinzufügen, um das Datum anzuzeigen. Wir haben PHP verwendet, da dies automatisch anzeigt, was auch immer das aktuelle Jahr ist!

<?php do_action( 'mytheme_credits' ); ?>

	<p><a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a> for The Site Owner &copy; <?php echo date('Y'); ?>

Los geht's! Eine neue angepasste Fußzeile für unsere Website.

Das war übrigens ein ziemlich langwieriger Weg. Auf diese Weise haben wir alle Elemente beibehalten, die es ermöglichen, dieses Thema zu internationalisieren. In einem realen Szenario, in dem Sie es nur für sich selbst optimieren (anstatt Ihr Thema für eine breitere Verbreitung vorzubereiten), hätten Sie es einfach überspringen können all und ersetzte den gesamten obigen Code durch den folgenden:

1	<a title="Web Development and WordPress Training" href="http://thewebprincess.com/">Lovingly Crafted by The Web Princess</a> for The Site Owner © 2013

Verschieben der primären Navigation auf Vor dem Header-Bild

Das nächste, was wir tun werden, ist, die primäre Navigation von ihrem aktuellen Zuhause unter dem Banner nach darüber zu verschieben. Dann erstellen wir einen neuen Navigationsbereich unter dem Banner. Sie wissen, nur weil wir können.

Diesmal müssen Sie also die Datei header.php aus dem übergeordneten Thema in Ihr untergeordnetes Thema kopieren und die untergeordnete Version in Ihrem Editor öffnen.

Wählen Sie den Code am Anfang von:

1	<div id="navbar">to the closing tag of the same</div>
2	<!-- #navbar -->

Dies ist eines der coolen Dinge an Twenty Thirteen, all diese großartigen Kommentare, die Ihnen helfen, herauszufinden, wo Sie sind. Beachten Sie und machen Sie dasselbe in Ihren eigenen Themen, damit die Leute, die hinter Ihnen auftauchen, sich in Ihren Themen zurechtfinden.

Schneiden Sie diesen Code aus und fügen Sie ihn über der Zeile <header class="homelink"> ein. Stellen Sie sicher, dass Sie es innerhalb von <div> halten.

Speichern Sie die Datei und aktualisieren Sie die veröffentlichte Ansicht Ihrer Site, damit Sie Ihre Änderungen sehen können:

Beachten Sie, dass das Bannerfoto etwas kürzer ist als es war und der Abstand zwischen dem Banner und dem Seitentitel etwas größer ist. Wenn wir es im Inspektor überprüfen, können wir sehen, dass der Kopfbereich immer noch dieselbe Höhe hat. Was passiert ist, dass das Header-Bild von der Navigation verdeckt wird, also werden wir das Bild entsprechend nach unten verschieben.

Um dies zu tun, werden wir ein bisschen CSS optimieren. Überprüfen Sie den Code auf die gleiche Weise wie in unserem vorherigen Tutorial, bis Sie Folgendes finden:

1	body .site-header {
2	background-position: 0px 45px;
3	}

Der Grund, warum wir den Body Selector in den .site-header eingefügt haben, besteht darin, die Spezifität des CSS zu erhöhen. Ohne sie könnten wir den Code in unser Stylesheet einfügen und würden die gewünschten Ergebnisse nicht sehen, da das CSS für den .site-header an einer anderen Stelle im Thema festgelegt ist und Priorität hat (kommt nach unserem Stylesheet in der Kaskade). Durch das Hinzufügen des Body-Tags wird das CSS spezifischer und bedeutet, dass es Priorität hat. Daher spiegelt die Site unsere Änderungen wider.

Speichern Sie auf der Site und aktualisieren Sie die veröffentlichte Site!

Gut aussehen!

Hinzufügen einer Seitenbeschreibung zu unseren Seitenvorlagen mithilfe benutzerdefinierter Felder

Als letztes müssen wir unsere page.php-Vorlage bearbeiten, damit wir ein Seitenbeschreibungsfeld unter dem Seitentitel hinzufügen können. Wir werden dies mithilfe von benutzerdefinierten Feldern tun (weitere Informationen hierzu finden Sie im Codex).

Zunächst legen wir unser benutzerdefiniertes Feld auf unserer Services-Seite fest.

Zuerst müssen Sie wahrscheinlich die Bildschirmoptionen bearbeiten, um sicherzustellen, dass Sie Zugriff auf das Bedienfeld Benutzerdefinierte Felder haben. Stellen Sie sicher, dass das Kontrollkästchen Benutzerdefinierte Felder aktiviert ist:

Dies öffnet ein neues Fenster unter dem Seiteneditor. Klicken Sie auf Neu eingeben, um ein neues benutzerdefiniertes Feld zu erstellen. Geben Sie "Seitenbeschreibung" in das Feld Name ein und geben Sie die Beschreibung Ihrer Seite in das Feld Wert ein.

Jetzt müssen wir unserer Seitenvorlage Code hinzufügen. Kopieren Sie also page.php aus dem übergeordneten Thema in unser untergeordnetes Themenverzeichnis und öffnen Sie die page.php des untergeordneten Themas in unserem Editor. Wir fügen diesen Code in die Vorlage nach der Überschrift der Ebene 1 (<h1>) und vor dem Ende der Artikelüberschrift ein.

1	<h5 class="page-description"><?php echo get_post_meta($post->ID, 'page description', true); ?></h5>

Wir haben den Code, den wir für diese Seite verwendet haben, von der Codex-Seite in benutzerdefinierten Feldern erhalten. Suchen Sie nach dem Abschnitt Vorlagenfunktionen. Wir haben einfach den "key" gegen unseren ausgetauscht, nämlich "page description". Speichern und laden Sie Ihre Datei hoch und aktualisieren Sie die veröffentlichte Seite:

Los geht's, die Anfänge der Bearbeitung von Themenvorlagen.

Abschluss

Sich in den Themenvorlagen zurechtzufinden, kann ein wenig entmutigend sein. Glücklicherweise ist es ein sehr nützlicher Anfang, mit einem Thema wie Twenty Thirteen zu beginnen, da es durchweg gut kommentiert ist.