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

Last Updated: 2023년 07월 17일 18개 댓글

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

워드프레스에서 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 태그가 제대로 작동하지 않을 경우 이 글을 참고해보시기 바랍니다. 이 글에 제시된 다양한 방법을 시도하여 문제 해결을 시도해보시기 바랍니다.

참고:


18 개 댓글

Leave a Comment

  1. 워드프레스에서 블록 편집기를 사용하고 있습니다. 원래는 엔터키를 누르면 문단이 생성되면서 그 자리에 "입력 / 블록 선택"이라는 문구가 나오는데요.(영어 버전은 "type / to choose a block"이라는 문구입니다.)
    근데 오늘은 첫 문단에만 "입력 / 블록 선택"이라는 문구가 나오고 두번째 문단부터는 문단은 생성되는데 마치 SHIFT + ENTER키를 누른 것처럼 아무것도 없는 빈칸이 생성됩니다.
    엔터키를 눌러 문단을 생성한 모습은 SHIFT + ENTER와 동일하지만 목록 보기에 보면 엔터키를 눌러 문단은 정상적으로 생성되는 것을 확인하였습니다.
    원래대로 엔터키를 눌러 문단을 생성할 때마다 글자가 입력이 안되어 있는 모든 문단에서 글자가 비어 있는 문단이라는 뜻의 "입력 / 블록 선택"이라는 문구가 다시 나오게 하고 싶습니다.
    어떻게 해야하나요?ㅜㅜ

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

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

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

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

    응답
  5. ...
    .
    .
    .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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