《2022年Joomla模板制作中文教程 .pdf》由会员分享，可在线阅读，更多相关《2022年Joomla模板制作中文教程 .pdf（19页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）Joomla模板制作基础教程#01 前言课程简介 ：尽管网上的 joomla 模板很多，但是由于业务逻辑的不同，很难找到一款完全适合自己的模板。创建一个 joomla 并不像你想象的那么难，可以说是零基 础的同学，只要按照这个教程一步一步地学习，最后也可以制作一个不错的joomla 模板，至少可以知道如何去修改现有的模板。这个教程翻译自国外的一篇文章（囧，忘了具体是哪一篇了），在翻译的过程中根据国人的阅读习惯对教程进行了一些必要的修改，而且也补充了一些个人的理解。在这个教程当中，你将学到joomla 模板
2、的基础知识，并在此基础上创建你的第一个 joomla 模板。我们会一起快速地创建一个本地服务器来安装joomla ，然后开始我们的 joomla 模板制作之旅。译者简介 ：Rain（http:/rain.gd），Joomla 爱好者，在学习 joomla 的过程中深深地感受到 joomla 功能的强大，同时也发现国内joomla 的学习资源很零散，joomla 的中文社区不够活跃， 新手在学习 joomla 的过程中如果遇到什么问题都很难及时地找到合适的解决方案。就是在这种情况下，joomla 粉丝网（www.joomlafans.org ）上线了， joomla 粉丝网以非常简洁的论坛风格、
3、清晰的版块设置、丰富的资源优势迅速被广大joomla 爱好者所认可，现在，这个joomla 中文社区逐渐地活跃了起来，每天都有宝贵的资源在这里分享。所以，如果大家在学习这个课程的过程中遇到什么问题，可以去我的博客给我留言，也可以去 joomla 粉丝网（ www.joomlafans.org ）寻求帮助。另外，为便于大家交流， joomla 粉丝网还开通了 500 人的超级 QQ群（152949352）供大家交流，相信只要我们一起努力，就一定可以助推joomla 在中国的发展，让更多的人感受到 joomla 的魅力！相关说明：课程适合对象：joomla 新手，老手就可以飘过了。课程学时：1-2
4、 小时课程要求：书中涉及的代码很少，所以希望初学者能够一字字地敲在自己的记事本上，这样对熟悉joomla 的模板标签和以后对joomla 的使用都是很有帮助的。切记好高骛远， 急于求成。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）#02 准备工欲善其事必先利其器，在开始制作模板之前，有些工具你需要准备一下。和其他常用的 CMS （内容
5、管理系统）一样， joomla 网站服务器上需要安装Linux（或者 windows）、Apache、PHP和 MySQL 。安装上述软件对一个新手来说是既费时又费力的事， 值得庆幸的是， 现在已经有了上述软件的集成安装包，也就是LAMP （Linux+Apache+MySQL+PHP），在 windows 环境下的就是 Wamp 。我们要做的就很简单了，下载Wamp 然后安装在我们的电脑上，这样就可以快速地搭建本地服务器了。下载最新版 WAMP：点此下载，如图所示：下载完成之后，解压，把Wamp 安装在你的硬盘当中，一切顺利之后你就看到一个文件夹： WAMP，如图所示：这时在电脑右下角你将看
6、到一个Wamp 的小图标，这个图标会以控制面板的形式来帮助你管理本地服务器环境，你可以用它做很多事，包括重启服务器。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）#03 下载安装 joomla 在上一步中我们已经搭建了本地服务器，现在我们下载安装joomla ，去 joomla官方网站下载 joomla 最新版本。这里值得说明的是，jo
7、omla 的最新版本可能存在一些尚未发现和修复的漏洞， 所以请不要在正规网站上使用最新版本而应该使用目前较为稳定的版本。在我们开始安装 joomla 之前，让我们再来看一下WAMP 的文件夹，可以看到 WAMP下面包含了一些文件和文件夹，这里面我们感兴趣的是www 文件夹， www 文件夹是我们本地服务器的根目录，也就是我们安装joomla 的地方。因此，把下载的joomla 压缩包解压到 www 目录下面，然后你可以给它重命名，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页
8、，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）我习惯把它命名成joomla 。Joomla 现在已经在我们的本地服务器中了，但是在安装前还有最后一件事情需要做，那就是给joomla网站新建一个数据库。打开浏览器，在地址栏中输入http:/localhost。这时候你会看到你本地服务器一些信息，这里就是我们将要创建数据库的地方。在 Your Aliases分类下选择“ phpmyadmin ”：在这个教程当中，我们新建个数据库“joomla ”，如下图所示：现在我们已经有了数据库，可以安装joomla
9、 了，打开浏览器，在地址栏中输入http:/localhost/joomla第一步很简单，选择网站语言，点击下一步第二步你将看到你的服务器的配置文件，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）请确保 joomla 安装环境配置正常，点击下一步。第三步，阅读相关版权信息，点击下一步。第四步，这一步很重要， 要求输入数据库相关信息，包括
10、数据库用户名和密码还有数据库的名称，在前面我们新建的数据库名字是“joomla ”，这里填上即可。然后点击下一步，跳过FTP配置界面。第五步，输入网站名称， 管理员 E-mail 和密码。这样你就可以使用用户名admin和相应密码来登录网站后台了。这里有一步需要注意的就是， 我们不能安装网站示范内容， 因为我们会在下面一步一步地为我们制作的模板安装模块，这样方便查看我们的操作结果。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 19 页 - - - - - - - - -
11、 Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）第六步，到此 joomla 已经顺利地安装在我们的电脑上了，还有最后一步，就是删除我们的安装文件， 返回 joomla 目录， 删除 installation文件夹。如图所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）#04 预览 jooml
12、a网站前台为了预览自己的网站前台，点击后台控制面板顶部的“预览”，这时你将看到网站使用的是 joomla 的默认模板，并且网站中也没有什么内容。不要心急啊，下面我们一步步地创建自己的第一个模板。#05 joomla模板结构为了了解 joomla 的模板结构，让我们打开joomla 默认模板的文件夹，在www目 录 下 打 开joomla的 文 件 夹 ， 你 会 看 到 一 个templates文 件 夹（wamp/www/joomla/templates ）。这里包含了网站前台可以使用的所有模板，你可以在网站后台切换joomla 的前台模板。名师资料总结 - - -精品资料欢迎下载 - -
13、- - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）在 joomla的 templates文 件 夹 下 面， joomla自带 了 3 个 模 板 ： beez, rhuk_milkyway and ja_purity。大家要记住这个位置，因为这就是你稍后要安装新模板的地方。虽然大部分模板里面包含了很多文件，但是你要了解对于一个模板来说，只有两个文件是必要的：第一个文件 index.php
14、是放 joomla 模板标签的地方，在这个文件里你可以使用一些 joomla 模板标签调用一些模块、组件等。第二个文件是 templateDetails.xml ， 这个文件里的内容是告诉joomla 使用这个模板时会被调用的其它所有文件，包括 CSS ， JS， 图像文件等等。 这里要注意，D是大写的，同时它还包括作者名称、版权信息等。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla
15、粉丝网（ www.joomlafans.org）上面是templateDetails.xml文件的一个示例代码，在代码中你可以看到positions这个单元，这个单元里面定义了一些位置信息，包括breadcrumb、right 、footer等。#06 创建你的第一个模板首先，去 templates 文件夹下面创建一个新文件夹，命名为“template_tut”在新建的文件夹里面创建两个文件index.php和 templateDetails.xml 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - -
16、- - - 第 9 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）用 notepad 或者其他的编辑器打开index.php ，然后在里面输入以下代码：在 language 里面我们使用了PHP代码，在 head 单元中我们使用了一个joomla的模板标签， 因为他不是定义一个位置， 所以我们在 xml 文件中没有列出。 最后别忘了关闭 html 标签。#07 使用你的模板因为我们已经有了模板的两个基础文件，现在我们在 index.php 中增加一个模板标签，用来显示网站的主体内容：所以到目前你的
17、 index.php 中的代码应该是这样：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）在我们开始测试我们的模板之前，让我们先来给网站添加一篇文章，用以显示网站 的 内 容 。 请 确 保 你 开 启 了Wamp ， 然 后 在 浏 览 器 的 地 址 栏 中 输 入 ：http:/localhost/joomla/administr
18、ator 然后输入登录信息：在文章管理中选择新建文章：输入文章标题和文章示范内容，确保文章处于发布状态并在首页发布然后保存：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）让我们看看我们添加的文章在网站前台的显示情况，点击 “预览”回到网站前台，你将在首页看到你刚才添加的文章：因为我们已经发布了一篇文章， 所以来让我们看看这篇文章在我们
19、自己的模板中的显示情况吧。在网站后台的模板管理中把我们的模板设置为默认模板。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）点击“预览”来看看你的模板吧， 虽然有些难看不过毕竟那是自己的第一个模板啊，不要气馁，后面我们会让他变得越来越漂亮的！#08 增强你的模板我们已经可以正常使用我们的模板了，不过现在模板的功能还比较有限，下面我们逐渐
20、增强他的功能。在开始之前，让我们先来看看在templateDetails.xml文件当中的模块的位置信息：不难发现，在模板中调用模块的方法是：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）所以，要想在“ left ”这个位置增加一个模块，你就可以这样做：接下来我们在“ footer ”这个位置增加一个模块：如果你进入到管理后台，找到模
21、块管理菜单你会看到已经有了一个模块：Main Menu 。即使你在安装 joomla 的时候没有安装示范数据这个模块也会存在的。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）这个菜单已经挂靠在了“ left ”的位置（我们刚才在“ left”这个位置添加了模块），现在让我们到前台看看他的显示效果吧。正如你所看到的那样， 现在我们有了一
22、个可以链接到首页的菜单，当然，你可以通过后台的菜单管理增加一些菜单项目用以链接到不同的内容。下面我们在“ footer ”位置增加一个页脚模块，在模块管理里面选择新建模块，然后选择“ footer ”，点击下一步。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）接下来，在模块标题上面输入“footer ”，在位置上面选择“ footer
23、 ”：保存后点击“预览”回到前台查看效果。这个时候你会在你的模板底部看到页脚的信息：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）#09 为模板增加更多的模块让我们对模板进行一些必要的样式化，以方便我们查看我们的操作效果。在你的“template_tut”文件夹下新建一个“ CSS ”文件夹，然后在里面创建一个CSS文件，命名为“ t
24、emplate.css ”。打开 index.php文件，在里面做一些修改，首先增加些divs ，这样方便我们样式化模板，然后是在head中引入样式表。然后在 template.css中输入以下 CSS 代码：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）下面我们在 header 增加 top 的位置，在右侧边栏增加right的位置。
25、现在我们给上面两个位置增加两个模块，登录网站后台， 在模块管理里面你会看到我们已经建立的两个模块：“Main Menu”和“ Footer ”。按照同样的方法，top 这个位置创建一个搜索模块，在right这个位置创建一个登录模块。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 19 页 - - - - - - - - - Joomla 模板制作基础教程Joomla粉丝网（ www.joomlafans.org）保存后点击“预览”，这时候你在前台将会看到在头部heade
26、r 位置有了一个搜索框，在右侧边栏有了一个登录框。以上是制作 joomla 模板的非常基础的知识， 希望这些知识对于大家学习joomla的模板制作有所帮助， 大家需要知道的是， 只要大家掌握了这些基础知识，加上一些 CSS 知识，你就可以制作出非常漂亮精致的joomla 模板了。#10 下一步学习建议尽管你已经制作了自己的第一个模板，但是在外观及功能上面还是有些简单，为了更好地发挥模板的作用， 你需要继续学习一些新知识来扩充模板的功能。以下为大家提供一些下一步的学习建议： 1 、熟悉 joomla 的模板标签： joomla 的一个强大之处在于它为模板设计者提供了一些常用的模板标签， 这就大大
27、降低了对于模板设计这的编程要求。如果英语好的话可以多去看官方文档：http:/docs.joomla.org/2、学习 CSS的知识：从上面的教程中大家也可以看到在制作模板的过程中除了需要掌握一些模板标签之外， 还需要很好的 CSS知识，这样做出来的模板才很好看。 所以学习一些 CSS 知识还是很有必要的： http:/ joomla 学习者沟通交流： 学会求助是强者的表现， 遇到问题了要学会向身 边 的 求 助 ， 多 和 志 同 道 合 的 人 沟 通 交 流 。 Joomla粉 丝 网（http:/www.joomlafans.org） 里面都是joomla的爱好者，大家都在学习joomla ， 所以，如果有什么问题可以多来这里和joomla 高手们交流。日积月累，熟能生巧，只要用心去学习就一定可以玩转joomla ，从而为自己的学习和工作带来无穷的效益。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 19 页 - - - - - - - - -