Practice on developing a full-fledged shortcode – lesson 31
For an example of developing a shortcode and fixing the material covered on WordPress, we will take a collection of effects for links Creative Link Effects and develop our own shortcode for it in the future premium theme.
The work of the style collection is to, to include styles and arrange classes, where needed. Here is an example of a customized structure for one effect:
In general, the set offers 21 website link style. A demonstration of how different link styles work can be see here.
Embedding Styles in WordPress and Adding a Shortcode
To get started, download the ready-made collection style file from my the site.
In my archive, there are already slightly prepared styles for our template.
Go to the downloaded archive and transfer the folder creative-link-effects at the root of our topic.
Next, we need to connect the style file to our theme., to do this, go to the file /wp-content/themes/my_theme_tmp/functions/custom-header-script.php and add connection code.
So that the code can be copied to my file, I posted an additional fragment.
1 2 |
wp_register_style('link-effect', $tmpDir.'/creative-link-effects/css/component.css'); wp_enqueue_style('link-effect'); |
After connecting the style file, we need to create a new shortcode in the file created in the previous lessons:
wp-content/themes/my_theme_tmp/functions/shortcode/shortcode.php
Since the lesson is to consolidate knowledge, I think it would be right to lay out the finished code and tell how to use it.
Consider the shortcode itself and the code snippet:
1 |
[link_effect effect="1" links="https://wp-admin.com.ua, https://wp-admin.com.ua" anchors="Уроки WordPress1, Уроки WordPress2" target="blank"] |
In the shortcode, you can specify which effect you are interested in effect=”1″ and specify links and texts for links (anchors) separated by commas. I pay attention to, that the number of links and their anchors should be the same. You can also specify an attribute target=”blank” if you want the link to open in a new window.
Consider the code of the shortcode itself:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function creative_link_effect_func( $atts ) { $effect = $atts['effect']; if($effect==''){ return 'Выберите эффект, от 1 до 21'; } $links = $atts['links']; $target = $atts['target']; $subtitle = $atts['subtitle']; if($target=='' or !isset($target)){ $target == '_self'; } if($links==''){ return 'Вы должны указать минимум 1 ссылку которую будите использовать'; } $anchor = $atts['anchors']; if($anchor==''){ return 'Вы должны указать минимум 1 содержимое ссылки'; } $links = explode(',',$links); $anchor = explode(',',$anchor); $subtitle = explode(',',$subtitle); if(count($links)!= count($anchor)){ return 'Количество анкоров и ссылок несовпадает'; } |
Choosing a shortcode effect and generating an output template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
if($effect>0 && $effect<22 ) { switch ($effect) { case 1: $res = '<nav class="cl-effect-1" id="cl-effect-1">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>'; } } $res .= '</nav>'; return $res; break; case 2: $res = '<nav class="cl-effect-2" id="cl-effect-2">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'"><span data-hover="'.$anchor[$k].'">'.$anchor[$k].'</span></a>'; } } $res .= '</nav>'; return $res; break; --------- |
In a block of executable code:
1 2 3 4 5 6 7 8 9 10 |
case 1: $res = '<nav class="cl-effect-1" id="cl-effect-1">'; if(is_array($links)){ foreach($links as $k => $v){ $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>'; } } $res .= '</nav>'; return $res; break; |
Here's how it turned out to display different shortcodes on my test site:
If you didn't succeed, then I would advise you to just copy my code from the file shortcode.php and trace line by line what happens there. You can also read the previous lesson “Creating shortcodes - lesson 30“. Good luck developing the right website templates, according to the rules of the WordPress API.
The code of the entire developed template at this stage of training
/*
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.