用zencart來復(fù)制別人的網(wǎng)站成本低，效率高。前面我發(fā)了一篇有關(guān)開發(fā)自己的zencat模板的文章(《來自damon的zencart二次開發(fā)教程-3.1開發(fā)自己的zencart模板》)，里面只有一些基礎(chǔ)的理論，下面，我們就來實際操作一下。

1.利用離線瀏覽器將（《離線瀏覽器Teleport_Pro完全教程與安裝文件下載》）你的目標(biāo)網(wǎng)頁文件（圖片，html以及css樣式表，js代碼）統(tǒng)統(tǒng)下載下來。打開你的zencart文件夾，將默認模板文件復(fù)制一個，然后重命名為你自定義的名稱，修改template_info.php文件（詳細請參考《來自damon的zencart二次開發(fā)教程-3.1開發(fā)自己的zencart模板》）。將一些基本的操作做完之后，省下的就是分離將網(wǎng)頁html文件分離為模板文件了。

2.在分離之前，我們需要對模板文件結(jié)構(gòu)進行深入了解，可以參考我之前發(fā)的一篇文章（《zencart與drupal整合（第2天）—zencart模塊調(diào)用機制》）。

2.1 頭部模板文件html_header.php

$directory_array = $template->get_template_part($template->get_template_dir ('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^style/', '.css');

這段代碼是用于加載樣式表的，css文件只要滿足文件名以style開頭就會自動加載。（jscript文件也是同樣的規(guī)則，加載文件夾有 includes/modules/pages/PAGENAME 和?includes/templates/YOURTEMPLATE/jscript。）

2.2頁眉tpl_header.php

網(wǎng)站logo，tagline，產(chǎn)品分類導(dǎo)航以及登陸、搜索模塊。

其中分類導(dǎo)航的模板文件是templates/tpl_modules_categories_tabs.php，代碼如下：

include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS)); ?> <?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?> <div id="navCatTabsWrapper"> <div id="navCatTabs"> <ul> <?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?><li><?php echo $links_list[$i];?></li> <?php } ?> </ul> </div> </div> <?php } ?>

我們可以利用id在style.css文件中找到相應(yīng)的屬性，修改樣式。這里要注意的是，分類導(dǎo)航的字體，間距等都被定義在了230行中:

ul, #navSupp ul, #navCatTabs ul

搜索模塊文件是sideboxes\tpl_search_header.php文件以及sideboxes\tpl_search.php。

常量HEADER_SEARCH_DEFAULT_TEXT用來修改搜索框中默認的文本。

Line 14至Line 20是用來判斷提交按鈕的樣式是圖片還是普通的按鈕：

