ผมเคยทำเว็บให้ลูกค้าด้วยเวิร์ดเพรส หน้าล้อกอินที่ยังไม่ได้แก้ไขใดๆ ดูมันจะไม่สวยไม่งามและไม่โปร แบบว่ามันมีคำว่าเวิร์ดเพรสหราอยู่ในนั้น ผมก็เลยต้องโม หรือในบางเวลาที่ไม่มีอะไรทำ (มีทำแต่ไม่อยากทำอันนั้น) ก็นั่งโมหน้าล้อกอินเวิร์ดเพรสเล่น ก็มี เคยจะเขียนบทความอธิบายหลายทีแล้ว แต่ก็ขี้คร้าน
คราวนี้เห็นจะไม่ได้ เพราะได้ไปสัญญาในกลุ่ม
ชมรม คนทำเวิร์ดเพรส(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="name@example.com"> </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"> © 2012–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
| <linkrel="stylesheet"href="css/style.css"> |
ให้เป็น
| <linkrel="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="name@example.com"> </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"> © 2012–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"> © 2012–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
ลองล้อกเอ้าท์ดู เป็นไง ให้มันรู้ซะบ้างไผเป็นไผ
วิธีที่ผมนำเสนอนี้ ผมรับประกันว่าเป็นวิธีที่ดีที่สุด วิธีนี้ทำให้คุณปรับเปลี่ยนดีไซด์ได้อย่างไร้ขีดจำกัด ไม่ใช่เพียงแค่เปลี่ยนแบล็กกราวด์และสีปุ่ม
หน้าล้อกอินที่ทำกันไป ลิ้งก์ลืมรหัสผ่านยังผิดอยู่ และมีกล่องที่ไม่พึงปรารถนาแสดงอยู่ ลบและแก้ไขเพิ่มเติมเองนะครับ var_dump ตัวแปร $template ออกมาดูก็ได้ถ้าอยากรู้ว่าปลักอินตัวนี้เตรียมอะไรมาให้ใช้บ้าง
ที่มา:
http://www.select2web.com/wordpress/modify-login-screen.html
