創(chuàng)建自定義內(nèi)容形式

Widgetkit是模塊化擴(kuò)展設(shè)計(jì)形式: 它可以將內(nèi)容和介紹彼此分開(kāi).

在本文中,您將學(xué)習(xí)如何使用Widgetkit創(chuàng)建自己的內(nèi)容形式。使用內(nèi)容定制插件Widgetkit檢索將呈現(xiàn)小部件的數(shù)據(jù)。這個(gè)特性允許不同的內(nèi)容類型,使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>