joomla 网页修改_修改Joomla的8个技巧和技巧！范本

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-10-29 16:09:12 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

joomla 网页修改

刚开始创建一个Joomla！模板，对如何真正掌握修改方法感到困惑？查看这些简单的提示和技巧，它们将在设计Joomla网站时为您提供更好的控制。

当我第一次开始创建Joomla模板时，我有些困惑。如何只修改一个页面而不影响其他页面？如何更改模块的结构，以便更轻松地设置样式？在本文中，我们将介绍如何解决这些问题，以及如何使用其他快速解决方案来加快Joomla模板开发工作。

课程大纲：

设置localhost Joomla安装。
选择一个可以使用的好的模板框架（这样就不必重新发明轮子了）。
使用浏览器中的URL数据在Joomla中设置单个页面的样式。
折叠的模块位置。
登录样式。
使用模块类后缀使模块唯一。
修改模块模板，以便更轻松地设置样式。
添加常规的旧IE条件，以修复Internet Explorer错误

提示1：Localhost Joomla安装

在修改和开发模板之前，您需要安装Joomla才能使用。使用Windows的WAMP或Mac的MAMP（在此示例中，我将使用WAMP），我们将在您的计算机上创建一个简单的Joomla安装，以便您开始进行模板修改。

首先，请访问www.wampserver.com/cn 。在主页上单击“下载Wampserver 2的最新版本”。

现在，单击WAMP的32位版本或64位版本的下载链接（取决于您使用的Windows版本）。如果您不知道所使用的版本，请单击开始球，然后在搜索字段中键入“ dxdiag”。在DirectX诊断工具中，它将告诉您操作系统旁边正在运行的版本。下载WAMP并运行.exe以使用默认目录C：\ wamp安装程序。它还会询问您要使用哪个浏览器作为默认预览，但是我从不使用此浏览器，因此只需选择explorer.exe。我们将不会使用SMTP或电子邮件，因此只需将其保留为默认值，然后启动WAMP。

WAMP任务栏的托盘中将显示一个图标，该图标应为橙色。这意味着本地主机服务器处于脱机状态。要使其联机（以便您可以开始使用它），请在该图标上单击鼠标左键，然后选择“启动所有服务”。然后再次左键单击该图标，然后选择“联机”。这将启动计算机上的localhost服务器。

注意：如果您的计算机上运行的是Skype或Teamviewer之类的东西，这将阻止WAMP联机，因此请确保在尝试启动localhost之前关闭这些程序。

现在我们已经设置了本地主机服务器，我们可以继续下载最新的Joomla安装来使用。目前，Joomla的最新版本为1.7，但本教程将使用Joomla 1.5。它更加稳定，并且具有最多可用的扩展名和模板。

前往www.joomla.org 。在那里，单击页面右中角的“下载Joomla”按钮。向下滚动并查找最新版本的Joomla 1.5。在撰写本文时，它是1.5.23，我们需要完整的软件包，因此请单击标题为“ ZIP”的链接下载它。现在转到C：\ wamp \ www目录，并创建一个名为“ joomla”的新文件夹。将您刚刚下载的Joomla zip文件复制到此文件夹中，并使用7zip或WinRAR之类的工具将其解压缩，这两种工具都可以从download.com下载。这会将整个Joomla软件包解压缩到该目录中，并允许您安装它。

要安装Joomla，请进入浏览器并输入“ localhost / joomla / installation”。如果一切顺利，它将显示“选择语言”页面。选择您的语言，然后单击右上角的“下一步”按钮。对于安装前检查，您无需修改任何内容，因此请单击“下一步”。再次，单击“下一步”接受GNU公共许可证。

这是安装过程中最重要的部分：创建数据库和用户。我们目前尚未设置任何内容，因此我们现在将其创建。

要创建数据库和数据库用户，我们将对WAMP使用PHPmyadmin。左键单击任务栏中的WAMP图标，然后在弹出窗口的顶部选择“ PHYmyadmin”。这将在浏览器中启动PHPmyadmin。第一个屏幕是我们将为Joomla创建数据库的地方。

