复制网站zencart模板的方法

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
首先说明的是，这里只是说明复制网站模板的理论，用于学习用途，复制并使用未经授权的模板是非法的。

第一次写这类说明，没有经验，欢迎大家指正、补充。

这里以zencart或者osc的模板为例，其他的模板也是同样的方法。

1. 首先在你的模板目录下，建立一个新的模板，例如：\includes\templates\mytemplate\

复制\includes\templates\template_default下的所有目录和文件到新的目录中

2. 用文本编辑器修改\includes\templates\mytemplate\template_info.php，修改其中的名称、版本、作者等内容。

3. 在后台打开新的模板，然后再工具－外观控制中，点击重置

4. 获取网站模板的图片

用整站下载软件实现，例如Teleport Pro，下载全站的所有图形文件，要保留原站的文件结构。

图片通常都在/images目录下，将下载到的/images下的图形文件都复制到zencart的/images目录下。

5. 获取网站模板的按钮

也可以用Teleport Pro下载所有按钮，通常是英文的，osc的按钮图片在/includes/languages/english/images/buttons目录下。

将下载的按钮保存到zencart的按钮目录/includes/templates/mytemplate/buttons/english/ 和 /includes/templates/mytemplate/buttons/schinese/ 中，在schinese目录中的按钮，可以自己用图像处理软件转换成中文。

osc模板中，可供下载的按钮有：

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_address_book.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_add_address.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_back.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_buy_now.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_change_address.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_checkout.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_confirm_order.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue_shopping.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_delete.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_edit_account.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_in_cart.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_login.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_notifications.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_quick_find.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_remove_notifications.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_reviews.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_search.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_shipping_options.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_tell_a_friend.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update_cart.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/button_write_review.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/small_delete.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/small_edit.gif

http://www.domainname.com/osc/includes/languages/english/images/buttons/small_view.gif

类似的，ZenCart模板的按钮有

http://www.domainname.com/ZenCart/includes/languages/english/images/buttons/button_add_address.gif

http://www.domainname.com/ZenCart/includes/languages/english/images/buttons/button_back.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_buy_now.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_change_address.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_checkout.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_confirm_order.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue_shopping.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_delete.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_download.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_in_cart.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_login.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_next.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_ppcheckout.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_prev.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_redeem.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_return_to_product_list.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_reviews.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_search.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_send.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_shipping_estimator.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out_sm.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_submit.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_TellAFriend.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_tell_a_friend.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_unsubscribe.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update_cart.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_write_review.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_delete.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_edit.gif

http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_view.gif

上面的列表中，自己替换www.domainname.com/osc 或者 www.domainname.com/zencart 为你需要复制的网站地址。

6. 获取网站模板的CSS文件。osc的stylesheet.css文件在根目录下。stylesheet.css文件的具体路径在查看页面源代码时能看到。

打开获得的stylesheet.css文件，剪贴到/includes/templates/mytemplate/css/stylesheet.css文件中，追加在原来的css文件后，不要覆盖原有的内容。

7. 打开需要复制的zencart或者osc网站，查看源代码。(有些网站不允许你查看源代码，要一些技巧，这里就不详细讨论这个问题了)

8. 在源代码中复制

<!– header //–> 到 <!– header_eof //–> 之间的内容作为\includes\templates\mytemplate\common\tpl_header.php，删除该文件内原来的内容。

<!– footer //–> 到 <!– footer_eof //–> 之间的内容作为\includes\templates\mytemplate\common\tpl_footer.php，删除该文件内原来的内容。

(有些模板把边框部分的显示也放到header.php中，那么你需要找出属于边框的部分并删除)

9. 现在，整个网站的外观已经基本出来了。需要替换上面的这两个文件内的链接，这里是模板转换的关键。根据下面的模式替换，第一行是需要替换的类似链接，第二行是正确的代码：

http://www.domainname.com/osc/index.php

<?php echo zen_href_link(FILENAME_DEFAULT); ?>

http://www.domainname.com/osc/account.php

<?php echo zen_href_link(FILENAME_ACCOUNT, ”, ‘SSL’); ?>

http://www.domainname.com/osc/shopping_cart.php

<?php echo zen_href_link(FILENAME_SHOPPING_CART, ”, ‘NONSSL’); ?>

http://www.domainname.com/osc/checkout_shipping.php

<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, ”, ‘SSL’); ?>

http://www.domainname.com/osc/shipping.php

<?php […]

如何修改模板宽度？ 

