Need help? Chat now!

Hostwinds Blog

Suchergebnisse für:


Hostwinds-Anleitungen: So erstellen Sie ein untergeordnetes WordPress-Thema Ausgewähltes Bild

Hostwinds-Anleitungen: So erstellen Sie ein untergeordnetes WordPress-Thema

durch: Hostwinds Team  /  Juli 12, 2019


Maya Angelou sagte einmal: "Es ist an der Zeit, dass Eltern jungen Menschen beibringen, dass es in der Vielfalt gibt, in der Schönheit gibt, und es gibt Kraft."Jetzt fragen Sie sich vielleicht, "Wie bezieht sich das auf einen WordPress-Blog-Beitrag?"

Tolle Frage.Die Antwort ist ein bisschen dehnen, aber hier geht es: WordPress-Elternthemen fördern WordPress-Kinderthemen, um so vielfältig zu sein, wenn sich der Geist vorstellen kann.In der Tat braucht jedes Kinderthema ein übergeordnetes Thema, und der letztere ermöglicht es dem ersteren, Ihre Website mit mehr Vielfalt, Schönheit und Kraft bereitzustellen.Also folgen Elternthemen den Rat der Great Maya Angelou.Was ist das?Das war mehr als nur ein bisschen "ein bisschen" von einem Stretch, und es wäre am besten, diesen Blog-Beitrag zu starten und so zu tun, als würden diese Absätze nie existiert?Das hört sich nach einer guten Idee an.In diesem Fall…

Hallo Leute!Willkommen zurück zum WordPress-Kind-Theme-Blog-Serie!In Teil 1 gingen wir einige WordPress-Fakten und Details, definierte WordPress-Kinderthemen und einheitlich verstopftes Hostwinds WordPress-Hosting.Was ist das?Sie möchten reichlich Informationen zu diesem sogenannten "Hostwinds WordPress-Hosting", weil er sich wie ein wunderbarer und vorteilhafter Service anhört?

Meine Antwort ist zweifach:

1. Sie sind absolut richtig - Hostwinds WordPress Hosting ist Ein wunderbarer und nützlicher Service!

2. Ich bin froh, Ihnen das mitzuteilen.

WordPress-Hosting ist das Webhosting, das perfekt mit Websites mit WordPress kompatibel ist.Es macht das Gebäude und die Aufrechterhaltung Ihrer WordPress-Site aus verschiedenen Gründen, die wir in Teil 1 dieser Blogserie besprochen haben.Was ist das?Sie möchten wissen, wo Sie den Hostwinds WordPress-Hosting in dieser Sekunde richtig bestellen können?

Alles für Sie, nachdenkliches Publikum! Dieser Link bringt Sie an die richtige Stelle:

https://www.hostwinds.com/hosting/wordpress

Was ist das?Sie möchten auch wissen, wo Sie gehen sollen, um Teil 1 dieser WordPress-Kinder-Theme-Blog-Serie zu finden?

Meine Antwort ist zweifach:

1. Sie sind heute ziemlich gesprächig, Publikum, und ich genieße es!

2. Klicken Sie auf den Link unten, um Teil 1 zu lesen.

Untergeordnete WordPress-Themen und warum sie verwendet werden

Die epische Saga geht in Teil 2 fort, wo wir lernen, ein Kinderthema zu verwenden.Möchten Sie Änderungen an Ihrem WordPress-Thema vornehmen?Möchten Sie sicherstellen, dass diese Bearbeitungen nicht gelöscht werden, wenn Sie ein Update für Sicherheits- und Funktionalitätszwecke zwangsläufig installieren?Kinderthemen sind hier, um Sie zu retten!Wir werden eines dieser magischen Kinderthemen in diesem Blogteil erstellen und aktivieren.

Nur um Sie aufzubringen, was wir in unserem hypothetischen Beispiel tun, werden die folgenden Änderungen an unserem CSS-Styling der WordPress-Site vorgenommen:

1. Ein Shake-Effekt, wenn Besucher über bestimmte Überschriften auf unseren Webseiten schweben.

2. Inversion der Farben eines Bildes, wenn die Besucher darüber schweben.

