워드프레스 줄바꿈 이해하기

워드프레스에서 줄바꾸기를 하는 두 가지 방법

워드프레스에서 Shift+Enter를 누르면 강제 줄바꿈(line-break)됩니다. 그냥 Enter를 누르면 단락 나누기(new paragraph)가 됩니다.

Line-breaks in WordPress - 워드프레스에서 줄바꿈 이해

워드프레스 글쓰기 화면에서 비주얼 모드에서 보면 위와 같이 표시됩니다. 이것을 텍스트 모드에서 보면 다르게 표시됩니다.

Text Mode in WordPress - 워드프레스 텍스트 모드

위의 그림에서는 표시되어 있지 않지만 Enter를 입력하여 줄나누기를 한 경우 단락 태그(<p>)가 추가되고 Shift+Enter를 입력하여 줄나누기를 한 경우 <br> 태그가 입력됩니다.

워드프레스에서 줄바꿈이 되지 않는 경우

워드프레스에서 줄바꿈이 되지 않는 것은 워드프레스 편집기(Editor)에서 줄바꿈 기호를 제거하기 때문일 수 있습니다. 이 경우 우선 TinyMCE Advanced 플러그인을 설치하여 문제가 해결되는지 살펴보도록 합니다.

그래도 문제가 해결되지 않으면 다음 코드를 사용 중인 워드프레스 테마의 함수 파일에 추가해봅니다.

function clear_br($content){
return str_replace("<br />","<br clear='none'/>", $content);
}
add_filter('the_content', 'clear_br');

위의 방법도 잘 되지 않는다면... <br> 태그와 <p> 태그를 숏코드로 만들어서 추가하는 방법을 생각해볼 수 있습니다. 이 경우 너무 번거로울 것 같습니다. 먼저는 테마 제작자에게 문의하여 문제를 해결할 수 있는지 확인해보는 것도 좋을 듯합니다. 숏코드 만드는 방법은 이 글을 참고해보시기 바랍니다. 이외에도 어떤 글에서는 margin0으로 설정되어 있어 그런 현상이 나타난다고 되어있기도 합니다.

Update: br 태그가 제대로 작동하지 않을 경우 이 글을 참고해보시기 바랍니다. 이 글에 제시된 다양한 방법을 시도하여 문제 해결을 시도해보시기 바랍니다.

참고:


