Eigene Buttons über CSS im Child

Snewi

Hallo, ich würde gerne unterschiedliche Buttons über meine Child einbinden und habe mal folgendes implementiert:
Im Child gibt es die Ordner css und function.
Im css liegt die Datei Button.css in der ich die Styles der Buttons definiere. Unter funcion dann die Datei Button.php mit dem Code:

Code

function button_admin_style() {
   wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/css/button.css');
}
add_action('admin_enqueue_scripts', 'button_admin_style');

Und dann noch in der functions.php:

Code

require_once locate_template('/functions/button.php');

Irgendwie werden aber die Styles nicht übernommen. Mache ich was falsch?
LG

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Falsch
Richtig

Snewi

Willst du sagen, dass ich die ersten beiden falsch gemacht habe? Was ist denn genau falsch? Ich habe dass schon mal für die lokalen Fonts so eingebunden und da klappt es

b3317133

Die jeweils in der ersten Zeile genannte Funktion ist falsch.
Die jeweils in der zweiten Zeile genannte Funktion wäre richtig.

Wenn Du die Zeilen anklickst, werden die Funktionen erklärt, das ist die offizielle Entwicklerdokumentation von WordPress.

Link zur Seite wo der Button mit den fehlenden Styles eingebunden ist? Siehe auch Forenregeln, Punkt II.

Snewi

Wie bekomme ich denn heraus was bei dem jeweiligen Theme der style-name ist?

https://schoenhoff.minnerup.info

Code

**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

b3317133

Um welchen exakten Button auf der Seite geht es?

Der gepostete Auszug ist eine 1:1 Kopie aus den Kommentaren der Entwicklerdokumentation.

Poste den von Dir aktuell verwendeten anhand der o.g. Hinweise korrigierten Code. Das Handle für Deinen Code wählst Du selbst.

Snewi

Mein Problem ist ja dass ich nicht weiß welches Handle ich nehmen muss.

b3317133

Für diesen Button mit der Klasse [FONT=Courier New]button[/FONT] sind derzeit keine CSS-Regeln hinterlegt, offenbar funktioniert also das Einbinden der entspr. CSS-Datei aus dem Child Theme Ordner weiterhin nicht.

Für weitere Hilfe poste den von Dir aktuell verwendeten anhand der o.g. Hinweise korrigierten Code. Das Handle für Deinen Code wählst Du selbst, z.B. [FONT=Courier New]'mein-toller-eigener-button'[/FONT] o.ä.

Snewi

Hey also folgendes habe ich gemacht:

Child Theme

functions.php

Code

require_once locate_template('/functions/button.php');

/functions/button.php

Code

function button_style() {
   wp_enqueue_style('mein-toller-eigener-button', get_stylesheet_directory_uri().'/css/button.css');
}
add_action('wp_enqueue_scripts', 'button_style');

/css/button.css

CSS

.bg a.button, .bg span.button a {
    bottom: 60px;
}
a.button, span.button a {
    padding: 5px 30px;
    padding-right: 80px;
    background: #79B31B;
    text-transform: uppercase;
    font-size: 0.64em;
    margin-top: 2em;
    display: inline-block;
    position: relative;
    z-index: 50;
    color: #fff;
    position: absolute;
    bottom: 0px;
    white-space: nowrap;
    line-height: 2.5em;
    cursor: pointer;
}


a.button:hover:after, span.button a:hover:after {
    width: 100%;
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -ms-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}


a.button:after, span.button a:after {
    content: '';
    width: 60px;
    height: 100% !important;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url('https://schoenhoff.minnerup.info/wp-content/uploads/2021/05/button.svg');
    z-index: -1;
    background-size: cover;
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -ms-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}

Alles anzeigen

Bind ich den CSS Code im Customizer ein, dann gehts. ICh möchte das ganze aber gerne über eine eigene Funktion im Child machen.

b3317133

Wie beschrieben war/ist auch [FONT=Courier New]locate_template()[/FONT] falsch. Schreibe den Code aus der Datei [FONT=Courier New]button.php[/FONT] direkt mit in [FONT=Courier New]functions.php[/FONT] oder korrigiere die Einbindung.

Snewi

ok aber alle anderen Funktionen die ich ebenfalls noch einbinde mache ich so. Ist das dann grundsätzlich falsch? Weil da funktioniert es

Snewi

Megaaaa so klappt es:

include( get_stylesheet_directory() . '/functions/button.php' );

Also binde ich meine anderen Funktionen alle so ein?

Danke

b3317133

Die Funktion locate_template() benutzt man, um eine ggf. vorhandene Template Datei in einer bestimmten Reihenfolge an verschiedenen möglichen Stellen der Dateistruktur suchen zu lassen, das Ergebnis kann auch leer sein.

Die Funktion get_stylesheet_directory() benutzt man, um den Serverpfad zum aktuell aktiven Theme Ordner zu bekommen.

Sehr empfehlenswerte generelle Lektüre zu solchen Themen ist das Theme Handbook und auch das Plugin Handbook bei wordpress.org

Snewi

Ok würdest du denn immer eigene PHP-Files die über das Child eingebunden werden mit get_stylesheet_directory() einbinden?

Danke nochmal für deine Hilfe :-)

b3317133

Es kommt immer darauf an, welche Art von Dateien man wo einbinden will, es gibt dafür auch noch weitere Funktionen, lies einfach mal bei Gelegenheit die genannten Handbücher.

Snewi

JA bei mir gehts erstmal immer nur um PHP Files. Loginbereich verändern. Fonts lokal einbinden usw

b3317133

PHP Dateien sind auch Template Dateien, Template-Teile, Sidebars, Header/Footer usw., daher kann man hier keine generelle Aussage machen, und daher siehe Handbücher.

Snewi

Ok, aber ich kann mich doch im Grunde genommen auch immer für eins entscheiden. Welches ist denn schneller oder wonach richtet sich das? In meinem Beispiel ging das eine nicht dafür das andere ok hier hab ich nur diese Möglichkeit. Was ist wenn beides geht?

b3317133

Es richtet sich wie bereits erklärt danach, welche Art von Dateien man wo einbinden will.

Die weiteren Details kannst Du in den Handbüchern nachlesen, dafür wurden die geschrieben.

Du kannst natürlich auch irgendwas irgendwie zusammenbasteln, aber dann wird es eben immer mal zu Problemen kommen, was man an Deiner ursprünglichen Frage in diesem Thread sehr gut sehen kann.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Eigene Buttons über CSS im Child

Jetzt mitmachen!