Boom, einfach wie das.Beginnen wir mit dem Erstellen eines Teams.

Schritte vor dem Erstellen eines untergeordneten Themas

Bevor wir uns vor uns gehen und in die Welt der Kinderthemen tauchen, lass uns WordPress installieren.

So installieren Sie WordPress mit dem Softaculous App Installer (Softaculous wird kostenlos mit Hostwinds Shared- und Business Web Hosting-Plänen geliefert und macht die Installation von WordPress zum Kinderspiel):

Schritt 1: Melden Sie sich bei Ihrem Kundenbereich an: https://clients.hostwinds.com/clientarea.php

Schritt 2: Klicken Sie auf Ihren Hostwinds-Dienst

Schritt 3.Klicken Sie im Menü "Aktionen" auf "Aktionen" auf "Aktionen" auf "Aktionen"

Schritt 4.Melden Sie sich bei CPANEL an >> Klicken Sie im Menü "Software" auf das "Softaculous App Installer"

Schritt # 5.Klicke auf "Blogs" auf "Blogs" im Menü auf der linken Seite der Seite >> auf "WordPress"

Klicken Sie zunächst auf Blogs

Zweitens klicken Sie auf WordPress

Schritt # 6.Klicken Sie auf "Installieren"

Schritt 7. Geben Sie Informationen wie Ihren Domainnamen, den Administrator-Benutzernamen und das Administratorkennwort ein

Du hast es geschafft! Alles erledigt!

Sobald Sie WordPress eingerichtet haben

Jetzt ist es Zeit, Ihr übergeordnetes Thema zu aktivieren, und so machen Sie das:

Schritt 1.Melden Sie sich bei WordPress mit den von Ihnen gerade erstellten Anmeldeinformationen an, während Sie WordPress installieren >> Klicken Sie auf "Erscheinung" im Menü links neben der Seite >> Klicken Sie auf "Themen".

Schritt 2.Wählen Sie Ihr bevorzugtes Thema aus und klicken Sie auf "Aktivieren"

Klicken Sie zunächst auf Erscheinungsbilder

Zweitens klicken Sie auf Themen

Klicken Sie auf die Schaltfläche Aktivieren

Übergeordnetes Thema effektiv aktiviert! Auf den nächsten!

Und jetzt Schritte zum Erstellen eines untergeordneten Themas

Ja, wir sind endlich bereit, unser Kinderthema zu erstellen. So geht's:

Schritt 1.Kreuzfahrt zurück zu Ihrem CPanel-Konto >> Klicken Sie innerhalb des Menüs "Dateien" >> in den Ordner "Public_HTML" >> Wechseln Sie in Ihren Ordner "WP" >> Gehen Sie zu Ihrem Ordner "WP-Content" >>> Gehen Sie zu Ihrem Ordner "Themen"

Klicken Sie zunächst auf public_html

Zweitens klicken Sie auf wp / Drittens auf wp-content

Schritt 2. Mach ein neuer Ordner Innerhalb Ihres WP-Content / Themen-Ordners mit dem Titel "[Ihr Elternthema-Name geht hier] -child."Sie können es auch nennen, ähnlich wie "[Ihr Elternthema-Name wird hierher] _child."Um dies zu erreichen, klicken Sie in der oberen linken Ecke der Seite auf "+ Ordner".

Schritt 3. Gehen Sie in Ihren neuen Ordner und erstellen Sie eine neue Datei.Klicken Sie auf Ihren neuen Ordner >> Klicken Sie auf "+ Datei" in der oberen linken Ecke der Seite >> Name Die neue Datei "style.css".

Wir erstellen zuerst eine style.css-Datei, da es sich um das einfachste, was man tun kann, um ein Kinderthema zu erstellen.Warten Sie, das klingt vertraut.Oh ja, es erinnert sehr an ein Zitat von Teil 1 dieses WordPress-Kindenthema-Blogs-Serie: "Die einfachsten untergeordneten Themen enthalten eine style.css-Datei."

Fahren Sie mit Schritt 4 fort!

