WCMTL 15 - Create your own shortcode (Fr)

Montreal WordCamp 2015
@MichaelBontyes

[i-am-a-shortcode]
A shortcode is a WordPress-specific code
that lets you do nifty things with very little effort.
Shortcodes can embed files or create objects that
would normally require lots of complicated,
ugly code in just one line.
Shortcode = shortcut.
https://en.support.wordpress.com/shortcodes/

// Use shortcode in a PHP file (outside the post editor).
echo do_shortcode( '[hello]' );
https://codex.wordpress.org/Function_Reference/do_shortcode

<?php
function hello() {
return "Hello WordCamp Mtl !";
}
add_shortcode( 'hello' , 'hello' );
?>
Site / Page
Editor
Functions
Hello WordCamp Mtl !
[hello]

Wordpress.com … & WordCamp.org!
[gallery type=”rectangular”]
https://en.support.wordpress.com/shortcodes/

Jetpack.me
http://jetpack.me/support/subscriptions/
[jetpack_subscription_form]

Développeurs de plugins
[geo_mashup_map]
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Getting-Started

Développeurs de plugins
[timeline-express]
https://github.com/EvanHerman/Timeline-Express

Simple
add_shortcode()
Paramétrable
shortcode_atts()
Flexible
do_shortcode()
Complexe
ob_start()

add_shortcode()
Functions.php / includes / plugin Shortcode
1 <?php
Résultat

add_shortcode()
1
2
3
4
5
6
7
8
<?php
// Create the function for the shortcode
function message_maker() {
}
?>
Résultat

add_shortcode()
1
2
3
4
5
6
7
8
9
10
<?php
return 'Hello WordCamp Mtl !';
}
?>
Résultat

add_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
}
// Register the Shortcode using the API
add_shortcode('message' , 'message_maker' );
?>
Résultat

add_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
}
?>
[message]
Résultat

add_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
}
?>
[message]
Résultat
Hello WordCamp Mtl !

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function current_year() {
return date('Y');
}
add_shortcode('year' , 'current_year' );
?>
Résultat

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
return date('Y');
}
?>
[year]
Résultat

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
return date('Y');
}
?>
[year]
Résultat
2015

shortcode_atts()
1
2
3
4
5
6
7
8
9
<?php
// Create the shortcode function
function lorem_ipsum() {
}
add_shortcode( 'lorem' , 'lorem_ipsum' );
?>
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function lorem_ipsum( $atts ) {
// Handling the Attributes
$a = shortcode_atts( array(
'sentences' => 1
), $atts );
}
?>
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
'sentences' => 1
), $atts );
// Get the Lorem Ipsum
$lorem_ipsum = get_lorem_ipsum( $a['sentences'] );
return $lorem_ipsum;
}
?>
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
'sentences' => 1
), $atts );
}
?>
[lorem sentences=“2”]
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
'sentences' => 1
), $atts );
}
?>
[lorem sentences=“2”]
Résultat
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aliter enim explicari, quod
quaeritur, non potest.

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function get_thumbnail( $atts ) {
'size' => 'thumbnail',
'class' => 'circle'
), $atts );
// Get the Thumbnail
echo get_the_post_thumbnail(
get_option('page_on_front'), $a['size'],
array( 'class' => $a['class'] ) );
}
add_shortcode( 'thumbnail' , 'get_thumbnail' );
?>
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
'class' => 'circle'
), $atts );
echo get_the_post_thumbnail(
}
?>
[thumbnail size=”medium”
class=“circle”]
Résultat

shortcode_atts()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
'class' => 'circle'
), $atts );
return get_the_post_thumbnail(
}
?>
[thumbnail size=”medium”
class=“circle”]
Résultat

$content
1
2
3
4
5
6
7
8
9
10
11
<?php
function message_maker( $atts ) {
}
?>
Résultat

$content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
function message_maker( $atts, $content = null ) {
// Upper the $content
return strtoupper($content);
}
?>
Résultat

$content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
}
?>
[message]
tout ce paragraphe
devrait être en
lettres capitales
[/message]
Résultat

$content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
}
?>
[message]
tout ce paragraphe
devrait être en
lettres capitales
[/message]
Résultat
TOUT CE PARAGRAPHE
DEVRAIT ÊTRE EN
LETTRES CAPITALES

do_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
return strtoupper(do_shortcode($content));
}
?>
Résultat

do_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
}
?>
[message]
Hello WordCamp Montreal
[year] !
[/message]
Résultat

do_shortcode()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
}
?>
[message]
Hello WordCamp Montreal
[year] !
[/message]
Résultat
HELLO WORDCAMP MONTREAL
2015 !

ob_start()
1
2
3
4
5
6
7
8
<?php
}
?>
Résultat

ob_start()
1
2
3
4
5
6
7
8
9
10
11
<?php
// Démarrage du buffer de sortie
ob_start();
}
?>
Résultat

ob_start()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
ob_start();
?>
<ul>
<li>Post title 1</li>
</ul>
<?php
}
?>
Résultat

ob_start()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
ob_start();
?>
<ul>
</ul>
<?php
// Lecture du buffer et effacement
return ob_get_clean();
}
Résultat

ob_start()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
ob_start();
?>
<ul>
</ul>
<?php
}
[message]
Résultat

ob_start()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
ob_start();
?>
<ul>
</ul>
<?php
}
[message]
Résultat
• Post Title 1
• Post Title 2

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
function show_posts( $atts, $content = null ) {
'type' => 'projects'
), $atts );
// Get the posts filtered by Post Type
$query = new WP_Query( array( 'post_type' => $a['type'] ) );
ob_start();
echo '<h1>'.do_shortcode($content).'</h1>';
echo '<ul>‘;
// The WP Query Loop
while ( $query->have_posts() ) {
$query->the_post(); ?>

<li><?php the_title(); ?></li>
</ul>
<?php }
echo '</ul>‘;
// Restore the Global $post variable - Avoid WP Query inception conflict
wp_reset_postdata();
}
add_shortcode('posts' , 'show_posts' );
[posts type=“projects”]
Mes derniers projets :
[/posts]
Résultat
Mes derniers projets :
• Project Title 1
• Project Title 2
• Project Title 3

http://gndev.info/shortcodes-ultimate/
Shortcodes Ultimate for WordPress Including a custom
shortcode maker
API / Addon
https://github.com/gndev/shortcodes-ultimate
https://codex.wordpress.org/Shortcode_API
Wordpress Codex – Shortcode API
Montreal WordCamp 2015 | @MichaelBontyes
https://github.com/michaelbontyes/Presentation-Create-Your-Own-Shortcode
Presentation “How to create your own shortcode”

WCMTL 15 - Create your own shortcode (Fr)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WCMTL 15 - Create your own shortcode (Fr)

Similar to WCMTL 15 - Create your own shortcode (Fr) (20)

Recently uploaded

Recently uploaded (20)

WCMTL 15 - Create your own shortcode (Fr)

Editor's Notes