本節(jié)我們將要為 WordPress的widgets（ Joomla 模塊）創(chuàng)建一個新的位置, 布局和樣式

為模塊增加一個新的位置非常簡單.你只要命名一個位置名稱，并定義它在布局中的顯示位置 theme layout.

新建一個位置

在Joomla中添加一個新的位置，是 templateDetails.xml 文件。在WordPress中是 theme.xml 文件.這個新的位置將顯示在你的模板設(shè)置中.

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

添加設(shè)置

 settings 屬性可以控制的操作你的位置. 在你的模板設(shè)置面板上面你會發(fā)現(xiàn)這些 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 面板.

關(guān)于更多的 settings 信息在 Widget/Module Settings 章節(jié).

模板位置設(shè)置

編輯 config.xml 添加一個去進一步設(shè)置Settings 好 Layouts 頁面.

設(shè)置默認小部件出現(xiàn)的位置

添加一個新的 <row> 元素到表格字段 panel_default 中，在 Settings 部分為你的新位置選擇一個默認樣式.

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

設(shè)置默認布局的位置

添加一個 <row> 元素到 grid 中in the Layouts 部分為你的位置會有選項設(shè)置布局, the responsive behavior and a divider.

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

查看 Config.xml 獲取更多關(guān)于它的介紹.

渲染位置

這個 /layouts/theme.php 提供主題的基本標記. 在這里你可以定義小部件出現(xiàn)的位置并添加新的一個.

<?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') 語法,如果你已經(jīng)設(shè)定一個選項config.xml.

查看 Theme Layout 更好的理解小部件呈現(xiàn)方法。

高級的方式來添加CSS類

如果你的位置定義了一個新的樣式 <row>在字段 grid of the config.xml, 我們提供簡單的方法定義Class. 只需要添加 <?php echo $grid_classes['MY-POSITION']; ?> 到你的 class 屬性. 這將給你的位置的選項設(shè)置布局、響應(yīng)行為和分頻器。

<?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建站與策劃設(shè)計，為您的品牌發(fā)展創(chuàng)造動力！