What is shortcode?
The
shortcode is a short piece of code, This short code will do something that you
set at creation of the shortcode, Eg show a loop, You can make this shortcode anywhere
in the post, in the theme, except Excerpt and Widget.
Today
shortcode is used quite commonly you can go to the wordpress plugins library
and look for plugins with the shortcode keyword there are many plugins to
appear it supports you with a number of full-length shortcodes required from
decorating articles to making the tasks more complex.
And in many
themes for wordpress it also supports some of its shortcode.
How to create a shortcode
All the code
in this article you write into the functions.php file of the theme nhé.
To create a
shortcode, we will have two main steps.
Step 1: Set
the code execution function in the shortcode.
Step 2:
Creates a shortcode based on the function created.
To figure
out I'm going to give you a sample of this shortcode
|
//Initialize function for shortcode
function create_shortcode() {
echo "Hello
World!";
}
// Create a shortcode named [test_shortcode] and execute the code
from the create_shortcode function
Add_shortcode ('test_shortcode',
'create_shortcode');
|
What matters
is that I've put it all into code, Now if you write [test_shortcode] in the article content, Then it will
show the hello world! instead of the shortcode you just wrote.
But one
problem is the word Hello World! It will always be at the top of the article as
we use the echo command.
If you want
to show it right place the shortcode, you must use the return statement instead
of echo.
You can fix echo "Hello
World!" to return
"Hello World!" Later when you write shortcode you should avoid using echo.
Similarly,
we apply a little knowledge of Loop and Query to create a shortcode display 10
random articles offline.
|
function create_shortcode_randompost() {
$random_query = new WP_Query(array(
'posts_per_page' => 10,
'orderby' => 'rand'
));
ob_start();
if ( $random_query->have_posts() ) :
"<ol>";
while ( $random_query->have_posts() ) :
$random_query->the_post();?>
<li><a href="<?php the_permalink(); ?>"><h5><?php the_title(); ?></h5></a></li>
<?php endwhile;
"</ol>";
endif;
$list_post = ob_get_contents(); //
Take the entire contents above the $
list_post variable to return
ob_end_clean();
return $list_post;
}
add_shortcode('random_post', 'create_shortcode_randompost');
|
|
|
You can see
from paragraph 8 to paragraph 21 I wrote the loop in the function ob_start()
and ob_end_clean(). Actually here I have to cache
anything I’ll wrap that part to use the function ob_get_contents() Go to the $ list_post variable, then
return this variable out because when you do shortcode you must use return. If
anyone has a better way, let me know.
Now you
write [random_post]
the location where you
need to display the list of random items is ok.
Create a shortcode using the
parameter
In the previous section we only learn
by creating a simple shortcode, which means it only shows what we wrote in the
shortcode that does not allow customization of the user. If you want to let the
user manually edit what is displayed, here we have to use the parameters.
For example, in the shortcode above we
have shown 10 random posts. But if using the parameter, we can let the user
customize the parameter in the number of posts displayed and can choose the
sort order if you want.
To create a shortcode containing the
parameters we create as follows.
|
function create_shortcode_ parameters1
($args, $content) {
return " this is number". $args[' parameters1'];
}
add_shortcode( 'shortcode_ parameters1',
'create_shortcode_ parameters1' );
|
First, in the function part, we have
two arguments $args and $content.
The $args variable is the shortcode parameter and the $content variable is the piece of content wrapped in
code. You see the example below:
[shortcode_thamso thamso1="100]Đây là biến $content[/shortcode]
Thus, we have thamso1 as parameter and number 100 means the value
of any parameter that the user can set. $content is wrapped inside the shortcode, but in the
above paragraph we do not use the $content variable to print so even if you write like
that, the $content section is not
showing up yet.
Now you write the shortcode on the
article it will show "this is 100" right, And that also makes the
parameter shortcode.
|
function create_shortcode_tinhtong($args,
$content) {
$tong = $args['term1'] +
$args['term2'];
return "Total".$tong;
}
add_shortcode( 'total', 'create_shortcode_total' );
|
And when writing the shortcode we will
write the following.
|
function create_shortcode_content($args,
$content) {
return strtoupper($content);
//Prints all the content in the shortcode }
add_shortcode('shortcode_content',
'create_shortcode_content');
|
And now you try to write in this
shortcode.
[shortcode_content]Viết cái gì đó vào đây[/shortcode_content]
Has it printed the entire text in the
body of the shortcode?
So why does the example above use only
$ content but have to declare both $ args? Because by default, if you just
declare a parameter, it will know for itself that the variable is the first
parameter, so it's best to declare both variables, of course you can set any
name.
Summary:
$ Args will have a parameter structure
of $ args ['arguments'], and the suffix is the parameter in the shortcode that
you have to write in the same way.
$ Content is the variable that prints
the entire contents of the open shortcode and shortcode tags.
How to write a shortcode into a PHP file
Shortcode only executes in the
WordPress editor, but in other situations it does not understand. So if you
want to insert a shortcode into a PHP file, you must use the do_shortcode ()
function to execute it. For example:
<?php echo do_shortcode('[test_shortcode]'); ?>
Examples of shortcode examples
Shortcode displays video from Youtube
By default, the embed code from
YouTube will look like this.
01
|
<iframe src="//www.youtube.com/embed/0KJ60uJZ3-Q" height="480" width="640" allowfullscreen="" frameborder="0"></iframe>
|
So here we play three parameters:
Enter the ID of the video.
Parameter to adjust the width of the
video.
Video horizontal adjustment parameter.
Ok let’t do it.
|
function create_youtube_shortcode(
$args, $content ) {
$content = '<iframe
src="//www.youtube.com/embed/'.$args['id'].'" height="
'.$args['height'].'" width="'.$args['width'].'"
allowfullscreen="" frameborder="0"></iframe>';
return $content;
}
add_shortcode('youtube', 'create_youtube_shortcode');
|
And the shortcode would look like
this:
[/youtube width="500" height="300"
id="0KJ60uJZ3-Q"]
It will manually pass the parameters
you entered into the shortcode.
Insert a full color notification box
This example will work with $ content
in the shortcode.
|
function create_notification _shortcode($args,
$content) {
return "
<div class='notification '>".$content."</div>
";
}
add_shortcode( 'notification ', 'create_notification
_shortcode' );
|
And add a little CSS to the style.css
file
|
.thongbao {
background: #585858;
padding: 1.5em 2em;
color: #FFF;
border: 1px solid #C7C7C7;
}
|
Ok, now you can write in the content
is [thongbao]Nội
dung thông báo[/thongbao] Then see the results offline.
Shortcode retrieves Facebook information
In this example, the code will be a
little too long to use get content from JSON through Facebook Graph. The
shortcode structure will be [\fbgraph username="thachpham92"]
The thachpham92 means the input
parameter, ie the Facebook username needs to be displayed.
|
function create_fbgraph_shortcode($args,
$content) {
$get_info =
wp_remote_get('https://graph.facebook.com/'.$args['username']);
$get_avatar =
"https://graph.facebook.com/".$args['username']."/picture?type=large";
$dc_info =
json_decode($get_info['body'], true);
$dc_avatar =
json_decode($get_avatar['data'], true);
// Make variables easy to handle.
$fb_id = $dc_info['id'];
$fb_username =
$dc_info['username'];
$fb_url = $dc_info['link'];
$fb_name =
$dc_info['first_name'];
// Write gender.
if ($dc_info['gender'] ==
'male') {
$fb_gender = "male";
} else if ($dc_info['gender'] == female) {
$fb_gender = "female";
} else {
$fb_gender = " Undefined!";
}
ob_start();?>
<div class="fb-info">
<h5>your information <?php echo $fb_name; ?></h5>
<div class="avatar"><img
alt="" src="<?php echo $get_avatar;
?>" /></div>
<div
class="info"><strong>your ID: </strong> <?php
echo $fb_id; ?>
<strong>Username: </strong> <?php echo $fb_username; ?>
<strong>sex: </strong> <?php echo $fb_gender; ?></div>
</div>
<?php
$result = ob_get_contents();
ob_end_clean();
return $result;
}
add_shortcode( 'fbgraph',
'create_fbgraph_shortcode' );
|
And a little CSS like demo
|
.fb-info {
overflow: hidden;
padding: 0.5em 1em;
background: #3B5998;
border: 1px solid #E8E8E8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.fb-info .avatar {
width: 30%;
float: left;
margin-right: 5%;
padding: 10px;
background: #FFF;
border: 1px solid #F3F3F3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.fb-info .info {
width: 60%;
float: right;
}
|
Ok, let's try it.
Last words
Thus, in this article you already know
through how to create a shortcode basically like, then create a shortcode that
use parameters and I also explained quite thoroughly about it (should post it
new long this) .
Really shortcode in WordPress is an
extremely powerful feature for you to insert something into the post quickly.
But be careful when using it because if you have users in multiple threads,
later you do not want it anymore shortcode off, then to really tired.
If you still have questions, please leave
a comment offline.
