Frage von JulianABC, 59

Anleitung gesucht: CSS in WordPress einfügen (Buttons, Tables, Animations)?

Ich wollte ein css Skript in mein Wordpress theme integrieren und jetzt habe ich gelesen, dass ich dafür ein stylesheet nutzen kann welches in meinem theme vorhanden ist. Leider hört dort auch schon mein Wissenstand auf. Ich wollte gerne vermeiden ein Plugin zu nutzen wenn es geht damit man sich auch bisschen Wissen aneignen kann. Und zwar geht es mir in erster Linie um Sachen wie buttons, tables, animations... .

Kann mir jemand eine Anleitung empfehlen oder mir sagen wie ich vorgehen muss?

Für Tipps und Ideen bin ich sehr dankbar.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von medmonk, 39

Eine Frage vorweg: Ist überhaupt HTML und CSS Grundlagenwissen vorhanden? Du kannst einfach via FTP auf dein Webspace zugreifen und die style.css im Theme Verzeichnis editieren. Da das Theme nicht von dir entwickelt wurde, da aus gutem Grund von abrate. Denn so kann es passieren, das all deine Änderungen mit dem nächsten Update verloren gehen. Damit genau dies nicht passiert, solltest du mit einem Child-Theme arbeiten. 

  1. http://www.elmastudio.de/wordpress/ein-wordpress-child-theme-anlegen-so-gehts-ri...
  2. http://www.elmastudio.de/wordpress/wordpress-theme-anpassungen-mit-hilfe-von-chi...
  3. http://bueltge.de/wordpress-child-themes-verstehen/1192/
Kommentar von JulianABC ,

Perfekt so etwas habe ich gesucht!

Ich arbeite mich gerade in das Thema ein, learning by doing. Und würde mal pauschal sagen Grundwissen ist schon vorhanden. Nur gerade mit solchen Sachen wie Einbindung, etc. tue ich mich noch schwer. Aber Sachen wie eine Tabelle erstellen geht eigentlich. Das mit dem FTP ist ja mal richtig hilfreich.

Kommentar von medmonk ,

Ich liebe WordPress und nutze es überwiegend für meine Kunden.  Vor allem die Wartung ist ein wahrer Segen. Zumindest für all jene, die das lästige Migrationsprozedere von Joomla kennen gelernt und verflucht haben. ;)

Und wie gesagt, wenn du keine eigenen Themes entwickelst, solltest du immer mit einem Child Theme arbeiten. So bist du zumindest auf der sicheren Seite. Das Filehandling via FTP ist auch recht einfach. Ich binde laufende Projekte so immer direkt in meine IDEs ein. 

Was jetzt die verlinkten Seiten angeht, ist vor allem ElmaStudio immer eine lesenswerte Quelle, wenn es um WordPress geht. Freut mich wenn es dir geholfen hat. 

Kommentar von JulianABC ,

Sonst klang das Thema ,,Website selber erstellen" für mich schier unmöglich aber wenn man erst einmal damit angefangen hat macht es richtig Spaß, auch wenn man manchmal am verzweifeln ist. Aber eine Frage habe ich noch, und zwar: 
Ich habe jetzt alles so weit eingerichtet wie in der Anleitung und auch mal bisschen versucht die Hintergrundfarbe zu ändern usw. und es funktioniert alles super.

Aber ich habe noch Probleme wenn ich eine bestimmtes Element an eine bestimmte Stelle einfügen möchte wie gehe ich dann vor? Als Beispiel Hab eich jetzt mal einen Button genommen. Genügt es wenn ich diesen Code in meine style.css kopiere? Aber wie kriege ich diesen dann auf meine Seite? 

-----------------------------------------------.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
---------------------------------------------/*
Kommentar von medmonk ,

Mit CSS legst du lediglich fest, wie der Button aussehen soll. Der Button selbst wird hingegen "hard" ins Markup gecodet oder übers Backend in den gewünschten Artikel eingefügt. Beispielsweise mit einem Anker. 

<a href="http://deine-url.de" class="mein-button">Buttontext</a>

Das Stylesheet ist global gültig. Übernimmt also die Formatierung sämtlicher Seiten. Du kannst also auch an anderer Stelle den Button wiederholt einfügen. Daher sich das Arbeiten mit Klassen vor allem anbietet. 

Kommentar von JulianABC ,

Ich merke immer mehr, dass mein Wissen noch sehr viele Lücken aufweist. Ich habe es leider noch nicht hinbekommen, ich vermute der Fehler liegt bei mir in der CSS. Diese scheint richtig angelegt zu sein da das Design stimmt und ich angezeigt bekomme:

"Dieses Ergänzungs-Theme (Child Theme) greift auf Dateien des übergeordneten ThemesSparkling zurück".

Die class="button1" habe ich für beide Codes übernommen. Jedoch erhalte ich jedes mal lediglich den Buttontext mit einem Link an meine "href"

Können Sie mir sagen ob ich vielleicht einen Fehler in  meiner CSS Datei habe? Genügt es wenn ich diesen Code so in meine style.css einfüge? Auf meine Seite füge ich dann lediglich den HTML code.

.button1 {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
<a href="" class="button1">Weiter</a>
Antwort
von Dory1, 40

Schau in deinen Theme-Order:

wp-content/themes/WIE-AUCH-IMMER-DEIN-THEME-HEISST/

Dort findest du eine Datei namens style.css, in der du deine CSS-Angaben machen kannst.

Falls du eine seperate CSS-Datei einbinden möchtest: https://codex.wordpress.org/Function\_Reference/wp\_enqueue\_style

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten