Magento主题的结构



Magento 主题中的文件分为两个主要目录：和 ，如以下屏幕截图所示：appskin




以下是两个目录的说明：


  • ：目录包含布局、翻译和模板文件appapp/design/frontend/base/default/
  • ：该目录包含图像、CSS 和 JavaScript 文件skinskin/frontend/base/default/


设计包和设计主题


Magento允许您将主题合并到设计包中。这为管理商店的图形和设计提供了更大的灵活性。

以下屏幕截图显示了包和主题：basedefault



软件包的主要优点非常简单：我们可以为同一商店创建默认主题和具有图形变体的无尽主题，而无需更改整个主题。


目录 1 – 应用


此目录包含布局、翻译和模板文件。


布局子目录


子目录允许您通过 XML 文件定义页面的结构。每个页面类型中的各种页面类型和块在各自的 XML 文件中定义。使用 XML，您还可以合并 CSS 文件或 JavaScript，以加载到整个站点或特定页面。layout

有针对目录和类别等页面类型的布局，但不适用于 CMS 页面;对于他们，您可以直接从管理员定义自定义 XML。

主题的每个页面、部分和块都由一个 XML 文件定义。每个页面都由句柄定义。为了更好地了解它们的工作原理，我们需要对句柄有一个概述。

以下是两个主要句柄：


  • 管理整个网站的默认句柄
  • 处理网站特定部分的非默认句柄


句柄是Magento用来引用特定页面的引用名称。例如，句柄用于控制通过CMS（内容管理系统）创建的Magento商店中页面的布局。另一个示例是用于控制产品视图页面布局的句柄。<cms_page><catalog_product_view>

XML 文件位于 中。对于好奇的人来说，以下是XML文件的一段代码：app/design/frontend/base/default/layout/page.xml



在这个例子中，我们看到为整个主题定义通用JavaScript和CSS的句柄。<default>

对于布局，无需复制每个XML文件来更改块的外观;只需插入一个JavaScript文件或CSS文件。实际上，除了模板文件之外，我们可以创建一个XML文件，我们可以在其中声明将添加或覆盖基本主题信息的所有信息。

例如，如果我们想在整个站点（定义所有主要JS）的头部插入一个新的自定义JavaScript文件，我们不需要复制该文件，并在那里声明新的JavaScript文件。覆盖应该放在我们主题的文件中。test.jspage.xmllocal.xml

因此，我们可以通过执行以下步骤在整个站点的标题中插入新的自定义 JavaScript 文件：test.js


  1. 从中打开文件（我们打开该文件仅供参考）。检查 JavaScript 是如何在基本主题中声明的。在这种情况下，我们将看到通用 JavaScript 通过以下方式在句柄中声明：
    <action method=“addJs”><script>varien/js.js</script></action>
    请注意，此目录通常由第三方扩展用于存储JS文件。从主题加载的 JS 应该存储在其中，并且使用以下方式以类似的方式声明它们：
    <action method=“addItem”><type>skinJs</type><script>js/test.js</script></action>    page.xmlapp/design/frontend/base/default/layout/page.xml<default>/skin/frontend/package/theme/default/js
  2. 在文件中，在我们的默认句柄中插入操作，然后进行更改。layout.xml
  3. 在指定的文件夹中创建JS文件。[magento_root]/skin/frontend/package/default/js/test.js


模板


模板文件是PHTML文件，HTML和PHP的混合。这些文件包含各种块的代码，位于。app/design/frontend/base/default/template/

The following screenshot shows a piece of code of the  file located at:header.phtmlapp/design/frontend/base/default/page/html



Locales


Locales contain the files of localization and translation of the theme. The folder that contains translation files of the theme is .app/design/frontend/base/locale

The file that handles the translations must be named , and within it, we’re going to insert the original lines of text that are defined in the translations, or of the new text that we created in the PHTML file.translate.csv

To find the default Magento localizations lines of text, you can explore the files at. If you open this folder, you can see that the translations are organized in various CSV files. Each of them represents a specific section of the site. For example, the  file includes all the text about the catalog pages of the site.app/locale/en_USMage_Catalog.csv

The  folder contains many folders, as there are translations that we want provide, and the  file must be placed inside the language folder. For example,.localetranslate.csvapp/design/frontend/base/locale/en_US/translate.csv

 is the name of the folder that indicates the language of the localization (en) and the country or region of the language (US).en_US

For example, if we want to create an Italian version of the theme, we have to duplicate the  file from  to.translate.csvapp/design/frontend/base/locale/en_US/app/design/frontend/base/locale/it_IT/

This will be very useful to those who use the theme and will have to translate it in the future.

As I said before, we can change some existent translations or create a new one for the custom text that we insert in the PHTML files. To change the existent translation, we have to proceed in this way. For example, let’s suppose that we want to change the text of the Add to Cart button from the default Add to Cart to Buy. We have to write in our two CSV columns. In the first column, the original text, and in the second column, the translated text: Add to Cart, Buy.

