워드프레스, 티스토리에 부동산 평수계산기 추가하기

이 워드프레스 사이트의 도구 메뉴에 간단한 평수와 ㎡ 간 빠르게 면적을 환산하는 부동산 평수계산기를 추가해보았습니다.

워드프레스나 티스토리 등에 자바스크립트와 HTML 코드를 추가하여 아파트, 주택, 빌라, 대지 등의 면적을 변환할 때 유용하게 사용할 수 있는 부동산 평수/면적 계산기를 추가할 수 있습니다.

이런 유용한 도구를 추가하고 애드센스 광고를 표시하면 애드센스 수익에 도 도움이 될 수 있습니다. 저는 로또번호 추출기, 일수 계산기, BMI 계산기 등을 비롯한 몇 가지 툴을 만들어 사이트에 추가했습니다. 로또번호 생성기는 특히 매주 금요일에 방문자들이 증가하고 있습니다.😄

워드프레스, 티스토리에 부동산 평수계산기 추가하기

워드프레스 사이트나 티스토리 블로그에 부동산 평수/면적 환산기를 추가하고 싶은 경우 아래에 제시된 HTML/자바스크립트/CSS 코드를 활용할 수 있습니다. HTML/JS/CSS 코드를 추가할 수 있는 플랫폼(예: 워드프레스, 티스토리, 그누보드, XE 등)에서 적용이 가능합니다.

HTML 코드

  <!-- ㎡ → 평 변환 -->
<div class="form-inline row align-items-center m-3 m_p">
    <div class="col-25 title"><label for="input_m_p">㎡ → 평</label></div>
    <div class="col-25">
        <div class="input-group">
            <input type="number" step="0.01" id="input_m_p" name="squareMeter01" class="form-control" placeholder=""><span class="input-group-text">㎡</span>
        </div>
    </div>
    <div class="col-25 text-center">
        <button type="button" class="btn btn-success" id="cal_m_p">계산</button>
    </div>
    <div class="col-25">
        <div class="input-group">
            <input type="text" id="result_m_p" title="㎡ → 평 변환" name="pyeongMeter01" class="form-control" placeholder=""><span class="input-group-text">평</span>
        </div>
    </div>
    <div class="col-12" id="error_m_p"></div>
</div>
		<!--converter -->

<!-- 평 → ㎡ 변환 -->
<div class="form-inline row align-items-center m-3 p_m">
    <div class="col-25 title"><label for="input_p_m">평 → ㎡</label></div>
    <div class="col-25">
        <div class="input-group">
            <input type="number" step="0.01" id="input_p_m" name="pyeongMeter02" class="form-control" placeholder=""><span class="input-group-text">평</span>
        </div>
    </div>
    <div class="col-25 text-center">
        <button type="button" class="btn btn-success" id="cal_p_m">계산</button>
    </div>
    <div class="col-25">
        <div class="input-group">
            <input type="text" id="result_p_m" title="평 → ㎡ 변환" name="squareMeter02" class="form-control" placeholder=""><span class="input-group-text">㎡</span>
        </div>
    </div>
    <div class="col-12" id="error_p_m"></div>
</div>

JavaScript 코드

<script>
document.getElementById('cal_m_p').addEventListener('click', function() {
    var squareMeters = parseFloat(document.getElementById('input_m_p').value);
    if (isNaN(squareMeters) || squareMeters < 0) {
        document.getElementById('error_m_p').textContent = '유효한 ㎡ 값을 입력하세요.';
        document.getElementById('result_m_p').value = '';
    } else {
        var pyeong = (squareMeters * 0.3025).toFixed(2);
        document.getElementById('result_m_p').value = pyeong;
        document.getElementById('error_m_p').textContent = '';
    }
});

document.getElementById('cal_p_m').addEventListener('click', function() {
    var pyeong = parseFloat(document.getElementById('input_p_m').value);
    if (isNaN(pyeong) || pyeong < 0) {
        document.getElementById('error_p_m').textContent = '유효한 평 값을 입력하세요.';
        document.getElementById('result_p_m').value = '';
    } else {
        var squareMeters = (pyeong * 3.305785).toFixed(2);
        document.getElementById('result_p_m').value = squareMeters;
        document.getElementById('error_p_m').textContent = '';
    }
});
</script>

CSS 코드

/* 부동산 평수 계산기 스타일 */

.col-25 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0;
}

.col-25 input {
    margin: 0;
}

/* Row Container */
.form-inline .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* Labels with Specific Background Color */
.label-25 {
    width: 100%;
    background-color: #d3d3d3; /* Light gray */
    padding: 0.5rem;
    text-align: left;
    font-size: 1rem;
    color: #343a40;
    height: 40px; /* 높이를 비슷하게 조정하기 위해 추가됨 */
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 0; /* border radius 제거 */
}

/* Input Group Container */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px; /* 높이 조정 */
}

/* Input Fields Styling */
.form-control {
    width: 100%;
    padding-right: 2.5rem; /* Leaves room for the span */
    height: 100%; /* 높이를 일관되게 유지하기 위해 추가됨 */
    border: 1px solid #ced4da;
    border-top-left-radius: 0.25rem; /* Left corners of the input */
    border-bottom-left-radius: 0.25rem;
    box-sizing: border-box;
    background-color: #fff;
    color: #495057;
    font-size: 1rem;
    font-family: Arial, sans-serif;
}

