PKB Shortcodes - User Guide
Introduction
PKB Shortcodes provides you an ability to create custom macros and convert complex HTML code to BBCode. It is the administrative tool that helps site integrators to implement various code with shortcode that keeps the content simple and clean. The widget has flexible structure and provide creation of complex macros.
After installation PKB Shortcodes is ready to use, but comes without the set of predefined shortcodes, so you need to create custom shortcodes according to the widget syntax and your tasks.
Requirements
Minimal requirement to the platform: Pagekit 1.0.7 and higher.
Configuration
After installation the list of items is empty. Now let's create a macros. To do that go to Administrator Panel > Dashboard > Shortcodes and click on Add Shortcode button in top-right toolbar.
The widget has special rules for shortcodes. A Macros term is used together with Shortcodes that means the same. When you add a new shortcode, you’ll see the following available fields:
- Name
- Shortcode Macros
- Shortcode HTML
On the right sidebar you can assign an icon to the macros, change its status (Published / Unpublished) and set the date of publication.
Name field and its associated icon will appear in the inline editor when you insert macros from the list. Shortcode Macro is a field where you’re constructing the macros and Shortcode HTML is a text-area to add output HTML text.
To name a variable the {} symbols are used (curly brackets). To name a macros the [] symbols are used (square brackets).
Example
We need to add a "div" container that includes text with special formatting and .info class is required.
<div class="info">Text</div>We have one Text variable as a minimum. To convert it into the variable we need to use {} symbols. For macros we should use [] symbols.
As a result our shortcode will look this:
//Shortcode
[info]{text}[/info]
//html
<div class="info">{text}</div>If the text won’t be large, we can minify the shortcode:
[info text="{text}" /]Also we can complicate the task and process .info class as a variable. It will look like this:
//Shortcode
[block class="{class}"]{text}[/block]
//html
<div class="{class}">{text}</div>
The quotes are in use in case when the variable is placed inside of square brackets.
Use of Uikit elements
It is so easy now to use various elements of this front-end framework whfich is core part of Pagekit by default. We recommend you to examine core and extended components on official Uikit site for best understanding.