버튼이 있으면 클릭할 확률이 높아요!
Max button – 워드프레스에 버튼을 달아보자!
워드프레스에서 버튼을 만드는 것이 어려우신가요? 워드프레스는 편집기에서 일반 텍스트 하이퍼링크를 쉽게 삽입할 수 있도록 도와주지만, 버튼을 손쉽게 추가하는 방법은 기본적으로 제공되지 않습니다.
이러한 이유로 많은 워드프레스 사용자들이 게시물이나 페이지에 버튼을 추가하는 방법에 대해 고민하고 있습니다. 그래서 저희는 워드프레스에서 버튼을 사용하는 방법을 안내하는 이 상세한 가이드를 준비했습니다.
워드프레스에서 버튼을 다루는 방법에 대해 자세히 알아보고, 콘텐츠에 버튼을 추가할 수 있는 몇 가지 방법을 소개해드리겠습니다.
먼저, 워드프레스에서 CSS를 이용해 버튼을 만드는 방법을 알아보겠습니다. 이는 버튼을 추가하는 데 있어서 가장 초보자 친화적인 방법은 아니지만, 모든 버튼의 기초가 되는 방법입니다.
그럼 이제 CSS로 시작해볼까요?
워드프레스 플러그인이 없을 경우, 웹 디자이너는 CSS를 사용해 모든 유형의 웹사이트에 버튼을 만드는 방법을 선택해야 합니다.
CSS는 ‘Cascading Style Sheets’의 약자로, 웹사이트의 콘텐츠 모양을 제어하는 데 도움을 줍니다. CSS는 다양한 용도로 사용될 수 있지만, 그중 하나는 사이트의 링크를 일반 텍스트 하이퍼링크 대신 버튼처럼 보이게 스타일링하는 것입니다.
이러한 링크는 작은 코드 조각(CSS 클래스 또는 ID)으로 표시됩니다. 그런 다음 워드프레스 커스터마이저(또는 원하는 다른 위치)에 CSS 코드를 추가하여 버튼의 모양을 실제로 제어할 수 있습니다.
기본적으로, CSS로 간단한 버튼을 만드는 데는 몇 가지 개념만 알면 됩니다. 잠시 후에 이를 실제 예시로 설명하겠지만, 지금은 이론적인 부분을 먼저 살펴보겠습니다.
위의 속성들은 CSS로 버튼을 스타일링할 수 있는 모든 방법을 나타낸 것은 아닙니다. 하지만 이러한 속성만으로도 플러그인 없이 기본적인 버튼을 만들 수 있습니다.
좋습니다. CSS에 대한 간단한 원칙을 활용해 사이트에 기본적인 파란색 버튼을 만들고 싶다고 가정해 보겠습니다.
가장 먼저 해야 할 일은 워드프레스 편집기에서 일반 링크를 추가하는 것입니다. 예를 들어, 다음과 같이 링크를 추가할 수 있습니다:
<a href="https://example.com" class="blue-button">여기를 클릭하세요</a>이렇게 기본적인 링크를 추가한 후, CSS 코드를 사용하여 이 링크를 파란색 버튼으로 스타일링할 수 있습니다. 워드프레스 커스터마이저 또는 추가 CSS 섹션에 다음과 같은 코드를 추가하세요:
.blue-button {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
}
.blue-button:hover {
background-color: #0056b3;
}이 CSS 코드는 .blue-button 클래스를 가진 링크를 파란색 버튼처럼 보이게 합니다. hover 속성은 사용자가 마우스를 버튼 위에 올렸을 때 색상이 어두운 파란색으로 변하게 합니다.
이제 이 코드를 적용하면, 사이트에 기본적인 파란색 버튼이 나타나게 됩니다!
그런 다음 워드프레스 편집기의 텍스트 탭으로 이동해, 버튼으로 사용할 CSS 클래스를 추가해야 합니다. 이 예에서는 “mybutton”이라는 이름으로 클래스를 만들겠습니다.
방문자는 이 코드를 볼 수 없지만, 이렇게 CSS 클래스를 추가하면 해당 링크가 버튼처럼 스타일링됩니다.
이제 평소처럼 게시물을 게시하시면 됩니다.
그다음, 워드프레스 커스터마이저로 이동해 CSS를 추가하세요. 방금 게시한 게시물로 이동해 관리자 도구 모음에서 Customize 버튼을 클릭하세요.
이제 추가 CSS 탭을 클릭한 후, 해당 탭에 기본 CSS 코드를 붙여넣으시면 됩니다.
.mybutton {
background-color: #4285f4;
border: none;
color: #ffffff;
padding: 10px 10px;
font-size: 24px;
}
코드를 추가하면 링크 스타일이 다음과 같이 실시간으로 변경되는 것을 볼 수 있습니다.
색상을 변경하려면 코드에서 사용된 16진수 코드를 조정하시면 됩니다. 마찬가지로, 패딩 값을 변경하여 버튼의 크기나 모양도 조절할 수 있습니다.
기본적인 버튼을 만드는 데 필요한 것은 이 정도입니다. 하지만 여기서 중요한 점은, 버튼을 더 사용하기 쉽고 세련되게 만들고 싶다면, 좀 더 고급 CSS를 활용하는 것이 좋다는 점입니다.
보기 좋은 버튼을 갖는 것도 중요하지만, 방문자가 사용하기 편리하게 만드는 것이 더욱 중요합니다.
이를 위해 다음과 같은 사항을 고려해야 합니다.
보시다시피, CSS로 기본적인 버튼을 만드는 것은 어렵지 않지만, 이러한 세부 사항을 제대로 구현하는 것은 조금 더 복잡할 수 있습니다. 그래서 CSS에 익숙하지 않다면, 이러한 작업을 처리할 수 있는 전문가에게 맡기는 것도 좋은 방법입니다.
P.S : 콘텐츠 도용을 막기 위한 플러그인도 있어요!
완전한 초보자이거나 시간을 절약하려는 워드프레스 개발자라면, CSS를 사용하여 워드프레스 사이트에 버튼을 만들 때 다음과 같은 문제를 겪을 가능성이 있습니다.
이러한 이유로, 워드프레스에서 버튼을 만들 때는 플러그인을 사용하는 것이 더 나을 수 있습니다. 플러그인을 사용하면 손쉽게 다양한 스타일의 버튼을 만들 수 있고, 시간을 절약할 수 있습니다.
MaxButtons는 CSS 코드를 직접 작성하지 않고도 다양한 버튼 전략을 쉽게 구현할 수 있는 프리미엄 플러그인입니다. 이 플러그인은 사용자 친화적인 인터페이스를 제공해, 버튼 디자인을 만들고, 동일한 버튼 스타일을 다른 링크에 재사용할 수 있도록 일부 단축 코드 매개변수를 변경할 수 있게 해줍니다.
이 플러그인은 여전히 CSS를 기반으로 버튼을 생성하지만, CSS 지식 없이도 필요한 모든 백그라운드 CSS 코드를 자동으로 생성해줍니다. 이를 통해 개발 과정이 훨씬 간편해집니다.
시작하려면 워드프레스 대시보드에서 MaxButtons의 무료 버전을 설치하고 활성화하세요. 그런 다음 MaxButtons → 새로 추가로 이동해 첫 번째 버튼을 만들면 됩니다.
버튼 인터페이스의 다양한 섹션을 살펴보겠습니다.
MaxButtons 인터페이스에 접속하면 가장 먼저 해야 할 일은 버튼 기본 사항을 설정하는 것입니다.
이러한 기본 설정을 구성하면 화면 오른쪽에 버튼의 라이브 미리 보기가 표시됩니다.
여기에 있는 대부분의 옵션은 설명이 필요 없을 정도로 직관적입니다.
예를 들어:
참고: 플러그인에서는 URL과 버튼 텍스트를 입력하라고 하지만, 나중에 버튼을 콘텐츠에 삽입할 때 수동으로 변경할 수도 있습니다. 이 글의 마지막 부분에서 각 링크마다 버튼을 따로 만들 필요 없이, 숏코드를 사용해 버튼 스타일을 재사용하는 방법에 대해 설명하겠습니다.
조금 까다로울 수 있는 두 가지 옵션이 있습니다:
패딩의 경우, 버튼의 각 “측면”에 따로 패딩을 추가할 수 있습니다. 즉, 다음과 같은 네 측면에 패딩을 설정할 수 있습니다:
버튼의 크기를 변경할 때는 텍스트가 버튼 내에서 적절히 정렬되도록 패딩을 조정해야 할 수도 있습니다. 예를 들어, 패딩을 모두 0으로 설정하면 버튼 텍스트가 버튼 상단에 어색하게 정렬될 수 있습니다.
별로 좋아 보이지 않죠?
따라서 문제를 해결하려면 위쪽 패딩을 추가하여 텍스트를 아래로 이동할 수 있습니다.
더 좋아 보이죠?
테두리 섹션 에서는 세 가지 중요한 버튼 효과를 구성할 수 있습니다.
Radius 영역 부터 시작해 보겠습니다 . 반경을 0 으로 설정하면 버튼은 정사각형 90도 모서리를 갖게 됩니다. 반면에 숫자를 늘리면 버튼은 점점 더 둥근 모서리를 갖게 됩니다.
일반적으로 네 모서리에 같은 반경을 설정하고 싶을 것입니다. 하지만 차이점을 설명하기 위해 다른 값을 사용하겠습니다.
스타일, 너비, 테두리 색상은 버튼에 실제 테두리를 추가하는 데 도움이 됩니다. 다시 말하지만, 이 개념이 실제로 어떻게 작동하는지 보여주기 위해 튀는 노란색 테두리를 만들 것입니다.
마지막으로, 그림자 옵션은 버튼의 모양을 더욱 돋보이게 하는 흥미로운 방법을 제공합니다.
일반적으로 버튼의 네 면 모두에 그림자를 추가하는 것은 시각적으로 그다지 매력적이지 않으므로 피하는 것이 좋습니다. 대신, 버튼의 아래쪽과 오른쪽에만 그림자를 추가하는 것이 좋습니다.
이렇게 하려면 Shadow Offset Left와 Shadow Offset Top 값을 조정하면 됩니다. 이 설정을 통해 그림자가 아래쪽과 오른쪽으로 “이동”하는 효과를 줄 수 있습니다.
그림자를 더 추가하려면 Shadow Blur 및 Shadow Spread 값을 조정할 수 있습니다. 또한 색상 선택기 상자를 사용하여 그림자 색상을 변경할 수도 있습니다.
배경 섹션에서는 버튼의 기본 상태와 호버 상태에서 각각의 배경색을 조정할 수 있습니다.
이러한 옵션은 매우 직관적이어서 따로 설명이 필요 없습니다. 다만, 약간 까다로울 수 있는 설정은 그라데이션 사용(Use Gradients) 옵션입니다. 이 옵션을 활성화하면, 버튼이 하나의 색상에서 다른 색상으로 자연스럽게 변하는 그라데이션 효과를 적용할 수 있습니다.
테두리 섹션에서 본 그림자 옵션과 마찬가지로, 텍스트 그림자 섹션을 사용하면 버튼 안에 있는 실제 텍스트에 비슷한 그림자 효과를 추가할 수 있습니다.
텍스트 그림자는 테두리 그림자와 비슷하게 작동하며, 버튼의 특정 부분에만 적용할 수 있습니다. 이로 인해 텍스트에 입체감과 시각적인 강조를 줄 수 있습니다.
위에서 언급한 고급 CSS 기술 중 하나는 버튼을 별도의 컨테이너에 넣어 버튼의 위치를 더 잘 제어하는 것입니다.
MaxButtons는 이 작업을 인터페이스에서 바로 처리할 수 있도록 컨테이너 섹션을 제공합니다. 이 섹션에서 별도의 컨테이너를 사용할지 여부와 그 컨테이너의 크기, 간격을 선택할 수 있습니다.
그렇다면 언제 이 기능을 사용해야 할까요?
버튼에 일관된 간격을 추가하고 싶을 때 이 기능을 사용하는 것이 좋습니다. 예를 들어, 버튼을 페이지에서 항상 가운데 정렬하고 버튼과 주변 텍스트 사이에 일정한 여백을 두고 싶을 때, 일관성을 유지하기 위해 이 기능을 사용해야 합니다.
반대로, 버튼의 위치를 매번 수동으로 조정하거나 사이드바 위젯처럼 특정 위치에 배치할 계획이라면, 컨테이너 옵션을 끄는 것이 더 좋습니다.
이 기능을 활용하면 아래 예시처럼 버튼이 항상 가운데 정렬되고, 상단과 하단에 50px의 여백이 적용됩니다.
대부분의 경우 고급 탭의 설정을 사용할 필요는 없습니다. 이 탭에 있는 옵션 중 세 가지는 CSS 수정이나 조정에 초점을 맞추고 있습니다. 하지만 사용자 지정 Rel 태그는 몇 가지 유용한 응용 프로그램이 있습니다.
Custom Rel Tag를 사용하면 버튼을 통해 라이트박스나 팝업을 활성화할 수 있습니다. 예를 들어, 2단계 옵트인 양식이나 비슷한 기능을 직접 만들고 싶을 때 매우 유용합니다.
반응형 설정에서는 버튼이 다양한 기기에서 어떻게 보이는지를 조정할 수 있습니다.
이 플러그인은 별도의 입력 없이도 버튼이 자동으로 반응형으로 작동하도록 해주는 자동 반응 기능을 제공합니다. 이는 실험적인 기능입니다.
하지만 New Query를 생성하여 수동으로 반응형 설정을 할 수도 있습니다. Query는 다양한 기기나 화면 크기에 따라 다른 스타일을 적용하는 CSS 전략입니다. 이 기능을 사용하기 위해 CSS에 대한 깊은 지식이 필요하지 않습니다.
드롭다운에서 원하는 옵션을 선택하고, 그 기기에 맞는 새로운 규칙을 추가하기만 하면 됩니다. 이를 통해 버튼이 다양한 화면 크기와 기기에서 일관되게 잘 보이도록 할 수 있습니다.
또는 이 보기 옵션에서 버튼 숨기기 기능을 켜서 특정 장치에서 버튼을 숨길 수도 있습니다 .
MaxButtons를 사용하면 단축 코드를 통해 워드프레스 콘텐츠에 버튼을 손쉽게 삽입할 수 있습니다. 이 단축 코드를 활용하면 동일한 버튼 스타일을 다른 텍스트와 URL로 빠르게 반복해서 재사용할 수 있습니다. 즉, 버튼의 텍스트나 URL을 변경하기 위해 매번 새로운 버튼을 만들 필요가 없습니다. 이를 통해 작업 시간을 절약하고, 버튼 스타일을 일관되게 유지할 수 있습니다.
MaxButtons 단축코드는 두 가지 방법으로 삽입할 수 있습니다.
MaxButtons로 만든 버튼을 사용하는 가장 간단한 방법은 WordPress 편집기의 버튼 추가 옵션을 사용하는 것입니다.
다음에 새 게시물이나 페이지를 만들 때 새로운 추가 버튼 옵션이 표시됩니다.
이를 클릭하면 먼저 사용하고 싶은 버튼 스타일을 선택하게 됩니다.
그런 다음 나머지 버튼 스타일을 유지하면서 버튼 URL 과 버튼 텍스트를 변경할 수 있습니다 .
이렇게 하면 버튼 텍스트나 URL을 변경할 때마다 완전히 새로운 버튼을 만들지 않고도 동일한 버튼 스타일을 재사용할 수 있습니다.
워드프레스 편집기를 통해 버튼을 추가할 때는 일반적으로 버튼 추가 인터페이스를 사용하는 것이 더 간단합니다.
하지만 사이드바의 텍스트 위젯과 같은 다른 영역에 버튼을 추가할 때는 단축 코드를 직접 사용해야 할 수도 있습니다.
버튼의 기본 단축 코드는 MaxButtons 대시보드에서 쉽게 확인할 수 있습니다. 이를 복사하여 원하는 위치에 붙여넣으면 버튼을 추가할 수 있습니다.
그런 다음 단축 코드의 매개변수를 수정하여 버튼 텍스트나 URL과 같은 항목을 쉽게 변경할 수 있습니다. 아래는 가장 유용한 매개변수 목록입니다. 이 매개변수들을 사용하면 버튼을 만들 때 설정한 기본값을 재정의할 수 있습니다.
text="YOUR_TEXT" – 버튼의 텍스트를 변경합니다.url="YOUR_URL" – 버튼의 링크 URL을 변경합니다.window="true" – 버튼을 새 창에서 열도록 설정합니다.nofollow="true" – 버튼에 rel="nofollow" 태그를 추가합니다.다음은 이러한 매개변수로 버튼을 수정하는 실제 예시입니다. 예를 들어, 버튼을 “https://bing.com”에 링크하고, 버튼 텍스트를 “Bing으로 이동”으로 설정할 수 있습니다.
[ maxbutton id="1" ]
공백 없이 단축 코드만 입력하면 원래 생성한 버튼과 동일한 버튼이 표시됩니다.
이제 텍스트를 “Bing에서 검색”으로 변경하고 싶다고 가정해 보겠습니다. 그렇게 하려면 다음과 같이 텍스트 에 대한 단축 코드 매개변수를 추가해야 합니다 .
[ maxbutton id="1" text="Search on Bing" ]
여전히 이전과 똑같은 버튼을 사용하고 있습니다 . 하지만 이제 버튼의 텍스트가 변경되었습니다.
좋아요, 이제 텍스트와 URL을 모두 변경하고 싶다고 가정해 보겠습니다 . Bing 대신 Google로 방문자를 보내고 싶습니다. 그러려면 다음과 같이 텍스트 와 URL에 대한 매개변수를 추가해야 합니다 .
[ maxbutton id="1" text="Search on Google" url="https://www.google.com" ]
다시 말하지만, 우리는 이전과 정확히 같은 버튼을 사용하고 있습니다 . 다만 이제 방문자는 Google의 텍스트를 보고 버튼을 클릭하면 Google로 이동하게 됩니다.
대부분의 경우, 이 두 개의 단축 코드 매개변수만 사용하여 버튼의 텍스트와 URL을 변경하게 됩니다.
위에서 본 모든 내용은 MaxButtons 무료 버전 에서 사용할 수 있습니다 .
더 많은 기능을 원하시면 MaxButtons Pro를 구매하시면 다음 기능에 액세스할 수 있습니다.
이제 아시겠죠? 워드프레스 콘텐츠에 버튼을 추가하는 두 가지 방법입니다.
코드에 능숙하다면, 직접 CSS를 사용하여 워드프레스 버튼을 만들 수 있습니다. 그러나 코드에 익숙하지 않거나 더 빠르고 간편한 방법을 원한다면 MaxButtons 플러그인을 사용하는 것이 좋습니다.
어떤 방법을 선택하든, 버튼을 콘텐츠에 삽입하면 웹사이트가 더 사용자 친화적으로 변하고, 독자의 관심을 중요한 링크로 유도하는 데 큰 도움이 될 것입니다.
✅ Smush란? Smush Image Optimization은 워드프레스에서 이미지 용량을 자동으로 줄여주고, 사이트 속도를 개선하는 데 도움을…
🎉 media.panchock.net 공유 이미지 서버 구축 성공기 워드프레스 사이트들의 이미지 용량을 줄이고, 관리 효율을 높이기…
"접속 차단? 걱정 마세요! 믿고 따라오면 됩니다 ?" 서버 작업을 하다가 갑자기 내가 접속이 안…
Bing 검색 결과에서 파비콘이 안보이는 현상 파비콘(favicon)은 'favorite icon'의 약자로, 브라우저 주소 표시줄에 나타나는 작은…
WordPress 웹사이트에서 오류가 발생하는 데 좋은 시기는 없습니다. 관리자 페이지든 프론트엔드에서든, 사이트 오류는 정말 짜증나죠.…