Alternatively, you can use the inline translation that will be stored in the database and is the final fallback. However, for theming the method described previously, it is better to have the theme localized.


Creating new translatable entries


Let’s suppose that you want to add a new title or a new text line into a block. Inside the PHTML file, to make the line translatable, you must incorporate the text into the PHP code in the following way:


<?php echo $this->__('New text') ?>


Now, put the following in the default CSV file: ."New text","New text"

When I say “the default CSV file”, I mean the English version of the  file.translate.csv


Directory 2 – skin


The  folder contains CSS and  files and images of the theme and is located at.skin.jsskin/frontend/base/default/


Structural blocks and content blocks


The following screenshot shows Reference Blocks and Content Blocks:



The reference blocks or structural blocks are the blocks that precisely define the container of the content blocks. For example, the header, the footer, the left and right sidebar, and the main content are a part of structural blocks. These blocks are defined in the layout XML files and the source files in the template files.

The content blocks are the blocks that hold the content. The structural blocks hold these blocks. For example, the logo, the links at the top, and the search are “content blocks” that are placed inside the reference block “header”.


CMS blocks and page


CMS (Content Management System) pages and blocks are static pages and blocks that you can manage through the admin panel. Both CMS pages and CMS blocks can contain the HTML code and Magento variables (check the next topic for more information).


CMS blocks


CMS blocks are blocks that you can create from the admin panel. They are useful for allowing the end user to customize some parts of the theme without modifying the files directly by the admin.

To create a CMS block, navigate to Admin Panel | CMS | Static Blocks as shown in the following screenshot:



Let’s say, a customer needs to insert a banner independently, but hasn’t HTML or other programming knowledge. We can create a link to a specific CMS block into an XML file that the customer can directly edit by admin, using the editor to insert text or an image.


CMS pages


CMS pages are the pages that can be created directly from the admin panel. CMS pages are static pages such as Homepage, About Us, and Customer Service. They are available via their own URL address that can be defined with his content from the admin as well.

You can create new pages by navigating to Admin Panel | CMS | Pages, as shown in the following screenshot:



CMS pages can contain html code and Magento variables. You can also customize the page aspect through the Design tab, where you can choose the layout of the page, and add additional Layout Update XML that will overwrite the  file as shown in the following screenshot:local.xml



Magento variables


Magento variables, which were mentioned in the previous topic, are moveable pieces of plain text or HTML content that are great for adding to transactional e-mails, or adding a constant copy and designs to your store with static blocks and CMS pages.

By doing so, custom text and design can be created once and applied to multiple areas to save the merchant time.

Magento comes with some system variables such as  (stores the website address),  (URL of the store logo), and many others. For a full reference about Magento variables, check the Magento blog athttp://www.magentocommerce.com/knowledge-base/entry/defining-transactional-variables.{{store url=""}}{{var logo_url}}

We can also create a new custom variable from the admin panel. To create a custom variable, perform the following steps:


  2. In the backend, navigate to System | Custom Variable as shown in the following screenshot:

  5. Click on the Add New Variable button.
  7. In the Variable Code field, enter the variable identifier only in lowercase and with no spaces, for example,  as seen in the following screenshot: store_city,

  10. Enter Variable Name, only for internal purposes.
  11. Enter the HTML code or plain text in one of the relative text areas and save it.

Note

The html code of this new variable that you created will be. It is important to insert it with the editor hidden, or the editor will change the code.{{CustomVar code="store_city"}}


现在，您可以在事务电子邮件、CMS 页面或 CMS 块中使用此变量。例如，通过执行以下步骤在“关于我们”页面中插入自定义变量：


  1. 打开CMS关于我们页面（仅当您使用示例数据处理Magento时，此页面才存在）。
  3. 隐藏编辑器并插入以下行：
    <p>我们的商店位置：{{CustomVar code=“store_city”}}</p>
    如以下屏幕截图所示：

  7. 保存页面并转到前端;然后将显示以下内容：http://path_to_magento/about-magento-demo-store
  9. 您还可以通过“插入变量”按钮添加自定义变量，该按钮在编辑器隐藏时可见。


部件


Magento小部件是具有一组预定义配置选项的前端块。当商店所有者添加或编辑小部件时，这些配置选项将显示在后端面板中的特殊编辑表单中。轻松设置小部件配置选项的能力使商店所有者可以完全控制页面上的小部件位置。

Magento小部件允许没有技术知识的用户轻松地将动态内容（包括产品数据）添加到Magento商店的页面。这允许用户通过一些简单的步骤通过管理员工具创建信息和营销内容。小部件的一些示例如下：


  • CMS 块（是的，您可以在页面中添加 CMS 块作为小部件）
  • 最近查看的项目
  • 产品目录链接


在以下屏幕截图中也可以看到相同的选项：



我们将在专门用于创建小部件的章节中讨论有关此主题的更多信息。