워드프레스 구텐베르크 테이블 블록 사용하기

워드프레스에서는 여러 가지 방법으로 표를 삽입할 수 있습니다. 플러그인을 사용하거나 HTML 코드로 직접 표를 삽입하거나, 페이지의 경우 페이지 빌더에서 제공하는 테이블 요소(아바다 테마 표 (Table) 엘리먼트 사용하기 참조)를 이용할 수 있습니다. 이제는 플러그인에 의존하지 않고 기본 편집기인 구텐베르크 테이블 블록을 사용하는 것도 가능합니다.

최근 구텐베르크에서 제공하는 테이블(표) 블록을 사용하여 표를 삽입해보니 생각보다 기능이 괜찮게 느껴졌습니다. 다만, 테마에 따라 테이블 레이아웃이 조금씩 다르게 표시됩니다. CSS를 사용하여 테이블 스타일을 조정하면 서드파티 플러그인을 사용할 필요가 없을 것 같습니다.

복잡한 표를 만들고 싶은 경우 플러그인을 사용하거나 온라인 표 만들기 툴을 이용하여 만들 수 있습니다.

• 워드프레스: 복잡한 표 삽입하기

챗GPT를 사용하면 텍스트로 된 표 데이터나 HTML 코드로 된 테이블을 블록 편집기의 테이블 블록을 변환하여 빠르게 삽입할 수 있습니다. 영어, 일본어, 중국어 등 외국어로 된 콘텐츠로 곧바로 번역하여 테이블 블럭으로 생성할 수 있습니다.

• 표/엑셀 형식의 데이터를 워드프레스 테이블 블록으로 변환하는 방법 (feat. 챗GPT)

워드프레스 구텐베르크 테이블 블록 사용하기

구텐베르크 테이블(표) 블럭 추가하기

구텐베르크(Gutenberg) 에디터에서 표를 삽입하려면 블록 추가하기에서 테이블(표)을 선택하면 됩니다.

새 문단 블록에서 '/테이블'을 입력하면 보다 수월하게 테이블 블록을 선택할 수 있습니다("시간과 능률을 향상시키는 워드프레스 구텐베르크 키보드 단축키" 참고).

표 설정하기

테이블 블록을 삽입하면 열 수와 행 수를 설정할 수 있습니다. 열 수와 행 수를 지정한 다음 표 만들기 버튼을 클릭합니다.

표를 삽입한 후에 표에 데이터를 입력할 수 있습니다. 그리고 왼쪽의 블록 설정에서 표 스타일을 지정할 수 있습니다.

스타일은 다음 두 가지 옵션 중에서 선택이 가능합니다.

• 기본
• 줄무늬

기본은 일반적인 표 모양으로 이 스타일을 선택하면 테두리가 있는 표가 만들어집니다. 줄무늬는 줄무늬가 교대로 표시됩니다.

테이블 설정 섹션에서는 고정 폭 테이블 셀, 헤더 영역, 푸터 영역 등 세 가지 옵션을 활성화/비활성화할 수 있습니다.

표에 입력되는 콘텐츠 길이가 짧은 경우 완성된 표의 전체 너비가 너무 작아서 보기가 안 좋을 수 있습니다. 그런 경우에 고정 폭 테이블 셀을 활성화하면 너비에 맞게 표가 확장됩니다. 표 머리말(헤더) 섹션이 있다면 헤더 영역을 활성화합니다.

커스텀 CSS로 표 스타일 변경하기

기본적인 표를 그대로 사용해도 되지만 CSS에 조금 익숙하면 사용자 정의 CSS를 사용하여 표를 커스텀할 수 있습니다. 예시로 저는 아래와 같은 방법으로 테이블 스타일을 지정했습니다.

먼저 다음과 같은 CSS 코드를 모양 » 사용자 정의 » 추가 CSS(워드프레스 버전에 따라 외모 » 사용자 정의하기 » 추가 CSS)에 추가하도록 합니다.

.table-style-1 thead {
    background-color: #8f919e;
    color: white;
}

.wp-block-table table {
    border-collapse: collapse;
}

.wp-block-table figcaption {
    text-align: center;
}

그런 다음, 위의 스타일을 적용할 표에 CSS 클래스를 지정하도록 합니다. 테이블 블록 설정에서 기본 스타일을 지정하고 고급에서 추가 CSS 클래스 필드에 table-style-1를 추가합니다.

그러면 테이블이 다음과 비슷하게 표시됩니다. GeneratePress 테마를 기준으로 한 것이고, 테마에 따라 스타일이 조금 다르게 표시될 수도 있습니다.

도시	인구
카라치	24,600,000
상하이	24,230,000
델리	24,230,000
라고스	16,060,303
이스탄불	13,710,512
도쿄	13,297,629
뭄바이	12,478,447
모스크바	11,977,988
상파울루	11,821,876
베이징	11,716,000

예시 CSS 코드를 적용하면 기본 스타일에서 헤더 테두리 색을 변경하고 테이블 설명 부분의 정렬을 가운데 정렬로 변경됩니다.

줄무늬 스타일을 선택하면 다음과 비슷하게 표가 표시됩니다.

도시명	인구 수
카라치	24,600,000
상하이	24,230,000
델리	24,230,000
라고스	16,060,303
이스탄불	13,710,512
도쿄	13,297,629
뭄바이	12,478,447
모스크바	11,977,988
상파울루	11,821,876
베이징	11,716,000

CSS를 사용하여 다음과 같이 테이블 스타일을 만드는 것도 가능합니다. (아래 표는 워드프레스에서 제공하는 액션 훅 목록 일부를 보여줍니다.)

훅 이름	설명
muplugins_loaded	필수 플러그인이 로드된 후 호출
registered_taxonomy	카테고리, 태그 등과 관련된 작업 처리
registered_post_type	포스트(글), 페이지 등과 관련된 작업 처리
plugins_loaded	활성화된 플러그인이 로드된 후, 플러그 기능이 정의되기 전에 호출
sanitize_comment_cookies	댓글 쿠키를 정리할 때 호출
setup_theme	테마가 로드되기 전에 호출
load_textdomain	`default` 도메인을 사용할 때 호출
after_setup_theme	일반적으로 테마 설정이나 옵션을 초기화할 때 사용됩니다. 이 훅은 활성 테마의 함수 파일 functions.php가 로드된 직후 호출되며, 테마에서 사용 가능한 첫 번째 액션 훅입니다. add_theme_support() 함수는 이 시점에 호출해야 하며, init 액션 훅에서는 일부 기능 추가가 너무 늦습니다. 이 단계에서는 아직 현재 사용자가 인증되지 않습니다.

스타일이 마음에 들지 않으면 CSS를 사용하여 조정을 시도해보시기 바랍니다. 그래도 마음에 들지 않으면 TablePress와 같은 테이블 플러그인을 사용해볼 수 있습니다.

참고

• 워드프레스에 구글 태그 관리자 코드 추가하기
• 워드프레스 글/페이지를 클릭 한 번으로 복제하는 방법