在“创建新数据库”字段中，输入您选择的数据库名称。像“模板”之类的东西就足够了。现在已创建数据库，该数据库将向您显示当前没有表。下一步是创建具有所有权限的用户，以便Joomla可以访问数据库。转到顶部的“权限”标签，然后单击“添加新用户”。

在此新屏幕上，键入您要使用的用户名。我选择“ template_user”作为我的用户名，选择“ 1234”作为我的密码。显然，在真实服务器上，您可能希望使用比此方法更安全的方式来保护用户名和密码，但是对于localhost而言，这并不是很重要。对于主机字段，请填写“ localhost”。现在，在其下方，在显示用户数据库时，默认值应为最后一个单选按钮。如果不是，请单击最后一个单选按钮，其内容为“授予数据库'模板'的所有特权”。在其底下，在“全局特权”旁边，单击“检查所有”链接，然后单击右下角的“执行”按钮。

下面是显示其外观的示例。

现在已经创建了用户和数据库，您可以返回Joomla安装屏幕，并将以下各项放入数据库的字段中：首先，数据库类型为“ mysql”，然后为主机键入“ localhost”名称。输入您创建的用户名和密码。要完成此操作，请输入数据库名称“ template”，然后单击“下一步”。在FTP配置屏幕上，只需保留所有内容，然后单击“下一步”而不启用FTP文件系统层。

最后一个屏幕是安装的主要配置。输入您要称为“模板提示”的网站名称。输入您的电子邮件，管理员密码（在此示例中，我们只能再次使用1234），然后确认管理员密码。当您刚开始创建模板时，我建议您安装示例数据，因为它使您在尝试设计时给站点带来“完整”的感觉，而不是从头开始。如果您没有安装示例数据，那么在完成此处操作后转到Joomla站点时，将几乎没有任何内容可用于样式设置。

注意：一旦您通过模板修改变得更高级，就不再需要安装示例数据。卸载所有虚拟内容所花的时间要比帮助您可视化模板的外观要花费更多的时间。

因此，单击“安装样本数据”按钮，然后单击“下一步”按钮。

安装Joomla的最后也是最后一步（我保证）是从您在WAMP中创建的“ joomla”文件夹中删除“安装”目录。转到C：\ wamp \ joomla并完全删除安装目录。现在转到localhost / joomla，您将看到已经安装了Joomla，并且我们准备安装将要使用的模板。

提示2：选择模板框架

最近，在Joomla模板框架中风行一时，因为它们可以让您更快地完成模板，并且模板本身已经完成了许多工作。一些最受欢迎的框架包括YooTheme Warp框架和Rockettheme Gantry框架。这两个框架都是从头开始构建的，以解决必须在每个模板上完成繁琐的重复性任务的情况，并且还包括强大的功能，例如内置的移动模板和后端功能，这些功能使您无需更改模板即可更改模板的外观任何使用后端参数的东西。对于这些技巧和示例的其余部分，我将使用一个利用Warp 6框架的YooTheme模板。

注意：您必须购买YooTheme模板订阅才能在您的网站上使用模板并进行修改，但是从长远来看，为节省大量时间而付出的额外金钱是值得的。

一些框架和主题提供程序包括：

随意浏览他们的每个站点，并查看最喜欢的模板和哪种框架更适合您。每个模板提供商都为框架设置了自己的标准，因此它具有个人品味以及您想要使用的功能列表。由于我选择使用YooTheme的Warp 6框架，因此我将从在本地主机服务器上安装Warp 6模板开始。

下载模板后，转到localhost / joomla / administrator。输入“ admin”作为用户名，输入“ 1234”作为密码以登录到后端。在顶部栏上，将鼠标悬停在扩展上，然后单击“安装/卸载”。在上载包文件字段中，单击“浏览”，然后找到下载到计算机上的模板包。现在，单击“上传文件放大器；安装”按钮。现在已经安装了模板，但是要实际将其激活为模板，您必须完成一个步骤。