Schritt 4.Öffnen Sie Ihre style.css-Datei, indem Sie mit der rechten Maustaste auf ihn klicken und "Bearbeiten" >> Kopieren und Fügen Sie den folgenden Code in Ihr style.css-Dokument aus, und klicken Sie auf "Änderungen speichern".

12345678910 / * Themenname: Themen-URI: Beschreibung: Autor: Autor URI: Vorlage: Version: Lizenz: * /

Bevor wir den Rest dieses Codes ausfüllen, möchte ich erklären, was genau jedes dieser Felder bedeutet.

Themenname ist der Name des übergeordneten Themas, das Sie gerade aktiviert haben.

Themen-URI Wäre im Allgemeinen, wo Sie die URL der Homepage Ihres Designs setzen würden, da es sich um die URL einer Webseite handelt, in der Daten zu Ihrem Thema gefunden werden können.

Beschreibung ist ein kurzer Satz, der Ihr Kinderthema zusammenfasst.

Autorin bist du, also geht dein Name oder WordPress-Benutzername hier.

Autoren-URI ist die URL für Ihre Homepage.

Vorlage Ist der Name des Ordners der Elternthema.

Ausführung ist die Versionsnummer Ihres untergeordneten Themas. Wir werden 1.0.0 verwenden.

Lizenz ist Ihre Lizenzerklärung für Ihr Kinderthema.

Sie können auch Felder wie "Text Domain" und "Tags" hinzufügen, die jedoch nicht erforderlich sind.

Hier ist der Code, den ich ausgefüllt habe, um die gewünschten Ergebnisse zu erzielen:

12345678910 / * Themenname: Twentyseventeen-ChildTheme URI: http://mydomain.com/wp/twentyseventeen-child/Beschreibung: Child Theme für Twenty Seventeen ThemeAutor: ErinCAuthor URI: http: //mydomain.comTemplate: TwentyseventeenVersion: 1.0.0License : GNU General Public License v2 oder höher * /

Wenn Sie mehr Klarheit darüber benötigen, was Sie für Ihre spezifischen Themen- / untergeordneten Themeninformationen einfügen sollen, lesen Sie Folgendes:

12345678910 / * Themenname: [IHR ELTERN-THEMEN-NAME GEHT HIER] -childTheme-URI: http: // [IHR HOMEPAGE-NAME GEHT HIER] NAME GEHT HIER] themeAuthor: [IHR NAME GEHT HIER] Autoren-URI: http: // [DER NAME IHRER HEIMATZE GEHT HIER] .comTemplate: [IHR ELTERN THEMENNAME GEHT HIER] Version: 1.0.0Lizenz: GNU General Public License v2 oder höher * /

Nachdem Sie diesen Chunk-Code eingeben, können Sie den Rest des Dokuments ausfüllen, da Sie in der Regel ein CSS-Dokument ausfüllen würden.Wenn Sie übrigens keine Erfahrungen mit CSS hatten oder Ihr CSS-Wissen auffrischen müssen, haben wir zufällig einen Blog-Beitrag veröffentlicht, der CSS-Grundlagen erläutert.

Der folgende Link leitet Sie an unser "Hostwinds CSS-Chat" -Blog-Stück:

Hostwinds CSS Chat

Zeit, unser Kinderthema zu aktivieren! Befolgen Sie dazu die folgenden Schritte:

  1. Navigieren Sie zu Ihrem WordPress-Dashboard und dann auf "Erscheinungsbild" im Menü auf der linken Seite der Seite
  2. Klicken Sie auf "Themen" >> Klicken Sie unter Ihrem Namensthema-Namen auf "Aktivieren"

Jetzt werden Sie feststellen, dass Ihre WordPress-Site etwas anders aussieht, aber Keine Panik. Sobald Sie die nächsten Schritte ausgeführt haben, ist der Normalzustand wieder hergestellt.

Schritt 1.Gehen Sie in den File Manager von CPANEL in Ihren untergeordneten THEE-Ordner zurück (derselbe Ordner, der Ihre style.css-Datei enthält)

Schritt # 2. Erstellen Sie eine neue Datei und nennen Sie es "FUNCTIONS.php"

