워드프레스에서 pre, code 태그가 적용되지 않을 때 (feat. Breeze 플러그인)

<pre>, <code> 태그를 이용해 코드를 보여주는 문장을 쓰고 싶은데 이게 생각보다 잘 안되는 문제가 있었다. 워드프레스에 로그인한 상태에서는 정상적으로 보였기 때문에 언제부터 문제가 있었는지 파악되지는 않는다. 코드 블록을 설정해 보고, 코드 편집기, 클래식 편집기도 써 보고 심지어 플러그인도 사용해 보았는데 제대로 표현하지 못했다.

관리자 로그인 상태로는 의도한 대로 잘 나타나지만 로그아웃을 하여 일반 방문자와 같은 상황에서 포스트를 확인해 보면 입력한 코드들이 엉망이 된 채로 보인다. 그러니까 pre, code 태그로 코드 예시 문장으로 감싸 놓아도 포스트를 확인하면 실제 코드로 인식해 버리는 문제가 발생했다.

워드프레스나 테마(GeneratePress)의 버그로밖에 생각되지 않아 긴 시간 관련 자료를 찾아보았지만 이렇다 할 해결책은 찾지 못했다. 결과적으로 찾은 원인은 Breeze 캐시 플러그인의 특정 옵션을 활성화시켰을 때로 파악됐다.

다만 내가 겪은 문제가 나한테만 발생하는 특수한 상황일 수도 있기 때문에, 비슷한 문제로 곤란을 겪고 계신 분들이 참고할 수 있는 하나의 사례 정도로만 보아주면 좋을 것 같다.

*추가 내용: Breeze 2.1.7 버전으로 업데이트되면서 문제는 해결된 것 같다. 혹시 비슷한 문제를 겪게 되는 경우, 캐시 플러그인의 특정 기능이 문제를 일으키는 것은 아닌지 확인해 보면 도움이 될 것 같다.

환경

  • WordPress 6.4.3
  • GeneratePress 3.4.0 (무료 버전)
  • Breeze 2.1.6


1. 발생한 문제

코드 블록으로(<pre>, <code>) 코드를 입력하면 태그 코드는 html 앤티티 코드로 변환되어 실제 코드로 인식되지 않은 채 화면에 나타나야 하지만 코드로 인식되는 현상이 발생.

코드 편집기나 소스 코드를 살펴보면 '<', '>'가 '&lt;', '&gt;'로 잘 바뀌어 있고 미리보기 및 관리자 로그인 상태에서 보이는 웹 페이지는 코드 블록이 잘 적용된 것으로 보이지만, 실제 웹(로그아웃 상태) 상태에서 보면 실제 코드로 인식되어 있는 모습이 보여짐.

급히 조치한 방법은, 편집기에서 '<' 바로 다음 문자 또는 '<'와 그다음 첫 번째 문자를 HTML 앤티티 코드로 교체하는 것이었다. 다만 근본적인 해결책이 아니기도 하고, 코드 블록이 들어간 포스트를 찾아 일일이 수정해 주어야 한다는 것이 쉽지 않다. 게다가 언젠가 원인을 발견하여 해결하게 되면 수정했던 포스트를 모두 원상복구 시켜야 한다. (급한 마음 때문에 일단 이 과정을 실제 내가 해 버렸다...)

이 상황에서 혹시 Syntax Highlight 관련 플러그인으로 극복 가능할까 싶어 사용해 보았는데, 일반적인 태그는 문제가 없었지만 <head>, <body> 등의 경우에는 해결되지 않았다.

코드 블록으로 아래의 문장을 입력하면,

code problems 1
워드프레스 편집기 캡처


로그인 상태에서는 아래와 같이 정상적으로 보이지만,

code problems 2
로그인 상태에서 웹 브라우저 캡처


실제 웹(로그아웃 상태)에서는 아래와 같이 보인다.

code problems 3
로그아웃 상태에서 웹 브라우저 캡처


2. 원인

Breeze 플러그인을 재설정하는 과정에서 정상화되는 모습을 보여 해당 플러그인의 특정 옵션이 문제가 되고 있다고 추정할 수 있었다. 옵션 하나하나를 확인하다 보니 Lazy load image, Cross-origin Safe Links 문제로 파악되었다. 둘 중 하나라도 활성화되어 있으면 위의 문제가 발생했다.

다만, Breeze는 정상이지만 테마나 다른 플러그인에서 해당 옵션과 충돌을 일으키는 것일 수도 있기 때문에 반드시 Breeze 문제라고 특정할 수는 없었다.

3. 해결 방법

Breeze의 lazy load image와 Cross-origin Safe Links를 비활성화시키면 된다. 옵션 비활성화 후 바니시 캐시를 비롯한 모든 캐시를 지워주고 확인해 보도록 하자. 그렇지 않으면 반영되는 데까지 오랜 시간이 걸릴 수 있다.

breeze options
Basic Options에서 lazy load image와 Cross-origin Safe Links 비활성화 시키기

이번에 알게 된 사실이지만, 워드프레스 4.7.4 버전부터 새 창으로 열리는 링크(_blank)는 noopener, noreferrer 속성이 자동으로 추가된다고 한다(QODE Magazine). 웹 페이지 소스를 확인해 보니 실제 그러하였기 때문에 Breeze의 Cross-origin Safe Links 옵션은 필요 없어 보인다.

Lazy Load Images 기능은 필요한 옵션이기는 하지만 a3 Lazy Laod 등과 같이 다양한 세부 옵션을 제공하는 플러그인이 있기 때문에 이 역시 Breeze에서 사용하지 않아도 괜찮다.

결과적으로 굳이 쓰지 않아도 되는 옵션이 되어버렸지만 해당 버그는 빨리 개선되면 좋을 것 같다. 워드프레스를 시작한 지 얼마 안 되었을 때를 생각해 보면 플러그인의 좋은 기능들은 최대한 활성화시켜 사용했던 기억이 있다. 그런데 갑자기 원인도 모를 버그들이 튀어나오면 무엇이 문제인지도 파악하기 힘들고 대처도 어렵기 때문이다.


카테고리의 다른 글

  1. apple-touch-icon.png 404 에러 탈출기 (feat. precomposed, 120x120, favicon)
  2. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  3. 구글 애널리틱스 내부 트래픽 설정하기 (분석 제외 IP 설정)
  4. 구글 애널리틱스와 태그 매니저 페이지뷰 중복측정 방지하기
  5. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인

댓글 남기기