Fügen Sie eine Klasse zu WordPress submit_button hinzu

Gibt es eine Möglichkeit, dieser Zeile eine “Klasse” hinzuzufügen, damit sie dem .button-Stil in meinem CSS-Stylesheet entspricht?

<?php submit_button(__('Update Profile')); ?>

Vielen Dank

submit_button() ist eine Kernfunktion des Admin-Dienstprogramms. Es ist eines der vielen Elemente, aus denen das WordPress-Admin-Thema besteht, und es wird angenommen nicht zu stylenalso wird es sich elegant ändern, wenn WP-Core-Entwickler entscheiden, das Admin-Design zu ändern.

Wenn Sie diese bestimmte Schaltfläche jedoch wirklich gestalten möchten, schlage ich Folgendes vor: Fügen Sie Ihrer Schaltfläche ein benutzerdefiniertes Attribut namens hinzu data-style:

<?php 
$attributes = array( 'data-style' => 'custom' );
submit_button ( 'Update Profile', 'primary', 'submit', true, $attributes );
?>

Und in Ihrem CSS können Sie Ihre Schaltfläche jetzt gestalten mit:

[data-style="custom"] {
     /* style your button here */
}

UPDATE: Die Antwort von Trix veranlasste mich, mir das genauer anzusehen Funktionsreferenz und realisiert ($type) kann sicher verwendet werden, um jeder WP-Admin-Schaltfläche benutzerdefinierte Klassen hinzuzufügen. Es ist so einfach wie:

submit_button ( 'Update Profile', 'custom-class' );

Beachten Sie, dass Ihre Schaltfläche (gemäß der Funktionsreferenz) immer noch die Standardeinstellung hat button Klasse. Das sollte funktionieren:

.button.custom-class {
     /* styles here */
}

UPDATE 2: Ich habe weitere Tests durchgeführt und anscheinend funktioniert die Funktion wie angekündigt. Die tatsächliche Ausgabe von

submit_button(__('Update Stuff'), "custom-class");

war:

<p class="submit">
    <input type="submit" 
           name="submit" 
           id="submit" 
           class="button custom-class" 
           value="Update Stuff">
</p>

Die meisten Regeln, die für die Schaltflächen im WP-Adminbereich gelten, sind mit vorangestellt .wp-core-ui. In diesem Fall stammen sie aus .wp-core-ui .button oder .wp-core-ui .button:hover. Die folgenden Selektoren sollten also funktionieren:

.wp-core-ui .button.custom-class {
     /* normal state rules here */
}
.wp-core-ui .button.custom-class:hover {
     /* hover state rules here */
}
.wp-core-ui .button.custom-class:focus,
.wp-core-ui .button-custom-class:active {
     /* active/focus state rules here */
}

Zum Beispiel hat das Hinzufügen von diesem zum Dashboard-CSS das Aussehen meiner Schaltfläche geändert, ohne andere Schaltflächen zu beeinflussen:

.wp-core-ui .button.custom-class {
    background-color: #272727;
    border-color: #666;
    color: #ddd;
}
.wp-core-ui .button.custom-class:hover {
    background: #212121;
    border-color: #666;
    color: white;
}

Habe es so aussehen lassen:

Bitte beachte, dass .custom-class Regeln werden von allen Regeln überschrieben, die mit gesetzt wurden .wp-core-ui .button (der Standardselektor für Schaltflächen in WP Admin).

Sie können Ihre Klasse einfach wie folgt hinzufügen:

submit_button( __('Update Profile'), 'my-custom-class' );

<?php submit_button(__('Update Profile', 'button')); ?>

Das sollte funktionieren 🙂 Sie können die Parameter von submit_button() hier einsehen:
https://developer.wordpress.org/reference/functions/submit_button/

Wie Sie sehen können, sollte die Standardklasse “primär” sein. Ich weiß nicht, ob WordPress das erfordert, sonst könnten Sie es einfach versuchen:

<?php submit_button(__('Update Profile', 'button primary')); ?>