Schritt # 3. Klicken Sie mit der rechten Maustaste auf die Datei >> Klicken Sie auf "Bearbeiten"

Schritt # 4. Kopieren Sie diesen genauen Code in das Dokument, und klicken Sie in der oberen rechten Ecke der Seite auf die Schaltfläche "Änderungen speichern" klicken:

PHP 1234567.

Wenn Sie die Seite auf Ihrer WordPress-Website aktualisieren, sollte sie auf magische Weise wieder normal werden und viel hübscher aussehen.

Lassen Sie mich erklären, warum die vorherigen Schritte notwendig sind. Mit dem Code, den Sie gerade kopiert und eingefügt haben, können alle übergeordneten WordPress-Designs das mit WordPress gelieferte Standard-CSS lesen.

Und jetzt Schritte zum Hinzufügen Ihres CSS-Codes

Um Änderungen an Ihrem CSS-Code effektiv vorzunehmen, müssen Sie die richtigen Klassennamen in Ihrem WordPress-Elternthema identifizieren.So tun Sie das: Klicken Sie mit der rechten Maustaste auf die Startseite Ihrer Website >> Klicken Sie auf "Inspect"

Wenn Sie mit dem Google Chrome-Inspect-Tool nicht vertraut sind (auch als "Google Chrome-Entwicklertools" bezeichnet), ist es eine phänomenale Ressource, da es jedem ermöglicht wird, das, was jede Codezeile auf einer Website erstellt.Wenn Sie beispielsweise auf eine Webseite mit der rechten Maustaste auf eine Webseite klicken, klicken Sie auf "Inspect", klicken Sie auf das kleine Cursor-Symbol in der linken Ecke der Entwickler-Tools, Sie können auf ein beliebiges Element auf Ihrer Seite klicken, um zu sehen, wie ein Titel vonCode wurde erstellt.

Darüber hinaus können Sie auf jede Codezeile doppelklicken, sie bearbeiten, drücken, drücken und testen, wie die Webseite aussehen würde, wenn Sie diese Änderung vorgenommen haben.Was ist das?Das Inspect-Tool ist genial! Wow, du hast meine Gedanken gelesen. Wir werden die Google Chrome Developer Tools verwenden, um die CSS-Selektoren zu identifizieren, auf die wir in unserem style.css-Dokument verweisen müssen, um Änderungen vorzunehmen.

P.Obwohl wir die Entwicklerwerkzeuge von Google Chrome verwenden, haben sowohl Firefox als auch Internet Explorer sehr ähnliche Werkzeuge.

P.P.S. Für die Zwecke dieses Tutorials behalten wir unsere WordPress-Site unter den gleichen Bedingungen bei, unter denen sie zum ersten Mal aktiviert wurde, und nehmen nur die beiden Änderungen vor, die in der Einführung dieses Blogposts erwähnt wurden.

P.p.p.s.Noch etwas, was wir gerne in Bezug auf CSS-Dokumente ansprechen möchten: Wussten Sie, dass Browser CSS-Dokumente von oben nach unten lesen?In ähnlicher Weise lesen Browsern die CSS, die in den Dokumenten von style.css von kind themen enthalten sind, als ob der Code niedriger ist als der CSS-Code, der im style.css-Dokument des übergeordneten Designs enthalten ist.Mit anderen Worten, der Code, den Sie in Ihrem untergeordneten Thema style.css document haben, überschreibt immer das des style.css-Dokuments des übergeordneten Designs.

Whoa, was für eine lange P.P.P.S. Naja! Wie bereits erwähnt, werden wir zwei Dinge für unsere Website ändern. Hier ist # 1:

1. Sagen wir beispielsweise, dass Sie es notwendig sind, alle Ihre Rubriken zu schütteln, wenn Ihre Website-Benutzer über ihnen schweben.

Fügen Sie den folgenden Code in Ihr style.css-Dokument ein, um dies zu erreichen:

