下面跟着小编一起来学习如何做,一步一步跟着步骤操作

首先,我们需要创建一个自定义页面模板。在主题文件夹中创建一个名为“template-user.php”的新文件。在该文件中添加以下代码:


/*
Template Name: User Center
*/

get_header(); //获取头部

if ( is_user_logged_in() ) { //判断用户是否已经登录
$user_id = get_current_user_id(); //获取当前用户ID
$user_info = get_userdata($user_id); //获取当前用户信息
?>

<div class=”user-center”>
<div class=”user-info”>
<h2>Welcome <?php echo $user_info->user_nicename; ?></h2>
<p><strong>Email:</strong> <?php echo $user_info->user_email; ?></p>
<p><strong>Registered:</strong> <?php echo $user_info->user_registered; ?></p>
</div>

<div class=”user-settings”>
<h3>Customize Background Image</h3>
<form id=”background-form” method=”post” enctype=”multipart/form-data”>
<?php wp_nonce_field( ‘update_background’, ‘background_nonce’ ); ?>
<input type=”hidden” name=”action” value=”update_background”>
<input type=”file” name=”background”>
<input type=”submit” value=”Update Background”>
</form>
</div>
</div>

<style>
.user-center {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.user-info, .user-settings {
width: 48%;
margin-bottom: 30px;
padding: 20px;
box-sizing: border-box;
}

.user-info {
background-color: #f7f7f7;
}

.user-settings {
background-color: #fff;
}

.user-settings h3 {
margin-top: 0;
}
</style>

<?php
} else {
wp_redirect( home_url() ); //如果用户未登录,则重定向到网站首页
}

get_footer(); //获取底部

在上面的代码中,我们创建了一个名为“User Center”的页面模板,并添加了一个自定义背景图片上传表单(包括安全性检查)。此外,我们还列出了当前用户的基本信息。

接下来,我们需要添加处理表单提交的代码。在functions.php文件中添加以下代码:

function update_background() {
if ( isset( $_POST[‘action’] ) && $_POST[‘action’] == ‘update_background’ ) {
if ( ! wp_verify_nonce( $_POST[‘background_nonce’], ‘update_background’ ) ) {
die( ‘Security check failed.’ );
}

$upload_dir = wp_upload_dir();
$file = $_FILES[‘background’];

if ( ! empty( $file ) ) {
$file_temp = $file[‘tmp_name’];
$file_name = $file[‘name’];

//如果文件已经存在,删除之前的文件
if ( file_exists( $upload_dir[‘basedir’] . ‘/user-background/’ . $file_name ) ) {
unlink( $upload_dir[‘basedir’] . ‘/user-background/’ . $file_name );
}

//上传新的文件
move_uploaded_file( $file_temp, $upload_dir[‘basedir’] . ‘/user-background/’ . $file_name );
}
}
}
add_action( ‘init’, ‘update_background’ );

上述代码将创建一个名为“user-background”的新文件夹,用于存储用户上传的背景图片。我们还添加了一个安全性检查,以防止非授权用户上传文件。如果用户已经上传了一个背景图片,该代码可以删除旧文件并将其替换为新文件。

最后,我们需要在页面模板中添加代码来显示用户选择的背景图片。在上面的页面模板中添加以下代码:

<style>
.user-center {
<?php
$background_url = get_stylesheet_directory_uri() . '/user-background/' . $user_id . '.jpg';
if ( file_exists( get_stylesheet_directory() . '/user-background/' . $user_id . '.jpg' ) ) {
echo 'background-image: url(' . $background_url . ');';
}
?>
}
</style>

上述代码将检查用户是否已经选择了一个背景图片,并将其设置为页面背景图片。

现在,我们已经完成了一个简单的WordPress用户中心页面,允许用户自定义背景图片。需要注意的是,我们还需要确保用户上传的图片没有超出文件大小限制,并且需要使用图像处理软件来对上传的图像进行调整和优化。

发表回复

后才能评论