WordPress, ティストリーに不動産平数計算機を追加する

この WordPress サイトのツールメニューに簡単な平水と平方メートルの間で素早く面積を換算する不動産平水計算機を追加してみました。

WordPressまた、ThistoryなどにJavaScriptやHTMLコードを追加することで、アパート、住宅、別荘、敷地などの面積を変換するのに便利な不動産定数/面積計算機を追加できます。

このような便利なツールを追加し、 AdSense 広告を表示すると AdSense 収益にも役立ちます。私はロト番号抽出器、日数計算機、BMI電卓などを含むいくつかのツールを作成し、サイトに追加しました。ロト番号ジェネレータ特に毎週金曜日に訪問者が増加しています。😄

WordPress、ティーストーリーに不動産平均計算機を追加する

WordPress サイトや組織のブログに不動産定数/面積換算器を追加したい場合は、以下に示すHTML / JavaScript / CSSコードを利用できます。 HTML/JS/CSS コードを追加できるプラットフォーム (例: WordPress、ティーストーリー、 GNUBOARD、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;
}

WordPressにコードを追加する方法

1 HTMLコードはいくつかの方法で追加できます。

ブロックエディタを使用している場合は、カスタムHTMLブロックとして追加できます。
エレメント（Elementor)を使用している場合は、HTMLウィジェットを使用してコードを追加できます。
Avada, Divi などを使用してもHTMLコードを追加できる要素が提供されます。
ページテンプレートを作成して利用する場合は、ページテンプレートファイルに直接追加できます。

私はページテンプレートを使用してHTMLコードを追加しました。

💡WordPress ページテンプレートを作成する

2 JavaScriptコードの場合でも、いくつかの方法で追加できます。

最も簡単には WPコードなどのプラグインを使用して追加することができます。ただし、この方法で追加するとサイト全体でコードが読み込まれるため、それはお勧めできません。

サイトの速度に影響を最小限に抑えながら適用したい場合は、次の記事で紹介する方法でコードを追加してください。そのページからのみ読み込むことで、サイトの速度に与える影響を最小限に抑えることができます。

WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

3 カスタム CSSコードは デザイン » カスタマイズ » 追加のCSSに追加するか、子テーマのスタイルシートファイル（style.css）に追加できます。

CSSコードは使用するテーマに応じて適切に変更してください。色、文字サイズ、余白などを必要に応じて変更できます。

この記事に記載されているコードを適用すると、ユーザーが数値を入力して計算ボタンをクリックすると、面積が変換されます。

このブログでは、訪問者が数値を入力するとリアルタイムに変換され、値が表示されるようにコードを少し修正しました。

💡水平計算機の動作を確認する

コードは使用するテーマや状況に合わせて適宜変更してご使用ください。

参照

4のコメント

コメント応答キャンセル

夢を見る

2024年06月03日at午前7:25

うわー..これをやりたいのですが…
そのコードを1〜4回の方法のXNUMXつにするように言われましたか？
もっと詳しく書いてくれてよかったのに…初心者には…
応答
- Word
  
  2024年06月03日at午前9:46
  
  html/css/javascriptがすべて必要です。
  
  コーチングプログラムをご利用の場合 WordPressとWebホスティングに関する問題に対処するのに役立つ回答を受け取ることができます。
  この記事に記載されているものと同じコード WordPressに適用する方法についてもう少し詳細な案内も受けられます。 😄
  
  次のサイトを参照してください。
  
  https://coaching.avada.co.kr/
  応答
不動産

2024年05月07日at 1:08

WordPressについて全く知らないユーザーです。不動産情報提供ブログを運営中です。有料で私のブログに平数計算機追加を依頼できますか？
応答
- Word
  
  2024年05月08日at 4:32
  
  ご希望の場合は、簡単にサイトの任意の場所に追加できるように実装できます。メニューのお問い合わせをクリックしてお問い合わせページよりご連絡ください。
  応答

WordPress、ティーストーリーに不動産平均計算機を追加する

WordPress、ティーストーリーに不動産平均計算機を追加する

HTMLコード

JavaScriptコード

CSSコード

WordPressにコードを追加する方法

参照

4のコメント

コメント 応答キャンセル

コメント応答キャンセル