워드프레스 버튼 만들기&링크 추가 방법

ℹ️이 콘텐츠에는 광고가 포함되어,판매 발생 시 수익이 발생합니다.(네이버 쇼핑 커넥트, 아마존 어필리에이트, 애드센스 등)

워드프레스에서 콘텐츠를 작성하다 보면 추가 설명이 필요하여 내부 및 외부 링크를 만들어야 하는 경우가 있습니다. 웹사이트의 좋은 사용자 인터페이스(UI)는 좋은 사용자 경험(UX)로 연결되기 때문입니다. 워드프레스 버튼은 구텐베르크 에디터에서 빼 놓을 수 없는 매우 주요한 기능으로 자리 잡았습니다.

✅ 워드프레스 블록 버튼 만들기

워드프레스 블록으로 버튼을 만들 수 있습니다. 블록 삽입기 토글에서 버튼 블록을 찾아 줍니다. 한글로 [버튼]이라고 검색해도 나오니 블록을 굳이 내려서 찾을 필요는 없습니다. 더 간단한 방법은 [/버튼]을 입력 후 엔터로 바로 사용할 수도 있습니다.

1. 버튼 블록 스타일

생성된 버튼 블록은 워드프레스 우측 설정에서 다른 블록처럼 디자인 설정을 할 수 있습니다. 글씨 크기와 크기 위에 [햄버거] 버튼을 눌러서 다양한 설정을 추가할 수 있습니다.

2. 버튼 색상 설정

스타일의 채우기와 아웃라인 중 하나를 선택할 수 있고 일반 색상 설정인 [단색] 및 그래디언트 설정으로 좀 더 다채롭게 버튼을 꾸밀 수 있습니다.

▼ 완성된 워드프레스 버튼 블록 예시입니다.

✅ 워드프레스 버튼 CSS 적용하기

다른 방법으로는 html 코드를 이용해서 CSS 버튼을 만드는 방법이 있습니다. 워드프레스 [블록 삽입기 토글]에서 블록을 추가 해 줍니다. ▼

▼ CSS 코드를 입력해서 작성할 수있습니다.

워드프레스 사용자 정의 HTML에 CSS 넣기

CSS 작성이 귀찮거나 직접 하기 어려운 경우 CSS 버튼 생성 웹사이트(해외)로 이동해서 설정할 수 있습니다.

✅ 워드프레스 버튼 링크 만들기

만들어진 버튼에 링크를 넣는 방법입니다.

CSS 버튼 링크 생성

워드프레스가 구텐베르크 편집기가 나온 이후 최근 몇 년 동안 빠른 발전을 하고 있습니다. 개인적인 생각으로 워드프레스의 페이지빌더가 더 이상 필요하지 않을 시기가 올 정도로 구텐베르크 블록편집기의 편리함과 기능이 나날이 발전하고 있는 것을 체감되기도 하네요.

Similar Posts

  • [WP]워드프레스 댓글 비활성화 방법 3가지

    워프프레스 블로그를 운영하다 보면 해외에서 많은 스팸 댓글이 달릴 때가 많습니다. 댓글을 스팸 및 삭제하기 전에 달린 댓글들은 DB 용량을 차지해서 서버의 리소스를 잡아 먹습니다. 커뮤니티 or 전자상거래 목적의사이트가 아니라면 ‘워드프레스 댓글 비활성화’를 설정을 해 놓는 것이 옳은 결정입니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS…

  • 워드프레스 “There has been a critical error on your website” 오류 원인과 해결 과정

    워드프레스 관리자 페이지에서 작업 중 다른 페이지는 문제가 없었으나 [업데이트] 페이지를 접속하면 “there has been a critical error on your website. please check your site admin email inbox for instructions.” 오류 메시지가 확인 되었습니다. 워드프레스 “웹사이트에 치명적인 오류가 있습니다.”와 같은 문제 발생 시 빠른 해결 방법은 바로 원인 파악을 하는겁니다. 목차✅ 워드프레스 블록…

  • WooCommerce 설치 및 설정 | 전자상거래는 워드프레스 우커머스 플러그인으로 시작하는 이유

    WooCommerce는 워드프레스 전용 전자상거래 플랫폼입니다. 워드프레스 CMS는 상상하는 모든 사이트를 만들 수 있으며 그 중에 전자상거래 웹사이트가 하나입니다. 전자상거래 플랫폼으로 Woocommerce vs Shopify 로 비교하면 WooCommerce에 손을 들어주고 싶습니다. 왜냐하면 워드프레스 블로그를 운영하면서 검색 엔진 최적화 플러그인을 사용할 수 있기 때문입니다. “WooCommerce”라는 이름은 기대감과 즐거움을 상징하는 감탄사 “Woo”와, 상거래를 뜻하는 “Commerce”의 합성어입니다. 즉,…

  • [WP] 워드프레스 렌더링 차단 리소스 제거 방법 2가지

    워드프레스를 이용하다 보면 ‘렌더링 차단 리소스 제거‘ 설정이란 내용을 플러그인 사용 중 본 경우가 있을 수 있습니다. 워드프레스 렌더링이란 무엇이며, ‘렌더링‘과 ‘렌더링 차단 리소스 제거‘는 무엇을 뜻 하는지 풀어 보도록 하겠습니다. 먼저 렌더링은 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 웹 페이지에 접속 했을 때 브라우저에 표시되는 것이…

  • [WP] WordPress.com vs WordPress.org 2가지 서비스 차이 비교

    전자상거래 사이트, 회사 소개 사이트, 커뮤니티, 개인 블로그 등 전 세계의 많은 웹 사이트는 워드프레스 CMS로 만들어 집니다. 워드프레스를 새로 시작하는 경우 [WordPress.com vs WordPress.org] 2가지 서비스가 있기 때문에 둘 중에 하나를 선택해야 합니다. 개인 비즈니스를 위해 웹 사이트가 필요해 혼자서 또는 1~2명이 관리하면서 운영할 수 있는 CMS가 필요하다고 할 경우 드루팔(Drupal), 줌라(Joomla),…

  • WP Super Cache: 플러그인 설치 및 설정

    워드프레스 캐시 플러그인 중 WP Super Cache는 100만 명 이상이 사용하는 인기 무료 캐시 플러그인입니다. 평점 4.3점으로 사용자 만족도도 높은 편이며, Automattic에서 직접 개발한 공식 플러그인입니다. 별도의 유료 버전은 존재하지 않으며, 캐시 플러그인에서 필요한 대부분의 기능이 무료로 제공됩니다. WP Super Cache의 설치 방법과 기본 설정, 작동 원리에 대해 확인해 보겠습니다. 기본 설치는 Neve…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Prove your humanity: 9   +   9   =