转到Joomla后端顶部栏中的“扩展程序”，然后单击“模板管理器”。我安装的模板名为“ yoo_nano”，因此请在模板列表中查找您的模板，然后单击其左侧的单选按钮。然后，点击右上角的星形图标（即“默认”按钮）。现在，您的新模板已设置为Joomla将使用的模板。刷新您的主页，您应该会看到更改！

提示3：样式化各个页面

这可能是我在Joomla中学到的最有用的技巧，它可以通过使用浏览器地址中的URL参数为某些页面指定样式来工作。首先，我们必须插入从URL中提取变量的代码。以下是使用Joomla中最常见的变量（例如itemid，id，view，option等）所必需PHP代码。将以下代码复制并粘贴到文档的<head>中。

<?php
$itemid = (isset($_GET['Itemid'])) ? $_GET['Itemid'] : null;
$view = (isset($_GET['view'])) ? $_GET['view'] : null;
$catid = (isset($_GET['catid'])) ? $_GET['catid'] : null;
$task = (isset($_GET['task'])) ? $_GET['task'] : null;
$id = (isset($_GET['id'])) ? $_GET['id'] : null;
$option = (isset($_GET['option'])) ? $_GET['option'] : null;
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : null;
?>

现在，第二部分实际上是将这些变量用作<body>标记上CSS类，以便您可以利用它们。将下面的代码复制并粘贴到模板中body元素的class=""中。

cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>

最终结果应如下所示：

<body class="cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>">

现在，让我们看一下Joomla网站的URL参数。要开始使用，请单击首页上指向该网站另一页的链接之一。例如，在我的页面上，单击“继续阅读”，如下所示。有些链接可能是硬编码的，所以只需寻找一个链接，该链接的变量显示出来对搜索引擎不友好。

现在，如果您查看浏览器的地址栏，您将看到与此特定URL关联的参数，如下所示：

http://localhost/joomla/index.php?option=com_content&view=article&id=44:joomla-security-strike-team&catid=1:latest-news&Itemid=50

正如您在上面看到的，此页面的选项是“ com_content”。该页面的视图为“文章”，该页面的项目编号为“ 50”。 Itemid是指与本文关联的单个菜单项。请记住，在Joomla中，所有内容都必须具有与之关联的菜单itemid，否则您将无法为其分配模块。因此，使用URL中的此信息，现在可以通过在文档的<head>中创建的变量来使用该信息。

让我们看一下我们现在所在的页面。下图显示了我要专门为此页面修改的部分，而没有其他内容。

确定这两个元素CSS代码在哪里的最简单方法是使用开发工具，例如Firebug（对于Firefox）或Webkit Developer工具（对于Chrome）。使用Firebug，我将鼠标悬停在这些元素上，并查看每个元素CSS位置。

如您所见，我们正在使用带有“ title”类的H1标签。假设我们要将此文本颜色更改为红色。在Firebug面板的右侧，我可以看到system.css，trebuchet.css，base.css等中与此元素相关联的样式。您通常希望使用主模板CSS来对模板进行修改像这样，因此对于此模板，它称为layout.css。对于您的模板，它可以称为诸如template_css之类的东西。或template.css甚至base.css。无论如何，请导航至C：\ wamp \ joomla \ templates \ [模板名称] \ css \ layout.css，进入这些CSS文件之一。（此路径可能与您的模板不同）。进入内部后，一直滚动到底部（以确保它是此文件中最特定的样式），并添加一些类似的代码。

.itemid-50 #system .title {
	color: red;
}

保存CSS文件并刷新页面。如果操作正确，则应将此页面上的标题更改为红色。如果您导航到另一个页面，尽管您会发现其他页面没有改变。如果您只是全局更改此样式，则将影响整个站点。以下是该样式更改的结果：

