워드프레스 버튼 만드는 법(구텐베르크 블록, 사용자정의, 플러그인 활용)

워드프레스 블로그 운영 시 버튼은 매우 중요한 행동 유도 리드와 액션을 불러옵니다. 특히 사용자가 블로그를 운영할 때 글 포스트에 효과적인 버튼을 만든다면 사용자들에게 좀더 UIUX 측면에서 친화적인 경험을 제공할 수 있고 사이트 운영자는 좀 더 직관적인 행동 결정을 가져올 수 있기 때문에 사용자나 운영자 모두에게 좋은 표현인 것 같습니다. 그러면 지금부터 워드프레스 버튼 만드는 법을 알아보도록 하겠습니다.

구텐베르크 블록에서 버튼 사용 방법

워드프레스에서 버튼을 만들거나 사용하는 방법은 매우 쉽습니다. 워드프레스는 매우 강력한 구텐베르크 에디터를 제공하고 있고 또 오픈소스로 자유로운 편집과 유연함을 함께 제공하고 있기 때문에 사용자들이 웹 공간에서 원하는 모든 것을 쉽고 빠르게 자유롭게 표현을 할 수는 장점이 있습니다.

• 네이버 블로그는 에디터에서 버튼 기능을 제공하지 않습니다. 그래서 글자에 하이퍼링크를 적용하거나 이미지에 하이퍼링크를 넣어서 버튼 기능을 비슷하게 사용합니다.
• 티스토리 블로그도 에디터에서 버튼을 제공하지 않습니다. 하지만 네이버 블로그보다 장점은 코드를 사용하여 버튼을 만들 수 있는 장점이 있습니다. 단 코드를 만들 수 있는 기초 지식이 필요하게 됩니다.
• 구글 블로거(Google Blogger)도 티스토리처럼 비슷하게 블로그 페이지나 테마 설정에서 HTML 편집을 통해 코드를 추가할 수 있습니다.

워드프레스와 비교하여 네이버나 티스토리 그리고 구글 블로거와 비교해보면 워드프레스는 매우 자유롭고 제한이 없으며 친화적이라는 것을 경험할 수 있을 것입니다.

워드프레스에서 버튼을 만드는 방법은 구덴베르크 에디터 블록을 사용하는 방법과 사용자가 직접 코드를 넣어서 만드는 방법, 그리고 마지막으로 워드프레스 버튼 플러그인을 사용하는 방법이 있습니다.

참고로 워드프레스에 대해서 좀더 자세히 이해하고 싶은 분들은 워드프레스 시작 가이드 참고해보세요 또 워드프레스 시작전 유저가 알고가면 좋은 글로 ‘워드프레스의 불편한 진실’ 글도 참고해보면 도움이 될 겁니다.

처음에 워드프레스를 사용하여 구덴베르크에서 글을 쓰기 시작하면 한국 유저들은 여러움을 토로합니다. 기존에 주로 사용한 네이버 클래식 에디터에 적응된 상태라 새롭게 구덴베르크 블록 에디터를 사용하는 것은 큰 차이가 있기 때문에 적응기간이 필요할 수 있습니다. 가령 블록을 추가해서 글을 쓰고 엔터 치는 습관과 블록을 추가해서 콘텐츠를 완성하는 방식이 그동안 사용했던 전통적인 에디터와 전혀 다를 수 있기 때문입니다. 하지만 사용자가 구텐베르크 에디터에 적응하기 시작하면 다른 에디터를 비교할 수 없을 것입니다. 구덴베르크 블록 에디터는 너무 강력한 기능들이 많기 때문입니다. 또 지금도 여전히 지속적으로 발전을 하고 있습니다.

• 구덴베르크 에디터에서 제공하는 버튼 만들기입니다.
• 구덴베르크에서 왼쪽 상단 맨위에 ‘+’ 블록 삽입기 토글을 클릭해주세요
• 참고로 단축키로 ‘/버튼’ 또는 ‘/button’을 입력하고 엔터를 치면 구덴베르크에서 제공하는 버튼이 자동으로 출력됩니다.
• 디자인 블록 메뉴 칸에서 맨 처음 버튼을 클릭합니다.
• 중앙 컨텐츠 화면에 버튼 불록이 생성되고 버튼안에 ‘테스트 추가’ 메세지가 보입니다.

구덴베르크 에디터를 사용하면 누구나 쉽게 버튼을 쉽게 만들 수있는 장점이 있지만 반대로 단점은 위 예시에서 보는 것처럼 시작적으로 너무 단순한 버튼만 만들 수 있다는 것입니다. 그래서 사용자들은 좀 더 멋진 나만의 버튼을 만들고자 직접 코드를 만들어서 버튼을 사용자 정의하거나 워드프레스에서 버튼 플러그인을 사용하여 쉽게 버튼을 활용하기도 합니다.

워드프레스 버튼을 사용자 정의하기

구텐베르크에서 제공하는 버튼외 직접 나만의 스타일의 버튼을 만들고 싶다면 사용자정의가 필요합니다. 워드프레스는 내부에 강력한 사용자정의 커스텀을 제공하기 때문에 이것을 쉽게 구현할 수 있습니다. 워드프레스 알림판에서 모양 > 사용자정의 또는 테마 파일 편집기에서 사용자가 원하는 코드를 삽입하고 정의할수 있습니다.(참고 : 워드프레스 사용자 정의 CSS를 추가하는 방법)

