워드프레스 구텐베르크 에디터 링크 버튼 넣는 방법

워드프레스로 블로그 글 작성을 할 때 링크 버튼을 사용할 때가 많습니다. 이 글에서는 워드프레스 기본 에디터인 구텐베르크(Gutenberg) 에디터 글 작성 시 링크 버튼을 넣는 방법에 대해 알아보도록 하겠습니다.

블록(+)에서 버튼 찾기

블록에서 버튼 넣기

버튼 아이콘을 클릭하면 다음과 같은 이미지가 나타납니다. 여기서 ‘링크’를 클릭합니다. 참고로, 엔터를 치면 링크버튼은 계속 추가됩니다.

버튼에 링크 걸기

이어, 버튼에 원하는 텍스트를 추가하고, 빈 칸에 링크 주소 url 을 넣고, ‘새 탭에서 열기’를 체크한 다음 ↩ 를 클릭하면 됩니다.

버튼 모양 꾸미기

버튼 모양 꾸미기

화면 오른쪽 사이드에 나타나는 ‘블록’에서 색상, 크기, 서체, 모양 등을 다양하게 꾸밀 수가 있습니다.

재사용가능 블록에 추가하기

본인이 원하는 버튼 모양을 만든 다음에, 이후에 같은 모양의 버튼을 다시 사용하고 싶으면, 저장해서 재사용할 수가 있습니다.

버튼 재활용 가능한 블록 생성 저장해 두기

위 이미지에서 <버튼>의 점 세 개를 누르면, <재활용 가능한 블록 생성> 메뉴가 나옵니다. 여기에 예를 들어 ‘파란색 버튼’ 이라는 이름으로 저장을 해 두면 됩니다.

여기서 주의할 점은, ‘블록’을 선택해서 점 3개를 누르면 안되고, ‘버튼’을 선택해서 점 3개를 눌러야 합니다.

저장한 버튼 재사용하기

다시 사용할 때는 글쓰기 바탕화면 블럭에 ‘ /재사용 ‘ 이라고 쓰면 저장해 둔 버튼박스가 나타납니다. 원하는 버튼모양을 선택하면 바로 입력이 됩니다.

두 번째로 주의할 점은, 저장해 둔 버튼을 불러와서 버튼의 내용(텍스트, 모양, 링크 등) 을 수정할 경우에는이전에 저장해 둔 버튼의 내용들이 수정이 됩니다. 일부 변경해서 사용할 경우에는 점 3개를 누르고 <일반 블록으로 전환 > 한 다음에 수정을 해서 사용해야 합니다.

재사용버튼 일반버튼으로 전환 후 수정하기

나오며

워드프레스 링크 버튼 넣는 방법은 지금까지 위에서 알아본 이 외에도 ‘버튼CSS’ 생성을 활용하는 방법이 있는데요, 이 방법은 다음 기회에 알아보도록 하겠습니다.

Leave a Comment