Joomla模板制作基础教程-中文版

Joomla模板制作基础教程-中文版
Joomla模板制作基础教程
#01前言 (2)
#02准备 (3)
#03下载安装joomla (4)
#04 预览joomla网站前台 (8)
#05 joomla模板结构 (9)
#06创建你的第一个模板 (11)
#07使用你的模板 (12)
#08增强你的模板 (15)
#09 为模板增加更多的模块 (18)
#10下一步学习建议 (21)
#11下一步翻译计划 (21)
#01前言
课程简介：尽管网上的joomla模板很多，但是由于业
务逻辑的不同，很难找到一款完全适合自己的模板。

创建一个joomla并不像你想象的那么难，可以说是零
基础的同学，只要按照这个教程一步一步地学习，最
后也可以制作一个不错的joomla模板，至少可以知道
如何去修改现有的模板。

这个教程翻译自国外的一篇文章（囧，忘了具体是哪一篇了），在翻译的过程中根据国人的阅读习惯对教程进行了一些必要的修改，而且也补充了一些个人的理解。

在这个教程当中，你将学到joomla模板的基础知识，并在此基础上创建你的第一个joomla模板。

我们会一
起快速地创建一个本地服务器来安装joomla，然后开始我们的joomla模板制作之旅。

译者简介：Rain（http://rain.gd），Joomla爱好者，在学习joomla的过程中深深地感受到joomla功能的强大，同时也发现国内joomla的学习资源很零散，joomla的中文社区不够活跃，新手在学习joomla的过程中如果遇到什么问题都很难及时地找到合适的解决方案。

就是在这种情况下，joomla粉丝网
（）上线了，joomla粉丝网以非常简洁的论坛风格、清晰的版块设置、丰富的资源优势迅速被广大joomla爱好者所认可，现在，这个joomla中文社区逐渐地活跃了起来，每天都有宝贵的资源在这里分享。

所以，如果大家在学习这个课程的过程中遇到什么问题，可以去我的博客给我留言，也可以去joomla粉丝网（）寻求帮助。

另外，为便于大家交流，joomla粉丝网还开通了500人的超级QQ群（103294911）供大家交流，相信只要我们一起努力，就一定可以助推joomla在中国的发展，让更多的人感受到joomla的魅力！
相关说明：
课程适合对象：joomla新手，老手就可以飘过了。

课程学时：1-2小时
课程要求：书中涉及的代码很少，所以希望初学者能够一字字地敲在自己的记事本上，这样对熟悉joomla的模板标签和以后对joomla的使用都是很有帮助的。

切记好高骛远，急于求成。

#02准备
工欲善其事必先利其器，在开始制作模板之前，有些工具你需要准备一下。

和其他常用的CMS（内容管理系统）一样，joomla网站服务器上需要安装Linux （或者windows）、Apache、PHP和MySQL。

安装上述软件对一个新手来说是既费时又费力的事，值得庆幸的是，现在已经有了上述软件的集成安装包，也就是LAMP
（Linux+Apache+MySQL+PHP），在windows环境下的就是Wamp。

我们要做的就很简单了，下载Wamp然后安装在我们的电脑上，这样就可以快速地搭建本地服务器了。

下载最新版WAMP：点此下载，如图所示：
下载完成之后，解压，把Wamp安装在你的硬盘当中，一切顺利之后你就看到一个文件夹：WAMP，如图所示：
这时在电脑右下角你将看到一个Wamp的小图标，这个图标会以控制面板的形式来帮助你管理本地服务器环境，你可以用它做很多事，包括重启服务器。

#03下载安装joomla
在上一步中我们已经搭建了本地服务器，现在我们下载安装joomla，去joomla 官方网站下载joomla最新版本。

这里值得说明的是，joomla的最新版本可能存在一些尚未发现和修复的漏洞，所以请不要在正规网站上使用最新版本而应该使用目前较为稳定的版本。

在我们开始安装joomla之前，让我们再来看一下WAMP的文件夹，可以看到WAMP 下面包含了一些文件和文件夹，这里面我们感兴趣的是www文件夹，www文件夹是我们本地服务器的根目录，也就是我们安装joomla的地方。

因此，把下载的joomla压缩包解压到www目录下面，然后你可
以给它重命名，我习惯把它命名成joomla。

Joomla现在已经在我们的本地服务器中了，但是在安装前还有最后一件事情需要做，那就是给joomla网站新建一个数据库。

打开浏览器，在地址栏中输入http://localhost。

这时候你会看到你本地服务器一些信息，这里就是我们将要创建数据库的地方。

在Your Aliases分类下选择“phpmyadmin”：
在这个教程当中，我们新建个数据库“joomla”，如下图所示：
现在我们已经有了数据库，可以安装joomla了，打开浏览器，在地址栏中输入http://localhost/joomla
第一步很简单，选择网站语言，点击下一步
第二步你将看到你的服务器的配置文件，
请确保joomla安装环境配置正常，点击下一步。

第三步，阅读相关版权信息，点击下一步。

第四步，这一步很重要，要求输入数据库相关信息，包括数据库用户名和密码还有数据库的名称，在前面我们新建的数据库名字是“joomla”，这里填上即可。

然后点击下一步，跳过FTP配置界面。

第五步，输入网站名称，管理员E-mail和密码。