워드프레스에서 기본적으로 제공하는 사용자정의 파일 편집기도 있지만 이보다 좀 더 직관적인 사용자 파일 편집기를 제공하는 테마도 있고 전문 플러그인도 있습니다. 가령 제가 사용하고 있는 NEWSPAYPER 테마는 자체내에서 전문 패널을 제공하여 사용자가 좀 더 편리하게 코드를 커스텀할 수 있도록 제공합니다. 또한 강력한 뉴스페이퍼 테마만의 TagDiv Composer 빌더에서도 사용자는 바로 화면을 보면서 코드를 삽입하고 수정할 수 있는 편리함을 제공하기도 합니다. 또한 한국 유저들이 가장 많이 사용하고 있는 GeneratePress PRO에서는 Hook 시스템을 통해 사용자가 편리하게 코드를 삽입하고 수정, 관리할 수 있도록 편리성을 제공합니다.

이외에도 규모가 상대적으로 크고 강력한 개발자 팀을 구성하고 있는 유료 테마들은 자체 사용자정의 패널을 제공하는 경우가 많습니다. 워드프레스 유료테마에 대한 정보가 좀 더 궁금하시면 아래 글도 참고해보세요

• [참고] 워드프레스 유료테마와 무료테마 비교
• [참고] 워드프레스 테마 순위 정보

그리고 무엇보다 이런 기능을 활용하려면 먼저 사용자는 기본적인 HTML, CSS, JavaScript 같은 웹 프로그래밍 코딩 언어를 다룰 수 있는 기술이 필요 할 수도 있습니다. 하지만 버튼을 만들기 위해서 전문적으로 웹 프로그래밍 코딩 언어를 공부할 필요는 없습니다. 기본적인 원리나 구조만 알면 쉽게 활용이 가능하기 때문입니다. 또 여기저기 찾아보면 버튼을 쉽게 만들 수있도록 코드를 짜주는 사이트도 있습니다. 대표적인 사이트가 ‘Button Generator’ 사이트입니다.

Button Generator 사이트에 접속해보면 다양한 버튼 스타일들이 있습니다. 내가 원하는 버튼 스타일을 찾고 오른쪽 메뉴 구성에서 사용자가 원하는 버튼 크기나 기타 구성을 쉽게 만들어 볼 수 있고 설정을 끝내면 코드가 자동으로 만들어지게 됩니다. 이 사이트의 가장 큰 장점은 사용자가 직접 코드를 짤 필요가 없다는 것입니다. 코딩을 몰라도 사용자가 화면을 보면서 버튼을 만들고 바로 수정하면서 웹에 적용할 수 있는 코드를 받을 수 있기 때문입니다.

Get Code(코드받기)를 누르면 위와 같이 오른쪽 메뉴 설정 박스가 코드창으로 변경됩니다. 위 코드를 드래그해서 복사하고 나의 사이트에 바로 적용하면 됩니다.

Button Generator 사이트 외에도 비슷한 사이트로 css3buttongenerator 사이트가 있습니다. 차이점은 Button Generator처럼 다양한 버튼 예시가 있지는 않습니다.

워드프레스 버튼 플러그인 사용

워드프레스에서 직접 사용자 정의로 버튼을 만든다면 누군가는 방법이 좀 복잡하고 어렵게 느껴질 수 있습니다. 워드프레스의 가장 큰 장점 중 하나라면 다양한 무료/유료 플러그인을 활용할 수 있다는 것입니다. 워드프레스 알림판에서 플러그인 > 새 플러그인 추가에 들어가서 Button으로 검색해보면 버튼 관련된 플러그인들이 보입니다.

우리는 여기서 맨 위 첫 번째에 있는 MaxButtons 플러그인을 설치합니다. MaxButtons 플러그인은 버튼 기능 외에도 공유 버튼 및 소셜 아이콘을 제공하는 기능들이 있습니다. 무료 버전과 유료 버전이 있지만 제 생각에 버튼 때문에 굳이 프로버전까지 구매해서 사용할 필요는 없을 것 같습니다. 유료 버전 가격이 저렴한 것도 아니고 저는 무료와 유료 버전을 비교했을 때 퀄리티나 기능에서 큰 차별화 경쟁력을 느끼지 못했습니다.

맺음말

지금까지 워드프레스 블로그 글 포스트에 활용할 수 있는 버튼 만드는 방법을 살펴봤습니다. 일단 워드프레스에서 제공하는 구덴베르크 에디이터에 각각의 유료테마들이 제공하는 기술들이 추가로 있기 때문에 무료테마보다 유료테마를 사용하는게 좀 더 기능면에서 더 많은 지원과 혜택을 받을 수 있는 방법인 것 같고 좀 더 디자인적으로 완성도를 높이고 싶다면 직접 사용자정의하여 버튼을 만들거나 어렵다면 플러그인을 활용할 수 있을 것이니다.

버튼의 가장 큰 목적은 소비자의 최종 액션 유도인 것 같습니다. 글로 백 마디 설명하는 것보다 버튼 하나가 더 행동 액션이 간결하고 효과가 더 빠릅니다. 그래서 버튼이 중요한 것 같습니다. 저도 개인적으로 사이트에 버튼을 많이 사용합니다.

더보기

• [참고] 워드프레스 무료테마와 유료테마 비교
• [참고] 워드프레스 유료테마 실시간 순위 정보
• [참고] 워드프레스 뉴스페이퍼 테마 리뷰