为了对“ Written by”文本进行第二次更改，我将以相同的方式用Firebug突出显示该元素，弄清楚它的名称以及CSS文件中样式的位置，然后使用PHP变量再次从URL设置样式。因此，要仅为该页面设置“作者”的样式，我将其放大并涂成蓝色。

.itemid-50.view-article #system .meta {
	color: blue;
	font-size: 15px;
}

注意，上面我使用了$ itemid变量和$ view变量的有趣组合。您可以使用CSS将两个类串联在一起，以使其更加具体。上面的代码说的是：此页面的itemid必须为50，并且必须为文章视图，否则此CSS不适用。它使您可以更具体地定位元素。

使用相同的想法，但是使用PHP if语句：使用相同的想法，我们还可以在站点模板的index.php或template.php中运行PHP if语句，以基于这些URL变量进行更改。例如，假设我们使用名为“ slideshow”的div类设置了模块位置。这是一个例子：

<div class="slideshow">
		here is my slideshow position
	</div>

我只希望此幻灯片显示在项目ID为50的页面上-其他地方。这甚至会覆盖您在后端中为模块指定的设置，在该模块上告诉模块要显示哪些菜单项。为此，我们将if语句包装在div块周围，如下所示：

<?php if($itemid == '50') : ?>
		<div class="slideshow">
			here is my slideshow position
		</div>
	<?php endif; ?>

现在，该div仅显示在此页面上，如果我们不在itemid 50上，则将从代码中删除。我一直在模板中使用这些技术，并且它们非常方便，因此我建议习惯于使用他们。

提示4：折叠模块位置

在Joomla中使用可折叠模块位置非常有必要，除非您希望即使对于空模块也要显示位置。例如，假设您在站点的右栏中有一个名为“ right_col”的div中的模块。在某个页面上，如果其中没有任何内容，则不希望显示右列。如果在该特定模块位置周围没有折叠if语句，即使该页面上没有为该位置启用任何功能，它仍然会显示。您将最终得到一个空白的右栏，其中没有任何内容。

为确保右列在为空时折叠，您可以找到现有模块的位置，也可以创建自己的模块。不同的模板具有不同的创建count模块if语句的方式（countModules是折叠的if语句）。对于Warp 6模板，其写法如下：

//this is the warp 6 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if ($this['modules']->count('breadcrumbs')) : ?>
	<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

但是对于其他模板，它可能会像这样更简单：（下面的代码是编写countModules if语句的更常用方法）

//this is the warp 5 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if($this->countModules('right')) : ?>
		<div class="right_column">
				<jdoc:include type="yoomodules" name="right" style="yoo" />
		</div>
<?php endif; ?>

注意：为了使countModules工作，在if语句之间必须有一个模块位置，以便它可以查看是否有任何内容在该位置发布。因此，例如，在上面的代码中，countModules正在查看是否在“正确”位置发布了任何内容。否则，将不会显示整个div类right_column。如果在此位置发布了某些内容，它将显示if语句的开始到endif的结束之间的所有内容。

从本质上讲，这是一个简单的概念，可让您的页面更具动态性，因此，如果您希望不同的页面具有不同的布局，则可以做到这一点。尝试将countModules if语句与上面的URL变量提示结合使用，以使模板更加灵活。由于Joomla是内容管理系统，因此其背后的整体思想是动态且灵活的。

提示5：登录样式

假设您仅在用户登录后才希望在页面上显示特定元素。如果希望人们在访问内容之前先注册您的网站，这可能会很有用。除此之外，在Joomla中还有使用访问控制的更健壮的方法，但是作为一种基于用户是否登录的快速更改方法，此技巧非常有效。下面是您将需要的代码：

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "<div id=\"members\">";}else{}
?>

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "</div>";}else{}
?>

这两段代码是相同的，除了一个打开成员的div id，然后第二段代码关闭该div。您要做的是获取第一段代码，并将其放在打开的<body>标签下面。获取第二段代码，然后将其放在结束</body>标记之前。保存页面并刷新。现在，如果您转到自己的站点，请查看firebug并在左窗格中滚动DOM（文档对象模块），您会注意到“成员”的div ID现在正在包裹整个站点。仅当此人登录后，此div才会显示。

