如何开发Processwire主题

最新推荐文章于 2024-09-01 00:00:00 发布

daique1908

最新推荐文章于 2024-09-01 00:00:00 发布

阅读量248

点赞数

文章标签： python java php linux html

在本入门教程中，您将学习有关创建自己的ProcessWire CMS主题的信息。我们将创建一个非常简单的网站，涵盖模板，字段，主题结构和PHP变量。

不要忘记遵循我们的第一个教程“ 如何安装和设置ProcessWire CMS”来加快速度。

在哪里找到您的ProcessWire主题

与WordPress之类的其他CMS不同，ProcessWire在其管理中没有主题选择过程，您可以在其中按下带有标签的按钮来切换主题。但是，这不一定是一件坏事。 ProcessWire有其自己的系统：文件夹“ site / templates”，其中包含与您的主题相关的所有文件。

创建一个空白主题

创建空白主题的最佳方法是在安装ProcessWire（PW）时选择站点空白配置文件。网站空白包含“网站/模板”文件夹中最基本的网站结构-其中包括文件夹和文件

/脚本
/样式
/错误
home.php
basic-page.php
admin.php

如果需要，您可以根据需要在安装后使用自己的文件创建一个新的“ site / templates”文件夹，而不是从空白站点配置文件开始，但是请确保至少具有上面列出的文件。

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 lang="en">
<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 lang="en">
<head>
    <title><?php echo $page->title; ?></title>
</head>
<body>

还有foot.inc：

</body>
</html>

为什么使用.inc文件类型？我听到你问‽：好，在PW管理员中添加新模板时，系统会在site / templates /文件夹中查找模板尚未使用的任何新.php文件。通过使用.inc文件类型而不是.php，您不会在模板文件和希望包含在模板中的文件之间感到困惑。

将新模板与CMS关联

您可以为PW网站中的页面制作任意数量的模板， 发狂！ 例如，让我们为一个名为“ Contact”的新页面创建一个新模板。我开始于：

复制我的“ home.php” 文件并调用新的文件“接触page.php文件”
在PW管理员中，导航至设置>模板>添加新模板
选择您的“ contact-page.php” 从清单中选择“家” 从重复字段列表中，然后单击添加模板

CMS现在知道您的新模板文件，并且在创建新页面时它将显示为模板选项。尝试在您的家下面创建一个新页面页，将其命名为“联系人”，然后选择我们新的联系人页面模板。现在，您的站点中至少有两个活动模板：“主页”和“联系页面”。

惊人！现在，我们知道了如何创建模板文件，将其添加到PW以及使用我们的新模板创建页面的方法。

ProcessWire变量

最后，我们想知道如何在模板中呈现添加到PW管理员的内容，甚至使用原始PHP到我们的网站。关于PW的我最喜欢的事情之一是，它使主题编码器可以通过变量和一组最简单功能的有用功能立即访问内容。它没有的任何内容，您都可以自己用PHP编写，而不必担心系统会对您的代码做些什么。您不必遵循严格的类结构或钩子（我在看着您Drupal）。换句话说：它为您提供了一套工具，然后让您摆脱困境。

有关PW中所有变量和函数的摘要列表，请查阅Processwire API备忘单，有关更多说明，请参见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 lang="en">
<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模块。

当然，请在Envato Tuts +上查找将来的教程。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-develop-a-processwire-theme--cms-25692

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何开发Processwire主题

在本入门教程中，您将学习有关创建自己的ProcessWire CMS主题的信息。我们将创建一个非常简单的网站，涵盖模板，字段，主题结构和PHP变量。不要忘记遵循我们的第一个教程“ 如何安装和设置ProcessWire CMS”来加快速度。在哪里找到您的ProcessWire主题与WordPress之类的其他CMS不同，ProcessWire在其管理中没有主题选择过程，您可以在其...
复制链接

扫一扫