[PHP] Wordpress 客製頁面模板 @ 工程的日子每天都很師

我們在新增頁面的時候可以看到右側欄會有模板可以選擇，常遇到的一種情況就是，默認模板不符合需求的 Layout，這個時候我們就可以客製屬於自己的模板！

這邊以一個簡單的範例來做說明，假設我現在要建立一個模板叫做 "會員登入" ，那必須先到 "/wp-content/themes/主題/" 目錄下新增一個檔案叫做 user-login.php，當然也可以建一個叫做 user 的資料夾來放 user 相關的模板 (ex. /主題/user/user-login.php)，看個人整理模板與檔案取名的習慣。

建立之後打開 user-login.php 進行編輯，首先要再開頭的地方添加　"template name: 會員登入"。

添加完後，我們在後台新增頁面的時候就可以看到我們自己建立的模板了！

我們再來繼續完成會員登入頁面，繼 template name 後添加下方的 Code。

<?php get_header(); ?>
 
<style>
ul.primary {
    border-collapse: collapse;
    padding: 0 0 0 1em;
    white-space: nowrap;
    list-style: none;
    margin: 5px;
    height: auto;
    line-height: normal;
    border-bottom: 1px solid #bbb;
}
ul.primary li {
    display: inline;
}
ul.primary li.active a {
    background-color: #fff;
    border: 1px solid #bbb;
    border-bottom: #fff 1px solid;
}
ul.primary li a {
    background-color: #ddd;
    border-color: #bbb;
    border-width: 1px;
    border-style: solid solid none solid;
    height: auto;
    margin-right: 0.5em;
    padding: 0 1em;
    text-decoration: none;
}
.um{
opacity:initial;
}
.um-15223,.um{
margin-left:initial;
}
</style>
 
<div class="logobar">
<div id="primary" class="site-content">
<div id="content" role="main">
    <div class="newstop"></div>
<div id="tabs-wrapper" class="clear-block">
    <ul class="tabs primary">
        <li><a href="/user/register">创建新帐号</a></li>
        <li class="active"><a href="/user">登录</a></li>
    </ul>
</div>
<?php echo do_shortcode("[ultimatemember form_id=15222]");?>
 
</div><!-- #content -->
</div><!-- #primary -->
 
<?php get_sidebar(); ?>
</div>
 
<?php get_footer(); ?>

顯示的結果如下圖：

但我相信一定不會跟我長一樣！因為會用到一個外掛，除非你已經偷偷安裝了~ 外掛名稱為 ultimate member，因為方便呈現所以引用此外掛的功能，當然它功能也是相當豐富，有機會也可以載來使用。

這邊順便介紹一些 WordPress 提供的功能，我們可以看到程式碼中有幾個 function如下：

get_header()
get_sidebar()
get_footer()
do_shortcode(“[ultimatemember form_id=15222]")

以會員登入為例，我們除了會員登入的表單以外我們還是需要網站的頁首、頁尾與側欄，我們只要利用 get_header() 就可以取得主題的頁首，利用 get_sidebar() 就可以取得側欄，利用 get_footer() 可以取得頁尾，這養使得製作模板非常的彈性，也非常的快速。

你可能會有疑問，那 do_shortcode function 的用途是什麼? wordpress 有提供一個功能，可以將一大串程式碼製作成一段字串，之後便可利用字串來取代那些攏長的程式碼，而 do_shortcode 便是執行這些簡化過後的字串的功能，而如何製作 shortCode 會再另外介紹!