wake-up-neo.net

Versionierung @import von style.css des übergeordneten Themas

Kontext

Ich habe ein Kinderthema basierend auf Twenty Thirteen erstellt, was sehr gut funktioniert. Nachdem ich das übergeordnete Thema auf Version 1.3 aktualisiert hatte, bemerkte ich ein merkwürdiges Verhalten mit dem Stil, das durch den style.css eines zwischengespeicherten übergeordneten Themas verursacht wurde.

Hier ist der Inhalt des style.css meines Kinderthemas (ohne Überschriften)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

Der style.css des untergeordneten Themas importiert also lediglich den style.css des übergeordneten Themas.

Ich habe auch eine andere CSS-Datei mit den Anpassungen meines Kinderthemas, die ich wie folgt in functions.php einreihte:

// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');

// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
    null, $themeVersion);

Dies gibt mir eine sehr nette CSS-URL wie diese: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1, die sicherstellt, dass das Stylesheet neu geladen wird, wenn das untergeordnete Thema aktualisiert wird.

Nun das Problem

Die Anweisung @import url('../twentythirteen/style.css'); ist völlig unabhängig von der Version des zugrunde liegenden übergeordneten Themas. Tatsächlich kann das übergeordnete Design aktualisiert werden, ohne dass das untergeordnete Design aktualisiert wird. Browser verwenden jedoch weiterhin zwischengespeicherte Versionen des alten ../twentythirteen/style.css.

Relevanter Code in Twenty Thirteen, der den style.css in die Warteschlange stellt:

function twentythirteen_scripts_styles() {
    // ...

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );

    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    // Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Ich kann mir ein paar Möglichkeiten vorstellen, um dieses Problem zu lösen, aber keine ist wirklich zufriedenstellend:

  1. Aktualisieren Sie mein untergeordnetes Design jedes Mal, wenn das übergeordnete Design aktualisiert wird, um eine Versionszeichenfolge in style.css zu ändern (z. B. @import url('../twentythirteen/style.css?ver=NEW_VERSION');). Dies schafft eine unnötige und ärgerliche Verbindung zwischen der übergeordneten Designversion und dem untergeordneten Design.

  2. Im functions.php meines Kindes 1) wp_dequeue_style des enthaltenen untergeordneten Themas style.css und 2) wp_enqueue_style des übergeordneten themas style.css direkt WITH version string. Dadurch wird die Reihenfolge der in die Warteschlange gestellten CSS-Dateien im übergeordneten Thema durcheinander gebracht.

  3. Verwenden Sie den Filter style_loader_tag , um das generierte Tag css <link> für style.css zu ändern, und ändern Sie den Pfad so, dass er direkt auf den style.css des parent themes mit einer Versionszeichenfolge verweist. Scheint für solch ein allgemeines Bedürfnis eher undurchsichtig (Cache-Busting).

  4. Geben Sie den style.css des übergeordneten Themas in den style.css meines untergeordneten Themas ein. Wie (1), aber etwas schneller.

  5. Machen Sie den style.css meines Kinderthemas zu einem Symlink zum style.css des Elternthemas. Das scheint ziemlich hackisch ...

Habe ich etwas verpasst Irgendwelche Vorschläge?

bearbeiten

genericicons.css- und ie.css-Stylesheets im übergeordneten Design hinzugefügt, um zu verdeutlichen, warum ich die css-Anweisung @import in meinem untergeordneten Design nicht in wp_enqueue_style ändern kann. Derzeit habe ich mit einer @import-Anweisung im style.css meines untergeordneten Themas folgende Reihenfolge in generierten Seiten:

  1. dreizehnundzwanzig/genericons/genericons.css -> Eingereiht nach übergeordnetem Thema
  2. child-theme/style.css -> nach übergeordnetem Thema in die Warteschlange gestellt, @imports twentythirteen/style.css
  3. einundzwanzig/css/ie.css -> nach übergeordnetem Thema in die Warteschlange gestellt
  4. child-theme/css/main.css -> nach untergeordnetem Thema in die Warteschlange gestellt

Wenn ich den style.css des Elternteils als eine Abhängigkeit von main.css in die Warteschlange stelle, wird dies zu:

  1. dreizehnundzwanzig/genericons/genericons.css -> Eingereiht nach übergeordnetem Thema
  2. child-theme/style.css -> leer, eingereiht nach übergeordnetem Thema
  3. einundzwanzig/css/ie.css -> nach übergeordnetem Thema in die Warteschlange gestellt
  4. twentythirteen/style.css -> nach untergeordnetem Thema als Abhängigkeit von main.css in die Warteschlange gestellt
  5. child-theme/css/main.css -> nach untergeordnetem Thema in die Warteschlange gestellt

Beachten Sie, dass ie.css jetzt vor dem style.css des übergeordneten Themas enthalten ist. Ich möchte die Reihenfolge der Warteschlangen in den CSS-Dateien des übergeordneten Themas nicht ändern, da ich nicht davon ausgehen kann, dass dies keine Probleme mit der Priorität der CSS-Regeln verursacht.

