it-swarm.asia

Ana CSS dosyasını nasıl sürümlendirebilirim?

WordPress'e ana stil sayfam için 'styles.css' dışında bir dosya adı kullanmasını nasıl öğretebilirim - örneğin, styles-1.css? Bunu versiyonlama ve önbellekleme amaçları için yapmak istiyorum.

7
Bobby Jack

WordPress temanız için Style.css gereklidir. WordPress'in Görünüm >> Temalar menüsünün tema adını ve meta bilgilerini aldığı yer burasıdır. Bununla birlikte, temanızda hiç style.css kullanmak zorunda değilsiniz. Kullanılmayan hazır temaları biliyorum ve yalnızca özel tasarımlarımın birkaçında kullanıyorum.

header.php 'da aşağıdaki etiketi normal stil sayfası bağlantısının yerine koymanız yeterlidir:

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

Bu, alternatif stil sayfanızı sayfanın stil sayfası olarak yükler ve normal style.css dosyasını tamamen yok sayar.

3
EAMann

Bu uygunsuz olabilir, lütfen bir şeyleri kaçırırsam bana bildirin.

wp_enqueue_style() işlevinin dördüncü argümanı stil sayfasının sürüm numarasıdır. Temanın functions.php içinde:

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

header.php'nuzun wp_head() işlevini yapmasını gerektirir, bunun için elbette zaten yapıyorsunuz. ;)

Bu, CSS dosyanızla uzun süre sona eren başlıkları itmenize ve sürüm numarasını güncelleyerek istemcileri yeni bir dosya indirmeye zorlar. WP, CSS dosyanızın URL'sine "? Ver = N" ekleyecektir.

13
Annika Backstrom

Bunu, kendi işlevler.php dosyasına bırakın:

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

Unutmayın ki dosya sürümlemesi için querystrings kullanmamalısınız (proxy'ler onları önbelleğe almaz).

Daha iyi bir yol, benzer bir sayı ekleyerek dosya adlarının versiyonunun değiştirilmesi olacaktır.

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

Yani benim yaklaşımım şudur:

Apache htaccess yönlendirmeleri

Apache ile HTML5 boilerplate kullanıyorsanız aşağıdaki bölümü.HTACCESS DOSYASI'da bulabilirsiniz:

# ------------------------------------------------------------------------------
# | 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>

(Genellikle satırları yorumlayarak ilk önce etkinleştirmeniz gerekir)

Tema fonksiyonları.php

Stil sayfam için temamın sürümünü otomatik olarak kullanmak istedim;

Aşağıdakileri temalarınıza ekleyebilirsiniz 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');

Unutmayın, null yerine false sürümünü sunduğumu, bu nedenle Wordpress'in sürümünü querystring'e eklememesi gerektiğini unutmayın.

Sonuç

Bu, temanızın Sürüm 1.0.2 için aşağıdaki gibi bir stil sayfası çıkarır:

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

Benim temamı style.css'de Sürüm 2.0.0 olarak değiştirdikten sonra şunu yazdı:

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

Ek Notlar

Dikkat edin, benim yaptığım gibi sadece sürümün noktalarını soyarsanız, her ikisi de 1223'lük noktalı bir sürümle sonuçlanan 1.2.23 ve 1.22.3 gibi tema sürümlerinde sorun yaşayabilirsiniz.

Bunun daha iyi bir yolu .htaccess dosyasında bunu hesaba katmak olacaktır. Örneğin, sayılar arasında alt çizgi bulunmasına izin verebilir ve noktaları onlarla değiştirebilirsiniz.

Bu denenmemiş, ancak çalışması gerekir:

.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 doğrudur, tüm CSS'niz için style.css dosyasını kullanmanız gerekmez.

Stil sayfasını ve temanızdaki diğer dosyaları sürümlendirmek için bunu İşlev.php dosyanıza ekleyebilirsiniz.

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

Ve sonra stil sayfanıza bağlantı yaptığınızda bunu yapabilirsiniz.

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

Bu şekilde sürüm numarasını el ile güncellemeniz gerekmez; dosya sunucuda her güncellendiğinde, sürüm otomatik olarak bu UNIX zaman damgasına dönecektir.

3
Paul Sheldrake

Eh, sadece istediğiniz kodu istediğiniz yeri olarak style.css kullanabilirsiniz. Basit ifadeyle

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

Sonra bir sürümü yükselttiğinizde, sadece aşağıdaki gibi düzenleyin:

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

Sürümleri kaydetme gelince, bir Subversion , veya git kullanmayı düşündünüz mü? Sonra, stil sayfanızın tam bir kaydını tutabilirsiniz. Muhtemelen sürümün nedenlerini tam olarak anlamadım.

2
artlung

Bu eski soruya rastladım ve bugünlerde modası geçmiş görünen tüm cevapları buldum.

Sadece style.css dosyasının üstbilgisi bölümünde tanımlandığı şekilde tema sürümünü kullanırdım. wp_get_theme()->get( 'Version' ) ile alabilirsiniz.

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

Bu şekilde, sürüm numarası ?ver=#.## gibi url’ye otomatik olarak eklenecek ve url temanın sürümü style.css’de artırıldığı anda değişir.

2
JHoffmann

functions.php değişikliğinde

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

için

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

$ver öğesini herhangi bir değere değiştirin veya geliştirme modu için time().

1
Rashed Hasan

Bunun WP3 için değişip değişmediğinden emin değilim, bu yüzden tamamen emin değilim, ancak bir yol ilgili php dosyasını doğrudan düzenlemektir (Pano/Yönetici sayfalarından yapılıp yapılamayacağını bilmiyorum) :

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

Ve header.php dosyasını açın. Bu dosyada bu satırı bulun:

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

Bağlantılı stil sayfasına bir 'sürüm' eklemek için (bunun gibi bir şey olmasını varsayalım: stylesheetURL.css?version=2) şu şekilde değiştirin:

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

Bu biraz tuhaf, yine de, eğer daha iyi bir yol varsa, onu duymayı çok isterdim =)


Farklı bir stil sayfası styles-1.css kullanmak için, sadece (yukarıdaki) satırı aşağıdakilere yapabilirsiniz:

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

(Temel olarak <?php ... ?> dosyasını kaldırın ve normal bir yolla değiştirin.)

0
David Thomas