在本初学者教程中,您将了解如何创建自己的 ProcessWire CMS 主题。我们将创建一个超级简单的站点,涵盖模板、字段、主题结构和 php 变量。
不要忘记按照我们的第一个教程 如何安装和设置 ProcessWire CMS来加快速度。
在哪里可以找到您的 ProcessWire 主题
与wordpress等其他 CMS 不同,ProcessWire 没有主题选择过程作为其管理员的一部分,您可以通过按下标记良好的按钮来切换主题。然而,这不一定是坏事。ProcessWire 有自己的系统:“站点/模板”文件夹,其中包含与您的主题相关的所有文件。
创建空白主题
创建空白主题的最佳方法是在安装 ProcessWire (PW) 时选择站点空白配置文件。Site-blank 包含“站点/模板”文件夹中最基本的站点结构 - 这包括文件夹和文件
script
/style
/mistake
homepage.php
basic page.php
admin.php
如果您愿意,您可以在安装后使用您自己的文件创建一个新的“站点/模板”文件夹,而不是从站点空白配置文件开始,但请确保您至少拥有上面列出的文件。
Processwire 主题结构
路由
了解 PW 如何路由其页面将有助于我们稍后构建自定义模板。
当请求 PW 页面时(例如www.benbyford.com/about),PW 会查看 CMS 中的页面并检查分配了哪个模板;在这种情况下,我分配了模板“基本页面”;渲染“site/templates/”中的文件“basic-page.php”并将请求的 html 发送给用户(PW 还允许轻松使用其他格式,如 JSON 或 XML)。
提示:默认情况下,模板在 PW 中与其 PHP 模板文件同名,但是您可以在 PW 管理员中创建后随时更改模板名称和关联文件。
例如,让我们在“home.php”文件中添加一些 HTML 和 PHP:
<!DOCTYPE html> <html> <head> <title><?php echo $page->title; ?></title> </head> <body> <h1><?php echo $page->title; ?></h1> </body> </html>
现在在浏览器中转到您的站点 URL,注意title
和h1
现在应该填充您主页的标题(默认情况下:家)。
包括其他 PHP 文件
制作大量具有非常相似的 HTML 的模板文件效率不高,所以让我们制作几个可以包含到每个模板中的 .inc PHP 文件。主题中的常见结构模式是创建“head.inc”和“foot.inc”文件,用于构建常见的 HTML 代码,如我们的<head>
、导航、徽标、页脚和脚本。
让我们再次编辑我们的“home.php”文件来实现上述内容:
<?php include('./head.inc'); // include header markup ?> <h1><?php echo $page->title; ?></h1> <?php include('./foot.inc'); // include footer markup ?>
添加我们的 head.inc:
<!DOCTYPE html> <html> <head> <title><?php echo $page->title; ?></title> </head> <body>
和foot.inc:
</body> </html>
为什么要使用 .inc 文件类型?通过使用 .inc 文件类型而不是 .php,您不会混淆模板文件和您希望包含在模板中的文件。
将新模板与 CMS 关联
您可以为 PW 网站中的页面制作任意数量的模板,尽情享受吧!例如,让我们为一个名为“Contact”的新页面创建一个新模板。我开始:
复制我的“home.php” 文件并调用新文件 “ contact-page.php”
在 PW 管理员中,导航到设置 > 模板 > 添加新模板
从清单中选择您的“contact-page.php” ,从重复字段列表中 选择“主页” ,然后单击添加模板
CMS 现在知道您的新模板文件,并在创建新页面时显示为模板选项。尝试在您的主页下创建一个新页面 ,将其命名为“联系”并选择我们新的联系页面模板。现在,您的站点中至少有两个活动模板:“主页”和 “联系页面”。
惊人的!我们现在知道如何创建模板文件、将它们添加到 PW 以及使用我们的新模板创建页面。
ProcessWire 变量
最后,我们想知道如何在我们的模板中呈现添加到 PW 管理员的内容,甚至在我们的网站上使用原生 PHP。关于 PW,我最喜欢的一件事是它使主题编码人员可以通过变量和一组有用的函数即时访问内容,以实现最简单的功能。它没有的任何东西,您都可以自己用 PHP 编写,而不必担心系统会对您的代码做什么。你也不必遵循严格的类结构或钩子(我在看你drupal)。换句话说:它为您提供了一套工具,然后让您摆脱困境。
有关 PW 中所有变量和函数的汇总列表,请查看Processwire api Cheatsheet,有关详细说明,请参阅 PW变量文档。
让我们快速举例一些主要变量,以使我们的模板更具功能性。
再次编辑我们的 home.php,让我们使用$page
变量添加页面标题、正文和侧边栏内容。$page
使您可以访问在 PW 管理员中上传到该页面的所有内容。
<?php include('./head.inc'); // include header markup ?> <div id='content'> <?php // output 'title' echo "<h1>" . $page->title . "</h1>"; // output body copy echo $page->body; ?> </div><!-- end content --> <div id='sidebar'> <?php // output sidebar text if the page has it echo $page->sidebar; ?> </div><!-- end sidebar --> <?php include('./foot.inc'); // include footer markup ?>
$pages
让我们还使用变量向我们的 head.inc 添加一个简单的导航。$pages
使您可以访问您网站的其他页面,然后您可以查询内容。
<!DOCTYPE html> <html> <head> <title><?php echo $page->title; ?></title> </head> <body> <nav> <?php // Get all children of the homepage $child_pages = $pages->get("/")->children; // foreach through each child page foreach ($child_pages as $child) { // echo child page link and title echo '<a href="'. $child->url .'">'. $child->title .'</a>'; } ?> </nav>
下一步
现在您了解了 PW 中主题化的一些基础知识,我强烈建议您查看 PW 下载中包含的其他一些站点配置文件,以了解它们的结构。在我看来,尝试并从社区获得反馈也非常有益。
提示:您会在模块页面上找到许多可以帮助您在站点中构建的模块。如果你是 LESS 和脚本缩小的爱好者,我推荐AIOM 模块。
- 路由
- 包括其他 PHP 文件
- 将新模板与 CMS 关联