这样你就可以使用用户名admin 和相应密码来登录网站后台了。

这里有一步需要注意的就是，我们不能安装网站示范内容，因为我们会在下面一步一步地为我们制作的模板安装模块，这样方便查看我们的操作结果。

第六步，到此joomla已经顺利地安装在我们的电脑上了，还有最后一步，就是删除我们的安装文件，返回joomla目录，删除installation文件夹。

如图所示：
#04 预览joomla网站前台
为了预览自己的网站前台，点击后台控制面板顶部的“预览”，这时你将看到网站使用的是joomla的默认模板，并且网站中也没有什么内容。

不要心急啊，下面我们一步步地创建自己的第一个模板。

#05 joomla模板结构
为了了解joomla的模板结构，让我们打开joomla默认模板的文件夹，在www 目录下打开joomla的文件夹，你会看到一个templates文件夹（wamp/www/joomla/templates）。

这里包含了网站前台可以使用的所有模板，你可以在网站后台切换joomla的前台模板。

在joomla的templates文件夹下面，joomla自带了3个模板：beez, rhuk_milkyway and ja_purity。

大家要记住这个位置，因为这就是你稍后要安装新模板的地方。

虽然大部分模板里面包含了很多文件，但是你要了解对于一个模板来说，只有两个文件是必要的：
第一个文件index.php是放joomla模板标签的地方，在这个文件里你可以使用一些joomla模板标签调用一些模块、组件等。

第二个文件是templateDetails.xml ，这个文件里的内容是告诉joomla使用这个模板时会被调用的其它所有文件，包括CSS，JS，图像文件等等。

这里要注意，D是大写的，同时它还包括作者名称、版权信息等。

上面是templateDetails.xml文件的一个示例代码，在代码中你可
以看到
positions这个单元，这个单元里面定义了一些位置信息，包括breadcrumb、right、footer等。

#06创建你的第一个模板
首先，去templates文件夹下面创建一个新文件夹，命名为“template_tut”
在新建的文件夹里面创建两个文件index.php和templateDetails.xml
用notepad或者其他的编辑器打开index.php，然后在里面输入以下代码：
在language里面我们使用了PHP代码，在head单元中我们使用了一个joomla 的模板标签，因为他不是定义一个位置，所以我们在xml文件中没有列出。

最后别忘了关闭html标签。

#07使用你的模板
因为我们已经有了模板的两个基础文件，现在我们在index.php 中增加一个模板标签，用来显示网站的主体内容：
所以到目前你的index.php中的代码应该是这样：
在我们开始测试我们的模板之前，让我们先来给网站添加一篇文章，用以显示网站的内容。

请确保你开启了Wamp，然后在浏览器的地址栏中输入：http://localhost/joomla/administrator
然后输入登录信息：
在文章管理中选择新建文章：
输入文章标题和文章示范内容，确保文章处于发布状态并在首页发布然后保存：
让我们看看我们添加的文章在网站前台的显示情况，点击“预览”回到网站前台，你将在首页看到你刚才添加的文章：
因为我们已经发布了一篇文章，所以来让我们看看这篇文章在我们自己的模板中的显示情况吧。

在网站后台的模板管理中把我们的模板设置为默认模板。

点击“预览”来看看你的模板吧，虽然有些难看不过毕竟那是自己的第一个模板啊，不要气馁，后面我们会让他变得越来越漂亮的！
#08增强你的模板
我们已经可以正常使用我们的模板了，不过现在模板的功能还比较有限，下面我们逐渐增强他的功能。

在开始之前，让我们先来看看在templateDetails.xml 文件当中的模块的位置信息：
不难发现，在模板中调用模块的方法是：
所以，要想在“left”这个位置增加一个模块，你就可以这样做：
接下来我们在“footer”这个位置增加一个模块：
如果你进入到管理后台，找到模块管理菜单你会看到已经有了一个模块：Main Menu。

即使你在安装joomla的时候没有安装示范数据这个模块也会存在的。

这个菜单已经挂靠在了“left”的位置（我们刚才在“left”这个位置添加了模块），现在让我们到前台看看他的显示效果吧。

正如你所看到的那样，现在我们有了一个可以链接到首页的菜单，当然，你可以通过后台的菜单管理增加一些菜单项目用以链接到不同的内容。

下面我们在“footer”位置增加一个页脚模块，在模块管理里面选择新建模块，然后选择“footer”，点击下一步。

接下来，在模块标题上面输入“footer”，在位置上面选择“footer”：
保存后点击“预览”回到前台查看效果。

这个时候你会在你的模板底部看到页脚的信息：
#09 为模板增加更多的模块
让我们对模板进行一些必要的样式化，以方便我们查看我们的操作效果。

在你的“template_tut”文件夹下新建一个“CSS”文件夹，然后在里面创建一个CSS 文件，命名为“template.css”。

打开index.php文件，在里面做一些修改，首先增加些divs，这样方便我们样式化模板，然后是在head中引入样式表。

然后在template.css中输入以下CSS代码：
下面我们在header增加top的位置，在右侧边栏增加right的位置。

现在我们给上面两个位置增加两个模块，登录网站后台，在模块管理里面你会看到我们已经建立的两个模块：“Main Menu”和“Footer”。

按照同样的方法，。