ผมเคยทำเว็บให้ลูกค้าด้วยเวิร์ดเพรส หน้าล้อกอินที่ยังไม่ได้แก้ไขใดๆ ดูมันจะไม่สวยไม่งามและไม่โปร แบบว่ามันมีคำว่าเวิร์ดเพรสหราอยู่ในนั้น ผมก็เลยต้องโม หรือในบางเวลาที่ไม่มีอะไรทำ (มีทำแต่ไม่อยากทำอันนั้น) ก็นั่งโมหน้าล้อกอินเวิร์ดเพรสเล่น ก็มี เคยจะเขียนบทความอธิบายหลายทีแล้ว แต่ก็ขี้คร้าน

คราวนี้เห็นจะไม่ได้ เพราะได้ไปสัญญาในกลุ่ม ชมรม คนทำเวิร์ดเพรส(WordPress-Thailand) (อาศัยช่วงชุลมุนแฝงโฆษณาซะหน่อย) ว่าถ้ามีสมาชิกครบ 50 คน จะเขียนบทความเรื่องแต่งหน้าล้อกอินให้อ่าน จัดไปตามนั้น

สิ่งที่เราจะต้องทำก่อนเลยคือ ติดตั้งปลักอิน Theme My Login ดาวน์โหลดได้จากที่นี่ http://wordpress.org/extend/plugins/theme-my-login/ แล้ว Activate ซะ

จากนั้นไปหาหน้าตาล้อกอินที่เขาตัดเป็น HTML แต่ง CSS ไว้พร้อมแล้ว มา เข้าไปดาวน์โหลดจากที่นี่ครับ http://www.freshdesignweb.com/beautiful-css-html-login-form-templates.html ตัวแรก Dark Login Form (ลองฝึกทำจากตัวนี้ ต่อไปทำเป็นแล้ว อยากจะใช้ล้อกอินแบบไหนก็ได้ ออกแบบเอาเอง ตัด HTML เองก็ได้)

เมื่อได้ไฟล์มาแล้ว ระเบิดซิปออก เอาไฟล์ข้างในทั้งหมดไปทิ้งไว้ในโฟลเดอร์ธีมปัจจุบัน ของท่าน

เราจะทำงานกันในโฟลเดอร์ธีมปัจจุบันนะครับ จะได้ไม่ต้องถามว่าสร้างไฟล์เก็บไว้ที่ไหนอะไรทำนองนี้

เอาละครับเริ่มโม

สร้างไฟล์ ชื่อ theme-my-login.php
ใส่โค้ดนี้เข้าไป มันเป็นโค้ดสำหรับสร้าง custom template ในเวิร์ดเพรส

<?php
/**
 * Template Name: Template Login
 */
?>

เปิดไฟล์ ชื่อ index.html ขึ้นมา(มันมาจากไฟล์ซิป) ก้อปปี้โค้ดที่อยู่ข้างในทั้งหมดไปวางในไฟล์ theme-my-login.php ตอนนี้ไฟล์ theme-my-login.php ก็จะมีโค้ดอยู่ข้างในแบบนี้

<?php
/**
 * Template Name: Template Login
 */
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Dark Login Form</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <form method="post" action="index.html" class="login">
    <p>
      <label for="login">Email:</label>
      <input type="text" name="login" id="login" value="[email protected]">
    </p>
 
    <p>
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="4815162342">
    </p>
 
    <p class="login-submit">
      <button type="submit" class="login-button">Login</button>
    </p>
 
    <p class="forgot-password"><a href="index.html">Forgot your password?</a></p>
  </form>
 
  <section class="about">
    <p class="about-links">
      <a href="http://www.cssflow.com/snippets/dark-login-form" target="_parent">View Article</a>
      <a href="http://www.cssflow.com/snippets/dark-login-form.zip" target="_parent">Download</a>
    </p>
    <p class="about-author">
      &copy; 2012&ndash;2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
      <a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
      Original PSD by <a href="http://365psd.com/day/2-234/" target="_blank">Rich McNabb</a>
  </section>
</body>
</html>

แก้ไขบรรทัดที่ 10

<link rel="stylesheet" href="css/style.css">

ให้เป็น

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/css/style.css">

จากนั้น cut ข้อมูลทั้งหมดที่อยู่ใน body ออก ไส่คำสั่งนี้เข้าไปแทน

<?php theme_my_login( array( 'login_template' => 'theme-my-login-form.php' ) ); ?>

