원격에 있는 워드프레스를 다운받아서 로컬에서 작업하려고 하는데, 웬걸 CSS가 로딩되지 않았습니다. 그래서 아래 이미지처럼 내비게이션이 깨져 나오는 현상이 발생했습니다.
블록 테마를 사용하기 전에는 발생하지 않았던 일이라 한참을 찾았습니다.
직접적인 원인
일단 직접적인 원인은 CSS가 실제로 로딩되지 않았기 때문입니다.
원래라면 아래와 같은 CSS가 있어야 하는데요.
아래 이미지에서 볼 수 있듯, CSS가 없었습니다.
근본 원인
근본 원인은 워드프레스 코어가 스타일 파일의 위치를 절대경로로 DB에 저장하기 때문이었습니다. wp_options 테이블에는 _transient_wp_core_block_css_files라는 값이 있고, 해당 값의 내용은 아래와 같습니다.
array (
0 => '/var/www/mytory.net/wp-includes/blocks/archives/editor-rtl.css',
1 => '/var/www/mytory.net/wp-includes/blocks/archives/editor-rtl.min.css',
2 => '/var/www/mytory.net/wp-includes/blocks/archives/editor.css',
// 중략
493 => '/var/www/mytory.net/wp-includes/blocks/video/theme-rtl.min.css',
494 => '/var/www/mytory.net/wp-includes/blocks/video/theme.css',
495 => '/var/www/mytory.net/wp-includes/blocks/video/theme.min.css',
)그런데 워드프레스를 로컬에 다운받아서 작업하니 폴더 경로가 변경되면서 CSS 파일 위치를 특정하지 못하게 된 것입니다.
단순히 서버에서 워드프레스 폴더의 위치를 옮기기만 해도 코어 블록의 스타일이 깨지게 되는 치명적인 문제인데요. 이거 굳이 이렇게 해야 했나 싶습니다. 앱 루트를 파악한 뒤 상대 경로로 적으면 될 텐데 말입니다.
해결책 1
워드프레스 6.3부터 도입된 상수인, WP_DEVELOPMENT_MODE를 all로 설정하면 해결됩니다.
wp-config.php 파일을 열어서 /* Add any custom values between this line and the "stop editing" line. */라는 문장 아래에 상수를 넣어 줍시다.
/* Add any custom values between this line and the "stop editing" line. */
const WP_DEVELOPMENT_MODE = 'all';이제 새로고침을 하면 해결됩니다.
이 상수는 현재 이 사이트가 코어 개발용인지, 플러그인 개발용인지, 테마 개발용인지를 알려 주는 역할을 합니다. all이라고 쓰면 셋 다 개발중이라는 뜻이지요. 그리고 개발중인 사이트이므로 캐시가 비활성화되고, 그래서 문제가 해결되는 것입니다.
이 상수에 대해 좀더 알고 싶으면 “Configuring development mode in 6.3 – Make WordPress Core“를 참고하세요.
해결책 2
워드프레스 6.3 미만이라면 옵션을 삭제하면 됩니다. 워드프레스 데이터베이스로 들어가서 아래 쿼리를 날려 주세요.
delete from wp_options where option_name = '_transient_wp_core_block_css_files';그러면 CSS 캐시가 제거되고 문제가 해결됩니다.
참고: WordPress default block inline styles not loading in frontend | WordPress.org
사진 Mick Haupt on Unsplash
댓글 남기기