16개 댓글

  1. 안녕하세요. 덕분에 워드프레스 잘 배우고 있습니다.

    오늘 사이트 구성 중에 최근글 리스트 제목을 수정하다 보니 모바일 사이즈로 변환 시에 최근글 리스트의 제목 줄 간격이 너무 넓어져 보이는 현상이 생깁니다. 여러가지 제목과 관련된 CSS를 넣어봐도 간견 조절이 쉽지 않아서 도움을 구해봅니다.
    링크에 관련 사진 연결해 놓았습니다. https://ferstx.tistory.com/3904

    1. 해당 URL에서는 제목이 모바일에서도 제대로 표시되네요. 문제가 되는 URL을 올려주시면 한 번 살펴봐드릴 수 있습니다.

      1. 네 답변 감사드립니다.
        https://ucanwalk.net
        PC 화면에서는 정상적으로 최근글의 제목이 정상적으로 보이는데,
        모바일 사이즈로 줄어들면 제목 줄바꿈이 되면서 너무 넓게 벌어집니다. line-height 속성으로도 변화가 없네요. 도움 부탁드립니다.

      2. 와웃~! 해결 했어요.
        죽어라고 .post-title a 속성만 만졌네요.
        .post-title 에 주신 내용을 넣으니 줄간격이 깔끔 완벽해졌습니다. 감사합니다.

  2. 안녕하세요. 워드프레스를 이제 막 시작하는 초보 블로거입니다.
    워드님의 블로그 게시물들을 살펴보며 많이 배우고 있습니다. 그런데 워드님의 게시글 특징이 줄바꿈은 안쓰시고 단락으로만 포스팅을 하시던데, 줄바꿈을 사용하면 seo에 안좋은 영향을 끼치나요?
    저는 장문 포스팅을 많이 하는데 줄바꿈을 사용해야 가독성면에서 더 괜찮은거 같아서 고민중입니다.
    또는 줄바꿈을 사용하더라도 단락을 적절히 사용하면 괜찮을까요?
    조언 부탁드립니다.

  3. 혹시 워드프레스로 쓴 글 제목(title) 줄 간격도 조절할 수 있나요?
    글 제목을 쓰다보면 pc버전에서는 어느정도 긴 제목도 한줄로 보여서 괜찮은데, 모바일버전으로 볼때는 두줄로 줄바꿈 되어 보이거든요-
    이때 줄바뀜 된 글자끼리 간격이 좁아서 글씨가 겹쳐보이네요ㅠㅠ 본문은 줄간격 글자간격 다 조정이 되던데 제목은 제가 못찾는건지.. 수정이 안되더라구요ㅠㅠ 꼭꼭 답변 부탁드립니다!

    1. 테마 옵션에서 옵션을 제공하지 않는 경우 CSS로 조정할 수 있습니다.

      예를 들어, 이 블로그에 설치된 뉴스페이퍼 테마에서는 다음과 같은 코드를 사용할 수 있습니다.

      .td-post-template-default .td-post-header .entry-title {
      line-height: 42px;
      }

      실제 CSS 코드는 테마마다 조금씩 다릅니다.
      CSS를 조금 알면 쉽게 가능합니다.

      line-height에 대한 내용은 다음 W3Schools 문서를 참고해보세요.
      https://www.w3schools.com/cssref/pr_dim_line-height.asp

      워드프레스에서 CSS를 추가하는 방법은 다음 글을 참고해보시기 바랍니다.

      https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/

  4. ...
    .
    .
    .

    ...
    이런 식으로 로 된 제목 아래 글과 다음 로 된 제목 사이에 줄을 하나 더 넣고 싶을 때가 있는데, enter도 shift+enter도 먹히지 않네요. 비주얼 모드에서만 변하고 텍스트 모드에서는 변화가 없습니다. 텍스트 모드에서 을 적어넣어도 마찬가지에요.  라고 한 번만 나타납니다. 다른 글에서 말씀하셨던 것처럼 TinyMCE 플러그인을 넣어도 마찬가지구요. 왜그럴까요?

    1. 음... 특정 h2 제목에 대해서만 아래에 줄 하나 더 넣고 싶다면...

      ... 처럼 텍스트 모드에서 class를 추가한 다음에...

      .extra-line {
      margin-bottom: 20px;
      }

      위와 같은 CSS 코드를 추가해보시기 바랍니다. 숫자는 적절히 수정하시면 되고요.

      1. 아, 제목 아래가 아니고 제목에 딸린 글과 그 다음 제목 사이에 간격을 넓히고 싶어서요. 강제로 줄을 추가하려고 을 넣는데 그게 넣고나면 온데간데 없이 사라지네요.

      2. 그런 경우 여러 가지가 가능할 것 같습니다.

        숏코드를 하나 만들면 어떨까요?

        function line_break_shortcode() {
        return '<br />';
        }
        add_shortcode( 'br', 'line_break_shortcode' );

        위와 같은 코드를 테마의 함수 파일에 추가하고, 공백이 필요한 곳에 [br]을 추가하면 됩니다.

        두 개가 필요하면 두 개를 추가해보시기 바랍니다.

      3. 그러면 곧바로 텍스트 모드에서 다음 코드를 한 번 추가해보시기 바랍니다.

        <div class="extra-line"></div>

        그리고 CSS 스타일시트 파일에는 다음 코드를 넣어보세요.

        .extra-line {
        margin-bottom: 20px;
        }

      4. 이상하네요.
        혹시 캐시 플러그인이 설치되어 있다면 캐시를 삭제하고, 브라우저 캐시도 삭제한 후에 테스트해보시기 바랍니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.