打开includes/templates/YOUR_TEMPLATE/css/stylesheet.css文件将宽度750px改为您需要的宽度。 

将: 

.centershop { 

padding: 0px; 

margin: 0px auto; 

position: relative; 

text-align: left; 

width: 750px !important; 

改为: 

.centershop { 

padding: 0px; 

margin: 0px auto; 

position: relative; 

text-align: left; 

width: 100% !important; 

将: 

TABLE.header { 

background-image: url(../images/header_bg.jpg); 

background-repeat: repeat-x; 

width: 750px !important; 

background-color: #ffffff; 

border-right: 1px solid #9a9a9a; 

border-left: 1px solid #9a9a9a; 

border-bottom: 1px solid #9a9a9a; 

改为: 

TABLE.header { 

background-image: url(../images/header_bg.jpg); 

background-repeat: repeat-x; 

width: 100% !important; 

background-color: #ffffff; 

border-right: 1px solid #9a9a9a; 

border-left: 1px solid #9a9a9a; 

border-bottom: 1px solid #9a9a9a; 

将: 

.main_page{ 

width: 750px !important; 

background-color: #ffffff; 

border-right: 1px solid #9a9a9a; 

border-left: 1px solid #9a9a9a; 

border-bottom: 1px solid #9a9a9a; 

padding: 5px; 

改为: 

.main_page{ 

width: 100% !important; 

background-color: #ffffff; 

border-right: 1px solid #9a9a9a; 

border-left: 1px solid #9a9a9a; 

border-bottom: 1px solid #9a9a9a; 

padding: 5px; 

将: 

TD.headerNavigation { 

width: 750px !important; 

position: relative; 

vertical-align:middle; 

font-family: Verdana, Arial, sans-serif; 

font-size: 11px; 

font-weight:bold; 

color:#000000; 

letter-spacing:1px; 

padding: 5px; 

改为: 

TD.headerNavigation { 

vertical-align:middle; 

font-family: Verdana, Arial, sans-serif; 

font-size: 11px; 

font-weight:bold; 

color:#000000; 

letter-spacing:1px; 

padding: 5px; 

提示：宽度属性有好几处，全部都需要修改。

网上说zencart的二次开发以及模版的开发都相当困难，这几天尝试修改了一下，确实如此。

zencart的源代码隐藏的很深，并且其整体架构设计的与我们的思维有所出入。

对于zencart模版的制作和修改来说，相对于ZenCart的二次开发来说相对简单一些。

模版的制作，主要是修改CSS代码和替换一些图片，比如Logo、Banner等图片的替换，整个导航栏的修改，这个难度不大，我们只要根据查看浏览器上 显示的HTML源代码，确定那个类或者属性需要修改，进而转到CSS文件找到这个要修改的地方进行修改就可以了（注意：事先对文件备份时必要的）。

模版的制作相对于修改已有的模版来说难度稍有提高。

ZenCart模版是HTML与PHP代码是混在一块的，很伤神。如果想重头开发一套ZenCart模版，难度无疑比修改别人的模版要大的多。不过我觉得独立去开发一套模版没有多大必要，我们多多少少都可以借用已有的模版，在那上面做修改，除非 你是想测试一下自己对zencart的掌握水平有多深。

二次开发就需要对zencart的代码了如指掌了（当然如果开发一些小插件就除外了），zencart的整体架构和我们的思维有一些不同，我最近看到的部分代码也都是按函数封装，而非按照类封装的，并且隐藏的相当深。网上有一张关于zencart加载流程的图片，不过就我个人根据源代码的分析来看，那张图片好像不大正确，可能是版本比较早的时候的zencart的加载流程。

下面是我根据代码整理的一下部分的加载流程，记在这里，以供以后参考（针对版本1.38）。

index.php中加载includes/application_top.php

application_top.php文件中加载includes/extra_configures/目录下的各个配置文件，继而加载autoload_func.php文件、counter.php文件。

includes/extra_configures/多为配置文件和入侵检测文件（注入检测）。

initsystem.php文件中加载了includes/auto_loaders/目录下的文件（不包括config.core.php文件），主要是config.ultimate_seo.php文件（该文件主要内容是$autoLoadConfig数组）。

关于代码的，暂时就写到这里，以后看过之后再续上。

关于前台布局上，我看到主要有两种，一种是三栏的、一种两栏。

我主要接触的是三栏的。这种左右两侧的是通过后台设置的，变化的是中间部分。通过地址栏里面的main_page参数来确定（这样加大了源代码分析的难度）。

其他的改日继续写，先睡觉去。