워드프레스 버튼 만들기, 본문에 버튼 넣기를 하기 위해서 사용하는 방법은 블록 편집기만을 이용하는 방법도 있고, CSS 스타일 추가하는 방법도 있는데 이 글에서는 두번째 방법을 소개합니다. 왜냐하면 이 방법으로 좀 더 다양한 BUTTON 모양, 스타일을 저장해 두고 편리하게 사용할 수 있기 때문입니다.
그럼, 생성 과정을 간단하게 소개할테니 차근차근 따라서 적용해보시길 바랍니다.
1.워드프레스 버튼 만들기, 사이트 접속
먼저 저도 이번에 워드프레스 버튼 만들기 방법을 찾아보다가 알게 된 사이트로서 이미 여러 블로거, 유튜버가 소개하는 곳 중 가장 편리하고 이용하기 쉬운 것 같은 아래의 사이트로 접속을 추천드립니다.
바로 제가 만든 버튼을 사용해서 여러분을 이동시켜 줄 것입니다.
그러면 아래와 같은 사이트가 나오는데, 여기서 좌측에서 마음에 드는 버튼 모양을 선택한 후 우측에서 바를 움직여가며 자신만의 스타일로 변형을 시킬 수도 있으니 참고해보세요.
그리고 중앙의 선택된 버튼 모양의 아래에서 세부적인 색상을 바꿀 수도 있습니다. 이런 점에서 참 유용한 사이트같다고 생각하는데요. 저도 잘 모르는 CSS의 세계에서 이 정도로 손 쉬운 게 있다니 신기할 뿐입니다.
2.워드프레스 버튼 추가CSS에 코드 넣기
본인의 스타일대로 모양을 꾸며준 다음, GET CODE를 눌러서 우측에서 코드를 복사합니다.
그런 다음, 워드프레스로 와서 외모 – 추가 CSS 를 선택하고 코드 창에 붙여 넣어 줍니다.
저는 아래처럼 주석을 만들어 줘서 다른 여러 CSS코드와 구분을 해줬습니다. 주석은 이런 코딩이나 태그를 구분하기 위해 이름을 붙여주거나 설명을 적어주는 것을 의미하는데 코딩에 영향을 미치지 않기 때문에 저처럼 이용하셔도 좋겠습니다.
참고로 저처럼 모양을 여러개 추가할 수도 있기때문에 구분을 해주면 좋을텐데요.
또한, myButton이라 써진 부분을 내 마음대로 이름을 바꿔서 사용할 수 있는데, 이것을 이용해 저는 여러가지 버튼모양을 구분하는 용도로 쓰고자 했습니다.(맨 위만 바꾸면 됩니다. 아래에 나오는 button는 패스)
그리고 코드 추가한 다음에 공개를 꼭 눌러줘야 반영이 됩니다.
3.본문 링크에 버튼 적용하기
이제 이것을 본문에 적용하는 방법을 설명하겠습니다. 일단 저처럼 클릭을 원하는 문구를 적어주시고 선택한 다음 블록 편집기의 링크를 선택한 후, 이동하고자하는 사이트 주소를 넣어줍니다.
그런 다음, 우측의 사이드 창에 가서 블록을 선택하고 하단에 고급을 클릭하면 나오는, 추가 CSS 클래스에 내가 만들어 둔 버튼 이름 (예 : mya, myb)을 하나 적어주면 됩니다.
4.버튼 가운데 정렬하기
그리고 마지막으로 워드프레스 버튼 만들기 서비스 팁,
본문 글 전체를 가운데 정렬하는 코딩,태그 등을 먹이지 않은 상태에서는 왼쪽 정렬이 되기 때문에 다소 정리가 안되어 보이고 마음에 들지 않을 수 있습니다.
이때, 간단히 블록 편집기 html모드를 사용해서 아래처럼 <center>~~~</center>태그를 넣은 다음 나오면 가운데 정렬을 시킬 수 있습니다.
다만, 이 방법으로 하면 블록 에러가 나는데, 아래 캡쳐이미지로 설명한 것 처럼 html로 전환 을 선택하시고 나오면 됩니다.
그리고 나서 제대로 적용이 됐는지 알고 싶다면, 미리보기로 보셔도 무방합니다.
5. 맺음말
이렇듯 직접 해보기 전까지는 어렵고 복잡하게만 느껴질 수도 있는 과정인데요. 막상 해보면 큰 일이 아닌 것을 느끼실거에요. 저도 아무 것도 모르는데 해보니 따라해지고 시도해보길 잘했다는 생각이 듭니다. 여러분도 생각보다 쉬운 워드프레스 버튼 넣기 꼭 사용해보시기 바라며,
오늘 간단히 알려드린 워드프레스 버튼 만들기 방법 이외에도 제너레이트프레스 테마,CSS 수정 시 중요한 차일드 테마 관련 글을 보시길 원하신다면 클릭하셔서 더 구경하셔도 좋을 것 같습니다.