28
bernie

Meine vorherige Antwort ist zu kompliziert und berücksichtigt möglicherweise nicht die Abhängigkeitskette des übergeordneten Themas (siehe Hinweis in einer anderen Antwort).

Hier ist eine andere, viel einfachere Einstellung, die viel besser funktionieren sollte:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Die Idee ist, einfach den Aufruf von get_stylesheet_uri() im übergeordneten Design zu filtern, um das eigene Stylesheet anstelle des untergeordneten Designs zurückzugeben. Das Stylesheet des untergeordneten Themas wird später im Aktions-Hook my_theme_styles in die Warteschlange gestellt.

8
bernie

Sie müssen @import nicht verwenden. Eigentlich ist es das Beste, das nicht zu tun. Die Verwendung eines Ansatzes in Warteschlangen ist wahrscheinlich rundherum besser.

Hier ist der relevante Teil des dreizehnundzwanzigsten Codes:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Folgendes tun Sie in Ihrem Code:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Wenn Ihre main.css nach der style.css der Eltern kommen muss, dann machen Sie es einfach davon abhängig.

Wenn Sie nun auch ein B.css im untergeordneten Element haben, richten Sie die Abhängigkeiten entsprechend ein:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Stellen Sie sicher, dass die Abhängigkeiten, die Sie für jedes Element definieren, die tatsächlichen Abhängigkeiten widerspiegeln. Wenn main.css nach B.css kommen muss, dann kommt es darauf an. Wenn B.css nach dem style.css der Eltern kommen muss, dann hängt B davon ab. Das Enqueue-System erledigt das für Sie.

Und wenn Sie die Datei style.css des Kindes nicht für irgendetwas verwenden, müssen Sie sie gar nicht einreihen . Es kann nur ein Platzhalter für die Header-Informationen Ihres Themas sein. Verwenden Sie es nicht? Laden Sie es nicht.

Und was genau machst du, wenn du hier bestellst? In den meisten Situationen kümmert sich CSS nicht um die Ladereihenfolge. CSS hängt mehr von der Spezifität der Selektoren ab. Wenn Sie etwas außer Kraft setzen möchten, müssen Sie Ihre Auswahl präzisieren. Es kann zuerst oder zuletzt oder irgendetwas dazwischen kommen, der spezifischere Selektor gewinnt immer.

Bearbeiten

Wenn ich Ihre Kommentare lese und den Code genauer betrachte, sehe ich, wo der Fehler liegt. Mit dem dreizehnundzwanzigsten Code wird "get_stylesheet_uri ()" in die Warteschlange gestellt, was in einem untergeordneten Themenfall die style.css-Datei Ihres untergeordneten Themas ist, nicht die Datei des übergeordneten Themas. Aus diesem Grund funktioniert der @import und behält die gleiche Reihenfolge bei (was wiederum nicht annähernd so wichtig ist, wie Sie denken).

In diesem Fall würde ich empfehlen, die Datei style.css des übergeordneten Elements direkt in die Warteschlange zu stellen, wenn Sie den Import nicht verwenden möchten. Wie so:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Code in der Datei functions.php des untergeordneten Themas wird zuerst ausgeführt, sodass Ihre eigenen wp_enqueue_scripts zuerst ausgeführt werden. Dadurch wird die Datei style.css des übergeordneten Themas in eine Warteschlange gestellt, die das übergeordnete Thema nicht selbst ausführt (da die Datei style.css Ihres untergeordneten Themas tatsächlich in eine Warteschlange gestellt wird). Indem es nicht von etwas abhängig gemacht wird, das dem übergeordneten Element entspricht, wird es einfach korrekt in die Ausgabe eingefügt. Beachten Sie, dass die Reihenfolge dieser Datei und der genericons.css keine Rolle spielt, da die genericons.css im ursprünglichen Stil "13" nicht als aufgelistete Abhängigkeit vorhanden ist.

Style.css Ihres eigenen Kindes wird geladen, und ehrlich gesagt, hier sollten Sie Ihre Änderungen für das untergeordnete Thema ablegen, nicht in einer separaten main.css. Nichts hindert Sie daran, Ihre Änderungen dort abzulegen, aber es gibt keinen wirklichen Grund, eine zusätzliche CSS-Datei zu haben.

19
Otto

warnung

Diese Lösung respektiert nicht die Abhängigkeiten des übergeordneten Themas ! Das Ändern des Handle-Namens des übergeordneten Themas wirkt sich auf die im übergeordneten Thema festgelegte Abhängigkeitskette aus. Siehe meine viel einfachere andere Antwort .

orignal Antwort

Obwohl Ottos Antwort ziemlich gut ist, landete ich damit in den Funktionen meines Kinderthemas

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Dabei werden die style.css-Reihenfolge und die Versionsnummern des übergeordneten Themas beibehalten, während die style.css-Version des untergeordneten Themas gesteuert wird.

2
bernie