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

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.

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');

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' )  );

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.

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.

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

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');

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'
/>

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.