워드프레스에 비만 계산기 적용시
본문
안녕하세요.
해당 사이트의 비만도 계산기를 워드 프레스 템플릿 페이지에 적용 시키려고 합니다.
워프 페이지 기본 문구는 아래처럼 되어있습니다.
<?php
/**
* The template for displaying all pages.
* @package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<div <?php generate_do_attr( 'content' ); ?>>
<main <?php generate_do_attr( 'main' ); ?>>
<?php
/**
* generate_before_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_before_main_content' );
if ( generate_has_default_loop() ) {
while ( have_posts() ) :
the_post();
generate_do_template_part( 'page' );
endwhile;
}
/**
* generate_after_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_after_main_content' );
?>
</main>
</div>
<?php
/**
* generate_after_primary_content_area hook.
*
* @since 2.0
*/
do_action( 'generate_after_primary_content_area' );
generate_construct_sidebars();
get_footer();
위에 소스에 코드를 넣어서 적용을 해보았습니다.
그런데 pc화면에서는 어느정도 보이긴 하는데 모바일에서는 제대로 화면이 보이질 않습니다.
혹 고수분들께서 워프에 보건소 비만계산기 형식 그대로 구현을 해주실 분이 계시는지요?
css를 잘 몰라서 한계에 부딪히네요.ㅠㅠ
<?php
/**
* The template for displaying all pages.
*
* @package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<div <?php generate_do_attr( 'content' ); ?>>
<main <?php generate_do_attr( 'main' ); ?>>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script>
function resetForm() {
document.getElementById('bmiForm').reset();
}
</script>
<title>BMI 계산기</title>
<style>
/* Basic Reset */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* Container Styling */
.container {
width: 100%;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border: 1px solid #ddd; /* Border around the container */
border-radius: 4px;
}
/* Form and Input Fields */
.form-group {
margin-bottom: 15px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input[type="text"],
.input[type="number"],
select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Button Styling */
.button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.button.reset {
background-color: #f44336; /* 빨간색 배경 */
color: white;
}
.button.reset:hover {
background-color: #d32f2f; /* 빨간색 배경 어두운 버전 */
}
/* Border around form */
form {
border: 1px solid #ddd;
padding: 20px;
border-radius: 4px;
background: #f9f9f9;
}
/* Result Styling */
.result {
margin-top: 20px;
}
.panel1 {
text-align: center;
font-size: 16px;
}
.fsXXL {
font-size: 18px;
margin-bottom: 20px;
}
.em1 {
color: #e00;
}
.em4 {
color: #080;
}
.chart1bmi1 {
position: relative;
margin: 1.25em auto;
padding: 0 0 2em;
}
.chart1bmi1 .deco1 {
float: left;
position: absolute;
left: 0;
top: -9px;
width: 0;
height: 0;
margin: 0 -12px;
border: 12px solid transparent;
border-top-color: #000;
overflow: hidden;
text-indent: 100%;
transition: .4s ease-out;
}
.chart1bmi1 .deco1.init {
opacity: 0;
}
.chart1bmi1 .area {
overflow: hidden;
display: flex;
justify-content: space-between;
}
.chart1bmi1 .area>.a1 {
width: 25%;
background: #959595;
color: #fff;
}
.chart1bmi1 .area>.a1.m1 {
background: #09f url(../includes/js/jquery/cal/b.ffffff.opacity.20.pattern1.png);
}
.chart1bmi1 .area>.a1.m2 {
background: #0a0 url(../includes/js/jquery/cal/b.ffffff.opacity.20.pattern1.png);
}
.chart1bmi1 .area>.a1.m3 {
background: #b80 url(../includes/js/jquery/cal/b.ffffff.opacity.20.pattern1.png);
}
.chart1bmi1 .area>.a1.m4 {
background: #f55 url(../includes/js/jquery/cal/b.ffffff.opacity.20.pattern1.png);
}
.chart1bmi1 .graduated {
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bmi-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
text-align: center;
}
.bmi-table th,
.bmi-table td {
border: 1px solid #dddddd;
padding: 12px 15px;
}
.bmi-table th {
background-color: #f2f2f2;
}
.bmi-table caption {
font-weight: bold;
margin-bottom: 10px;
}
.bmi-table .tal {
text-align: left;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 10px;
}
.button {
width: 100%;
padding: 15px;
font-size: 18px;
}
.form-group {
margin-bottom: 10px;
}
.label {
margin-bottom: 3px;
}
/* Adjust input fields to display in a single line on mobile */
span.nowrap {
display: block;
margin-bottom: 10px;
}
span.nowrap input,
span.nowrap label {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container clearfix">
<h3 class="hb1 h3">신체질량지수(BMI) : 신장과 체중으로 알아보는 자신의 비만도</h3>
<p>자신의 신체계측지수를 입력한 후 확인을 클릭하시면 신체질량지수(BMI)에 의한 비만도를 알 수 있습니다.</p>
<!-- panel3 -->
<div class="panel3 clearfix">
<!-- form -->
<!-- form -->
<!-- form -->
<form id="bmiForm" name="bmiForm" action="" method="post">
<fieldset class="mg0">
<legend class="blind"><strong class="h1">비만도 계산</strong></legend>
<span class="nowrap">
<span class="label">성별</span>
<input id="bmiSex1" name="bmiSex" type="radio" value="M" <?php echo isset($_POST['bmiSex']) && $_POST['bmiSex'] == 'M' ? 'checked' : ''; ?>><label for="bmiSex1">남</label>
<input id="bmiSex2" name="bmiSex" type="radio" value="F" <?php echo isset($_POST['bmiSex']) && $_POST['bmiSex'] == 'F' ? 'checked' : ''; ?>><label for="bmiSex2">여</label>
</span>
<span class="nowrap">
<label for="bmiHeight" class="label">신장 </label>
<input id="bmiHeight" name="bmiHeight" class="tar" type="text" value="<?php echo isset($_POST['bmiHeight']) ? $_POST['bmiHeight'] : ''; ?>" size="10"> cm
</span>
<span class="nowrap">
<label for="bmiWeight" class="label">체중 </label>
<input id="bmiWeight" name="bmiWeight" class="tar" title="신장" type="text" value="<?php echo isset($_POST['bmiWeight']) ? $_POST['bmiWeight'] : ''; ?>" size="10"> kg
</span>
<span class="nowrap">
<button type="submit" value="submit" class="button submit w100-for-small">계산하기</button>
</span>
</fieldset>
</form>
<!-- /form -->
<!-- /form -->
<!-- /form -->
</div>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$height = $_POST['bmiHeight'] / 100;
$weight = $_POST['bmiWeight'];
$bmi = $weight / ($height * $height);
$bmi = round($bmi, 2);
if ($_POST['bmiSex'] == 'M') {
$averageWeight = round($height * $height * 22);
} else {
$averageWeight = round($height * $height * 21);
}
$bmiCategory = '';
$deco1left = 0;
if ($bmi < 20) {
$bmiCategory = '저체중';
$deco1left = ($bmi / 20) * 25;
} elseif ($bmi >= 20 && $bmi < 24) {
$bmiCategory = '정상';
$deco1left = 25 + (($bmi - 20) / 4) * 25;
} elseif ($bmi >= 24 && $bmi < 30) {
$bmiCategory = '과체중';
$deco1left = 50 + (($bmi - 24) / 6) * 25;
} else {
$bmiCategory = '비만';
$deco1left = 75 + (($bmi - 30) / 70) * 25;
}
$deco1left .= '%';
?>
<div class="panel1 clearfix tac">
<p class="fsXXL">BMI측정결과 : 신체질량지수(BMI)는 <b class="em1"><?php echo $bmi; ?></b> 로 <b class="em4">"<?php echo $bmiCategory; ?>"</b> 입니다. 평균체중은 <b class="em4"><?php echo $averageWeight; ?></b> Kg 입니다.</p>
<!-- chart1bmi1 -->
<div class="chart1bmi1">
<div class="sb1">
<i class="deco1" style="left: <?php echo $deco1left; ?>;"></i>
</div>
<div class="area">
<span class="a1 m1">저체중</span>
<span class="a1 m2">정상</span>
<span class="a1 m3">과체중</span>
<span class="a1 m4">비만</span>
</div>
<div class="graduated">
<span class="a1 m1">0</span>
<span class="a1 m2">20</span>
<span class="a1 m3">24</span>
<span class="a1 m4">30 이상</span>
</div>
</div>
<!-- /chart1bmi1 -->
</div>
<!-- /panel1 -->
<?php
}
?>
<h4 class="hb1 h4">신체질량지수(Body Mass Index:BMI,카우프지수)에 의한 비만도 계산법</h4>
<p>비만의 판정의 올바른 지표는 체중이 아니라 체지방량이므로 몸의 지방량을 직접 측정하는 것이 이상적이나 이것은 기술적인 어려움이 있기 때문에 표준체중, 신체질량지수 등 체지방량을 간접적으로 측정하는 방법이 일반적이다.</p>
<table class="bmi-table">
<caption>BMI 에 의한 비만도 계산법</caption>
<thead>
<tr>
<th scope="col">항목</th>
<th scope="col">구분</th>
<th scope="col">내용</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">계산식</th>
<td colspan="2">신체질량지수(BMI) = 체중(kg) / [신장(m)]<sup>2</sup></td>
</tr>
<tr>
<th scope="row" rowspan="4">판정기준</th>
<th scope="row">저체중</th>
<td>20 미만</td>
</tr>
<tr>
<th scope="row">정상</th>
<td>20 - 24</td>
</tr>
<tr>
<th scope="row">과체중</th>
<td>25 - 29</td>
</tr>
<tr>
<th scope="row">비만</th>
<td>30 이상</td>
</tr>
<tr>
<th scope="row">장단점</th>
<td colspan="2" class="tal">표준체중보다는 체지방을 비교적 정확하게 반영할 수 있으면서도 매우 간단히 계산하여 판정할 수 있다.</td>
</tr>
</tbody>
</table>
</div>
</div>
<?php
/**
* generate_after_primary_content_area hook.
*
* @since 2.0
*/
do_action( 'generate_after_primary_content_area' );
generate_construct_sidebars();
get_footer();
답변 1
그렇게 봐서는 복잡해서몰르겟습니다.
전체 소스파일 로해서 줘보셔요 봐드릴께요
실시간 데이터 계산 및 차트 (mijuexpert.com)
https://mijuexpert.com/test.php
https://t.me/woongfu 문이주세요
