十月 24, 2016 | 後端和Drupal

簡單的自訂form的架構，打造出專屬於你網站的炫炮登入介面！

還在對於Drupal的登入form不是你想要的結構而頭大嗎?還在用css或js硬幹樣式嗎?快來看看！使用theme form來打造你想要的登入form結構吧！

前言

在我們開始之前，讀者們可能會覺得，登入不過就是帳號、密碼和登入按鈕，有什麼好打造的，又或是覺得，『不會啊～我覺得Drupal原生的登入介面就不錯看了』，可是當你看到別人的網站是......

這個

或是這個

而你的永遠都是這個

或是這個

你還會覺得不錯看或是沒什麼嗎！！！

也許充滿的藝術細胞的你們早就有想要改變自己網站的登入介面的想法，又或是身為前端工程師的你早就已經開工了，但既然你們會在這看小編廢話，一定跟小編一樣，是個Drupal超級菜鳥，遇到了跟小編一樣的問題，天啊～！這個登入介面的表單，根本不是我要的架構啊！！！

也或許你只是無聊看看而已啦......

Anyway~今天小編就來教各位如何使用theme form template來把登入介面的架構變成自己想要的吧！

當然！你也可以直接用css或js硬幹..........

Theme Form Template

這種方法牽涉到很多Drupal深層的架構以及規則，在此就不多作說明了，我們這邊就只教各位操作的方法！

在開始之前請先各位安裝一個很重要的模組Devel以及把登入區塊拉到你看得到的地方～～

首先打開你的drupal資料夾並進入你現在正在使用主題的資料夾內。

這邊建議你使用自己下載的主題，例如：Zen

這邊我們就以Drupal原生的主題bartik來做示範～！

用文字編輯器打開theme資料夾內的template.php (如上圖)，並在文件內最下面新增下方這段

function name_theme($existing, $type, $theme, $path){  
 $base = array(  
    'render element' => 'form',  
    'path' => drupal_get_path('theme', 'name') . '/templates/forms',
  );  
  return array(  
   'user_login_block' => $base + array(  
    'template' => 'user-login-block',  
     ),  
 );  
}

像是這樣子

然後把所有的name換成你現在在使用的theme名稱

接著在template的資料夾底下新增一個forms的資料夾，並在裡面新增一個user-login-block.tpl.php的文件。

接下來到了重頭戲，也是最複雜的時候囉！！

先開啟devel的模組，並把權限改成匿名使用者也可以使用，然後登出！

改成匿名使用者個原因是因為，你必須要登出之後才看得到原本的登入區塊

接著在template加入下面那段，並且清掉快取。

記得一樣要把name改成theme的名稱喔！！

function bartik_preprocess_user_login_block(&$variables) {
dpm($variables);
}

這時你會發現網頁上突然出現了黃黃的東西

這邊簡單解釋一下，這個黃黃的表格是把目前頁面上所有form的變數吐出來，我們主要要做的，就是針對這些變數來指定他出現的方式，來改變整個form的架構～

我們先來看看原本form的架構

從原始碼可以看到他的架構就是用一個form包著所有的欄位，沒有其他的東西了～沒錯！沒有其他東西了！有寫過前台的人都知道，一個大物件裡面的小物件若是沒有wrapper，那在撰寫樣式的時候，是非常非常不方便的事情！！！

所以接下來我們就是要利用這些黃色表格裡面的變數，來針對我們要的東西幫他來包些wrapper~!

從裡面可以找到name、pass、link、actions這4個東西，也是我們需要的東西。

簡單對照一下

找到了我們要的東西之後回到剛剛建立的user-login-block.tpl.php的文件，並把下面這對貼進去

<?php
print "<div class='test'>".render($form['name']).render($form['pass'])."</div>";
print"<div class='test_2'>".render($form['links']).render($form['actions'])."</div>";
print drupal_render_children($form);
?>