워드프레스 복사 버튼 만들기: 텍스트 및 코드 클립보드 복사하기

워드프레스 사이트에서 특정 코드나 텍스트를 사용자에게 공유해야 하는 경우가 많습니다. 이때 복사 버튼을 추가하면 방문자가 클릭 한 번으로 원하는 정보를 손쉽게 복사할 수 있어 사이트의 사용자 경험을 향상할 수 있습니다. 이번 포스팅에서는 워드프레스에서 복사 버튼을 추가하는 방법을 자세히 설명하고, 'Copy Anything to Clipboard' 플러그인을 활용하여 간편하게 복사 기능을 구현하는 법을 소개하겠습니다.

---

1. 워드프레스 복사 버튼 만드는 방법

워드프레스에서 복사 버튼을 추가하는 방법은 크게 두 가지가 있습니다.

1. 코드를 직접 작성하는 방법: JavaScript를 활용하여 복사 버튼을 구현할 수 있습니다.
2. 플러그인을 활용하는 방법: 'Copy Anything to Clipboard' 플러그인을 사용하면 간단하게 복사 버튼을 생성할 수 있습니다.

이번 포스팅에서는 코딩이 익숙하지 않은 사용자도 쉽게 적용할 수 있도록 플러그인을 이용하는 방법을 중심으로 설명하겠습니다.

---

2. Copy Anything to Clipboard 플러그인 소개

'Copy Anything to Clipboard' 플러그인은 워드프레스에서 클립보드 복사 기능을 쉽게 추가할 수 있도록 도와주는 플러그인입니다. 주요 특징은 다음과 같습니다:

• 활성화된 사이트 10,000개 이상
• 쇼트코드, CSS, 위젯을 이용하여 복사 버튼 추가 가능
• 버튼 스타일 커스터마이징 지원
• 무료 버전으로도 기본적인 복사 기능 사용 가능

유료 버전에서는 추가적인 버튼 스타일 편집 기능이 제공되지만, 기본적인 복사 기능은 무료 버전으로 충분히 활용할 수 있습니다.

---

3. Copy Anything to Clipboard 플러그인 설치 방법

1. 워드프레스 관리자 페이지 접속
2. 플러그인 > 새로 추가로 이동
3. ‘Copy Anything to Clipboard’ 검색
4. 설치 후 활성화

설치가 완료되면 관리자 페이지에서 플러그인 설정을 진행할 수 있습니다.

---

4. 워드프레스 복사 버튼 설정하는 방법

플러그인을 활성화한 후 다음 단계를 따라 설정을 진행합니다.

4.1 복사 버튼 추가하기

1. 관리자 페이지 > 설정 > Copy to Clipboard 이동
2. ‘Add New’ 버튼 클릭
3. 새로운 복사 버튼 설정

4.2 버튼 기본 설정

• Selector: pre (코드 블록에 적용하기 위해 필수 입력)
• Format: Default
• Style: 텍스트 버튼(Button) 또는 아이콘(Icon) 중 선택
• Position: 블록 안(Inside) 또는 블록 밖(Outside) 선택
• Button Text: 버튼에 표시될 텍스트 입력 (예: ‘COPY’)
• After Copy Button Text: 복사 후 표시될 텍스트 입력 (예: ‘Copied!’)
• Button Title: Copy button으로 설정

설정 완료 후 반드시 Save Changes 버튼을 클릭하여 저장해야 합니다.

---

5. 복사 버튼 디자인 커스터마이징 (CSS 코드 활용)

유료 버전을 사용하지 않더라도 CSS 코드 편집을 통해 버튼의 디자인을 변경할 수 있습니다. 아래에서 크기, 색상, 테두리, 위치 등을 조정하는 방법을 알아보겠습니다.

5.1 복사 버튼 크기 변경하기

.copy-the-code-wrap .copy-the-code-button {
    padding: 5px 10px !important;
}

5.2 복사 버튼 색상 변경하기

.copy-the-code-wrap .copy-the-code-button {
    background: #242227;
}

5.3 복사 버튼 텍스트 색상 변경하기

.copy-the-code-wrap .copy-the-code-button {
    color:#ffffff;
}

5.4 복사 버튼 테두리 변경하기

.copy-the-code-wrap .copy-the-code-button {
    border-radius: 5px;
}

5.5 복사 버튼 위치 변경하기

.copy-the-code-wrap .copy-the-code-button {
    margin: 15px 10px;
}

---

6. 마치며

이번 포스팅에서는 워드프레스에서 클립보드로 텍스트 및 코드를 복사할 수 있는 버튼을 추가하는 방법을 알아보았습니다. 'Copy Anything to Clipboard' 플러그인을 활용하면 간단하게 복사 버튼을 추가할 수 있으며, CSS를 활용하여 원하는 스타일로 커스터마이징할 수도 있습니다.

웹사이트에서 코드나 특정 텍스트를 쉽게 공유하고 싶은 경우, 이 플러그인을 활용하여 방문자들이 더욱 편리하게 정보를 복사할 수 있도록 설정해 보세요. 😊