오늘은 간단하게 워드프레스 블록 버튼 만들기에 대해 설명 드릴텐데요. 참고로 이전에 알아본 외부 버튼 사이트를 이용한 CSS추가하여 그때그때 본문에 사용하는 방법 관련 글도 아래에서 글 맨밑 하단 링크 참고하시고, 이번 글에서는 워드프레스 자체에서 제공하는 블록 버튼 삽입 방법에 대해 이것저것 살펴보도록 하겠습니다.
워드프레스 블록 버튼 만들기 과정
먼저 아래의 그림과 같이 ‘블록 추가’를 눌러서 button을 검색하면 몇가지가 나오는데 저도 아직 모두 다 다양하게 사용해보진 못했지만 각각 다른 느낌의 버튼을 생성할 수 있는 것 같았습니다. 그렇기 때문에 익숙해질때까지 조금 시간이 걸리더라도 여러분도 이것저것 변형을 해보면서 익히시면 최적의 버튼 아이콘 생성을 하실 수 있을 것입니다.
첫번째 스타일
바로 위의 것이 1번의 블록으로 만들어본 버튼인데요. 처음엔 이렇게 사각형 모양으로 생성이 되는데, 옆에 우측 블록 – 레이아웃에서 여러가지 설정을 건드려가며 둥근 모양 버튼(border radius 픽셀을 정해주면 됨)도 만들 수 있고 마우스 올렸을 때 글씨 색이 달라지는 호버 애니메이션 같은 것도 변경할 수 있으니 건드려보시면 됩니다.
워드프레스 블록 버튼 생성 다음, 글씨 입력은 위에와 같이 그냥 글씨를 치면 됩니다. 링크 넣는 방법도 기존 글씨선택하고 링크모양 선택 후, 내 글 검색이나 직접 url 붙여 넣으셔도 됩니다.
그리고 위에서 처럼 마지막에 icon을 추가해주고 싶으면 아래처럼 선택을 하고 원하는
모양을 고를 수 있습니다.
버튼 가운데 정렬 방법은 설명드리는 것처럼 형식마다 다양한 것 같은데, 위 버튼방식은 아래 설명처럼 add to container 선택한 다음 가운데 위치 모양을 클릭해주면 됩니다.
두번째 스타일 – POSTX 플러그인 사용시
참고로 이 버튼은 제가 아카이브 정렬을 위해서 설치한 ‘POSTX’라는 그리드 플러그인때문에 추가적으로 나타나는 것 같습니다. 그리고 여러가지 버튼을 첫번째 생성한 것의 블록 추가를 눌러 계속 생성한 다음 그룹을 해주면 그 다음부터는 아래와 같이 가로, 세로 정렬 방식으로 그룹화 할 수 있는 것 같습니다.
위의 스타일은 좀 더 다양한 느낌을 줄 수 있는데, 단점이 발견되었습니다. 우측 블록의 텍스트 컬러로 설정을 하면 업로드 했을때 실제로는 전혀 반영이 되지 않기 때문에, 글씨 입력 후 강조에서 텍스트 색을 지정해줘야 합니다. 강조는 글씨를 선택하면 위에 오버랩되어 뜨는 것에 있습니다. 아래 모양의 아이콘을 클릭하고 여기서 텍스트 색이나 배경색을 지정해줄 수 있습니다.(*글을 쓸때 충돌이 있었는지 이전에는 되지 않았는데 본 글에서는 또 기존 텍스트 색 변경으로 만들 수 있었습니다.)
버튼에 마우스를 올렸을 때 글씨 색이 변하는 호버 애니메이션은 먹히니까 시도해 보시기 바랍니다. 저는 위에서 빨간색을 적용하였습니다.
그리고 이 버튼의 가운데 정렬 방법은 아래와 같이 블록추가 모양이 나오도록 선택을 한다음, 우측 블록 편집에서 제가 빨간색으로 체크해놓은 모양을 선택하시면 됩니다.
세번째 스타일
이번은 마지막 워드프레스 블록 버튼 생성 방법인데, 바로 앞에서 설명한 포스트엑스 플러그인 버전의 버튼 그룹화와 같은 방식인 것 같습니다. 다만, 위 버전에서처럼 다양한 꾸미기는 어렵지만, 아래처럼 스타일 기본값 말고도 옆에 아웃라인 설정을 변형시켜주면 글씨에 마우스 올렸을때 배경이 나타나는 호버 애니메이션 효과를 줄 수 있는 것 같습니다. 테두리 반경은 아래처럼 선택해주시구요. 값을 넣어주지 않으면 기본 사각형 모양이니 참고하세요.
이것의 가운데 정렬 방법은 해당 블록 선택하고, 레이아웃에서 아래와 같이 양쪽맞춤 등을 선택해주면 됩니다.
이상으로 무료이면서 워드프레스 자체 버튼 생성방법에 대해서 알아보았는데요. 아래에서는 외부 사이트에서 더 다양한 모양의 스타일을 내 워프에 코드로 적용하여 원할때마다 바로 바로 불러서 적용시키는 편리한 방법이니 몇가지를 만들어두고 사용해 보시기 바랍니다.
워드프레스 버튼 CSS 적용하기
아래는 외국 BUTTON 만들기 사이트 인데요. 가서 구경해보시고, 아래에 제가 설명한 방법으로 따라서 적용시켜보시기 바랍니다.
더 자세한 적용방법은 아래 글을 확인해보세요.