123456789101112131415161718192021222324 h2: hover {Perspektive: 900px; Sichtbarkeit der Rückseite: versteckt; transformieren: translate3d (0, 0, 0); Animation: Schütteln Sie 0,70s Kubik-Bezier (.25, .10, .17, .88) beide;} @keyframes Schütteln {12%, 88% {Transformation: translate3d (-2px, 0, 0); } 19%, 82% {transform: translate3d (3px, 0, 0); } 32%, 53%, 68% {transform: translate3d (-3px, 0, 0); } 42%, 58% {transform: translate3d (3px, 0, 0); }}

Beachten Sie zunächst den Selektor "H2".Wir haben die Google Chrome Developer Tools verwendet, um herauszufinden, welche Wahlschalter in diesem Code Bezug genommen wird.Zweitens können Sie die Nummern in dem obigen Code einstellen, um die Überschriften schneller oder langsamer zu schütteln.Stellen Sie sicher, dass Sie auf die Schaltfläche "Änderungen speichern" klicken, nachdem Sie den Code in dem Dokument eingelassen haben.

2. Die zweite Sache, die wir tun werdenDrücken Sie "Speichern von Änderungen", wenn Sie alle fertig sind, kopieren und einfügen.

123 img: hover {filter: invert (100%);}

Und so machen Sie ein glorreiches und effektives Kinderthema!Sie sind alle eingestellt, und Ihre Site verfügt über einige benutzerdefinierte Berührungen, die nicht gelöscht werden, wenn Sie jedes WordPress-Update installieren.Aktualisieren Sie Ihre Seite, sobald Sie diese Schritte unternommen haben, und notieren Sie sich, wie unglaublich cool aussieht, wenn Sie über eine Überschrift schweben, und es schüttelt.Beachten Sie, wie unglaublich magisch es aussieht, wenn Sie auf Ihrer Homepage über das Bild schweben, und seine Farben invertieren.Diese aktualisierte Website ist jetzt, da die Kinder in diesen Tagen sagen, "beleuchtet".

(Wort) Drücken auf

Lieben Sie nicht einfach ein großes Wortspiel in einem Blogübergang?Was ist das?Wortspiele sind unglaublich kitschig, aber erstaunlich?Wie die Kinder in diesen Tagen sagen, "True dat ... bro."

In einem ganz anderen Sinne ist hier ein Zitat von der WordPress-Hosting-Seite auf unserer Website:

"WordPress-Webhosting ist auf diejenigen zugeschnitten, die eine WordPress-Site abrufen und schnell läuft, damit sie mit dem Aufbau, Entwerfen oder der Aktualisierung beginnen können. Mithilfe des sodaculous Apps-Installationsprogramms aus Ihrem CPANEL-Konto können Sie WordPress auf Ihrem Hosting-Konto installieren und anfangenVerwenden dieser kostenlosen Software auf einem Server, der für die Verfügbarkeit optimiert und von Hostwinds 24/7/365 überwacht wird. "

Das Hostwinds-Team hat unser WordPress-Hosting speziell formuliert, damit Benutzer bequem eine WordPress-Website erstellen können, ohne sich Gedanken über die Konfiguration ihrer Server für die Kompatibilität mit WordPress machen zu müssen. Im Übrigen ist alles, was Hostwinds erstellt, speziell so formuliert, dass Hosting-Verfahren für unsere Kunden zum Kinderspiel werden.

Maya Angelou summierte sich die Art und Weise, wie sich unser Team anfühlt, unseren geschätzten Kunden zu helfen, als sie sagte: "Wenn Sie es in Ihrem Herzen finden, sich um jemanden anderen zu kümmern, werden Sie Erfolg haben."

Es ist wirklich wichtig für unser Personal, das Sie während der Nutzung unserer Dienstleistungen ein Sterlingerlebnis haben. Wir betrachten unser Unternehmen erfolgreich, wenn wir das Leben unserer Kunden in gewisser Weise verbessert haben. Beachten Sie bitte, dass Sie, als Sie ein WordPress-Kinderthema erstellen, immer mehr als willkommen, unseren Expertenteam jederzeit, 24/7 über Live-Chat, Telefon oder Support-Ticket zu erreichen, wenn Sie Hilfe benötigen. Wir sind immer für Sie da.

Geschrieben von Hostwinds Team  /  Juli 12, 2019