WordPress에서 평수 변환기 구현하기: Contact Form 7, WPForms, Calculated Fields Form 플러그인 사용법
WordPress 블로그에서 평수와 제곱미터 변환기를 구현하려면 다양한 플러그인을 활용할 수 있습니다. 이 글에서는 Contact Form 7, WPForms, Calculated Fields Form 플러그인을 사용하여 변환기를 설정하는 방법을 단계별로 설명하겠습니다.
1. Contact Form 7 플러그인 사용하기
설치 및 설정
- WordPress 관리자 대시보드에서 ‘플러그인’ > ‘새로 추가’로 이동합니다.
- ‘Contact Form 7’을 검색하고 설치한 후 활성화합니다.
폼 생성 및 설정
- ‘Contact’ 메뉴에서 ‘Contact Forms’를 클릭합니다.
- 새 폼을 생성하거나 기존 폼을 편집합니다.
- 변환기 폼을 설정합니다:
html
<label>평수를 입력하세요:
[text* pyung]
</label>
<label>제곱미터를 입력하세요:
[text* squareMeter]
</label>
<button onclick="convert()">변환하기</button>
<p id="result"></p>
JavaScript 코드 추가
- WordPress 관리자에서 ‘외모’ > ‘테마 파일 편집기’로 이동합니다.
- ‘footer.php’ 파일에 다음 스크립트를 추가합니다:
html
<script>
function convert() {
const pyung = document.getElementById('pyung').value;
const squareMeter = pyung * 3.3;
document.getElementById('result').innerText = `${pyung} 평은 ${squareMeter} 제곱미터입니다.`;
}
</script>
2. WPForms 플러그인 사용하기
설치 및 설정
- WordPress 관리자 대시보드에서 ‘플러그인’ > ‘새로 추가’로 이동합니다.
- ‘WPForms’를 검색하고 설치한 후 활성화합니다.
폼 생성 및 설정
- ‘WPForms’ 메뉴에서 ‘Add New’를 클릭합니다.
- 새로운 폼을 생성하고 이름을 지정합니다.
- ‘Single Line Text’ 필드를 추가하여 평수 입력 필드를 만듭니다.
- ‘Number’ 필드를 추가하여 제곱미터 입력 필드를 만듭니다.
- ‘HTML’ 필드를 추가하여 변환 결과를 표시할 영역을 만듭니다:
html
<p id="result"></p>
JavaScript 코드 추가
- WordPress 관리자에서 ‘디자인(외모)’ > ‘테마 파일 편집기’로 이동합니다.
- ‘footer.php’ 파일에 다음 스크립트를 추가합니다:
html
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
const pyung = document.querySelector('[name="pyung"]').value;
const squareMeter = pyung * 3.3;
document.getElementById('result').innerText = `${pyung} 평은 ${squareMeter} 제곱미터입니다.`;
});
});
</script>
3. Calculated Fields Form 플러그인 사용하기
설치 및 설정
- WordPress 관리자 대시보드에서 ‘플러그인’ > ‘새로 추가’로 이동합니다.
- ‘Calculated Fields Form’을 검색하고 설치한 후 활성화합니다.
폼 생성 및 설정
- ‘Calculated Fields Form’ 메뉴에서 ‘Add New’를 클릭합니다.
- 새로운 폼을 생성하고 이름을 지정합니다.
- ‘Add Field’ 버튼을 클릭하여 필드를 추가합니다:
- ‘Number’ 필드: 평수 입력 필드
- ‘Calculated Field’: 제곱미터 결과 필드
필드 설정
- ‘Calculated Field’의 설정에서 계산식을 입력합니다:
javascript
fieldname1 * 3.3
폼 삽입
- 생성한 폼의 숏코드를 복사하여 WordPress 글이나 페이지에 삽입합니다.
이렇게 하면 각각의 플러그인을 사용해 변환기 기능을 구현할 수 있습니다. 각 단계에 따라 설정하고 테스트해보세요. 필요에 따라 더 많은 커스터마이징을 진행할 수 있습니다.
감사합니다. 몇가지 흰트가 생각납니다.