WordPressで簡易ログイン画面を作ったので、メモしておく
header-front.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">//iPhoneで番号を電話番号としない設定
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
</head>
<body class="green">
<header class="header">
<div class="header_inner">
<p class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png">
</p>
</div>
</header>
front-page.php
<?php
session_start();
//ログイン機能
$message = '';
if(isset($_POST['thelogin'])){
//IDとパスワード指定：IDはtheIDを使う、PWはthepasswordを使う
if ($_POST['theId'] == '2020' && $_POST['thepassword'] == '5999' || $_POST['theId'] == '12341234' && $_POST['thepassword'] == '12341234'){
$_SESSION["USER"] = 'NichinareUser';
wp_redirect('https://*****.jp');//ログイン後の画面のURLを設定
exit;
}
else{
$message = 'IDかパスワードが間違っています。';//エラーテキストを設定
}
}
?>
<?php get_header("front"); ?>//header-front.phpというファイルを利用する
<main>
<div class="inner">
<p class="error_text"><?php echo $message ?></p>//エラーテキスト表示エリア
<form method="post" action="">
<div class="cp_iptxt">
<input class="ef" type="number" placeholder="" id="theId" name="theId" required>
<label for="theId"><i class="fas fa-id-badge"></i>ID</label>
<span class="focus_line"></span>
</div>
<div class="cp_iptxt">
<input class="ef" type="password" placeholder="" id="password" name="thepassword" required>
<label for="password"><i class="fas fa-lock"></i>パスワード</label>
<span class="focus_line"></span>
</div>
<input type="submit" name="thelogin" value="ログイン" class="btn_submit orange">
</form>
</div>
</main>
<?php get_footer(); ?>
header-page.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
<script src="<?php bloginfo('template_directory'); ?>/js/all.js" type="text/javascript"></script>
</head>
<body class="green">
<header class="header">
<div class="header_inner">
<p class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png">
</p>
</div>
</header>
page.php
<?php
/*
Template Name: トップ画面
*/
?>
<?php
session_start();
if (!isset($_SESSION['USER'])=='theUSER') {
header('Location: https://login.com);//違ったらログイン画面に戻る
}
//ログアウト機能
if(isset($_POST['logout'])){
$_SESSION = [];
session_destroy();
header('Location: https://login.com');
exit;
}
if (isset($_SESSION['USER'])=='theUSER') {
//セッションcookieを破棄します
setcookie(session_name(), '', time() - 10, '/');
}
//最終的にセッションを破棄します
session_destroy();
?>
<?php get_header("page"); ?>
<main>
<section>
<p class="title"><img src="<?php bloginfo('template_directory'); ?>/images/title.png"></p>
<?php
// ① ↓ 今現在のページ位置を取得
$paged = (int) get_query_var('paged');
$args = array(
// ② get_option('posts_per_page') ← で管理画面で設定した、記事一覧で表示するページ数を取得
'posts_per_page' => get_option('posts_per_page'),
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
'paged' => $paged,
'orderby' => 'post_date',
'cat' => '3',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
// 記事一覧のループスタート
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="inner nc_info">
<?php the_content(); ?>
<?
//テキスト
$txt = get_field('n_heading');
if($txt){ ?><p><? echo $txt; ?></p>
<? } ?>
<?
//Wysiwyg エディタ
$editor = get_field('n_contents');
if($editor){ ?><p><? echo $editor; ?></p>
<? } ?>
</div>
<?php
endwhile;
endif;
// 記事一覧のループ終わり
wp_reset_postdata();
?>
<?php
// ① ↓ 今現在のページ位置を取得
$paged = (int) get_query_var('paged');
$args = array(
// ② get_option('posts_per_page') ← で管理画面で設定した、記事一覧で表示するページ数を取得
'posts_per_page' => get_option('posts_per_page'),
// ③ (int) get_query_var('paged') ← で取得した、$pagedを挿入
'paged' => $paged,
'orderby' => 'post_date',
'cat' => '2',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
// 記事一覧のループスタート
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="inner" style="margin-bottom:10px;">
<?php the_content(); ?>
<?
//テキスト
$txt = get_field('n_heading');
if($txt){ ?><p><? echo $txt; ?></p>
<? } ?>
<?
//Wysiwyg エディタ
$editor = get_field('n_contents');
if($editor){ ?><p><? echo $editor; ?></p>
<? } ?>
</div>
<?php
endwhile;
endif;
// 記事一覧のループ終わり
wp_reset_postdata();
?>
<div class="inner">
<!--固定画面で入力した内容を表示-->
<?php
$page_data = get_page_by_path('ここにスラッグ'); $page = get_post($page_data);
$content = $page -> post_content;
// 本文を表示する
echo $content;
?>
<!--//固定画面で入力した内容を表示-->
<!--ログアウトボタン-->
<form method="post" action="">
<input type="submit" name="logout" value="ログアウト">
</form>
<!--//ログアウトボタン-->
</div>
</section>
</main>
<?php get_footer(); ?>
(Visited 81 times, 1 visits today)