-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPKB Shortcodes - User Guide
90 lines (56 loc) · 4.91 KB
/
PKB Shortcodes - User Guide
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
PKB Shortcodes - User Guide
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/SNsH-TH2Z98" frameborder="0" allowfullscreen></iframe></div>
## 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.
<div class="uk-alert uk-alert-danger">Please always clear browser cache after updating the widget to a newer version (Pagekit caches its back-end side).</div>
## 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.
<figure class="uk-thumbnail">
<img src="/images/docs/pagekit/pkb-shortcodes-doc-example4.png" alt="PKB Shortcodes - list of created shortcodes">
<figcaption class="uk-thumbnail-caption">PKB Shortcodes - list of created shortcodes</figcaption>
</figure>
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
<figure class="uk-thumbnail">
<img src="/images/docs/pagekit/pkb-shortcodes-doc-example5.png" alt="Add a custom macros in PKB Shortcodes">
<figcaption class="uk-thumbnail-caption">Add a custom macros in PKB Shortcodes</figcaption>
</figure>
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.
<div class="uk-alert">The main advantage of shortcoding is the support of variables.</div>
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.
<pre><code><div class="info">Text</div></code></pre>
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.
<figure class="uk-thumbnail">
<img src="/images/docs/pagekit/pkb-shortcodes-doc-example1.png" alt="Exmaple of creating macros in PKB Shortcodes">
<figcaption class="uk-thumbnail-caption">Exmaple of creating macros in PKB Shortcodes</figcaption>
</figure>
As a result our shortcode will look this:
<pre><code>//Shortcode
[info]{text}[/info]
//html
<div class="info">{text}</div></code></pre>
If the text won’t be large, we can minify the shortcode:
<pre><code>[info text="{text}" /]</code></pre>
Also we can complicate the task and process **.info** class as a variable. It will look like this:
<pre><code>//Shortcode
[block class="{class}"]{text}[/block]
//html
<div class="{class}">{text}</div></code></pre>
<figure class="uk-thumbnail">
<img src="/images/docs/pagekit/pkb-shortcodes-doc-example2.png" alt="Exmaple of creating macros in PKB Shortcodes">
<figcaption class="uk-thumbnail-caption">Exmaple of creating macros in PKB Shortcodes</figcaption>
</figure>
The quotes are in use in case when the variable is placed inside of square brackets.
<div class="uk-alert">Note: You can insert a shortcode inside of another one. To do that, you must place custom {text} variable in the place where another shortcode will be used.</div>
<div class="uk-alert uk-alert-danger">NOTE: Only a single macros in the given string of a text is allowed to use. In case of multiple classes to be used within a single macro, put them in a new macro and use them accordingly.</div>
### 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.
<div class="uk-alert">If you're going to use any of Uikit components, please do not forget to include all required files (CSS and JS) related to the Uikit component. It can be done in Pagekit settings (Dashboard > Site > Settings > Code). More information which files must be included can be found here: <a href="https://getuikit.com/v2/index.html" rel="nofollow">Uikit2</a></div>