/* Input Group Text (e.g., ㎡, 평) */
.input-group-text {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-left: 1px solid #ced4da;
    background-color: #7596d3; /* New background color for the span */
    font-size: 1rem;
    font-weight: bold;
    color: white; /* White text on the span */
    height: 100%;
    border-top-right-radius: 0.25rem; /* Right corners of the span */
    border-bottom-right-radius: 0.25rem;
}

/* Success Button Styling */
.btn-success {
    background-color: #7596d3; /* New background color for the button */
    border-color: #7596d3;
    color: white;
    width: 70px;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    margin-left: auto;
    margin-right: auto;
    height: 100%; /* 다른 요소와 높이를 비슷하게 맞추기 위해 추가됨 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-success:hover {
    background-color: #5872a3;
    border-color: #5872a3;
}
.col-25 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0;
}

.col-25 input {
    margin: 0;
}

/* Row Container */
.form-inline .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* Labels with Specific Background Color */
.label-25 {
    width: 100%;
    background-color: #d3d3d3; /* Light gray */
    padding: 0.5rem;
    text-align: left;
    font-size: 1rem;
    color: #343a40;
    height: 40px; /* 일관된 높이를 위해 추가됨 */
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 0; /* border radius 효과 제거 */
}

/* Input Group Container */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px; /* 다른 요소와 높이를 비슷하게 하기 위해 추가됨 */
}

/* Input Fields Styling */
.form-control {
    width: 100%;
    padding-right: 2.5rem; /* Leaves room for the span */
    height: 100%; /* Consistent height with other elements */
    border: 1px solid #ced4da;
    border-top-left-radius: 0.25rem; /* Left corners of the input */
    border-bottom-left-radius: 0.25rem;
    box-sizing: border-box;
    background-color: #fff;
    color: #495057;
    font-size: 1rem;
    font-family: Arial, sans-serif;
}

/* Input Group Text (e.g., ㎡, 평) */
.input-group-text {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-left: 1px solid #ced4da;
    background-color: #7596d3; /* New background color for the span */
    font-size: 1rem;
    font-weight: bold;
    color: white; /* White text on the span */
    height: 100%;
    border-top-right-radius: 0.25rem; /* Right corners of the span */
    border-bottom-right-radius: 0.25rem;
}

/* Success Button Styling */
.btn-success {
    background-color: #7596d3; /* New background color for the button */
    border-color: #7596d3;
    color: white;
    width: 70px;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    font-family: Arial, sans-serif;
    margin-left: auto;
    margin-right: auto;
    height: 100%; /* 다른 요소와의 높이를 일정하게 하기 위해 추가됨 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn-success:hover {
    background-color: #5872a3;
    border-color: #5872a3;
}

워드프레스에 코드를 추가하는 방법

1 HTML 코드는 여러 가지 방법으로 추가할 수 있습니다.

1. 블록 에디터를 사용하는 경우 사용자 정의 HTML 블록으로 추가할 수 있습니다.
2. 엘리멘터(Elementor)를 사용하는 경우 HTML 위젯을 사용하여 코드를 추가할 수 있습니다.
3. 아바다, Divi 등을 사용하는 경우에도 HTML 코드를 추가할 수 있는 엘리먼트가 제공됩니다.
4. 페이지 템플릿을 만들어 활용하는 경우 페이지 템플릿 파일에 직접 추가할 수 있습니다.

저는 페이지 템플릿을 사용하여 HTML 코드를 추가했습니다.

2 자바스크립트 코드의 경우에도 몇 가지 방법으로 추가할 수 있습니다.

가장 간단하게는 WPCode와 같은 플러그인을 사용하여 추가하는 것이 가능합니다. 하지만 이 방법으로 추가하면 사이트 전체에서 코드가 로드되므로 그리 권장하지 않습니다.

사이트 속도에 영향을 최소화하면서 적용하고 싶은 경우에는 다음 글에서 소개하는 방법으로 코드를 추가하시기 바랍니다. 해당 페이지에서만 로드되도록 하면 사이트 속도에 미치는 영향을 최소화할 수 있습니다.

• 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법

3 커스텀 CSS 코드는 디자인 » 사용자 정의하기 » 추가 CSS에 추가하거나 자식 테마의 스타일시트 파일(style.css)에 추가할 수 있습니다.

CSS 코드는 사용하는 테마에 따라 적절히 변경하시기 바랍니다. 색상, 글자 크기, 여백 등을 원하는 대로 수정할 수 있습니다.

이 글에 제시된 코드를 적용할 경우 사용자가 숫자를 입력하고 계산 버튼을 클릭하면 면적이 변환됩니다.

이 블로그에는 방문자가 숫자를 입력하면 실시간으로 변환되어 값이 표시되도록 코드를 조금 수정했습니다.

코드는 사용하는 테마와 상황에 맞게 적절히 변경하여 사용하시기 바랍니다.

참고

• 워드프레스 비용 계산 견적서 플러그인
• 워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi)
• 클라우드웨이즈(Cloudways) 가격 및 장단점