it-swarm-id.com

Bagaimana cara saya versi file CSS Utama?

Bagaimana saya bisa menginstruksikan wordpress untuk menggunakan nama file selain 'styles.css' untuk stylesheet utama saya - misalnya, styles-1.css? Saya ingin melakukan ini untuk keperluan versi dan caching.

7
Bobby Jack

Style.css diperlukan untuk tema WordPress Anda. Di situlah WordPress mendapatkan nama tema dan informasi meta untuk menu Appearance >> Themes. Yang mengatakan, Anda tidak benar-benar harus menggunakan style.css dalam tema Anda sama sekali. Saya tahu beberapa tema yang tersedia yang tidak menggunakannya, dan saya hanya menggunakannya dalam beberapa desain khusus saya.

Di header.php cukup tempatkan tag berikut sebagai ganti tautan stylesheet biasa:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style-1.css" />

Ini akan memuat stylesheet alternatif Anda sebagai stylesheet halaman dan sepenuhnya mengabaikan style.css biasa.

3
EAMann

Ini mungkin tidak pantas, beri tahu saya jika saya melewatkan sesuatu.

Argumen keempat untuk wp_enqueue_style() adalah nomor versi stylesheet. Dalam functions.php tema Anda:

function my_theme_styles() {
    // replace "10" with your version number; increment as you Push changes
    wp_enqueue_style('my-theme-style', get_bloginfo('template_directory') . '/style.css', false, 10);
}
add_action('wp_print_styles', 'my_theme_styles');

Mengharuskan header.php Anda melakukan wp_head(), yang tentu saja tetap Anda lakukan. ;)

Ini memungkinkan Anda untuk Push header yang sudah kadaluwarsa dengan file CSS Anda, dan memaksa klien untuk mengunduh file baru dengan memperbarui nomor versi. WP akan menambahkan "? Ver = N" ke URL file CSS Anda.

13
Annika Backstrom

Letakkan ini di file functions.php tema Anda:

function my_cool_style_versioner( $style ){
  return str_replace( '/style.css', '/style-1.css', $style );
}

add_filter( 'stylesheet_uri', 'my_cool_style_versioner' );
3
John P Bloch

Perhatikan, bahwa Anda tidak boleh menggunakan querystrings untuk versi file (proksi tidak men-cache mereka).

Cara yang lebih baik adalah dengan versi nama file seperti dengan menambahkan nomor like

  • style. 123 . css
  • style. 124 . css

Jadi pendekatan saya adalah sebagai berikut:

Apache mengalihkan htaccess

Jika Anda menggunakan HTML5 boilerplate dengan Apache Anda dapat menemukan bagian berikut di file.htaccess:

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------

# If you're not using a build process to manage your filename version revving,
# you might want to consider enabling the following directives to route all
# requests such as `/css/style.12345.css` to `/css/style.css`.

# To understand why this is important and a better idea than `*.css?v231`, read:
# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring

<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

(Anda biasanya harus mengaktifkannya terlebih dahulu, dengan menghapus komentar pada baris)

Tema functions.php

Saya ingin secara otomatis menggunakan versi tema saya untuk stylesheet, jadi saya datang dengan yang berikut:

Anda dapat menambahkan yang berikut ini ke tema Anda functions.php :

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');

Perhatikan, bahwa saya menyediakan null sebagai versi alih-alih false, jadi Wordpress tidak menambahkan versinya di querystring.

Hasil

Ini menghasilkan stylesheet seperti berikut untuk Versi 1.0.2 dari tema Anda:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.102.css' type='text/css' media='all' />

Setelah saya mengubah tema saya ke Versi 2.0.0 di style.css saya akan menampilkan yang berikut:

<link rel='stylesheet' id='maw-main-css'  href='http://www.example.com/wp-content/themes/my-theme/style.200.css' type='text/css' media='all' />

Catatan tambahan

Berhati-hatilah, jika Anda hanya menghapus titik-titik dari versi seperti yang saya lakukan, Anda mungkin mendapatkan masalah dengan versi tema seperti 1.2.23 dan 1.22.3, karena keduanya menghasilkan versi 1223 tanpa titik.

