Eine kurze Einf\u00fchrung in CSS<\/h2>\n
Wenn Sie bereits mit CSS vertraut sind, m\u00f6chte ich Sie nicht mit einem langen \u00dcberblick bel\u00e4stigen. Wenn Sie noch nie mit CSS gearbeitet haben oder sich nicht einmal sicher sind, was CSS ist, lesen Sie bitte zuerst unseren Artikel zu diesem Thema:<\/p>\n
Was ist CSS und wie wirkt es sich auf WordPress aus?<\/a><\/p>\n Darin werden die Grundlagen behandelt, warum CSS zum Stylen von Websites verwendet wird und wie es angewendet wird.<\/p>\n Es gibt einen gro\u00dfen Fehler, den WordPress-Benutzer, die neu in CSS sind, machen:<\/p>\n Sie passen die Themendateien an.<\/p>\n Beispielsweise kann jemand, der das Challenger-Design verwendet, seine CSS-Bearbeitungen direkt in der Datei style.css platzieren, auf die \u00fcber das Men\u00fc Darstellung > Editor zugegriffen wird.<\/p>\n WordPress enth\u00e4lt jetzt einen Hinweis, der Sie davor warnt, hier zu bearbeiten<\/p>\n Das Problem beim Bearbeiten der Datei style.css besteht darin, dass Sie alle Ihre \u00c4nderungen verlieren, wenn Sie auf eine neue Version von Challenger aktualisieren. Vertrauen Sie mir, Code\u00e4nderungen zu verlieren, deren Durchf\u00fchrung lange gedauert hat, kann unglaublich entmutigend sein.<\/p>\n Es gibt eine bessere M\u00f6glichkeit, CSS zu Ihrer Website hinzuzuf\u00fcgen, wo es nie \u00fcberschrieben wird. Dar\u00fcber hinaus wird dieser Code Ihrer Website so hinzugef\u00fcgt, dass es einfacher ist, die Stile des Themas zu \u00fcberschreiben.<\/p>\n Um CSS zu Ihrer Website hinzuzuf\u00fcgen, \u00f6ffnen Sie den Customizer (Darstellung > Anpassen) und klicken Sie auf den Abschnitt Zus\u00e4tzliches CSS.<\/p>\n Dies ist normalerweise der letzte Abschnitt im Customizer<\/p>\n Wenn Sie diesen Abschnitt \u00f6ffnen, sehen Sie einen Textbereich, in dem Sie Ihren Code hinzuf\u00fcgen k\u00f6nnen. WordPress wird hier einige Tipps enthalten, aber Sie k\u00f6nnen auf den Link Schlie\u00dfen klicken, um ihn zu entfernen und nur die Codeeingabe anzuzeigen.<\/p>\n Sie k\u00f6nnen hier beliebige CSS eingeben und speichern, die Sie hinzuf\u00fcgen m\u00f6chten.<\/p>\n Der hier hinzugef\u00fcgte Code aktualisiert das Erscheinungsbild der Website sofort in der Vorschau. Sobald Sie mit Ihren \u00c4nderungen zufrieden sind, k\u00f6nnen Sie Ihre \u00c4nderungen speichern.<\/p>\n Der zus\u00e4tzliche Vorteil, CSS hier zu platzieren, besteht darin, dass Sie die Aktualisierungen live mitverfolgen k\u00f6nnen, sodass Sie schnell verschiedenen Code testen k\u00f6nnen, um herauszufinden, was Ihnen gef\u00e4llt.<\/p>\n Nachdem Sie nun einen Blick darauf geworfen haben, wie Sie CSS sicher zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen, wollen wir uns nun mit den Grundlagen des Schreibens von CSS befassen!<\/p>\n Profi-Tipp:<\/strong> Machen Sie sich keine Sorgen, dass Ihre Website besch\u00e4digt wird. Wenn Sie eine fehlerhafte Bearbeitung vornehmen, k\u00f6nnen Sie das hinzugef\u00fcgte CSS einfach l\u00f6schen. Es ist unm\u00f6glich, Ihre Website vollst\u00e4ndig zu besch\u00e4digen oder den Zugriff auf das Admin-Men\u00fc zu verlieren, indem Sie CSS auf diese Weise hinzuf\u00fcgen.<\/p>\n Wenn Sie jemals CSS geschrieben haben, wissen Sie, dass der erste Schritt darin besteht, einen Selektor auszuw\u00e4hlen, der dem Browser mitteilt, auf welches Element der Website Sie abzielen. Im obigen Screenshot ziele ich auf alle Elemente ab, die die Klasse "site-title" haben.<\/p>\n Wenn Sie sich nicht sicher sind, wie Sie CSS-Selektoren verwenden, lesen Sie<\/a> diese gro\u00dfartige Einf\u00fchrung in CSS-Selektoren von SitePoint<\/a>.<\/p>\n Hier ist nun die Sache\u2026<\/p>\n Selbst viele erfahrene WordPress-Benutzer gehen bei der Suche nach Selektoren v\u00f6llig falsch. Sie \u00fcberpr\u00fcfen die Datei style.css, um einen Selektor zu finden, der bereits vom Theme verwendet wird. Dies ist m\u00fchsam und Sie finden m\u00f6glicherweise nicht einmal einen geeigneten Selektor, um Ihre Anpassung vorzunehmen.<\/p>\n Lassen Sie mich Ihnen einen viel produktiveren Prozess anbieten.<\/p>\n Beim Schreiben von CSS ben\u00f6tigen Sie zun\u00e4chst einen Selektor, der dem Browser mitteilt, welches Element Sie bearbeiten m\u00f6chten. Sie k\u00f6nnten zwar das Stylesheet in Ihrem Design \u00fcberpr\u00fcfen, es ist jedoch viel einfacher, die Webentwickler-Tools Ihres Browsers zu verwenden, um sie zu finden.<\/p>\n Hier ist ein Beispiel f\u00fcr das, was ich meine:<\/p>\n Dies ist ein Screenshot von Chrome mit ge\u00f6ffneten Entwicklertools<\/p>\n Sie k\u00f6nnen die Klassen und IDs jedes Elements in den ge\u00f6ffneten Entwicklertools sehen. Sie k\u00f6nnen dann eine beliebige Kombination verf\u00fcgbarer Klassen und IDs verwenden, um Ihre eigenen benutzerdefinierten Selektoren zu schreiben.<\/p>\n Ich gehe in diesem Tutorial viel tiefer ins Detail dieses Prozesses:<\/p>\n So finden Sie CSS-Selektoren auf WordPress-Sites<\/a><\/p>\n Sie erfahren, wie Sie auf die Entwicklertools Ihres Browsers zugreifen, im HTML-Code navigieren und die ben\u00f6tigten CSS-Selektoren finden.<\/p>\n Da Sie nun eine viel schnellere M\u00f6glichkeit haben, jeden gew\u00fcnschten Selektor zu erhalten, und Sie wissen, wie Sie Code in den Abschnitt "Zus\u00e4tzliches CSS" im Customizer einf\u00fcgen, m\u00fcssen Sie nur noch die Eigenschaften ausw\u00e4hlen, die Sie \u00e4ndern m\u00f6chten.<\/p>\n Wenn Sie beispielsweise den Site-Titel in Challenger<\/a> gezielt ansprechen und die Schrift vergr\u00f6\u00dfern m\u00f6chten, k\u00f6nnen Sie dies mit der Wenn Sie mit CSS nicht sehr vertraut sind, wird Ihnen diese Liste von CSS-Eigenschaften<\/a> besonders n\u00fctzlich sein. Sie k\u00f6nnen diese Liste nach jeder Qualit\u00e4t durchsuchen, die Sie bearbeiten m\u00f6chten (Hintergrundfarbe, Schriftgr\u00f6\u00dfe, Rahmen usw.).<\/p>\n CSS-Neuling oder Meister, ich habe etwas, von dem ich denke, dass Sie es m\u00f6gen werden …<\/p>\n Wenn Sie eines unserer Designs verwenden, werden Sie die vorgefertigten CSS-Snippet-Bibliotheken lieben, die wir erstellt haben. Zum Beispiel enth\u00e4lt die Tracks CSS Snippets Collection<\/a> Dutzende von Snippets, die Sie kopieren und in den Abschnitt \u201eZus\u00e4tzliches CSS“ einf\u00fcgen k\u00f6nnen, um Ihre Website anzupassen:<\/p>\n Dies macht es sehr einfach, Ihre Website mit CSS anzupassen, auch wenn Sie noch nie zuvor CSS geschrieben haben. Sie k\u00f6nnen einfach jedes gew\u00fcnschte Snippet kopieren und einf\u00fcgen und dann den Wert beliebig \u00e4ndern.<\/p>\n Um die CSS-Snippets f\u00fcr Ihr Design zu finden, besuchen Sie das Support Center<\/a> und w\u00e4hlen Sie das von Ihnen verwendete Design aus. Klicken Sie dann unten in der Seitenleiste auf die Schaltfl\u00e4che CSS-Snippets anzeigen:<\/p>\nSo f\u00fcgen Sie CSS zu Ihrer WordPress-Site hinzu<\/h2>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nEin besserer Weg<\/h3>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nSo finden Sie CSS-Selektoren<\/h2>\n
Wie WP-Profis CSS-Selektoren finden<\/h3>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nCSS-Eigenschaften und -Werte<\/h2>\n
font-size<\/code>Eigenschaft tun. Diese CSS-Anweisung k\u00f6nnte so aussehen:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nKOSTENLOS vorgefertigtes CSS f\u00fcr unsere Benutzer<\/h2>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n