Я не могу вызвать пользовательские модели дизайна материалов в меню WordPress, используя div id. Я хочу вызвать login model в пользовательское меню входа в WordPress и зарегистрировать модель по ссылке регистрации. Исходный код моделей также приведен ниже, пожалуйста, проверьте и помогите мне с этой проблемой.
Спасибо
Это ссылка моделей, которые я хочу назвать.
Это ссылка , куда я хочу позвонить
<?php /* Template Name: mdb-register */ ?>
<html lang="en">
<head>
<title>WatchAwear Login/Registration Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
<style>
.nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 {
padding: 10px;
background: #3b3b3b !important;
}
.nav-link {
color: #fff !important;
border:none !important;
}
.nav-link.active {
color: #020202 !important;
}
.nav-link.active:hover {
background: #fff !important;
border-color: #fff !important;
}
.nav-link:hover {
background: #0006 !important;
border-color: #232323 !important;
}
.btn.btn-info {
background-color: #020202 !important;
width: 100%;
}
.btn-outline-info{
border-color: #020202 !important;
background-color: transparent !important;
color: #020202 !important;
}
.btn-outline-info:hover {
border-color: #020202 !important;
background-color: transparent !important;
color: #020202 !important;
}
#modalLRForm {
padding-left: 0 !important;
background: #fff6;
}
#modalLRForm1 {
padding-left: 0 !important;
background: #fff6;
}
/*=========Mobile Styles STARTS============== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-device-width: 480px) {
.modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer {
padding-left: 1rem !important;
padding-right: 1rem !important;
color: #616161;
font-size: 13px !important;
}
}
/*=========Mobile Styles ENDS============== */
</style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<div class="modal-body">
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
<label data-error="wrong" data-success="right" for="modalLRInput13"></label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
<label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
</div>
<!-- Material unchecked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialUnchecked">
<label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
</div>
<div class="text-center form-sm mt-2">
<button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-left">
<p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Tab panels -->
</div>
<!--/.Content-->
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
Login</a>
</li>
</ul>
<!-- Form Start -->
<div class="modal-body mb-1">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
<label data-error="wrong" data-success="right" for="form3"></label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
<label data-error="wrong" data-success="right" for="modalLRInput11"></label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p><a href="#" class="blue-text">Forgot Password?</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form-->
<div class="text-center">
<a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>