클라우드웨이즈: 워드프레스 사이트 레이아웃이 깨지는 경우

워드프레스 Divi 테마를 사용하여 랜딩 페이지를 하나 만들었습니다. 엘리멘터 페이지 빌더와 비슷한 기능을 제공하는 DivI 빌더가 탑재된 Divi 테마는 레이아웃을 조합하여 쉽게 랜딩 페이지를 만들 수 있습니다. 하지만 로그인 상태에서는 사이트가 정상적으로 표시되었지만, 로그아웃 상태에서는 사이트가 깨지는 현상이 발생했습니다.

이런 경우 보통 캐시 플러그인과 최적화 플러그인 설정에 문제가 있을 수 있습니다. 클라우드웨이즈의 경우 Breeze라는 캐시 플러그인을 제공합니다. Breeze 캐시 플러그인은 캐싱 기능뿐만 아니라 HTML/CSS/JavaScript를 압축하여 최적화하는 기능도 제공합니다. 이러한 최적화 기능을 설정할 때에는 주의가 필요합니다. 로그인 상태에서는 이상이 없고 게스트 상태로 접속하면 레아아웃이 깨진다면 Minification 기능을 비활성화하여 체크할 수 있습니다.

☞ 클라우드웨이즈 할인 프로모 코드 & 가입 방법

클라우드웨이즈: 워드프레스 사이트 레이아웃이 깨지는 경우

로그인 상태에서는 정상적으로 표시되는 사이트가 로그아웃 상태에서 깨지는 경우

로그인 상태에서는 사이트가 정상적으로 표시되지만 로그아웃 상태에서 접속할 경우 사이트 레이아웃이 깨지는 경우에는 캐시 플러그인과 최적화 플러그인의 설정을 체크하여 문제가 될 만한 설정을 변경하면서 테스트할 수 있습니다.

설정 » Breeze » File Optimization에서 HTML/CSS/자바스크립트 Minify 설정을 할 수 있습니다.

레아아웃이 깨지는 경우 Minify 설정을 하나씩 비활성화하면서 문제를 일으키는 설정을 찾을 수 있습니다. 

Minify 설정을 하면 사이트 속도가 크게 개선될 수 있지만, 간혹 의도치 않게 사이트 레이아웃이 깨질 수 있습니다. 예를 들어, JS Minify 옵션을 활성화할 경우 일부 자바스크립트 코드가 제대로 로드되지 않으면서 문제를 일으킬 수 있습니다.

캐시를 삭제해도 변경 사항이 반영되지 않는 경우

Breeze에서 서버 캐시를 삭제해도 로그아웃 상태에서 사이트를 방문했을 때 변경 사항이 곧바로 반영되지 않는 경우가 있습니다. 이 경우 Basic Options(기본 옵션)에서 Browser Cache를 비활성화하고 캐시를 삭제한 후에 테스트해보시기 바랍니다.

브라우저 캐시를 활성화하면 사용자 브라우저의 캐시가 곧바로 삭제되지 않아서 변경 사항이 제대로 반영되지 않을 수 있습니다. 새로운 글이 발행되어도 홈페이지에서 신규 글이 표시되지 않으면 서버 캐시를 삭제하고, 서버 캐시를 삭제해도 문제가 해결되지 않으면 브라우저 캐시 옵션을 해제하여 테스트해 보시면 변경 사항이 반영되는 시간이 짧아질 것입니다.

마치며

이상으로 Cloudways에서 호스팅 중인 워드프레스 사이트의 레이아웃이 로그아웃 상태에서 깨지는 경우에 대처 방법에 대하여 살펴보았습니다. 또한, 사이트 변경 사항이 곧바로 적용되지 않을 경우 체크 사항에 대해서도 살펴보았습니다.

다른 캐시 플러그인과 최적화 플러그인(예: Autoptimize, Clearfy 등)을 사용하는 경우에도 비슷한 방식으로 접근할 수 있습니다.

1. 사이트 변경 사항이 곧바로 반영되지 않는 경우 -> 캐시를 삭제하고, 해결되지 않으면 브라우저 캐싱 설정이 되어 있는 경우 해제한 후에 테스트합니다.
2. 관리자 페이지에서는 레이아웃이 정상적으로 표시되지만 로그아웃 상태나 다른 브라우저에서 접속 혹은 모바일에서 접속 시 레이아웃이 깨지는 경우 -> 캐시 플러그인이나 최적화 플러그인의 Minification 설정을 체크합니다.

참고

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2335

워드프레스 GeneratePress 테마 라이선스 (+요금제)