Wie füge ich eine Version von style.css in WordPress hinzu?

12

Wie man eine Version von style.cssin WordPress wie unten hinzufügt, kann ich in Joomla tun.

<link rel="stylesheet" href="/templates/example/css/style.css?v=1.2">

Ich weiß, dass das style.cssdynamisch geladen wird. Bitte helfen Sie mir dabei.

Toretto
quelle
Hier ist ein Plugin wordpress.org/plugins/wp-css-version-history , das automatisch eine Versionsnummer in das Stylesheet anfügt. Es wird ein neues Stylesheet erstellt, das zuletzt geladen wird. Sie müssen den Cache nicht leeren, um Änderungen zu sehen. Verwendet den im CSS-Editor und in der Benutzerdatei gesperrten Wordpress für die Teamzusammenarbeit.
Brian Holzberger

Antworten:

16

Die Versionsnummer ist ein Parameter von wp_enqueue_style().

Nach dem Codex sind hier alle Parameter aufgeführt, die wp_enqueue_styleakzeptiert werden.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Um beispielsweise ein Stylesheet mit einer Versionsnummer zu laden, gehen Sie wie folgt vor:

function wpa_90820() {
    wp_enqueue_style('my-styles', get_stylesheet_directory_uri() .'/my-styles.css', array(), '1.0' );       
}

add_action('wp_enqueue_scripts', 'wpa_90820');
Helgatheviking
quelle
Wenn ich das mache, wird auch die alte style.css geladen. Wie entferne ich es?
Toretto
@ VinodDalvi was meinst du mit handle. Ich weiß nicht, ich bin neu in WordPress, bitte ich.
Toretto
1
@Toretto Entweder wird Ihr Thema in der Datei header.php fest codiert, oder Ihr Thema wird auch mit einem anderen Handle (dem ersten Parameter) in die Warteschlange gestellt. Die Lösung hängt auch davon ab, ob Sie die Datei functions.php Ihres Themas direkt bearbeiten oder ob Sie ein untergeordnetes Thema erstellt haben.
Helgatheviking
@Toretto, $ handle wird in meiner Antwort angezeigt und auch in dem Link beschrieben, den ich zur Codex-Seite bereitgestellt habe, damit wp_enqueue_styleSie Ihre Hausaufgaben machen können.
Helgatheviking
1
@Toretto Wenn Ihr Thema wp_enqueue_style()zum Laden des betreffenden Stylesheets verwendet wird, ist das Handle der erste Parameter. Wenn Ihr Thema das Stylesheet in header.php fest codiert, hat es kein Handle.
Helgatheviking
5

Anstatt die Version fest zu verdrahten, ist es in einigen Fällen möglicherweise besser, Ihr Stylesheet dynamisch zu versionieren. Wenn Sie es ändern, wird der Browser-Cache automatisch sofort geändert und aktualisiert, ohne dass Sie Ihre functions.php immer wieder bearbeiten müssen.

Sie können dazu filemtime () verwenden. Hier erfahren Sie, wie Sie dies in einem untergeordneten Stil tun, der auf den parent_style verweist

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );
Codeaholic
quelle
Mit der Zeit bevorzuge ich Theme-Versionen, aber es ist eine gute Idee, hier filemtime () zu verwenden, wenn man keine konsistente Versionierungspraxis für Themes hat.
Jgangso
3

Wenn Sie ein Theme-Entwickler sind, möchten Sie möglicherweise das Neuladen Ihrer Assets erzwingen, wenn Sie eine neue Version veröffentlichen.

Die Versionierung eines Themas erfolgt also in style.css

/*
    Theme Name: Your Theme Name
    Version: 1.0.2
*/

An der Spitze Ihres functions.php:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css

Wenn Sie später CSS oder JS in die Warteschlange stellen, verwenden Sie THEME_VERSIONals viertes Argument:

function theme_styles()
{
    wp_enqueue_style('main', get_template_directory_uri().'/css/main.css', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'theme_styles'); 

Wird auf der Seite ausgegeben:

.../your-theme-name/css/main.css?ver=1.0.2 

Dies ist praktisch, wenn Sie mehr Assets benötigen und diese nicht manuell ändern möchten.

Milan Švehla
quelle
2

Sie können dies auf eine der folgenden Arten erreichen:

1) Fügen Sie das folgende Tag in die Datei header.php des Themas ein.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>'?v=1.2" type="text/css" media="all" />

2) Fügen Sie den folgenden Code in die Datei functions.php des Themas ein.

