워드프레스 글쓰기에서 특정 텍스트/어구의 텍스트 크기 설정하기

2020. 1. 26. 01:43 | 댓글 7

워드프레스 5.0 이상에서는 구텐베르크 편집기(블록 에디터)가 기본 에디터로 통합되어 있습니다. 블록 에디터에서는 문단(paragraph) 단위로 텍스트 크기를 변경할 수 있습니다.

예를 들어, 다음과 같이 Paragraph 블럭을 생성하면 오른쪽 설정 패널의 텍스트 설정 옵션 아래에서 글꼴 크기를 Custom으로 선택하면 글자 크기를 조정할 수 있습니다.

하지만 글자 크기가 문단 블럭 전체에 적용됩니다.

만약 특정 단어나 어구만 텍스트 크기를 조정하고 싶은 경우에는 여러 가지 방법이 있습니다. 1회성인 경우 HTML로 직접 크기를 설정할 수 있습니다.

문단 블럭의 세 개 점으로 된 설정 아이콘을 클릭하고 HTML로 편집을 클릭합니다.

위의 그림과 같이 HTML로 간단히 원하는 부분의 텍스트 크기를 인라인으로 설정할 수 있습니다. 비주얼로 편집을 선택해보면 해당 부분의 텍스트 크기가 변경되었음을 확인할 수 있습니다.

이 방법은 번거롭고, 또한 인라인으로 태그가 추가되었기 때문에 추후에 글자 크기를 변경하고 싶은 경우 이 부분을 직접 찾아서 수동으로 수정해주어야 합니다. (혹은 DB에서 일괄적으로 수정하는 것도 가능할 것입니다.)

CSS 클래스를 활용하면 조금 더 유연하게 대처할 수 있습니다. CSS 클래스로 글자 크기를 설정하여 이용할 수 있습니다. CSS 클래스를 사용할 경우 추후에 해당 클래스의 글자 크기를 변경하고 싶은 경우 CSS 코드를 통해 제어가 가능합니다. 하지만 이 방법도 번거롭기는 마찬가지입니다.

다른 방법으로 다음 글에서 소개하는 간단한 코드를 사용할 수 있습니다.

 

텍스트 하이라이터(형광펜) 플러그인 - 워드프레스 중급

Simple Text Highlighter Shortcode Plugin for WordPress 텍스트를 원하는 색상으로 형광펜 처리를 하는 간단한 워드프레스 플러그인을 만들어보았습니다. Simple Text Highlighter Shortcode Plugin for WordPress는 매우 가벼운 플러그인으로 텍스트를 하이라이트하는 숏코드를 제공합니다. (다운로드는 아래 Updated 섹션에서 가능합니다.) 설치 방법 아래의 코드를 복사하여 테마의 함

www.thewordcracker.com

위의 글에서 제시하는 코드를 사용 중인 테마의 함수 파일(반드시 차일드 테마를 만든 다음 차일드 테마 폴더 내의 함수 파일)에 추가하도록 합니다.

그런 다음, 다음과 같이 글자 크기를 설정하고 싶은 부분을 다음과 같이 숏코드로 둘러싸도록 합니다.

[high size="20px"]텍스트[/high]

예시:

이 방법이 HTML 소스에서 직접 작업하는 것보다는 조금 편리할 것입니다. 몇 가지 글자 크기를 미리 설정하여 숏코드로 만드는 방법도 생각해볼 수 있습니다. 숏코드를 만드는 방법의 참조된 글에 소개된 코드를 응용하시면 됩니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    워드프레스를 사용하시는 분들은 알아 두면 좋으실듯 합니다.
    휴일 즐겁게 보내시기 바랍니다,

  2. thumbnail
    라오코리아

    감사합니다

  3. thumbnail
    동네형아
    2021.02.20 20:33

    워드프레스를 이제 배우고 있는 1인 인데요. 글쓰기 옵션에서 글꼴 변경하기 위해서 블럭>글꼴 프리셋(작음, 보통, 큼, 아주 큼, 사용자정의)을 클릭하면 변경이 안되고 '기본'으로 돌아가버려요 ㅠㅠ 수동으로 포인트를 하나씩 늘리면 다시 변경되기는 하는데, 한번에 프리셋을 누르면 변경이 안되는 이유가 뭘까요. ㅠㅠ