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

還在對於Drupal的登入form不是你想要的結構而頭大嗎?還在用css或js硬幹樣式嗎?快來看看！使用theme form來打造你想要的登入form結構吧！ Jumptonavigation 您在這裡首頁»後端研究室»簡單的自訂form的架構，打造出專屬於你網站的炫炮登入介面！ 簡單的自訂form的架構，打造出專屬於你網站的炫炮登入介面！ 前言 在我們開始之前，讀者們可能會覺得，登入不過就是帳號、密碼和登入按鈕，有什麼好打造的，又或是覺得，『不會啊～我覺得Drupal原生的登入介面就不錯看了』，可是當你看到別人的網站是...... 這個 這個 或是這個 而你的永遠都是這個 或是這個 你還會覺得不錯看或是沒什麼嗎！！！ 也許充滿的藝術細胞的你們早就有想要改變自己網站的登入介面的想法，又或是身為前端工程師的你早就已經開工了，但既然你們會在這看小編廢話，一定跟小編一樣，是個Drupal超級菜鳥，遇到了跟小編一樣的問題，天啊～！這個登入介面的表單，根本不是我要的架構啊！！！ 也或許你只是無聊看看而已啦...... Anyway~今天小編就來教各位如何使用themeformtemplate來把登入介面的架構變成自己想要的吧！ 當然！你也可以直接用css或js硬幹.......... ThemeFormTemplate 這種方法牽涉到很多Drupal深層的架構以及規則，在此就不多作說明了，我們這邊就只教各位操作的方法！ 在開始之前請先各位安裝一個很重要的模組Devel以及把登入區塊拉到你看得到的地方～～ 首先打開你的drupal資料夾並進入你現在正在使用主題的資料夾內。

這邊建議你使用自己下載的主題，例如：Zen 這邊我們就以Drupal原生的主題bartik來做示範～！ 用文字編輯器打開theme資料夾內的template.php(如上圖)，並在文件內最下面新增下方這段 functionname_theme($existing,$type,$theme,$path){ $base=array( 'renderelement'=>'form', 'path'=>drupal_get_path('theme','name').'/templates/forms', ); returnarray( 'user_login_block'=>$base+array( 'template'=>'user-login-block', ), ); } 像是這樣子 然後把所有的name換成你現在在使用的theme名稱 接著在template的資料夾底下新增一個forms的資料夾，並在裡面新增一個user-login-block.tpl.php的文件。

接下來到了重頭戲，也是最複雜的時候囉！！ 先開啟devel的模組，並把權限改成匿名使用者也可以使用，然後登出！ 改成匿名使用者個原因是因為，你必須要登出之後才看得到原本的登入區塊 接著在template加入下面那段，並且清掉快取。

記得一樣要把name改成theme的名稱喔！！ functionbartik_preprocess_user_login_block(&$variables){ dpm($variables); } 這時你會發現網頁上突然出現了黃黃的東西 這邊簡單解釋一下，這個黃黃的表格是把目前頁面上所有form的變數吐出來，我們主要要做的，就是針對這些變數來指定他出現的方式，來改變整個form的架構～ 我們先來看看原本form的架構 從原始碼可以看到他的架構就是用一個form包著所有的欄位，沒有其他的東西了～沒錯！沒有其他東西了！有寫過前台的人都知道，一個大物件裡面的小物件若是沒有wrapper，那在撰寫樣式的時候，是非常非常不方便的事情！！！ 所以接下來我們就是要利用這些黃色表格裡面的變數，來針對我們要的東西幫他來包些wrapper~! 從裡面可以找到name、pass、link、actions這4個東西，也是我們需要的東西。

簡單對照一下 找到了我們要的東西之後回到剛剛建立的user-login-block.tpl.php的文件，並把下面這對貼進去 ".render($form['name']).render($form['pass']).""; print"".render($form['links']).render($form['actions']).""; printdrupal_render_children($form); ?> 這段的意思是把name跟pass用test包起來，link跟actions用test_2包起來。

然後儲存～清快取！你就會發現一件神奇的事情架構真的改變了！！ 最後再把template裡面的最後一段註解掉～然後清除快取。

然後把devel模組的權限改回匿名使用者不能看到，再把模組關掉。

這樣就大功告成啦～！是不是很簡單呢，快去打造屬於你自己網站的登入介面吧～！ 又到了文章的最後，不知道正在操作的你，是否會有個疑問，我都已經登出了，要怎麼輕快取呢？嘿嘿～那當然是用......... 文章標籤: FormAPI登入Drushdevel延伸閱讀: Drupal的好朋友Drush外掛，讓你管理Drupal有一套[Windows版] 搜尋文章 搜尋 快速連結 手冊導覽 熱門文章 用Docker來打造Drupal多樣化彈性環境 別再使用ViewsRewrite了，用ViewsFieldset合併欄位吧 Drupal新手教學：Drupal必學模組Views介紹-part2 標籤雲 drupal(39) Drupal新手教學(15) Druapl新手教學(12) 網站設計(12) docker(11) RWD(9) DrupalViews(8) 響應式網站設計(8) Module(7) javascript&jquery(7) 更多 粉絲專頁 LikeusonFacebook