cara menambahkan versi style.css di wordpress


12

Cara menambahkan versi style.cssdi WordPress seperti di bawah ini yang bisa saya lakukan di Joomla.

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

saya tahu bahwa style.cssakan memuat secara dinamis. tolong bantu saya untuk bagaimana melakukan itu.


Berikut ini adalah plugin wordpress.org/plugins/wp-css-version-history yang secara otomatis akan menambahkan nomor versi di stylesheet. Ini menciptakan stylesheet baru yang dimuat terakhir. Tidak perlu menghapus cache untuk melihat perubahan. Menggunakan Wordpress yang dibangun di editor CSS dan kunci file pengguna untuk kolaborasi tim.
Brian Holzberger

Jawaban:


16

Nomor versi adalah parameter dari wp_enqueue_style().

Sesuai Codex, berikut adalah semua parameter yang wp_enqueue_stylemenerima.

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

Jadi misalnya untuk memuat stylesheet dengan nomor versi Anda akan melakukan hal berikut:

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

ketika saya melakukan ini style.css lama juga memuat. Bagaimana cara menghapusnya?
Toretto

@VinodDalvi apa yang Anda maksud dengan pegangan. saya tidak tahu tentang itu, saya baru di wordpress, tolong saya.
Toretto

1
@ Toretto Entah tema Anda sulit-coding di header.php atau tema Anda juga enqueing dengan pegangan yang berbeda (parameter pertama). Solusinya juga tergantung pada apakah Anda secara langsung mengedit functions.php tema Anda atau jika Anda telah membuat tema anak.
Helgatheviking

@ Toretto, $ handle ditampilkan dalam respons saya dan juga dijelaskan di tautan yang saya berikan ke halaman Codex untuk wp_enqueue_stylesilakan lakukan pekerjaan rumah Anda.
Helgatheviking

1
@ Toretto Jika tema Anda digunakan wp_enqueue_style()untuk memuat stylesheet yang dimaksud maka pegangannya adalah parameter pertama . Jika tema Anda mengkodekan stylesheet di header.php maka itu tidak akan memiliki pegangan.
Helgatheviking

5

Alih-alih memasang kabel versi, Anda mungkin menemukan itu lebih baik dalam beberapa kasus untuk secara dinamis versi stylesheet Anda sehingga setiap kali Anda mengubahnya, itu secara otomatis mengubah dan menyegarkan cache browser segera tanpa harus mengedit functions.php Anda lagi dan lagi.

Anda dapat menggunakan filemtime () untuk melakukan itu. Berikut adalah cara melakukannya dalam gaya anak yang mereferensikan parent_style

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime( get_stylesheet_directory() . '/style.css' )  );

Seiring waktu, saya datang untuk lebih suka versi tema, tetapi ide yang bagus untuk menggunakan filemtime () di sini, jika seseorang tidak memiliki praktik pembuatan versi tema yang konsisten.
jgangso

3

Jika Anda adalah pengembang tema, Anda mungkin ingin memaksakan pemuatan ulang aset Anda saat mendorong versi baru.

Jadi versi dari suatu tema dilakukan di style.css

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

Di bagian atas Anda functions.php:

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

Nanti saat Anda membuat CSS atau JS, gunakan THEME_VERSIONargumen keempat:

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

Akan ditampilkan ke halaman:

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

Dapatkan berguna saat Anda memiliki lebih banyak aset untuk diperhatikan dan tidak ingin mengubahnya secara manual.


2

Anda dapat mencapai ini menggunakan salah satu cara berikut:

1) Tambahkan tag berikut dalam file header.php dari tema.

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

2) Tambahkan kode berikut dalam file functions.php dari tema.

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

Untuk informasi lebih lanjut lihat halaman ini.


ketika saya melakukan ini style.css lama juga memuat. Bagaimana cara menghapusnya?
Toretto

Apa pegangan style.css lama?
Vinod Dalvi

jika Anda tidak dapat menemukan pegangan maka cukup salin dan tempel seluruh url style.css di sini .. saya akan mendapatkannya dari sana ...
Vinod Dalvi

Atau bisakah Anda memberi tahu saya apa nama tema atau nama folder tema Anda?
Vinod Dalvi

1
Selamat datang .... :)
Vinod Dalvi

1

cara terbaik untuk memuat css ke dalam tema wordpress Anda adalah kode berikut dalam file functions.php Anda:

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

Ini adalah cara yang tepat untuk memuat gaya dalam tema Anda dan juga ini yang terbaik untuk keperluan pementasan / pengujian karena setiap pembaruan akan menghasilkan versi gaya yang diperbarui.

Jika Anda ingin menghindari pemuatan dengan cara pertama, Anda dapat menggunakan versi singkat ini dan menempatkan baris berikut ke file header.php Anda dan akan mendapatkan hasil yang sama:

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

Bersulang


1

Coba ini:

Tambahkan ini ke functions.php

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();
}

Tambahkan ini ke header atau footer -> autoVer ('/ js / main.js');


1

Berlawanan dengan metode yang disajikan sejauh ini, saya percaya lebih baik menggunakan nomor versi yang muncul di bagian atas file style.css Anda:

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

Untuk menggunakan versi tema di css Anda, tambahkan berikut ini ke skrip functions.php (atau setara) Anda:

<?php

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

Ini berarti bahwa, setelah Anda mengedit file style.css Anda, yang perlu Anda lakukan adalah mengubah nomor versi di bagian atas file yang sama untuk melihat perubahan di frontend.

Jika Anda memeriksa bagian kepala dari HTML tema Anda akan melihat yang berikut:

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

-1

Cara ini cukup mudah untuk mendapatkan nomor versi dengan memanggil fungsi bloginfo($show) dua kali. Pertama untuk stylesheet dan kedua untuk nomor versi.

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

Itu semua yang ada untuk itu. Harapan yang membantu atau bermanfaat. Anda dapat melihat semua parameter yang tersedia dan melihat apa yang dapat Anda hasilkan dengan bloginfo()fungsi tersebut.

Abaikan komentar saya karena @Ravs telah menunjukkan kesalahan saya mengenai parameter 'versi' untuk fungsi bloginfo (). Itu memang mencetak nomor versi Wordpress.


Saya pikir itu bukan jawaban yang benar karena <? Php bloginfo ('version')?> Memberi Anda versi wordpress saat ini sementara pertanyaannya adalah tentang menambahkan app.scs versi bukan versi wordpress.
Ravinder Kumar
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.