Wie kann ich WordPress 3.8 neue Schnittstelle MP6 mit CSS zielen?


7

Als MP6 ein Plugin in WordPress 3.6+ war, änderte es die Body-Klasse des Administrators und fügte eine "admin-mp6" -Klasse hinzu, die mir hilft, mein Plugin entsprechend zu gestalten.

Mit dem neuesten Alpha von WordPress 3.8 wurde die Klasse entfernt. Ich weiß, da es sich um eine Alpha-Version handelt, kommt die Klasse möglicherweise zurück, aber ich frage mich, ob es offizielle "Best Practices" gibt.


Dies kann nützlich sein - make.wordpress.org/ui/2013/11/19/…
Elliott

Antworten:


4

Während es nicht spezifisch für MP6 (ich verfolge seine Entwicklung nicht) und sein CSS ist, klingt Ihre Frage für mich wie "Wie kann überprüft werden, ob die WP-Version größer ist als eine, in der eine Funktion eingeführt wurde?".

Also würde ich nur den Inhalt von $wp_versionglobal untersuchen. Wenn es 3.8 ist, dann hat alles mit passender Version es.

Auch aus dem kurzen Blick auf bodyKlassen in admin gibt es eine branch-3-7Klasse, die das Targeting ermöglicht branch-3-8(kann jedoch nicht bedingt als irgendetwas> = 3,8 gezielt werden, da dies nicht etwas ist, was CSS tut).


1
Ich würde eine reine CSS-Variante bevorzugen. Vielleicht wird es in der endgültigen Version hinzugefügt. Ich dachte nur, dass es einen "offiziellen" Weg geben sollte
Xaver

2
Die MP6-Klasse wird nicht zurückkehren, da sie für die Anforderungen des MP6-Plugins selbst vorgesehen war. halten es jetzt , dass mp6 ist das Admin - Interface ziemlich sinnlos und unsemantic wäre. Wie Rarst betont, gibt es die neue Branch-3-n-Klasse sowie eine Version-3-n-Klasse.
Sabreuse

Warum nicht die Erkennung über verwenden if ( 'mp6' === get_user_option( 'admin_color' ) )?
Sven

Ich mag es wirklich nicht, die Body-Klasse im Backend mit meinem Plugin zu ändern (um eine MP6-Klasse hinzuzufügen), da es nicht nur Plugin-Seiten sind, sondern auf jeder Backend-Seite. Ich kann ein Ticket zum WP Trac hinzufügen
Xaver

3

Ich bevorzuge auch eine reine CSS-Variante. Das ist leider nicht ganz möglich. Der Weg, den ich gehe, ist eine Mischung aus CSS und PHP.

Zuerst verwenden wir PHP, um die installierte Version von WordPress zu erkennen und optional, ob MP6 installiert ist oder nicht. Dies ist ziemlich einfach, MP6wenn die vom Plugin definierte Konstante und die $wp_versionglobale Konstante verwendet werden, wie von Rarst vorgeschlagen. Sobald wir wissen, dass wir in einer MP6-Welt leben, fügen wir unsere eigene Körperklasse hinzu. Ich wähle den Klassennamen "Flaticons":

/**
 * Filter body classes to detect MP6 or WordPress 3.8 so we can substitute the correct styles.
 *
 * @param array $classes
 *
 * @global $wp_version
 *
 * @return array
 */
function flaticons_body_class( $classes ) {
    global $wp_version;

    if ( ( defined( 'MP6' ) && MP6 ) || version_compare( $wp_version, '3.8', '>=' ) ) {
        $classes[] = 'flaticons';
    }

    return $classes;
}

Nun, in unserem CSS , wo wir vorher wurden mit den .admin-mp6, .admin-color-mp6oder .mp6Selektoren können wir verwenden .flaticonsstattdessen.

Dies funktioniert sowohl mit MP6 bei älteren Installationen als auch mit WordPress 3.8+, sobald es veröffentlicht ist. Nicht optimal, aber eine solide, zukunftssichere Lösung.


Sie sollten überprüfen, ob die flaticonsKörperklasse bereits hinzugefügt wurde, um Doppelarbeit zu vermeiden
shea

2

Andrew Nacin posted einig „Amtlich“ Ansatz zu diesem Thema hier

Die Nur-CSS-Variante sollte die branch-3-x-Klasse verwenden, um auf die Versionen vor 3.8 abzuzielen, und die Standardeinstellungen sollten auf alle kommenden Versionen angewendet werden, damit Sie sich nicht um weitere Versionen kümmern müssen:

.branch-3-6 .some-selector,
.branch-3-7 .some-selector {
     /* some rules go here for 3.6 and 3.7 */
}
.some-selector {
     /* 3.8+ rules go here */
}

Weitere Informationen zu diesem Thema finden Sie auf der Seite make.wordpress.org

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.