创建自定义内容形式

Widgetkit是模块化扩展设计形式: 它可以将内容和介绍彼此分开.

在本文中,您将学习如何使用Widgetkit创建自己的内容形式。使用内容定制插件Widgetkit检索将呈现小部件的数据。这个特性允许不同的内容类型,使Joomla,ZOO或K2集成成为可能。

In order to create your own content provider you can copy an existing one and start adapting it to your needs. Alternatively, you can create a new one from scratch following the steps explained here. In both scenarios you shoud rely on the existing plugins as reference, which you can find in the/wp-content/plugins/widgetkit/plugins/content folder in WordPress and/administrator/components/com_widgetkit/plugins/content folder in Joomla.

NOTE Please make sure to  style="color: #0096d7;" title="Where to Store Your Customizations">store your customizations in a way so that they don't get lost during a Widgetkit update.

FILE STRUCTURE

Let's start by creating the file structure for our plugin. We need the main file, an icon and the view to render the content editor layout.

|-- plugin.php          // main plugin content|-- content.svg         // plugin icon in SVG format+-- views/|      edit.php         // edit form layout

PLUGIN.PHP

The plugin.php file contains a PHP array to set your plugin by passing the configurations and event functions to Widgetkit. Whatever logic you need it must be passed throught this array. Checkout the comments to get information about what does each one of it. Don't forget the return statement, as this file is supposed to return a valid configuration array.

<?php

return array(

    // Plugin name
    'name'=>'content/PLUGIN-NAME',

    // Main class the plugin is extending
    'main'=>'YOOtheme\\Widgetkit\\Content\\Type',

    // Plugin configuration
    'config'=>function($app){

        return array(

            // Plugin raw name
            'name'  =>'PLUGIN-NAME',

            // Plugin label which will be displayed to the user
            'label'=>'PLUGIN-LABEL',

            // Url to the plugin icon
            'icon'  => $app['url']->to('plugins/content/PLUGIN-NAME/content.svg'),

            // Supported widget fields
            'item'  => array('title','content','link','media'),

            // Default configuration data
            'data'  => array(
                'key'=>'value'
            )
        );
    },

    // Function that will retrieve and return the widget items
    'items'=>function($items, $content, $app){

        // Retrieve the data and maps it to the widget item
        foreach($source as $value){

            $data = array();
            $data['title']='TITLE'
            $data['content']='CONTENT'
            $data['link']='LINK'
            $data['media']='MEDIA'

            // Add new item to the widget array of items
            $items->add($data);
        }

    },

    // An array of Widgetkit events you want to listen to
    'events'=> array(

        // Triggered when Widgetkit is initialized in the back end
        'init.admin'=>function($event, $app){

            // registers the edit view
            $app['angular']->addTemplate('PLUGIN-NAME.edit','plugins/content/PLUGIN-NAME/views/edit.php');
        },

        // Triggered when Widgetkit is initialized in the front end
        'init.site'=>function($event, $app){},

        // Triggered when Widgetkit is initialized
        'init'=>function($event, $app){}
    )

);

VIEWS/EDIT.PHP

The views/edit.php file contains the form layout that will be displayed in the Widgetkit admin area when setting up the content provider. It relies on UIkit;for its styling and on AngularJS;for the logic. Check the respective documentation for further information.

<!-- wrap the content with uk-form style --><divclass="uk-form uk-form-stacked">

    <!-- wrap each field -->
    <divclass="uk-form-row">

        <!-- set the field label -->
        <labelclass="uk-form-label"for="wk-FIELD-NAME">FIELD-LABEL</label>

        <!-- set the field inputs -->
        <divclass="uk-form-controls">
            <inputid="wk-FIELD-NAME"class="uk-form-width-large"type="text"value=""ng-model="content.data['FIELD-NAME']">
        </div>

    </div>

    <!-- other examples -->
    <divclass="uk-form-row">
        <divclass="uk-form-controls">
            <label><inputtype="checkbox"ng-model="content.data['FIELD-NAME']"ng-true-value="1"ng-false-value="0"> FIELD-LABEL</label>
        </div>
    </div>

    <divclass="uk-form-row">
        <labelclass="uk-form-label"for="wk-FIELD-NAME">FIELD-LABEL</label>
         <divclass="uk-form-controls">
            <selectid="wk-FIELD-NAME"class="uk-form-width-large"ng-model="content.data['FIELD-NAME']">
                <optionvalue="">VALUE</option>
            </select>
        </div>
    </div>

</div>