function theme_styles()  
{ 
  // Register the style like this for a theme:  
  // (First the unique name for the style (custom-style) then the src, 
  // then dependencies and ver no. and media type)
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), '1.2', 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Weitere Informationen finden Sie auf dieser Seite.

Vinod Dalvi
quelle
Wenn ich das mache, wird auch die alte style.css geladen. Wie entferne ich es?
Toretto
Was ist der Griff von old style.css?
Vinod Dalvi
Wenn Sie den Griff nicht finden können, kopieren Sie einfach die gesamte style.css-URL hier und fügen Sie sie ein. Ich werde sie von dort erhalten ...
Vinod Dalvi
Oder können Sie mir sagen, wie Ihr Themenname oder der Ordnername des Themas lautet?
Vinod Dalvi
1
Willkommen .... :)
Vinod Dalvi
1

Der beste Weg, um CSS in Ihr WordPress-Theme zu laden, ist der folgende Code in Ihrer Datei functions.php:

function theme_styles()  
{ 
  global $ver_num; // define global variable for the version number
  $ver_num = mt_rand() // on each call/load of the style the $ver_num will get different value
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css', array(), $ver_num, 'all' );
}
add_action('wp_enqueue_scripts', 'theme_styles');

Dies ist der richtige Weg, um die Stile in Ihr Thema zu laden, und auch der beste für Staging- / Testzwecke, da jede Aktualisierung die aktualisierte Version des Stils liefert.

Wenn Sie das Laden auf die erste Weise vermeiden möchten, können Sie diese kurzgeschlossene Version verwenden und die folgende Zeile in Ihre Datei header.php einfügen, um das gleiche Ergebnis zu erhalten:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?ver=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

Prost

Meile Milosheski
quelle
1

Versuche dies:

Fügen Sie dies zu functions.php hinzu

function autoVer($filename){
    $url = get_template_directory_uri() . $filename;
    $file = get_template_directory() . $filename;
    if ( file_exists($file)) {
        return $url . '?v=' .md5(date("FLdHis", filectime($file)) . filesize($file));
    }
    clearstatcache();
}

Fügen Sie dies der Kopf- oder Fußzeile hinzu -> autoVer ('/ js / main.js');

Öffentliche Werbung
quelle
1

Im Gegensatz zu den bisher vorgestellten Methoden ist es meiner Meinung nach besser, die Versionsnummer zu verwenden, die oben in Ihrer style.css-Datei angezeigt wird:

// style.css
/**
Theme Name: My theme
...
Version: 1.2.3
...
**/

Um die Version des Themas in Ihrem CSS zu verwenden, fügen Sie Ihrem Skript functions.php (oder einem gleichwertigen Skript) Folgendes hinzu:

<?php

wp_enqueue_style(
    'my-theme',
    get_stylesheet_directory_uri() . '/style.css',
    [],
    wp_get_theme()->get('Version')
);

Dies bedeutet, dass Sie nach dem Bearbeiten Ihrer style.css-Datei lediglich die Versionsnummer oben in derselben Datei ändern müssen, um die Änderungen im Frontend anzuzeigen.

Wenn Sie den Kopfbereich des HTML-Codes des Themas untersuchen, sehen Sie Folgendes:

<link rel='stylesheet'
    id='my-theme-css'
    href='... style.css?ver=1.2.3'
    type='text/css'
    media='all'
/>
Eine Axt
quelle
-1

Dies ist ein ziemlich einfacher Weg, um die Versionsnummer durch zweimaliges Aufrufen der Funktion zu erhalten bloginfo($show) . Erstens für das Stylesheet und zweitens für die Versionsnummer.

<link rel="stylesheet" id="style-css" href="<?php bloginfo('stylesheet_url'); ?>?ver=<?php bloginfo('version'); ?>" type="text/css" media="all" />

Das ist alles dazu. Hoffe das hilft oder ist nützlich. Sie können alle verfügbaren Parameter durchgehen und sehen, was Sie mit der bloginfo()Funktion ausgeben können.

Ignoriere meinen Kommentar, da @Ravs auf meinen Fehler bezüglich des Parameters 'version' für die Funktion bloginfo () hingewiesen hat. Es wird tatsächlich die Wordpress-Versionsnummer gedruckt.

Cazepeda
quelle
Ich denke, dass es nicht die richtige Antwort ist, weil <? Php bloginfo ('version')?> Ihnen die aktuelle WordPress-Version gibt, während die Frage über das Anhängen der style.css-Version und nicht der WordPress-Version lautet.
Ravinder Kumar