Warp架构中文说明——Widgets/Modules 小工具/模块

本节我们将要为 WordPress的widgets（ Joomla 模块）创建一个新的位置, 布局和样式

为模块增加一个新的位置非常简单.你只要命名一个位置名称，并定义它在布局中的显示位置 theme layout.

新建一个位置

在Joomla中添加一个新的位置，是 templateDetails.xml 文件。在WordPress中是 theme.xml 文件.这个新的位置将显示在你的模板设置中.

<position>top-a</position><position>MY-POSITION</position><position>bottom-a</position>

添加设置

 settings 属性可以控制的操作你的位置. 在你的模板设置面板上面你会发现这些 Modules/Widgets. 可用值有 class, style, icon, badge and display. 另外, title 和 assignment 在 WordPress中有效.

<!-- all option are available --> 
<position>MY-POSITION</position>

<!-- no option are available --> 
<positionsettings="">MY-POSITION</position>

<!-- only the style and badge options are available --> 
<positionsettings="style badge">MY-POSITION</position>

NOTE 如果没有给 settings 定义属性,你的位置自动显示所有可用的选项，如果你使用 settings 属性没有添加一个值,它不显示在 Modules 或 Widgets 面板.

关于更多的 settings 信息在 Widget/Module Settings 章节.

模板位置设置

编辑 config.xml 添加一个去进一步设置Settings 好 Layouts 页面.

设置默认小部件出现的位置

添加一个新的 <row> 元素到表格字段 panel_default 中，在 Settings 部分为你的新位置选择一个默认样式.

<fieldsname="Settings">
    ...
    <fieldtype="table"name="panel_default">
        <rowslabel="Position">
            <row>MY-POSITION</row>
            ...

设置默认布局的位置

添加一个 <row> 元素到 grid 中in the Layouts 部分为你的位置会有选项设置布局, the responsive behavior and a divider.

<fieldsname="Layouts">
    ...
    <fieldtype="table"name="grid">
        <rowslabel="Position">
            <row>MY-POSITION</row>
            ...

查看 Config.xml 获取更多关于它的介绍.

渲染位置

这个 /layouts/theme.php 提供主题的基本标记. 在这里你可以定义小部件出现的位置并添加新的一个.

<?php if($this['widgets']->count('MY-POSITION')):?>
    <sectionclass="uk-grid"data-uk-grid-match="{target:'> div > .uk-panel'}">
        <?php echo $this['widgets']->render('MY-POSITION', array('layout'=>$this['config']->get(
        'grid.MY-POSITION.layout')));?>
    </section><?php endif;?>

NOTE 你仅需要添加 $this['config']->get('grid.MY-POSITION.layout') 语法,如果你已经设定一个选项config.xml.

查看 Theme Layout 更好的理解小部件呈现方法。

高级的方式来添加CSS类

如果你的位置定义了一个新的样式 <row>在字段 grid of the config.xml, 我们提供简单的方法定义Class. 只需要添加 <?php echo $grid_classes['MY-POSITION']; ?> 到你的 class 属性. 这将给你的位置的选项设置布局、响应行为和分频器。

<?php if($this['widgets']->count('MY-POSITION')):?>
    <section class="<?php echo $grid_classes['MY-POSITION'];?>" data-uk-grid-match="{target:'> div > .uk-panel'}"
    data-uk-grid-margin><?php echo $this['widgets']->render('MY-POSITION', array('layout'=>
    $this['config']->get('grid.MY-POSITION.layout')));?></section><?php endif;?>

在中国六艺专注Joomla建站与策划设计，为您的品牌发展创造动力！