아스트라 테마에서 갑자기 헤더빌더와 푸터빌더가 사라졌어요!!
고객분께서 홈페이지를 사용하시다가 로고를 변경하시려고, 사용자 정의 페이지를 들어가보니, 갑자기 헤더 빌더(Header Builder)와 푸터빌더(Footer Builder)가 나오지 않는 문제가 발생하셨다며 부랴부랴 연락을 해오셨습니다.
문제 해결을 위해 이것 저것 보다보니, 실제로 사라진건 헤더 빌더(Header Builder)와 푸터 빌더(Footer Builder) 뿐만이 아니라 더 많은 메뉴들이 함께 사라지는 문제였습니다. 실제 이런 문제를 겪는 유저들이 여럿 있는 듯 보였습니다. 그래서 그 해결방법에 대해 오늘은 다뤄볼까 합니다.
우선은 기본적으로 아래의 항목을 체크해 보는 것이 좋습니다.
문제 발생시 체크 사항
- Astra 테마의 대시보드에서 헤더빌더와 푸터빌더의 사용자 정의 버튼을 눌러도 작동이 되지 않는가?
- Elementor의 테마 빌더를 사용중인가?
- WP CODE와 같은 스니펫 플러그인이 비활성화 되어 있는가?
- 플러그인을 전체 비활성화하면, 헤더빌더와 푸터빌더가 보이는가?
위 체크사항 중 하나라도 해당될 경우
위와 같은 방법으로 해결될 경우, 테마의 설정이나, 플러그인의 설정이나 코드 충돌로 인한 문제가 확실합니다. 이런 경우는 해당 되는 문제에 따라서 설정 변경 및 코드 수정, 플러그인 비횔성화 같은 부분으로 해결을 해주시면 됩니다.
위 체크사항을 모두 다 해봤어도 해결이 되지 않습니다.
워드프레스의 사용자정의 화면을 연 상태로, 마우스 오른쪽 키를 클릭하여 검사를 눌러 개발자 도구를 엽니다. 그리고 상단의 콘솔 탭을 클릭하여 발생하는 에러를 확인해봅니다.
사용자정의 화면에서 개발자 도구(Console)를 열어보면 다음과 같은 에러들이 연쇄적으로 발생합니다.
- Uncaught SyntaxError: Unexpected identifier '$'
- wp.components is undefined
- Cannot read properties of undefined (reading 'store')
- block-editor.min.js … createSlotFill
이 에러 조합의 핵심은 하나입니다.
워드프레스 코어 JavaScript(Gutenberg 패키지)가 정상적으로 로딩되지 않았다
원인의 정체
- 최근에 워드프레스 업데이트를 진행한 적이 있나요?
- 멀티사이트를 구성하거나, 서버 이전 또는 복제한 적이 있나요?
위와 같은 진행 이력이 있다면, 이러한 과정을 진행하던 도중, 워드프레스 코어 자바스크립트와 캐시에 문제로 이와 같은 문제를 직면하시게 되었을 겁니다. 서버를 이전 또는 복제하는 과정 중 코어 자바스크립트 파일이 손상되고, 브라우저는 이 손상된 자바스크립트 파일을 홈페이지에 불러오기 때문에 오류가 생기면서 다른 기능들이 제대로 불러와 지지 않는 문제가 발생하게 됩니다. 이런 문제는 사용자정의의 다른 기능들을 정상적으로 불러오지 못하는 결과를 가져오게 되어 사라지게 되는 것입니다.
그래서 메뉴가 숨겨진 것처럼 보였던 것입니다.
핵심 진단 포인트
- 1. 사용자 정의 화면에서 개발자 도구를 열어 네트워크 탭에서 components.min.js 항목을 찾아 클릭
- 2. 오른쪽에 뜬 스크립트 파일에서 깨진 문자열 있는 지 확인
- 3. 이상한 문자가 섞여 있다면, 90%이상 확실
- 4. 콘솔에 Gutenberg 관련 undefined 에러가 연쇄 발생하면 100% 해당 케이스
위 이미지에서 보시는 것과 같이 $[----- $[-----과 같은 비정상적인 문자열이 있다면, 워드프레스 코어 JavaScript(Gutenberg 패키지)가 정상적으로 로딩되지 않은 상태입니다. 그렇다면 마지막으로 이 문제의 해결 방법에 대해 알아보겠습니다.
해결방법
- 1. 워드프레스 코어 재설치
- 2. 브라우저 캐시 초기화
이 문제에 대한 해결 방법은 의외로 간단합니다. 관리자 페이지> 대시보드> 업데이트로 이동하셔서 재설치 버튼을 눌러줍니다.
워드프레스가 업데이트 되었다는 문구를 확인하시면, 반드시 브라우저 캐시를 지워주세요. 기존에 로드되었던 자바스크립트 파일을 지우고, 새롭게 자바스크립트 파일을 불러와야만 이 문제가 해결이 됩니다. 이 부분까지 완료하셨다면, 기존에 사용자 정의 화면에서 보이지 않던 메뉴들이 정상 작동하는 걸 확인해 볼 수 있습니다.
오늘은 아스트라 테마(Astra Theme)에서 헤더빌더(Header Builder), 푸터 빌더(Footer Builder)가 사라졌을 때, 그 원인과 해결 방법에 대해 알아보았습니다. 다음에 더 좋은 글로 찾아뵙겠습니다. 감사합니다.
