ホームページ  >  記事  >  バックエンド開発  >  PyroCMS テーマの作成: ステップバイステップガイド

PyroCMS テーマの作成: ステップバイステップガイド

WBOY
WBOYオリジナル
2023-09-04 10:49:06839ブラウズ

ほとんどのコンテンツ管理システムと同様、PyroCMS はフロントエンド テーマを使用します。 PyroCMS テーマは、使い慣れている他のシステムのテーマとは少し異なる方法で構築されていますが、それでも簡単に作成できます。実際、これらは非常にシンプルなので、組み立てるのに PHP の経験はほとんど必要ありません。


フォルダー構造

PyroCMS テーマは、次のサポートされているフォルダーに配置された HTML、画像、CSS、および JavaScript で構成されます。

    CSSS
  • ### 写真###
  • js
  • 視聴回数
  • ビュー/レイアウト
  • コンテンツの一部を表示する
  • ビュー/モジュール
  • これらのフォルダーには見覚えがあるでしょうが、MVC コンテキストでは「views」フォルダーが最も意味を持ちます。 PyroCMS のテーマを構築するときは、実際には MVC パターン アプリケーションのビュー (アセットを含む) を構築することになります。これらのビューは、メイン レイアウト ファイルと、異なるレイアウト間でプレゼンテーション ロジックを共有する複数の部分ファイル (
  • header.html
または

footer.html) で構成されます。これについては後ほど説明します。 使い始める


最初の PyroCMS テーマの構築を開始するには、PyroCMS インスタンス内の 2 つの場所のいずれかにサポートされているフォルダー構造を作成します。 リーリー ###または:### リーリー

サポートされているフォルダー構造でベース テーマ フォルダーを作成した後、テーマに追加する最初のファイルは

theme.php

です。

リーリー

この

theme.php

ファイルには、名前、作成者、バージョンなど、テーマの重要な詳細がすべて含まれています。ある意味、このファイルは WordPress テーマの style.css ファイルに似ています。以下は、PyroCMS テーマの

theme.php

ファイルの基本的な例です。 リーリー このファイルは Theme という名前の PyroCMS クラスを拡張することに注意してください。また、このファイルで PHP クラスを宣言しているため、クラス宣言ではテーマが含まれているフォルダーの名前を必ず使用する必要があります。したがって、テーマを含むフォルダーの名前が「foo」の場合、theme.php で作成されたクラスの名前は、Theme_Custom

ではなく、

Theme_Foo にする必要があります。 PyroCMS ドキュメントの例)。 theme.php ファイルを作成した後、PyroCMS コントロール パネルにログインし、テーマ モジュールにリストされているテーマを表示できます。

###レイアウト### PyroCMS テーマのすべてのレイアウト ファイルは、次の 2 つの場所のいずれかに存在します。 リーリー ###または:### リーリー すべてのテーマには、上記のいずれかの場所に「default.html」という名前のレイアウト ファイルが必要です。レイアウト ファイルの追加はオプションです。レイアウト ファイルを追加する方法については後ほど説明します。まず、レイアウト ファイルの内容を確認することが重要です。

PyroCMS のレイアウト ファイルは、HTML とタグ パーサー (Lex タグ パーサーと呼ばれます) を使用して構築されます。非常に基本的な PyroCMS レイアウト ファイルは次のようになります: 创建 PyroCMS 主题:分步指南 リーリー

この HTML にある特別なタグは、Lex parser タグです。 PHP で Smarty テンプレートを使用したことがある場合は、これらのテンプレートに多少見覚えがあるかもしれません。レイアウト ファイルで Lex パーサー タグを使用する主な利点は、PHP をビューに直接配置する必要がないことです (MVC を使用していることを思い出してください)。これにより、
Don' に従うパターンを作成できるようになります。

もう一度繰り返します。

もちろん、上で示した例は単純ですが、Lex パーサー タグは非常に強力です。データをループしたり、プロパティを操作したりできます。 Lex パーサーの詳細については、PyroCMS ドキュメントを参照してください。

より複雑な PyroCMS レイアウト ファイルは次のようになります:

リーリー

Lex を使用したこのレイアウト ファイルには、CSS、JavaScript、画像などのリソースが含まれていることがわかります。 Lex タグと HTML を使用すると、PyroCMS 開発者はレイアウト ファイルを非常に迅速に構築できます。

###一部###

PyroCMS のパーシャルは部分的なレイアウトを表し、レイアウトを再利用可能なパーツまたはセクションに分割できます。これらのセクションは、別のレイアウト ファイルを介してロードできます。これにより、複数のレイアウト ファイルに同じコード (ヘッダー、フッターなど) を入力できなくなります。

テーマ ファイルを配置する場所に応じて、一部のコンテンツは 2 つの場所のいずれかに作成されます: リーリー ###または:### リーリー

この Lex タグを使用して、コンテンツをレイアウトに読み込みます:

リーリー

この Lex タグは、PHP の

include

ステートメントとまったく同じように動作します。これは、WordPress や他のテーマで見られるものと同様です。以下のコードは、部分的な PyroCMS レイアウトの簡単な例です。

リーリー


header.html

セクションと

footer.html

ファイルの内容は、もちろん、上記のコード例のテンプレートから再利用する必要がある HTML です。簡単なヒント: レイアウトで使用できるセクションの数に制限はありません。さらに、一部のファイルには、有効な HTML と Lex の任意の組み合わせが含まれる場合があります。


多个布局文件

要向 PyroCMS 实例添加另一个布局,请在主题的 views/layouts/ 目录中再创建一个布局文件。该文件可以使用任何名称,但最好尽可能具有描述性地命名 - 例如 about.html

为了增加灵活性,您可以使用任意数量的布局文件。当您在 PyroCMS 控制面板(控制面板→页面→页面类型)中编辑或创建页面类型并从下拉列表中选择所需文件时,您的所有布局主题的布局文件将可供使用。

创建 PyroCMS 主题:分步指南


移动布局

PyroCMS 能够轻松显示移动设备和桌面设备的单独布局。要使用此功能,请将布局文件移动到 views 文件夹中名为“web”的文件夹中,以便您的默认布局位于此处:

[your-theme]/views/web/layouts/default.html

当用户使用桌面浏览器访问您的网站时,将使用此位置的主要布局文件。如果用户使用移动设备浏览器访问您的网站,则会向用户提供您在此位置创建的移动布局:

[your-theme]/views/mobile/layouts/default.html

此功能适用于多个布局文件。

请注意 PyroCMS 文档中的警告:“PyroCMS 不认为 iPad 是移动设备,因此如果用户使用 iPad 访问您的网站,它不会加载您的移动布局。”但是,如果在您的网站上,您希望将 iPad 识别为移动设备,则可以更改 config/ 目录中的“user_agent.php”文件,以使 iPad 识别为移动设备。移动设备。


完成!

使用本文作为指南,您可以看到在 PyroCMS 中创建主题是多么容易。提供的代码示例非常简单,因此我鼓励您探索 PyroCMS 文档,以便对 PyroCMS 中的布局、移动布局、部分和 Lex 解析器有更丰富的经验。玩得开心!

以上がPyroCMS テーマの作成: ステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。