小工具/模块

学习如何为Wordpress的小工具和Joomla模块创建新的位置、布局和样式。

在主题中，为模块或小工具添加新的位置是相当简单的事。你必须为新的位置命名，并设定它应当在主题布局的什么位置被渲染。

添加新的位置

将新的位置添加到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 和 display。另外，Wordpress中还有title 和 assignment。

<!-- 所有选项可用 --> 
<position>MY-POSITION</position>

<!-- 无选项可用 --> 
<position settings="">MY-POSITION</position>

<!-- 只有style和badge选项可用 --> 
<position settings="style badge">MY-POSITION</position>

注意 如果没有添加settings属性，该位置将自动显示所有可以选项。如果你使用了未添加任何值的settings属性，它将不会在模块 或 小工具面板中显示。

了解更多关于settings的信息，见小工具文档。

位置的主题设置

编辑config.xml，为主题设置中的设置(Setting) 和 布局(Layouts)面板添加关于位置的更多选项。

为位置内的小工具设置默认的渲染

在Settings中，通过新添加一个<row>元素到表格field panel_default，新建的位置将有选项可以选择默认的样式。

<fields name="Settings">
    ...
    <field type="table" name="panel_default">
        <rows label="Position">
            <row>MY-POSITION</row>
            ...

为位置设置默认的布局渲染

在Layouts中，通过添加一个<row>元素到表格field grid，新建的位置将会有选项用于设置布局、响应式行为和分割线。

<fields name="Layouts">
    ...
    <field type="table" name="grid">
        <rows label="Position">
            <row>MY-POSITION</row>
            ...

查看Config.xml，了解更多信息。

渲染位置

在/layouts/theme.php中，提供了主题的基础代码。在此，你可以设置小工具位置在何处被渲染，还可以新添加位置。

<?php if ($this['widgets']->count('MY-POSITION')):?>
    <section class="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;?>

注意 如果你已经在config.xml中声明了选项，只需添加$this['config']->get('grid.MY-POSITION.layout')即可。

查看主题布局，更好地理解小工具渲染方法。

添加CSS类名的高级方法

如果你新建的位置已经在config.xml里，作为<row>被声明在表格 field grid中，我们提供一种更简单的方法来添加CSS类名。只需要添加<?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; ?>