Springe zum Hauptinhalt

Grundlagen in einer Wordpress-Seite Anpassung

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wollten Sie schon immer eine Webseite vorübergehend bearbeiten, um zu sehen, wie sie mit bestimmten Farben, Schriftarten und Stilen aussehen würde? Dies ist mit einem Tool möglich, das bereits in Ihrem Browser vorhanden ist und "" Untersuchen Sie das Element “. Dies ist ein wahrgewordener Traum für alle Benutzer, die CSS manipulieren möchten.

In diesem Tutorial führen wir Sie durch die Grundlagen der Artikelinspektion und deren Verwendung mit Ihrer WordPress-Site.

WordPress-Elementprüfung

Was ist ein Werkzeug zur Artikelinspektion?

Moderne Browser wie Google Chrome und Mozilla Firefox verfügen über Tools, mit denen Webentwickler Fehler debuggen können. Diese Tools zeigen HTML, CSS und JavaScript für eine Seite an und zeigen, wie der Code ausgeführt wird.

Die Verwendung des Werkzeugs " inspizieren Element Sie können den HTML-, CSS- oder JavaScript-Code für jede Webseite bearbeiten und Ihre Änderungen live anzeigen (ausschließlich auf Ihrem Computer).

Für einen Website-Eigentümer können Sie mit diesen Tools eine Vorschau auf einen bestimmten Stil anzeigen, ohne die Änderungen tatsächlich für alle zu implementieren.

Für Autoren sind diese Tools fantastisch, da Sie persönlich identifizierbare Informationen leicht ändern können, während Sie Ihre Screenshots machen, ohne dass Elemente tatsächlich verwischt werden müssen.

Für Support-Mitarbeiter ist dies eine hervorragende Möglichkeit, den Fehler zu identifizieren, der dazu führen kann, dass Ihre Galerien nicht geladen werden oder nicht ordnungsgemäß funktionieren.

Wir kratzen nur an der Oberfläche von Anwendungsfällen, weil das Werkzeug " Untersuchen Sie das Element Ist wirklich mächtig.

In diesem Artikel konzentrieren wir uns auf das Werkzeug " Untersuchen Sie das Element Von Google Chrome, weil es unser bevorzugter Browser ist. Firefox verfügt über eigene Entwicklungstools, die auch über das Menü " Element überprüfen ".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Start des Tools "Inspect the element" und Lokalisierung des Codes

Sie können dieses Tool ausführen, indem Sie STRG + Shift + I auf Ihrer Tastatur. Alternativ können Sie auf eine beliebige Stelle auf einer Webseite klicken und dann den Menüpunkt Browser überprüfen auswählen.

inpection von blogpascher Code

Ihr Browserfenster wird zweigeteilt und im unteren Fenster wird der Quellcode der Webseite angezeigt.

Das Entwickler-Tool-Fenster ist weiter in zwei Fenster unterteilt. Links sehen Sie den HTML-Code für die Seite. Im rechten Bereich sehen Sie die CSS-Regeln.

HTML-CSS-Code-Inspektion

Wenn Sie mit der Maus über die Quelle des HTML-Codes fahren, wird der hervorgehobene Bereich auf der Webseite hervorgehoben. Sie werden auch die CSS-Regeln für dieses betreffende Element bemerken.

CSS-Regeln des HTML-Elements

Sie können auch mit dem Mauszeiger über ein Element auf der Webseite fahren, mit der rechten Maustaste klicken und " Untersuche das Element ". Das Element, auf das Sie geklickt haben, wird im Quellcode hervorgehoben.

Code Developer und Developer Debugger

HTML und CSS im Elementprüffenster können bearbeitet werden. Sie können auf den HTML-Quellcode doppelklicken und den Code nach Ihren Wünschen bearbeiten.

Modifizieren HTML-Quelle

Sie können auch auf die Attribute der Stile im CSS-Bereich doppelklicken und sie bearbeiten. Um eine Regel hinzuzufügen, klicken Sie oben im Stilfenster auf das Pluszeichen.

füge eine neue Regel hinzu css

Wenn Sie Änderungen am CSS- oder HTML-Code vornehmen, werden diese Änderungen sofort in Ihrem Browser angezeigt.

Änderungen am Code leben

Beachten Sie, dass nicht alle hier vorgenommenen Änderungen gespeichert werden. Das Werkzeug Untersuchen Sie das Element Ist ein Debugging-Tool und speichert Ihre Änderungen nicht in einer Datei auf Ihrem Server. Dies bedeutet, dass alle Ihre Änderungen verloren gehen, wenn Sie die Seite aktualisieren.

Um die Änderungen tatsächlich vorzunehmen, müssen Sie den Stil Ihres WordPress-Themas oder Ihrer WordPress-Vorlage ändern, um die Änderungen hinzuzufügen, die Sie speichern möchten.

Bevor Sie Ihr bestehendes WordPress-Theme mit dem Tool bearbeiten " Untersuchen Sie das Element Stellen Sie sicher, dass Sie alle Änderungen speichern, indem Sie ein untergeordnetes Thema erstellen.

Wie Fehler auf Wordpress finden

Das Werkzeug Untersuchen Sie das Element Hat ein Gebiet namens " Konsul Welche zeigt alle Fehler, die auf Ihrer Website vorhanden sind. Bevor Sie versuchen, einen Fehler zu beheben oder die Autoren eines Themes oder Plugins um Hilfe zu bitten, sollten Sie immer hier nachsehen, um zu sehen, was nicht stimmt.

JavaScript-Konsole

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Zum Beispiel, wenn Sie Kunde waren OptinMonster Wer fragt sich, warum sein optin nicht geladen wird, dann kann man leicht das Problem finden, das darauf hinweist, dass die " Slug Ihrer Seite nicht überein ".

Wenn Ihre Freigabeleiste nicht ordnungsgemäß funktioniert hat, können Sie feststellen, dass ein JavaScript-Fehler vorliegt.

Das ist alles für dieses Tutorial, ich hoffe, Sie können Ihr WordPress-Blog besser anpassen. Fühlen Sie sich frei, dieses Tutorial mit Ihren Freunden zu teilen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie
tweet
Registrieren2