안녕하세요. 애드센스 스쿨 인돈사입니다. 블로그를 운영하다보면 글 내용 속에 ‘버튼’이 필요할 때가 있는데요, 워드프레스에서는 내가 원하는 버튼을 어떻게 생성하고 적용하는지에 대해서 적어 보려고 합니다. 저도 직접 해 보면서 쉽게 알려드릴테니까 편한 마음으로 시도해 보시면 좋을것 같습니다.
혹시 워드프레스가 없는분들이 있다면 클라우드웨이즈 서버에서 3일간 무료체험기간을 제공하는것을 이용해서 한번 만들어 보시기 바랍니다. 워드프레스를 만드는 과정은 아주 쉽게 따라할 수 있는 ‘워드프레스 따라오세요’ 무료강의가 있으니 참고하세요!
📌 WP 따라오세요 (feat. 클라우드웨이즈)
📌 아스트라 프로 유료테마($59/년)를 무료로 설치하기 (Astra Pro)
워드프레스 내장 기능을 활용한 버튼추가
블록을 버튼으로 설정하기
아는분들은 아시겠지만… 워드프레스 구텐베르크 블록에는 ‘버튼’블록이 있습니다. 워드프레스를 설치하고 편집기를 구텐베르크를 사용하고 있다면 그냥 사용할 수 있는 그런 기능이지요. 블록 추가 할때 나오는 오른쪽 + 버튼을 누르시고, 블록이라고 검색 해 봅시다.
블록을 버튼으로 설정하고 추가하면 위와같이 나옵니다. 원하는 텍스트를 넣고… 정렬을 하고… 링크를 넣고… 등등을 할 수 있습니다. 또한, 버튼블록이 선택된 상태에서는 버튼과 관련한 여러가지 설정들을 오른쪽에서 할 수 있습니다. 색상이나 둥글기 글씨크기 등등… 이것저것 쉽게 설정 할 수 있으니 한번 해 보세요~
이것저것 만져 보시면 버튼이 변할겁니다. 이렇게 쉽게 뚝딱 버튼을 만들 수 있으니 한번 해 보세요. 아래는 방금 만든 따끈따끈한 버튼입니다.
재사용가능 블록에 추가하기
버튼을 추가해서 각종 설정을 한 후에 나중에 다시 사용할 수도 있습니다. 블록을 만들고 버튼으로 설정해서 해당 블록을 재사용가능블록에 추가해 봅시다.
참고로 버튼을 선택하고 점3개를 누르면 안되고, 블록을 선택해서 점3개를 눌러야 합니다. 버튼을 선택한 상태라면 아래와 같이 나오니 부모블록 선택을 눌러서 점3개를 다시 눌러주세요
이렇게 재활용가능한 블록으로 설정해 두면 나중에 다시 불러서 사용할 수 있습니다.
위와 같은 버튼을 만들고 ‘빨강색박스’라는 이름으로 재활용가능한 블록으로 설정했습니다. (메뉴에는 재사용인데 제목은 재활용이네요. ㅎㅎ 혼용되는것 같습니다)
블록에 ‘/재사용’이라고 치니 빨강색박스가 나옵니다.
주의사항
재사용 가능한 블록을 불러와서 내용(글이나 링크 등)을 수정하면 예전에 사용했던 모든 버튼의 내용들이 수정됩니다. (이런 특성은 또 다른부분에 활용할 수도 있겠죠?) 그렇기 때문에 재사용가능한 블록을 불러와서 일반블록으로 전환한 후 사용해야 합니다. 마찬가지로 점3개를 누르면 일반블록으로 전환시킬 수 있습니다.
일반블록으로 전환 한 후 수정을 하면 재사용 가능한 블록과 상관없이 내용을 수정할 수 있습니다.
버튼 CSS를 활용하여 블록에 적용하기
두번째 방법은 버튼을 자주 사용할 경우 유용한 방법입니다. 컨텐츠 내에 버튼을 자주 사용한다면 아래 방법을 사용해 보시면 좋습니다.
버튼CSS 생성하기
먼저 버튼CSS를 만들어 주는 사이트에 접속해 주세요.
홈페이지에 접속하면 아래와 같은 화면이 나올건데요, 이것저것 내가 원하는 모양으로 만들어보세요. 화면을 보면서 만들 수 있으니까 슥슥슥~
원하는 모양을 다 만들었다면 중간쯥에 있는 Get Code 버튼을 눌러 줍니다. 그러면 오른쪽에 코드가 보일거예요. 이 코드를 선택해서 복사해 주세요. 참고로 맨 위에 있는 grey라는것은 버튼 속에 들어갈 내용이라 필요없으니… 그부분은 제외하고 아래쪽 .myButton 부분부터 복사 해 주세요.
워드프레스에 적용하기
이제 버튼을 적용하고자 하는 워드프레스에 접속해서 관리자 메뉴에 들어가 주세요. 왼쪽 메뉴 중에 외모>사용자정의하기를 선택해 들어가 줍니다.
그러면 테마에 대한 설정을 할 수 있는 화면이 나옵니다. 이부분은 테마마다 메뉴가 다를 수 있지만…. 추가 CSS를 넣는 부분은 어떤 테마든 나올것입니다.
추가CSS를 선택해서 방금 생성했던 CSS 코드를 넣고 저장을 눌러 주세요. 저는 제가 만들었던 버튼 CSS를 넣고 저장해 보겠습니다.
아까 버튼CSS 생성하는 사이트에서 이것저것 만들었던 설정들이 코드로 들어가 있는 것이라고 생각하면 되구요… 뭔가 바꾸고 싶으시면 버튼 설정하는 홈페이지에서 다시 설정하고 GetCode를 다시 눌러서 생성되는 코드를 추가CSS에 넣으시면 됩니다.
아, 그리고 방금 우리가 만든 버튼모양의 이름은 myButton 입니다. (코드 윗부분에 있죠? 이부분은 원하는대로 수정하셔도 됩니다. 기본값은 myButton 이구요. 대소문자를 구분합니다. 여러가지 버튼 CSS를 만들어서 이름을 정해두고 사용할 수도 있겠죠..? 응용은 여러분의 몫입니다.
자 이제 모든 설정이 완료 되었습니다. 글쓰기를 눌러서 블록을 만들어 주세요. 그냥 일반 문단으로 생성하면 됩니다. 그냥 글을 쭉 쓰시고…. 버튼이 되길 바라는 블록을 선택 해 주시면 됩니다. 블록을 선택하면 오른쪽에 블록 설정이 나옵니다.
처음에는 고급메뉴가 닫혀있을겁니다. 화살표를 눌러 메뉴를 열고, 추가CSS 클래스에 myButton이라고 적어주세요. 우리가 만들었던 버튼CSS의 이름이 myButton이기 때문에 그것을 넣은것입니다. 내가 선택한 블록은 아까 그 버튼으로 할꺼야~ 라는 설정으로 이해하시면 됩니다. 이름을 바꾸면 바꾼대로 입력해야겠죠? 저는 ‘내땅이용설명서’라는 제 글을 링크하고 해당블록을 버튼으로 바꿔 보겠습니다.
어떤가요~? 이제 컨텐츠를 자유롭게 쓰고… 버튼으로 사용할 블록에 CSS만 씌워주면 되는것입니다. 쉽죠~? ㅎㅎ 그런데 CSS 적용한 블록을 가운데 정렬을 하고싶은데 잘 안되네요ㅜ 혹시 방법을 아시는분은 알려주시면 감사…ㅜㅜ
블록에 CSS속성을 적용하여 가운데 정렬하는 방법을 회오리님이 알려주셔서 적용해 보았습니다.
잘 적용되네요. 방법을 알려드리면 블록 속성을 사용자 정의 html로 바꾼 뒤에 아래코드를 붙여넣고 사용하시면 됩니다. 블록을 추가하면서 html을 검색해서 추가해 주세요~
참고로 /(슬러쉬)를 누르면 빠르게 바꿀 수 있습니다. 이건 한번 해 보시고…! 가운데 정렬하는 코드는 아래에 있습니다. 링크 부분에 원하는 링크를 넣으시고, 제목부분에 원하는 내용을 넣으시면 됩니다.
워드프레스 소제목 서식 만들기
이번에는 애드센스 스쿨 스위밍님께서 알려주신 서식을 워드프레스 소제목으로 적용하고 이용하는 방법인데요, 기존 애드센스 스쿨의 글을 먼저 참고한번 해 보세요.
📌 가독성 좋은 서식 만들기(from 애드센스 스쿨 스위밍님)
📌 WP 팔로워즈 모집 안내
워드프레스 h2 소제목을 위와 같은 스타일로 만들어 주는 코드입니다. 아래 코드는 Generatepress 테마의 소제목(H2) 블록의 스타일을 바꿔주는 코드 입니다.
/* 워드프레스 GeneratePress 테마 소제목 헤딩 스타일 변경하기 */
.single .entry-content h2 {
font-size: 1.3em;
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
text-shadow: 0 -1px rgba(0,0,0,0.6);
line-height: 40px;
background: #355681;
background: rgba(53,86,129, 0.8);
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}위 코드를 워드프레스 외모>사용자정의>추가CSS 부분에 넣어주시면 됩니다. (방금 했던거죠~?) 그러면 이제 글 쓰다가 H2로 설정한 블록은 위 CSS 코드가 적용되게 됩니다. 참고로 테마가 다르면 소제목 스타일의 이름이 다를 수 있기 때문에 적용되지 않을 수도 있습니다.
※ 테마에 따라서는 사용자정의 안에서 소제목 스타일을 설정할 수 있도록 지원하는 경우도 있습니다.
마치며
버튼과 소제목 등은 컨텐츠를 읽기 좋게 만드는 중요한 부분이라고 생각합니다. 오늘 알려드린 부분을 활용해 어떻게 응용하면 좋을것인가 생각해 보시면 더 좋은 실력을 갖출 수 있게 되실겁니다. 화이팅입니다!