Cara yang lebih baik adalah dengan memperhitungkannya dalam file .htaccess. Misalnya, Anda dapat mengizinkan garis bawah di antara angka-angka dan dapat mengganti titik-titik dengan mereka.

Ini belum diuji, tetapi seharusnya berhasil:

.htaccess

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------
<IfModule mod_rewrite.c>
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.+)\.([_\d]+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
</IfModule>

functions.php

function my_theme_styles() {
    $my_theme = wp_get_theme();
    $version = str_replace('.','_',$my_theme->get( 'Version' ));
    $stylesheet = get_bloginfo('stylesheet_directory').'/style.'.$version.'.css';
    wp_enqueue_style('my-main', $stylesheet, false, null);
}
add_action('wp_print_styles', 'my_theme_styles');

EAMann benar, Anda tidak harus menggunakan file style.css untuk semua CSS Anda.

Untuk versi lembar gaya dan file lain di tema Anda, Anda dapat menambahkan ini ke file functions.php Anda

function fileVersion($filename)
{
    // get the absolute path to the file
    $pathToFile = TEMPLATEPATH.'/'.$filename;
    //check if the file exists
    if (file_exists($pathToFile)) 
    {
        // return the time the file was last modified
        echo filemtime($pathToFile);
    }
    else
    {
        // let them know the file wasn't found
        echo 'FileNotFound';
    }
}

Dan kemudian ketika Anda membuat tautan ke style sheet Anda, Anda bisa melakukan ini.

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

Dengan cara ini Anda tidak perlu memperbarui nomor versi secara manual, kapan pun file diperbarui di server, versi akan secara otomatis berubah menjadi cap waktu UNIX

3
Paul Sheldrake

Nah, Anda bisa menggunakan style.css sebagai tempat Anda memanggil versi yang Anda inginkan. Sederhananya

@import url("style-1.css");

Kemudian ketika Anda meningkatkan versi, cukup edit menjadi:

@import url("style-2.css");

Sedangkan untuk menyimpan versi, sudahkah Anda mempertimbangkan untuk menggunakan Subversi , atau git ? Kemudian Anda dapat memiliki track record lengkap dari stylesheet Anda. Mungkin saja saya tidak sepenuhnya memahami alasan lengkap untuk versi Anda.

2
artlung

Saya menemukan pertanyaan lama ini dan menemukan semua jawaban yang tampaknya sudah ketinggalan zaman saat ini.

Saya hanya akan menggunakan versi tema seperti yang didefinisikan dalam bagian header file style.css. Anda bisa mendapatkannya dengan wp_get_theme()->get( 'Version' )

function my_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css', false, wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

Seperti ini, nomor versi akan secara otomatis ditambahkan ke url seperti ?ver=#.## dan url berubah segera setelah versi tema bertambah dalam style.css.

2
JHoffmann

Dalam functions.php ubah

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri();

untuk

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri(), array(), $ver );

ubah $ver menjadi nilai apa pun, atau time() untuk mode pengembangan.

1
Rashed Hasan

Saya tidak yakin apakah ini telah berubah untuk WP3, jadi saya tidak sepenuhnya yakin, tetapi salah satu caranya adalah mengedit file php yang relevan secara langsung (saya tidak tahu apakah ini dapat dilakukan dari dalam halaman Dashboard/Admin) :

wp-folder/wp-content/themes/your-theme/

Dan buka header.php. Dalam file ini temukan baris ini:

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

Untuk menambahkan 'versi' ke stylesheet yang ditautkan (dengan asumsi Anda menginginkannya seperti: stylesheetURL.css?version=2) ubah ke:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>?version=2" type="text/css" media="screen" />

Ini agak tidak sopan, jadi, jika ada cara yang lebih baik, saya ingin mendengarnya sendiri =)


Untuk menggunakan stylesheet styles-1.css yang berbeda Anda bisa menggunakan baris (atas) untuk:

<link rel="stylesheet" href="absolute/or/root-relative/path/to/styles-1.css" type="text/css" media="screen" />

(Pada dasarnya menghapus <?php ... ?> dan menggantinya dengan jalur biasa.)

0
David Thomas