워드프레스 강좌 | 텍스트 모드에서 <p>, <br> 태그 보이게 하는 방법

워드프레스에서 글을 작성할 때, 비주얼 모드와 텍스트 모드가 있습니다.

비주얼 모드는 글을 발행했을 때 방문자가 보는 모양과 비슷하게 보여주므로 글 작성이 편합니다. (테마에 따라 거의 비슷하게 보여주기도 하지만, 꽤 차이나는 경우도 있습니다.)

텍스트 모드는 html 코드 등을 넣어 세밀하게 조정할 때 유용합니다. 스크립트 코드를 넣어 동적 효과를 줄 수도 있습니다.

그런데, 텍스트 모드가 정확하게 코드를 다 보여주지는 않습니다.

대표적인 게 <p><br> 태그입니다.

예를 들어 비주얼 모드에서 다음과 같이 작성을 하면...

텍스트 모드에서는 다음과 같이 보입니다.

태그 없이 글자만 있지만, 실제로 발행 후 소스를 보면

<p>첫번째 문단</p>
<p>두번째 문단</p>

처럼 되어 있습니다. 즉, 텍스트 모드에서는 <p> 태그가 생략된 것으로 볼 수 있습니다.

텍스트 모드에서 생략된 태그를 보이게 하는 방법은 크게 두가지가 있습니다.

첫번째는 테마의 functions.php 파일에 다음 코드를 추가하는 것입니다.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

그런데, 잘 작동하지 않는 경우가 있고, 테마를 업데이트하면 해당 수정사항이 사라진다는 단점이 있습니다.

두번째 방법은 TinyMCE Advanced 플러그인을 이용하는 것입니다.

TinyMCE Advanced는 에디터에 여러 기능을 추가해주는 플러그인으로, 백만 이상 설치된 인기있는 플러그인입니다.

플러그인을 설치하고 활성화한 후 [설정 - TinyMCE Advanced]에서 Keep paragraph tags에 체크를 하고 저장합니다.

그러면 다음처럼 텍스트 모드에서 <p> 태그 등을 볼 수 있습니다.

주의할 점은 데이터베이스에 저장되는 내용도 달라진다는 것입니다.

플러그인을 활성화하기 전에는 <p> 태그가 없는 상태로 저장하지만, 플러그인을 활성화하면 <p> 태그를 포함하여 저장합니다.

일반적으로 이것이 문제를 일으키지는 않겠지만, 혹시 모를 상황을 대비해서 충분히 테스트해보는 것이 좋습니다.

Created on 2016-10-19 02:16 | Updated on 2017-06-26 23:46

Book navigation