워드프레스를 쓰다 보면 버튼기능을 쓰는 일이 많습니다. 그리고 자주 쓰는 버튼은 서식으로 저장해서 불러와서 쓰게 되면 편합니다. 재사용블록이라는 번역이 최근에 패턴으로 바뀌었습니다. 이번 글에서는 패턴을 쉽게 만들고 분리할 수 있게 관리 메뉴를 추가하는 방법을 알려드리도록 하겠습니다.
※ 여기서 설명드린 2024년 Reusable blocks 는 디자인(구 외모) 안에 패턴이란는 정식 메뉴로 등록되었기 때문에 아래 메뉴 추가는 안하셔도 무방합니다.
패턴(재사용 블록) 메뉴로 넣기
가장 하단에 있는 코드를 테마파일편집기에 추가하면 됩니다. 아주 간단해요
테마파일 편집 경로
관리자 창으로 들어가서 좌측 디자인 – 테마파일 편집기로 들어갑니다
경고문구가 나오더라도 그냥 진행해주세요
저는 차일드테마를 사용하기 때문에 GeneratePress Child 를 선택했습니다. 만약 차일드테마를 쓰시는 분들은 반드시 차일드 테마를 선택해주세요.
편집할 테마를 선택하면 하단에 스타일과 펑션파일이 보이는데 펑션파일을 수정합니다.
코드 붙여넣기
아래의 코드를 테마파일 편집기에 추가하면 됩니다. 기존에 다른 코드들이 있는데 가장 하단에 별도로 추가해주시면 됩니다.
// add reusable blcoks menu
function reusable_blocks_menu() {
add_menu_page( 'Reusable Blocks', 'Reusable Blocks', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 10 );
}
add_action( 'admin_menu', 'reusable_blocks_menu' );
// add reusable blcoks menu 부분은 주석입니다. 앞으로 계속 코드를 추가할 수 있기 때문에 항상 주석은 넣는 습관을 들이도록 합니다
마지막으로 하단에 파일 업데이트 버튼을 눌러줍니다.
그리고 다시 관리자 창을 새로고침 눌러줍니다.
그럼 좌측 메뉴에 리유저블 블록이 생성되어 있습니다. 편하게 쓸 수 있으시겠죠?
예전에는 재사용 블록을 찾으려면 엄청 구석에 있어서 찾기도 힘들었구요. 심지어 패턴관리로 이르이 바뀐 이후로는 관리창을 찾는게 더 어려워졌는데요. 앞으로는 편하게 관리할 수 있습니다.
패턴 블록 생성하기
버튼으로 패턴 블록을 생성하려면 먼저 버튼을 만듭니다. 그리고 원하는 서식으로 꾸밉니다.
그리고 패턴을 만들기 위해 좌측 목록보이기로 들어갑니다.
만약 좌측의 목록보이기가 만약 안보인다면 보이게 한 다음에 해당 버튼 우측 점 세개를 클릭합니다. 이 때 버튼의 가장 상위 계층을 클릭해서 파랗게 활성화 한 상태에서 눌러주셔야 됩니다.
패턴/재사용 가능 블록 생성을 눌러주세요. 그럼
자기가 자주 쓸 패턴 이름을 정합니다.
그리고 아까 생성한 좌측 관리 메뉴로 들어가면 만들었던 버튼들이 보입니다. 여기서 지우거나 이름을 바꾸거나 관리하시면 됩니다.
패턴 사용하기 / 첨부 해제 반드시 누르기!
저장한 패턴을 쓰고 싶을 때는 / 뒤에 원하는 이름만 치고 엔터를 치면 바로 서식이 불러와집니다. 예를 들면 ‘/링크’ 이렇게 말이죠
주의사항으로는 불러온 패턴은 그냥 수정하면 안됩니다. 글에서 내용을 수정해 버리면 관리창에 있는 원본이 수정되는 개념입니다. 그래서 첨부 해제를 꼭 눌러줘야 해당 글에서만 변경이 됩니다. (명칭이 패턴분리에서 첨부해제로 변경되었습니다 / 2024년)
바로 아래 패턴 관리가 여기서 보이네요. 이렇게 꽁꽁 숨겨놓다니.
그리고 링크까지 넣은 버튼을 다른 글에도 넣고 싶으면 목록보이기 우측 점 3개를 눌러서 복사하셔서 다른 글에 붙여넣기 하시면 됩니다.
패턴 활용 팁
패턴 생성은 버튼만 되는게 아니라 문단도 패턴으로 되고 이미지도 모두 패턴으로 만들 수 있습니다. 활용을 하자면 평소 글쓰는 구조를 일정하게 정해놓고 패턴화 할 수도 있겠고, 에드센스 광고를 패턴화 해서 원하는 지점에 넣을 수도 있겠죠(티스토리 서식처럼). 다양하게 활용이 가능합니다.
좀 더 고급 활용 예시로 들어가자면.. 에드센스 광고를 수동으로 넣었던 부분은 패턴분리를 하지 않고 그냥 보라색 활성화 된 상태로 계속 둡니다. 그리고 언젠가 이 사이트에 있는 해당 광고를 일괄로 원하는 링크로 바꿀 필요가 있을 때 패턴관리에서 수정을 하면 되겠죠. 예를 들면 쿠팡 파트너스의 특정 코드로 싹 바꿀 때나.. 특정 아웃링크로 모두 바꿀 필요가 있을 때 말이죠. 좀 아이디어가 떠오르시나요?
물론 에드인서터 플러그인으로도 가능한 부분이지만 수동으로 넣은 부분은 이렇게 일괄 수정을 할 수 있다는 예시였습니다.