在使用 WordPress 時常可以看到一些短代碼外掛，只要在文章或是頁面內容裡添加 [XXX_XXX] 短代碼，就可以把固定的內容插入到頁面顯示，最常見就是輸入表單，可以在不需要製作頁面範本的情況下快速產生頁面，短代碼運用範圍很廣，像是登入、修改帳密、搜尋…等等，這些好像是大多數人會想要的，目的就是不想讓前端使用者進入後台😏，差別只在於要先準備好要插入的內容，如果插入的內容可自定，是一個相當方便的功能，也不會侷限在現有的外掛上。
自製外掛起手式
＊一句老話，程式碼要放在佈景主題的 function 裡，還是要放在外掛裡，來使用這功能都可，外掛起手式這裡不再詳述，去看WordPress custom post type 如何自訂文章類型這篇😃
在本機建立伺服器環境
＊要在本機建立 PHP、阿帕契網站環境可以看這篇如何使用 Python 爬取原價屋價目列表😜，別辛苦在遠端測試所寫的程式。
創建自訂短代碼
下面程式碼為短代碼的基本格式，一切都從基礎開始。
//這名稱↓↓↓↓↓↓↓可以改
function my_shortcode() {
return '要顯示的短碼內容';
}
add_shortcode( 'shortcode_name', 'my_shortcode' );
// ↑↑↑↑↑↑↑上面↑箭頭指的位置程式碼會建立一個名為 [shortcode_name] 的短代碼名稱，當 WordPress 在文章或頁面中遇到該短碼時，會自動輸出 ‘要顯示的短碼內容’ 的文字，要顯示什麼樣的內容就從這裡開始，好啦！這片教學就到這邊結束，感謝各位看到最後，後面繼續把範例補上。
建立前端登入短代碼
登入的輸入表單可以大幅度自訂，可以不用使用 WordPress 內建的登入框架與畫面，只要開個頁面插入短代碼就有自訂的登入頁面，下面為最簡單的登入表單範例，如要符合需求請自行修改。
function my_shortcode() {
//這個位置可以寫一些對表單控制，或是插入表單時所要載入的CSS或JS。
?>
<div class="container px-5 my-5">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong mb-3">
<div class="card-body p-5 text-center">
<h3 class="mb-4">登入</h3>
<form action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="POST">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="user_login" name="log" placeholder="使用者名稱或電子郵件">
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="user_pass" name="pwd"
placeholder="密碼">
</div>
<button class="w-100 btn btn-lg btn-primary" id="submitButton" type="submit" name="redirect_to"
value="<?php echo home_url(); ?>">登入</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
add_shortcode( 'shortcode_name', 'my_shortcode' );你會發現上面的 html 結構非常簡單，對於 form 要在前台正常運作，主要是要把表單的資料送去哪？action 就是要把登入資料送去給 wp-login.php 做登入，為了不讓登入後進入後台，在登入按鈕加入跳位置，讓登入後直接進入首頁，在按鈕加入 home_url(); 可以在下圖看到瀏覽器檢查看到轉向的網址，當然以可以自訂跳轉位置，將短代碼貼到頁面裡，再到前台就可以看到登入畫面。
從外掛載入CSS
如果直接使用上程式碼複製貼上，產生短代碼，應該不會看到跟上圖一樣的樣式，上面 html 表單樣式是用 bootstrap，如果你的佈景主題不是用 bootstrap 就不會看到跟上圖一樣的畫面，可以在表單上面添加載入CSS，當然檔案放在外掛裡面，另外上面圖片會發現，已經登入了為什麼？還可以看到登入表單，再加上登入檢查，如果已經登入會跳轉首頁，未登入會顯示登入標單，程式碼入下：
function my_shortcode() {
//連結外掛根目錄內的CSS檔案
wp_enqueue_style('bootstrap', plugins_url('/css/bootstrap.css', __FILE__));
//檢查登入狀態
if ( !is_user_logged_in() ) {
?>
<div class="container px-5 my-5">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong mb-3">
<div class="card-body p-5 text-center">
<h3 class="mb-4">登入</h3>
<form action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="POST">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="user_login" name="log" placeholder="使用者名稱或電子郵件">
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="user_pass" name="pwd"
placeholder="密碼">
</div>
<button class="w-100 btn btn-lg btn-primary" id="submitButton" type="submit" name="redirect_to"
value="<?php echo home_url(); ?>">登入</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
}else {
//已登入跳轉首頁
wp_redirect( home_url() );
}
}
add_shortcode( 'shortcode_name', 'my_shortcode' );指定頁面載入CSS
佈景主題不是使用 bootstrap 網頁框架，一直載入 bootstrap CSS 會干擾到主題的 CSS 樣式，所以只希望在登入頁面載入 bootstrap CSS 可以添加判斷式，判斷頁面代稱才載入CSS，程式碼如下：
function my_shortcode() {
//綁定頁面代稱 載入CSS
if( is_page( array('login')) ) {
//連結外掛根目錄內的CSS檔案
wp_enqueue_style('bootstrap', plugins_url('/css/bootstrap.css', __FILE__));
}
//檢查登入狀態
if ( !is_user_logged_in() ) {
?>
<div class="container px-5 my-5">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong mb-3">
<div class="card-body p-5 text-center">
<h3 class="mb-4">登入</h3>
<form action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="POST">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="user_login" name="log" placeholder="使用者名稱或電子郵件">
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="user_pass" name="pwd"
placeholder="密碼">
</div>
<button class="w-100 btn btn-lg btn-primary" id="submitButton" type="submit" name="redirect_to"
value="<?php echo home_url(); ?>">登入</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
}else {
//已登入跳轉首頁
wp_redirect( home_url() );
}
}
add_shortcode( 'shortcode_name', 'my_shortcode' );以上就是短代碼最常見的用法，要載入的內容就可以由自己決定，如何運用就要看各人需求了！這個教學就到這邊，掰～！
留言