변경시 브라우저에서 CSS가 업데이트되지 않음


14

워드 프레스 사이트의 CSS 작업을하고 있습니다. 변경하고 페이지를 새로 고치면 변경 내용이 반영되지 않습니다. 브라우저 기록을 지우고 캐시하면 변경 사항이 계속 반영됩니다. 페이지의 소스 코드를보고 CSS 파일을 보면 변경 전에 이전 내용이 포함되어 있습니다. 개발할 수 있도록 업데이트하려면 어떻게해야합니까?


캐싱 플러그인이 실행 중입니까? CSS 파일이 서버에 캐시 될 수 있습니다.
Pat J

캐싱 플러그인이있는 것 같습니다.
David Tunnell

WordPress를 사용하지 않으면 작동합니까? 예를 들어, 파일 test.html과 관련 .css파일이 있습니까?
Pat J

답변 중 하나라도 문제를 해결하는 데 도움이 되었으면 반드시 수락하십시오!
mrwweb

답변:


14

첨부 한 CSS 파일 끝에 임의의 버전 번호를 추가하십시오. ' wp_enqueue_style '또는 wp_register_style 함수를 사용하는 경우 임의의 (버전) 숫자 rand(111,9999)를 4 번째 매개 변수에 전달하십시오. CSS를 html 태그로 첨부하는 ?ver=<?php echo rand(111,999)?>경우 파일 이름 끝에 " "를 추가해야합니다 . 예는 여기

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

또는

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

클라이언트 엔드 캐싱에서 캐싱을 피하고 서버 캐싱도 가능합니다.


7

이 게시물이 1 년이 지난 것을 알고 있지만 CloudFlare가 CSS, js 및 이미지와 같은 정적 파일을 캐시하여 더 빠른 로딩 시간을 지원한다고 언급 할 것이라고 생각했습니다. 리로드에 반영되지 않는 CSS 변경에 문제가 있었기 때문에 방금 알아내는 데 몇 시간이 걸렸습니다. CloudFlare에는 3 시간 동안 활성화 할 수있는 개발 모드가 있습니다. 수정하기 전에 활성화하지 않은 경우 cloudflare 관리에서 캐시를 제거 할 수 있습니다.


1
CloudFlare는 ?ver=파일이 있으면 업데이트 할 수 없다고 생각합니다 .
hlcs

CSS, Javascript를 변경할 때마다 Cloudfare 캐시를 제거해야한다고 말하는가? 이 개발 모드는 실제로 무엇을합니까? Thnx
Tanvir

0

호스트가 Varnish와 같은 것을 사용하여 사이트 출력을 캐시 할 수 있습니다. 컷율 공유 호스팅 계정으로 호스팅되는 클라이언트 사이트에서이 문제가 발생했습니다. 내가 찾은 유일한 치료법은 단지 인내하는 것이었다.


0

하위 테마를 사용하는 경우 변경 사항을 즉시 보려면 하위 테마 스타일 시트를 큐에 넣을 수 있습니다. 이것은 내 문제를 해결했습니다.


0

지적하고 싶을 것 입니다. 설치 한 캐싱 플러그인에 유의하십시오. 예를 들어, WP Fastest Cache 는 WP 대시 보드에 로그인하고 탐색 메뉴에서 "캐시 지우기-> 캐시 삭제 및 CSS / JS"를 클릭하지 않으면이 문제를 일으킬 수 있습니다.


0

아마 늙었을 수도 있습니다. 그러나 도움을 원하는 사람을 지원해야합니다. 나는 같은 문제가 있었고 플러그인을 확인했다. 로딩 속도를 높이는 "w3 total cache"플러그인이있었습니다. 그것은 서버 측 캐시 플러그인이므로 비활성화했습니다. CSS 변경 사항은 실시간으로 다시 볼 수 있습니다. 부스터 플러그인이 많이로드되어 있습니다. 따라서 플러그인 목록을 확인하고 개발이 완료 될 때까지 비활성화하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.