0
當我點擊登錄登錄按鈕並且我不想使用wp_login_form()時，我想在我的網站的首頁上加載此登錄頁面，因爲我想加載插件加載的社交登錄圖標wp-login.php頁面。如何在wordpress的前端加載wp-login.php？
我知道這可以使用Ajax來完成，但由於不熟悉語言，我無法實現它。有關WordPress如何加載wp-login.php頁面的幫助，如下圖所示？
A
回答
1
這是不平凡的，你是正確的，你需要使用AJAX這一點。
我會先將這些文件和代碼添加到它們中，然後嘗試在解釋時進行解釋。
的header.php
這顯然可以給你不同的，但你需要看到的結構。如果需要，您可以刪除註冊部分。
<header id="main_header" class="clearfix">
<div class="top_bar">
<div class="container">
<div class="ajax_login">
<form id="login" action="login" method="post">
<h1><?php esc_attr_e('User login','yourtheme') ?></h1>
<p class="status"></p>
<input id="username" type="text" name="username" placeholder="<?php esc_attr_e('Username','yourtheme') ?>">
<input id="password" type="password" name="password" placeholder="<?php esc_attr_e('Password','yourtheme') ?>">
<div class="forgotten_box">
<a class="lost" href="<?php echo esc_url(wp_lostpassword_url()); ?>"><?php esc_attr_e('Lost your password?','yourtheme') ?></a>
</div>
<input class="submit_button" type="submit" value="Login" name="submit">
<?php wp_nonce_field('ajax-login-nonce', 'security'); ?>
</form>
<div class="ajax_login_overlay"></div>
<?php if (is_user_logged_in()):?>
<a class="login_button" href="<?php echo wp_logout_url(home_url()); ?>"><?php esc_attr_e('Logout','yourtheme') ?></a>
<?php else: ?>
<a class="login_button" id="show_login" href=""><?php esc_attr_e('Login','yourtheme') ?></a>
<?php endif; ?>
</div>
<?php if (!is_user_logged_in()):?>
<div class="register">
<a class="lost" href="<?php echo esc_url(wp_registration_url()); ?>" id="show_register"><?php esc_attr_e('Register','yourtheme') ?></a>
<form method="post" name="st-register-form" id="register_form">
<h2 class="register-heading"><?php esc_html_e('Register', 'yourtheme'); ?></h2>
<div id="registration-error-message">
</div>
<div class="field">
<input type="text" autocomplete="off" name="username" id="yourtheme_register-username" placeholder="<?php esc_html_e('Username', 'yourtheme'); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="mail" id="yourtheme_register-email" placeholder="<?php esc_html_e('Email', 'yourtheme'); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="fname" id="yourtheme_register-fname" placeholder="<?php esc_html_e('First Name', 'yourtheme'); ?>" />
</div>
<div class="field">
<input type="text" autocomplete="off" name="lname" id="yourtheme_register-lname" placeholder="<?php esc_html_e('Last Name', 'yourtheme'); ?>" />
</div>
<div class="frm-button">
<input type="button" id="register-me" value="Register" />
</div>
</form>
</div>
<?php endif; ?>
</div>
</div>
</header>
基本上你會用AJAX提交的表單。沒有什麼特別的。
CSS去與（未完，你會想改變它的東西適合你）
/*------------------------ AJAX login -------------------------*/
.top_bar{
text-align: right;
}
.top_bar .ajax_login{
display: inline-block;
margin-right: 10px;
}
.top_bar .ajax_login_overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.5);
display: none;
cursor: default;
z-index: 101;
transform: translateZ(1px);
}
.top_bar .ajax_login form#login{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .ajax_login form#login h1{
color: #656565;
background: #eee;
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
padding: 2px 20px;
text-align: left;
}
.top_bar .ajax_login form#login p.status{
display: none;
padding: 0 20px;
margin-bottom: 12px;
}
.top_bar .ajax_login form#login input#username,
.top_bar .ajax_login form#login input#password{
margin: 10px 20px;
width: 400px;
display: block;
}
.top_bar .ajax_login form#login .forgotten_box{
display: inline-block;
padding: 3px 20px 0 20px;
}
.top_bar .ajax_login form#login .forgotten_box .lost{
display: block;
padding: 5px;
padding-left: 0;
margin-bottom: 0;
}
.top_bar .ajax_login form#login input.submit_button{
padding: 15px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
margin-right: 20px;
float: right;
cursor: pointer;
-webkit-transition: all 180ms ease-in;
-moz-transition: all 180ms ease-in;
-o-transition: all 180ms ease-in;
transition: all 180ms ease-in;
}
.top_bar .ajax_login .login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}
.top_bar .ajax_login .login_button,
.top_bar .register a{
display: inline-block;
color: #0c0f0b;
font-size: 12px;
font-weight: 700;
line-height: 30px;
}
.top_bar .ajax_login .login_button:hover{
color: #d84949;
}
.top_bar .register{
display: inline-block;
}
/*------------------------ AJAX register -------------------------*/
.top_bar .register #register_form{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 50%;
margin-top: -117px;
z-index: 999;
left: 50%;
margin-left: -200px;
cursor: default;
}
.top_bar .register #register_form input[type="text"]{
margin: 10px 20px;
width: 400px;
display: block;
background: #f2f2f2;
border: 0;
font-family: 'Roboto', sans-serif;
color: rgb(115, 115, 115);
color: rgba(115, 115, 115, 0.5);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
font-style: italic;
}
.top_bar .register #register_form .register-heading{
background: #be0017;
font-family: Arial;
color: #ffffff;
font-size: 16px;
line-height: 12px;
font-weight: 700;
letter-spacing: 0.64px;
text-align: left;
padding:15px 20px;
text-transform:uppercase;
}
的functions.php
可以在functions.php或添加此您在functions.php文件中包含的單獨文件。這是AJAX回調函數，本地化爲您admin-ajax.php等
<?php
/********* AJAX Login ***********/
function yourtheme_ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery'));
wp_enqueue_script('ajax-login-script');
wp_localize_script('ajax-login-script', 'ajax_login_object', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'redirecturl' => home_url(),
'loadingmessage' => esc_html__('Sending user info, please wait...', 'yourtheme')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action('wp_ajax_nopriv_ajaxlogin', 'ajax_login');
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'yourtheme_ajax_login_init');
}
if (!function_exists('ajax_login')) {
function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer('ajax-login-nonce', 'security');
// Nonce is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signon = wp_signon($info, false);
if (is_wp_error($user_signon)){
echo json_encode(array('loggedin'=>false, 'message'=> esc_html__('Wrong username or password.', 'yourtheme')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=> esc_html__('Login successful, redirecting...', 'yourtheme')));
}
die();
}
}
/********* AJAX Registration ***********/
add_action('wp_ajax_register_action', 'yourtheme_handle_registration');
add_action('wp_ajax_nopriv_register_action', 'yourtheme_handle_registration');
if (!function_exists('yourtheme_handle_registration')) {
function yourtheme_handle_registration(){
if($_POST['action'] == 'register_action') {
$error = '';
$uname = trim($_POST['username']);
$email = trim($_POST['mail_id']);
$fname = trim($_POST['firname']);
$lname = trim($_POST['lasname']);
if(empty($_POST['username']))
$error .= '<p class="error">'.esc_html__('Enter username', 'yourtheme').'</p>';
if(empty($_POST['mail_id']))
$error .= '<p class="error">'.esc_html_('Enter email', 'yourtheme').'</p>';
elseif(!filter_var($email, FILTER_VALIDATE_EMAIL))
$error .= '<p class="error">'.esc_html__('Enter valid email', 'yourtheme').'</p>';
if(empty($_POST['firname']))
$error .= '<p class="error">'.esc_html__('Enter first name', 'yourtheme').'</p>';
elseif(!preg_match("/^[a-zA-Z'-]+$/",$fname))
$error .= '<p class="error">'.esc_html__('Enter valid first name', 'yourtheme').'</p>';
if(empty($_POST['lasname']))
$error .= '<p class="error">'.esc_html__('Enter last name', 'yourtheme').'</p>';
elseif(!preg_match("/^[a-zA-Z'-]+$/",$lname))
$error .= '<p class="error">'.esc_html__('Enter valid last name', 'yourtheme').'</p>';
if(empty($error)){
$status = wp_create_user($uname, $email);
if(is_wp_error($status)){
$msg = '';
foreach($status->errors as $key=>$val){
foreach($val as $k=>$v){
$msg = '<p class="error">'.$v.'</p>';
}
}
echo $msg;
} else{
$msg = '<p class="success">'.esc_html__('Registration successful!', 'yourtheme').'</p>';
echo $msg;
}
} else{
echo $error;
}
die(1);
}
}
}
add_action('user_register', 'yourtheme_register_user_metadata');
add_action('profile_update', 'yourtheme_register_user_metadata');
if (!function_exists('yourtheme_register_user_metadata')) {
function yourtheme_register_user_metadata($user_id){
if(!empty($_POST['firname']) && !empty($_POST['lasname']) && !empty($_POST['username']) && !empty($_POST['mail_id'])){
update_user_meta($user_id, 'first_name', trim($_POST['firname']));
update_user_meta($user_id, 'last_name', trim($_POST['lasname']));
update_user_meta($user_id, 'username', trim($_POST['username']));
update_user_meta($user_id, 'mail_id', trim($_POST['mail_id']));
}
update_user_meta($user_id, 'show_admin_bar_front', false);
}
}
AJAX爲登錄的script.js
實際AJAX調用和展示和點擊隱藏登錄框。
jQuery(document).ready(function($) {
"use strict";
// Show the login dialog box on click
$('a#show_login').on('click', function(e){
$('.ajax_login_overlay').fadeIn(500);
$('form#login').fadeIn(500);
e.preventDefault();
});
$('.ajax_login_overlay').on('click', function(e){
$('form#login').fadeOut(500);
$('.ajax_login_overlay').fadeOut(500);
$('form#register_form').hide();
$('.ajax_login .status').html('');
$('#registration-error-message').html('');
$('form#login').hide();
$('form#register_form .field input').val('');
});
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin === true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
//Register
$('a#show_register').on('click', function(e){
$('.ajax_login_overlay').fadeIn(500);
$('form#register_form').fadeIn(500);
e.preventDefault();
});
$(document).on('click', '#register-me', function(){
var action = 'register_action';
var username = $("#yourtheme_register-username").val();
var mail_id = $("#yourtheme_register-email").val();
var firname = $("#yourtheme_register-fname").val();
var lasname = $("#yourtheme_register-lname").val();
var ajaxdata = {
action: 'register_action',
username: username,
mail_id: mail_id,
firname: firname,
lasname: lasname,
};
$.post(ajax_login_object.ajaxurl, ajaxdata, function(res){
$("#registration-error-message").html(res);
});
});
});
現在，我測試了這一點，它的工作原理，但它需要更多的測試/驗證檢查，當你創建一個用戶和記錄特別是安全性（消毒等等。）。這不是100％我的代碼，我發現它在網上一堆，並把它整合成一個。仍然需要改進imo。
希望這可以幫助，我打算寫一個完整的教程關於這個，一旦我找到時間:)
相關問題
- 1. WordPress僅在前端加載動態CSS
- 2. 如何在前端加載'admin-ajax.php'
- 3. 我可以只在Wordpress的前端加載插件嗎？
- 4. 是否在前端加載了WordPress管理插件？
- 5. 在Wordpress前端添加選中
- 6. Wordpress - 如何在加載之前修改精選圖片的URI
- 7. 如何獲得前端頭像WordPress的
- 8. WordPress的前端Ajax
- 9. WordPress的前端PM
- 10. Wordpress Plugin的前端
- 11. 如何在wordpress後端添加腳本？
- 12. Wordpress插件添加頁面前端
- 13. WordPress前端發帖
- 14. Laravel和WordPress前端
- 15. Magento無法在前端加載模塊
- 16. 在Joomla Backend中加載前端模塊
- 17. 無法在Rails中加載Resque前端
- 18. 如何設計WordPress cusom字段？ （WordPress的用戶前端專業）
- 19. 如何將WordPress jQuery庫添加到前端
- 20. WordPress：如何從前端添加帖子與功能圖片
- 21. 如何使用ag網格在前端加載4000條記錄
- 22. 如何在前端加載本地腳本？
- 23. 從前端加載的DLL調用函數javascript（加載DLL在客戶端JavaScript）
- 24. Wordpress的Flex-Flash前端
- 25. WordPress的wp_enqueue_script不是前端
- 26. 如何在WordPress插件中加載Javascript
- 27. 如何將後端＆前端中的wordpress與docker容器分開？
- 28. WordPress後端菜單項無法加載
- 29. 前端Java，後端C++，如何加入？
- 30. 如何在magento前端添加菜單
不，你不想這樣做。實際上，我懷疑它不能用AJAX完成。獲取更好的社交登錄插件，它應該將這些方法放在wp_login_form中。 –
@cale_b你能詳細說明爲什麼不應該這樣做嗎？任何特殊的缺點？ –