让我们看一个简单的示例，说明如何使用此代码。假设出于某些原因，我希望页面上的页眉背景颜色与注册用户不同。现在这很容易做，因为我可以使用id #members来指定它。

#members #header {
	background:blue;
}

这几乎就是它的全部。这对于更改模块的背景或整个站点的其他位置（以反映促销或您能想到的一切）可能很有用。

提示6：模块类后缀

有时在开发模板时，您希望使特定的模块看起来没有其他任何人共享。例如，假设您有一个论坛帖子模块，有人希望赞助该模块，并且他们希望其徽标旁边的模块标题显示“ Powered by XYZ”或类似的名称。通过所谓的模块类后缀使这些成为可能。模块类后缀是通过模块本身的后端参数添加的附加类。例如，让我们首先看一下如何添加模块类后缀。

同样，不同的框架以各种方式工作，但是在这种情况下，添加模块类后缀的方法是放置样式-[无论后缀将是什么]。其他模板可能只需要-[后缀名称]，而前面没有样式。我建议查看您特定框架的文档以进行澄清。

进入位于localhost / joomla / administrator的localhost Joomla安装的后端。然后导航到顶部栏，转到“扩展”，然后单击“模块管理器”。查找您要使用的特定模块，或者根据需要甚至创建一个新模块。在此示例中，我创建了一个名为“模块类后缀”的模块，并将其放在模板的右列中。以下是页面外观的图形：

请注意，在右侧有一个名为“模块类后缀”的字段，由于这是一个Warp模板，因此我将style-water作为后缀。将这些更改应用到模块，然后转到前端。如果您使用firebug并将鼠标悬停在已创建的模块上，则应显示您的类后缀现在是模块本身上CSS类。

现在，您可以使用此样式随意设置模块样式，它只会影响此模块（或分配了该模块类后缀的任何其他模块）。这是我用来创建此模块简单样式的代码示例：

.style-water h3.module-title {
	color: blue;
}

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

这是更改前后的屏幕截图：

如果我不希望该模块看起来像这样，只需从模块管理器的参数中删除模块类后缀，然后将其恢复为默认值即可。接下来，我们将研究如何修改模块的实际模板，以便更好地控制其输出和样式。

提示7：更简单的模块模板

模块类后缀非常适合样式化单个模块，但是当您想更改模块的实际模板时会发生什么？每当我制作模板时，我喜欢做的一件事情就是通过创建如下div结构来使模块更易于样式化：

<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
		
		</div>
		
		<div class="module_middle">
		
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

作为模块模板，这真是太好了，因为仅使用这三个div，您就可以实现许多不同的外观。从Photoshop切片并将其转换为模板要容易得多。看一下我正在使用的模板中的原始模块布局：

我们有一个h3标签，一个段落标签，仅此而已。仅使用这两个元素就无法对该模块进行太多样式设置，因此为了使样式设置更容易，我们必须修改实际的模块模板本身。同样，这随模板的不同而不同，但是通常您要查找的是相同的文件-它们可能位于不同的位置。

对于此特定模板，我正在寻找以下文件：

[模板名称] \ warp \ layouts \ modules \ templates \ default-1.php
[模板名称] \ layouts \ module.php

default-1.php是实际的模块模板文件，而module.php控制哪些模块模板与哪些位置相关联。我怎么知道default-1.php是用于右列的模块模板？通过使用module.php，我可以通过以下代码查看哪个模板与右列相关联：

// set default module types
if ($style == '') {
	if ($module->position == 'top-a') $style = 'line';
	if ($module->position == 'top-b') $style = 'line';
	if ($module->position == 'bottom-a') $style = 'line';
	if ($module->position == 'bottom-b') $style = 'line';
	if ($module->position == 'innertop') $style = 'line';
	if ($module->position == 'innerbottom') $style = 'line';
	if ($module->position == 'sidebar-a') $style = 'line';
	if ($module->position == 'sidebar-b') $style = 'line';
}

