Mangento 如何创建 Custom layout

You may find that you want to add additional layout template options to theCMS section that can be chosen when creating or editing a page in the admin interface.

Step 1: Create New Template

Create a new template file in the following directory (you may want to simply copy an existing template, such as 1column.phtml) and name it with an appropriate name (ie: home.phtml if that template will be used for your home page).

app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/page/

whereas YOUR_INTERFACE typically remains “default” and YOUR_THEME can also be “default” (please see Design-Guide about proper naming of themes and interfaces)

Step 2: Create a new module

In order to customize the configuration of Magento without hacking into existing files we need to create a new module. This is very simple. The module will only contain a configuration file that updates the section that lists the available templates for theCMS.

We’ll call the module Banana (just a example) and its package name Fruit (also just an example).

Note: You may (and probably should) choose a different module/package name, just be consistent throughout the process.

We need to tell Magento about our new module, so create a new file:

app/etc/modules/Fruit_Banana.xml

with the following content:

1. <?xml version=« 1.0 »?>
2. <config>
3.   <modules>
4.     <Fruit_Banana>
5.       <active>true</active>
6.       <codePool>local</codePool>
7.       <depends>
8.         <Mage_Page />
9.       </depends>
10.     </Fruit_Banana>
11.   </modules>
12. </config>

Now we need to actually create the module itself. Create the following file (and the neccessary folder structure):

app/code/local/Fruit/Banana/etc/config.xml

with the following content:

1. <?xml version=« 1.0 »?>
2. <config>
3.   <modules>
4.     <Fruit_Banana>
5.       <version>0.1.0</version>
6.     </Fruit_Banana>
7.   </modules>
8.   <global>
9.     <page>
10.       <layouts>
11.         <INTERNAL_NAME_FOR_YOUR_NEW_LAYOUT translate=« label »>
12.           <label>LAYOUT_NAME</label>
13.           <template>page/LAYOUT_FILE_NAME.phtml</template>
14.           <layout_handle>LAYOUT_HANDLE</layout_handle>
15.         </INTERNAL_NAME_FOR_YOUR_NEW_LAYOUT>
16.         <!– add more layouts here –>
17.       </layouts>
18.     </page>
19.   </global>
20. </config>

The capitalized parts need to be filled in by you.

Any new layouts you want to add should to be in the following format:

1. <layout_description translate=« label »>
2.     <label>Layout Name</label>
3.     <template>page/template_name.phtml</template>
4.     <!– defining the layout handle is optional –>
5. </layout_description>

Using the same steps, and modifying them for each template, you can create new layout templates for use on any CMSpage.

You’re done!

Also, take a look at the config.xml of the Page module in the Mage package; it defines the layouts that come with Magento:

app/code/core/Mage/Page/etc/config.xml

On line ~47(version 1.5.1.0) find:

1. <page>
2.     <layouts>
3.         <empty module=« page » translate=« label »>
4.             <label>Empty</label>
5.             <template>page/empty.phtml</template>
6.             <layout_handle>page_empty</layout_handle>
7.         </empty>
8.         <one_column module=« page » translate=« label »>
9.             <label>1 column</label>
10.             <template>page/1column.phtml</template>
11.             <layout_handle>page_one_column</layout_handle>
12.             <is_default>1</is_default>
13.         </one_column>
14.         <two_columns_left module=« page » translate=« label »>
15.             <label>2 columns with left bar</label>
16.             <template>page/2columns-left.phtml</template>
17.             <layout_handle>page_two_columns_left</layout_handle>
18.         </two_columns_left>
19.         <two_columns_right module=« page » translate=« label »>
20.             <label>2 columns with right bar</label>
21.             <template>page/2columns-right.phtml</template>
22.             <layout_handle>page_two_columns_right</layout_handle>
23.         </two_columns_right>
24.         <three_columns module=« page » translate=« label »>
25.             <label>3 columns</label>
26.             <template>page/3columns.phtml</template>
27.             <layout_handle>page_three_columns</layout_handle>
28.         </three_columns>
29.     </layouts>
30. </page>

If you don’t care for updating Magento and love hacking core files (something you generally shouldn’t do, unless you know what you’re doing) you can also just update this file (app/code/core/Mage/Page/etc/config.xml). Beware though that Magento updates can override the changes you’ve made.

—————————-

my code

etc/module/Wang_designer.xml

<?xml version= »1.0"?>
<config>
<modules>
<Wang_Designer>
<active>true</active>
<codePool>local</codePool>
<depends>
<Mage_Page />
</depends>
</Wang_Designer>
</modules>
</config>

/app/code/local/wang/Designer/etc/config.xml

<?xml version= »1.0"?>
<config>
<modules>
<Wang_Designer>
<version>0.1.0</version>
</Wang_Designer>
</modules>
<global>
<page>
<layouts>
<designer module= »page » translate= »label »>
<label>static designer page</label>
<template>page/designer.phtml</template>
<layout_handle>page_designer</layout_handle>
</designer>

</layouts>
</page>
</global>
</config>