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 Besitzer eines Website, können diese Tools Ihnen helfen, eine Vorschau anzuzeigen, wie ein bestimmter Stil aussehen wird, ohne die Änderungen tatsächlich für alle anzuwenden.

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 ".

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 Ihrer ändern Wordpress-Theme oder eine Vorlage, um die Änderungen hinzuzufügen, die Sie speichern möchten.

Bevor Sie mit der Bearbeitung Ihrer Wordpress-Theme vorhanden mit dem Tool " 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 (Console) 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

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 es besser anpassen Wordpress-Blog. Fühlen Sie sich frei, dieses Tutorial mit Ihren Freunden zu teilen.