如您在上面所看到的，每个模块位置都有一个与之关联的$ style。在这种情况下，它们都称为“线”。对于此模板，右列实际上称为sidebar-a，因此我寻找了sidebar-a，发现$ style等于“ line”。向下滚动该文件，我可以看到哪个模块模板与$ style的“ line”相关联。

switch ($style) {

	case 'line':
		$template		= 'default-1';
		$style			= 'mod-'.$style;
		$style			.= ($color) ? ' mod-line-'.$color : '';
		$split_color	= 1;
		$subtitle		= 1;
		$title_template = '<h3 class="module-title">%s</h3>';
		break;

	case 'dropdown':
		$template		= 'dropdown';
		$subtitle		= 1;
		break;

	case 'raw':
		$template		= 'raw';
		break;

	default:
		$template		= 'default-1';
		$style			= $suffix;
		$title_template = '<h3 class="module-title">%s</h3>';
}

在此切换案例中，您可以看到案例“ line”的$ template为“ default-1”。除非另有说明，否则所有位置的默认模块样式也为default-1。现在，我知道哪个模块模板与此模块位置相关联，可以对其进行编辑。

现在打开default-1.php，我们可以看到如下代码：

<div class="module <?php echo $style; ?> deepest">

	<?php echo $badge; ?>
	<?php if ($showtitle) echo $title; ?>
	<?php echo $content; ?>
		
</div>

如您所见，这很简单。那里没有很多div可以样式化。我们想要添加我在上面显示的div，以使此模块更易于控制。更改上面的代码，如下所示：

<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
			<?php if ($showtitle) echo $title; ?>
		</div>
		
		<div class="module_middle">
			<?php echo $content; ?>
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

我摆脱了徽章，因为我不希望它显示在我的模块模板中，但是如果需要，您可以保留它。徽章只是Warp模板与模块类后缀关联的样式。现在我们已经有了此布局，现在可以更轻松地对模块进行样式设置。以下是更具灵活性的示例：

这是实现此样式的代码（我知道这些确实是丑陋的颜色组合，但它们仅用于说明目的：

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

.style-water .module_header {
	font-size: 18px;
	font-weight: bold;
	background: blue;
	color: white;
	padding: 10px;
}

.style-water .module_header h3 {
	margin: 0;
}

.style-water .module_middle {
	background: white;
	padding: 10px;
} 

.style-water .module_bottom {	
	height: 15px;
	background: red;
}

技巧8：修复Internet Explorer错误

我们都知道Internet Explorer是我们生存的祸根，因此，如果不包括基本的IE条件，该条件将允许您根据要定位的IE版本对页面上的元素进行样式设置，因此我无法完成本教程。这不是特定于Joomla的技巧，但我将向您展示如何在Joomla中应用它。

注意：此方法是用于快速修复的方法，不应用于修复所有IE错误。如果您有很多错误需要修复，则应使用仅当用户使用该特定浏览器时才加载的IE样式表。

将这些条件包含到您的Joomla模板中非常简单。利用内容管理系统的工作方式，您只需将条件放置在主模板文件中，它将在整个站点范围内工作，从而节省了大量时间。以下是IE条件句的示例：

<!--[if IE 7]>
            <div id="ie7">
<![endif]-->

<!--[if IE 7]>
            </div>
<![endif]-->

正如您在上面看到的，我将这些条件作为Internet Explorer 7的目标。您也可以轻松地将其他IE版本定位为目标，只需将7更改为6或8。将第一个条件权放在开始<body>标记下方，然后将第二个条件权置于结束</body>标记上方，就像我们将与我们之前使用的条件登录的成员一起完成的。现在，使用CSS，您可以进行一些小的更改以修复网站上的错误。假设您有一个搜索栏，而IE7中的文本太高。如果直接更改元素CSS，则将影响正确渲染该元素的每个浏览器，并将其弄乱。更好的方法是这样编写CSS：