โค้ดสำเร็จของไฟล์ theme-my-login.php เป็นดังนี้ เซฟซะ

<?php
/**
 * Template Name: Template Login
 */
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Dark Login Form</title>
  <link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/css/style.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <?php theme_my_login( array( 'login_template' => 'theme-my-login-form.php' ) ); ?>
</body>
</html>

สร้างไฟล์ชื่อ theme-my-login-form.php แล้ว paste โค้ดที่ cut ไว้จากข้อข้างบนลงไป

<form method="post" action="index.html" class="login">
    <p>
      <label for="login">Email:</label>
      <input type="text" name="login" id="login" value="[email protected]">
    </p>
 
    <p>
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="4815162342">
    </p>
 
    <p class="login-submit">
      <button type="submit" class="login-button">Login</button>
    </p>
 
    <p class="forgot-password"><a href="index.html">Forgot your password?</a></p>
  </form>
 
  <section class="about">
    <p class="about-links">
      <a href="http://www.cssflow.com/snippets/dark-login-form" target="_parent">View Article</a>
      <a href="http://www.cssflow.com/snippets/dark-login-form.zip" target="_parent">Download</a>
    </p>
    <p class="about-author">
      &copy; 2012&ndash;2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
      <a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
      Original PSD by <a href="http://365psd.com/day/2-234/" target="_blank">Rich McNabb</a>
  </section>

จากนั้นแก้ให้เป็นดังนี้ สังเกตุดูนะผมแก้แค่ action ของฟอร์มกับชื่อกล่องป้อน Username, Password, ปุ่ม submit เท่านั้น เซฟซะ

<form method="post" action="<?php $template->the_action_url( 'login' ); ?>" class="login">
    <p>
      <label for="login">Username:</label>
      <input type="text" name="log" id="log" value="<?php $template->the_posted_value( 'log' ); ?>">
    </p>
 
    <p>
      <label for="password">Password:</label>
      <input type="password" name="pwd" id="pwd" value="">
    </p>
 
    <p class="login-submit">
      <button type="submit" name="wp-submit" class="login-button">Login</button>
    </p>
 
    <p class="forgot-password"><a href="index.html">Forgot your password?</a></p>
  </form>
 
  <section class="about">
    <p class="about-links">
      <a href="http://www.cssflow.com/snippets/dark-login-form" target="_parent">View Article</a>
      <a href="http://www.cssflow.com/snippets/dark-login-form.zip" target="_parent">Download</a>
    </p>
    <p class="about-author">
      &copy; 2012&ndash;2013 <a href="http://thibaut.me" target="_blank">Thibaut Courouble</a> -
      <a href="http://www.cssflow.com/mit-license" target="_blank">MIT License</a><br>
      Original PSD by <a href="http://365psd.com/day/2-234/" target="_blank">Rich McNabb</a>
  </section>

ในส่วนของโค้ด สร้างไฟล์ 2 ไฟล์ กับตัดแปะแค่นี้แหละ

ขั้นตอนสุดท้ายเราจะเรียกใช้งาน ให้ล้อกอินเข้าระบบ ไปที่เมนู Pages > All Pages คลิก Edit หน้า Login ไม่ต้องสงสัยนะว่ามันมาได้ยังไง มันมาจากตอนที่เรา activate ปลักอิน Theme My Login โน่นแหละ มันสร้างหน้าให้เราอัตโนมัติ 5 หน้า

เคลียร์เนื้อหาในช่อง content ออกให้หมด และเลือก Template Login ในลิสต์ Template เสร็จกดปุ่ม Update
modify-login-screen-1

ลองล้อกเอ้าท์ดู เป็นไง ให้มันรู้ซะบ้างไผเป็นไผ
modify-login-screen-2

วิธีที่ผมนำเสนอนี้ ผมรับประกันว่าเป็นวิธีที่ดีที่สุด วิธีนี้ทำให้คุณปรับเปลี่ยนดีไซด์ได้อย่างไร้ขีดจำกัด ไม่ใช่เพียงแค่เปลี่ยนแบล็กกราวด์และสีปุ่ม

หน้าล้อกอินที่ทำกันไป ลิ้งก์ลืมรหัสผ่านยังผิดอยู่ และมีกล่องที่ไม่พึงปรารถนาแสดงอยู่ ลบและแก้ไขเพิ่มเติมเองนะครับ var_dump ตัวแปร $template ออกมาดูก็ได้ถ้าอยากรู้ว่าปลักอินตัวนี้เตรียมอะไรมาให้ใช้บ้าง

login password
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