if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {//當(dāng)常量IMAGE_USE_CSS_BUTTONS為 yes時$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" οnfοcus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" οnblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;' . zen_p_w_picpath_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);//圖片形式的提交按鈕} else {$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" οnfοcus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" οnblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';//普通按鈕。}

其中輸出 submit 提交表單圖片按鈕函數(shù) zen_p_w_picpath_submit($p_w_picpath, $alt = '', $parameters = '', $sec_class = '')

該函數(shù)的功能主要就是輸出一個提交表單的圖片按鈕，跟一般的輸出圖片按鈕差不多一樣，不一樣的是這個函數(shù)輸出的是<input type="p_w_picpath" />類型的按鈕，而一般的圖片按鈕zen_p_w_picpath_button輸出的是圖片的鏈接。
參數(shù)解析：
$p_w_picpath：輸出圖片的名字，默認的目錄是在模板目錄下的buttons/目錄下面的圖片名字，輸入對應(yīng)的圖片名字就可以了
$alt：圖片<img>標(biāo)簽的alt屬性值。
$parameters：參數(shù)，可以是其他屬性的值，一般這個很少使用，默認為空
$sec_class：該圖片按鈕的CSS類，默認為空，只有使用CSS按鈕的使用該參數(shù)才會用到

function zen_p_w_picpath_submit($p_w_picpath, $alt = '', $parameters = '', $sec_class = '') {global $template, $current_page_base, $zco_notifier;if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($p_w_picpath, $alt, 'submit', $sec_class /*, $parameters = ''*/);$zco_notifier->notify('PAGE_OUTPUT_IMAGE_SUBMIT');$p_w_picpath_submit = '<input type="p_w_picpath" src="' . zen_output_string($template->get_template_dir($p_w_picpath, DIR_WS_TEMPLATE, $current_page_base, 'buttons/' . $_SESSION['language'] . '/') . $p_w_picpath) . '" alt="' . zen_output_string($alt) . '"';if (zen_not_null($alt)) $p_w_picpath_submit .= ' title=" ' . zen_output_string($alt) . ' "';if (zen_not_null($parameters)) $p_w_picpath_submit .= ' ' . $parameters;$p_w_picpath_submit .= ' />';return $p_w_picpath_submit;}

2.3整體布局tpl_main_page.php
sidebox邊框以及左、右邊欄left/right column 都可以在后臺控制開啟和關(guān)閉狀態(tài)。而中間id為"centerColumn"的廣告則為變量$body_code：

require($body_code); //Line 122 prepares and displays center column

定義$body_code的相關(guān)文件：
includes/modules/pages/$main_page/main_template_vars.php
includes/templates/mytemplate/$main_page/tpl_{$main_page}_default.php
includes/templates/template_default/$main_page/tpl_{$main_page}_default.php
includes/templates/mytemplate/templates/tpl_{$main_page}_default.php
includes/templates/template_default/templates/tpl_{$main_page}_default.php
//定義整個HTML模板
includes/languages/english/html_includes/define_main_page.php

我們在這個位置放的最多的功能就是幻燈片效果，具體有關(guān)幻燈片安裝與修改的教程，可以參考我的另一篇文章《來自damon的zencart二次開發(fā)教程-4.1制作首頁幻燈片方法》。
2.4頁腳tpl_footer.php，第一行中

require(DIR_WS_MODULES . zen_get_module_directory('footer.php'));

加載模塊函數(shù)zen_get_module_directory($check_file, ?$dir_only = ‘false’)，根據(jù)當(dāng)前輸入的模塊文件的名字，返回該文件所在的模塊目錄下的路徑。用于驗證該文件是否在模塊目錄下。驗證該文件的時候首先驗證模塊目 錄下當(dāng)前選擇的模板目錄下是否有該文件，如果有的話，就引用當(dāng)前模板目錄下的模塊文件，如果沒有就選擇默認的模塊目錄下面的模塊文件。

function zen_get_module_directory($check_file, $dir_only = 'false') { global $template_dir; $zv_filename = $check_file; if (!strstr($zv_filename, ‘.php’)) $zv_filename .= '.php'; if (file_exists(DIR_WS_MODULES . $template_dir . '/' . $zv_filename)) { $template_dir_select = $template_dir . '/'; } else { $template_dir_select = ''; } if ($dir_only == 'true') { return $template_dir_select; } else { return $template_dir_select . $zv_filename; } }

底部導(dǎo)航調(diào)用了模塊文件tpl_ezpages_bar_footer.php，

<?php require($template->get_template_dir ('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>

tpl_ezpages_bar_footer.php的第22 Line：

$page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_footer = 1 and footer_sort_order > 0 order by footer_sort_order, pages_title");

我們可以知道表格EZPAGES是用來控制底部導(dǎo)航顯示的內(nèi)容的。此外，修改字段EZPAGES_STATUS_FOOTER中的數(shù)字可以控制是否顯示（1為顯示）。

if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR']))))

$_SERVER['REMOTE_ADDR']是獲取到的訪問者ip，利用這一點，我們可以實現(xiàn)依據(jù)用戶的IP來自動調(diào)用語言包，在 index.php文件中獲取訪問者的ip：$_SERVER['REMOTE_ADDR']，獲取ip后，對ip進行判斷，這里用 http://api.liqwei.com /location/?ip=$ip提供的接口，對訪問者的ip進行判斷，$IPINFO = file_get_contents ( “http://api.liqwei.com/location/?ip=$ip” );返回的內(nèi)容會是國家，ip地址，已經(jīng)線路，對返回的內(nèi)容進行截取preg_match(‘|日本|’,$IPINFO)，然后在調(diào)用相應(yīng)的語言包。

3 zencart 商品列表

這部分的模板文件主要包括：\templates\tpl_index_product_list.php（主文件）、\templates \tpl_modules_product_listing.php（商品列表模塊）、classes \split_page_results.php（分頁函數(shù)）.
關(guān)于zencart的分頁功能，我們可以下載一款專門的分頁插件：（product_pagination下載>>）。這款插件會重寫分頁函數(shù)，也就是split_page_results.php文件。下面，我們再來仔細研究一下這個函數(shù)：

class splitPageResults extends base {var $sql_query, $number_of_rows, $current_page_number, $number_of_pages, $number_of_rows_per_page, $page_name; /* $sql_query：查詢數(shù)據(jù)庫的SQL語句，初始化該類的對象的時候會給這個變量賦值。 $number_of_rows：保存返回查詢結(jié)果數(shù)。 $current_page_number：當(dāng)前頁面的數(shù)字，就是第幾頁。 $number_of_pages：總共有多少頁， 計算方法 $this->number_of_pages = ceil($this->number_of_rows / $this->number_of_rows_per_page); $number_of_rows_per_page：每頁顯示的數(shù)量。這個變量由構(gòu)造函數(shù)賦值。 如果要改變每頁顯示的數(shù)量，可以修改這個參數(shù)的值。 $page_name：分頁的參數(shù)名字，默認是page，就是page=?這樣。 */var $formSuffix; /*v1.4.5-a-lat9*/ /*構(gòu)造函數(shù)，主要是對類變量賦值，其中$query這個是必須要輸入的參數(shù)值， 這個就是查詢數(shù)據(jù)庫的SQL語句，$max_rows這個是每頁顯示的數(shù)量，也必須的參數(shù)。 其他的可以使用默認值。*/function splitPageResults($query, $max_rows, $count_key = '*', $page_holder = 'page', $debug = false, $countQuery = "") {...}/* class functions功能函數(shù) */// 顯示分頁鏈接 /* 第一個參數(shù)就是顯示的頁面數(shù)量，這個就是除了顯示下一頁的文字以外的數(shù)字，如果是6，那 就是顯示從1-6， 第七個就是“下一頁”這樣的提示。$parameters 就是當(dāng)前頁面的一些參數(shù)。 */function display_links($max_page_links, $parameters = '') {...}// 顯示商品總數(shù)(Display Num)function display_count($text_output) {... }

\templates\tpl_modules_product_listing.php中的函數(shù)調(diào)用代碼：

$listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, zen_get_all_get_params(array('page', 'info', 'x', 'y', 'main_page')))

zen_get_all_get_params()函數(shù)，獲取$_GET這個數(shù)組的所有鍵和值，然后把指定不需要的變量去了，然后把剩下的參數(shù)重新 組合起來，返回這個組合的結(jié)果做為URL的參數(shù) ，用來過濾掉$_GET中的指定參數(shù)（'page', 'info', 'x', 'y', 'main_page'）
建議：zencart 仿站的步驟應(yīng)根據(jù)目標(biāo)網(wǎng)站代碼樣式的復(fù)雜程度來區(qū)分，對于一些整體樣式變化不大（相對于默認模板來說），JS代碼較少的網(wǎng)站，我們可以直接把目標(biāo)網(wǎng)站的源 碼當(dāng)做模板來套，而對于一些將整個默認模板的整體樣式都做了較大修改，特效比較多的網(wǎng)站，建議還是直接復(fù)制一份默認模板的代碼，然后對照著目標(biāo)網(wǎng)站來修 改。

原創(chuàng)文章，轉(zhuǎn)載請注明： 轉(zhuǎn)載自電商沙龍ec-shalom.com，專研電商藝術(shù)。

本文鏈接地址: 來自damon的zencart二次開發(fā)教程-3.2復(fù)制模板（仿站）操作教程

Related posts:

PHP生成和讀取PDF文件的方法（FPDF使用教程）

用FPDF連接mysql數(shù)據(jù)庫繪制表格

最好的網(wǎng)站驗證碼PHP類

zencart與drupal整合（第1天）——zencart基礎(chǔ)操作教程

轉(zhuǎn)載于:https://blog.51cto.com/phpcnm/1187755

總結(jié)

以上是生活随笔為你收集整理的来自damon的zencart二次开发教程-3.2复制模板（仿站）操作教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。