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.
Shortco...
// Use shortcode in a PHP file (outside the post editor).
echo do_shortcode( '[hello]' );
https://codex.wordpress.org/Func...
<?php
function hello() {
return "Hello WordCamp Mtl !";
}
add_shortcode( 'hello' , 'hello' );
​?>
Site / Page
Editor
Funct...
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 thèmes
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
+
+
un peu de
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()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
<?php
// Create the function for the shortcode...
add_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
<?php
// Create the function for the shor...
add_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for...
add_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for...
add_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for...
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for the shortcode
f...
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for the shortcode
f...
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the function for the shortcode
f...
Simple
add_shortcode()
Paramétrable
shortcode_atts()
Flexible
do_shortcode()
Complexe
ob_start()
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
<?php
// Create the shortcode function
func...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// Create the shortcode f...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
shortcode_atts()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the...
Simple
add_shortcode()
Paramétrable
shortcode_atts()
Flexible
do_shortcode()
Complexe
ob_start()
$content
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
<?php
// Create the function for the shortcod...
$content
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function for the...
$content
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function for the...
$content
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function for the...
do_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function f...
do_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function f...
do_shortcode()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Create the function f...
Simple
add_shortcode()
Paramétrable
shortcode_atts()
Flexible
do_shortcode()
Complexe
ob_start()
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
<?php
// Create the shortcode function
function mes...
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
<?php
// Create the shortcode function
func...
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the short...
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the short...
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the short...
ob_start()
Functions.php / includes / plugin Shortcode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Create the short...
Functions.php / includes / plugin Shortcode
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 sho...
http://gndev.info/shortcodes-ultimate/
Shortcodes Ultimate for WordPress Including a custom
shortcode maker
API / Addon
ht...
WCMTL 15 - Create your own shortcode (Fr)
Prochain SlideShare
Chargement dans…5
×

WCMTL 15 - Create your own shortcode (Fr)

583 vues

Publié le

Presentation about "How to create your own shortcode?" with WordPress

Publié dans : Technologie
  • Soyez le premier à commenter

WCMTL 15 - Create your own shortcode (Fr)

  1. 1. Montreal WordCamp 2015 @MichaelBontyes
  2. 2. [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/
  3. 3. // Use shortcode in a PHP file (outside the post editor). echo do_shortcode( '[hello]' ); https://codex.wordpress.org/Function_Reference/do_shortcode
  4. 4. <?php function hello() { return "Hello WordCamp Mtl !"; } add_shortcode( 'hello' , 'hello' ); ​?> Site / Page Editor Functions Hello WordCamp Mtl ! [hello]
  5. 5. Wordpress.com … & WordCamp.org! [gallery type=”rectangular”] https://en.support.wordpress.com/shortcodes/
  6. 6. Jetpack.me http://jetpack.me/support/subscriptions/ [jetpack_subscription_form]
  7. 7. Développeurs de thèmes
  8. 8. Développeurs de plugins [geo_mashup_map] https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Getting-Started
  9. 9. Développeurs de plugins [timeline-express] https://github.com/EvanHerman/Timeline-Express
  10. 10. + + un peu de
  11. 11. Simple add_shortcode() Paramétrable shortcode_atts() Flexible do_shortcode() Complexe ob_start()
  12. 12. add_shortcode() Functions.php / includes / plugin Shortcode 1 <?php Résultat
  13. 13. add_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 <?php // Create the function for the shortcode function message_maker() { } ​?> Résultat
  14. 14. add_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 <?php // Create the function for the shortcode function message_maker() { return 'Hello WordCamp Mtl !'; } ​?> Résultat
  15. 15. add_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function message_maker() { return 'Hello WordCamp Mtl !'; } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> Résultat
  16. 16. add_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function message_maker() { return 'Hello WordCamp Mtl !'; } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] Résultat
  17. 17. add_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function message_maker() { return 'Hello WordCamp Mtl !'; } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] Résultat Hello WordCamp Mtl !
  18. 18. Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function current_year() { return date('Y'); } // Register the Shortcode using the API add_shortcode('year' , 'current_year' ); ​?> Résultat
  19. 19. Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function current_year() { return date('Y'); } // Register the Shortcode using the API add_shortcode('year' , 'current_year' ); ​?> [year] Résultat
  20. 20. Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the function for the shortcode function current_year() { return date('Y'); } // Register the Shortcode using the API add_shortcode('year' , 'current_year' ); ​?> [year] Résultat 2015
  21. 21. Simple add_shortcode() Paramétrable shortcode_atts() Flexible do_shortcode() Complexe ob_start()
  22. 22. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 <?php // Create the shortcode function function lorem_ipsum() { } // Register the Shortcode using the API add_shortcode( 'lorem' , 'lorem_ipsum' ); ?> Résultat
  23. 23. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Create the shortcode function function lorem_ipsum( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'sentences' => 1 ), $atts ); } // Register the Shortcode using the API add_shortcode( 'lorem' , 'lorem_ipsum' ); ?> Résultat
  24. 24. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function lorem_ipsum( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'sentences' => 1 ), $atts ); // Get the Lorem Ipsum $lorem_ipsum = get_lorem_ipsum( $a['sentences'] ); return $lorem_ipsum; } // Register the Shortcode using the API add_shortcode( 'lorem' , 'lorem_ipsum' ); ?> Résultat
  25. 25. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function lorem_ipsum( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'sentences' => 1 ), $atts ); // Get the Lorem Ipsum $lorem_ipsum = get_lorem_ipsum( $a['sentences'] ); return $lorem_ipsum; } // Register the Shortcode using the API add_shortcode( 'lorem' , 'lorem_ipsum' ); ?> [lorem sentences=“2”] Résultat
  26. 26. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function lorem_ipsum( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'sentences' => 1 ), $atts ); // Get the Lorem Ipsum $lorem_ipsum = get_lorem_ipsum( $a['sentences'] ); return $lorem_ipsum; } // Register the Shortcode using the API add_shortcode( 'lorem' , 'lorem_ipsum' ); ?> [lorem sentences=“2”] Résultat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim explicari, quod quaeritur, non potest.
  27. 27. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function get_thumbnail( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'size' => 'thumbnail', 'class' => 'circle' ), $atts ); // Get the Thumbnail echo get_the_post_thumbnail( get_option('page_on_front'), $a['size'], array( 'class' => $a['class'] ) ); } // Register the Shortcode using the API add_shortcode( 'thumbnail' , 'get_thumbnail' ); ?> Résultat
  28. 28. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function get_thumbnail( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'size' => 'thumbnail', 'class' => 'circle' ), $atts ); // Get the Thumbnail echo get_the_post_thumbnail( get_option('page_on_front'), $a['size'], array( 'class' => $a['class'] ) ); } // Register the Shortcode using the API add_shortcode( 'thumbnail' , 'get_thumbnail' ); ?> [thumbnail size=”medium” class=“circle”] Résultat
  29. 29. shortcode_atts() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function get_thumbnail( $atts ) { // Handling the Attributes $a = shortcode_atts( array( 'size' => 'thumbnail', 'class' => 'circle' ), $atts ); // Get the Thumbnail return get_the_post_thumbnail( get_option('page_on_front'), $a['size'], array( 'class' => $a['class'] ) ); } // Register the Shortcode using the API add_shortcode( 'thumbnail' , 'get_thumbnail' ); ?> [thumbnail size=”medium” class=“circle”] Résultat
  30. 30. Simple add_shortcode() Paramétrable shortcode_atts() Flexible do_shortcode() Complexe ob_start()
  31. 31. $content Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 <?php // Create the function for the shortcode function message_maker( $atts ) { } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> Résultat
  32. 32. $content Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper($content); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> Résultat
  33. 33. $content Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper($content); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] tout ce paragraphe devrait être en lettres capitales [/message] Résultat
  34. 34. $content Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper($content); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] tout ce paragraphe devrait être en lettres capitales [/message] Résultat TOUT CE PARAGRAPHE DEVRAIT ÊTRE EN LETTRES CAPITALES
  35. 35. do_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper(do_shortcode($content)); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> Résultat
  36. 36. do_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper(do_shortcode($content)); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] Hello WordCamp Montreal [year] ! [/message] Résultat
  37. 37. do_shortcode() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php // Create the function for the shortcode function message_maker( $atts, $content = null ) { // Upper the $content return strtoupper(do_shortcode($content)); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ​?> [message] Hello WordCamp Montreal [year] ! [/message] Résultat HELLO WORDCAMP MONTREAL 2015 !
  38. 38. Simple add_shortcode() Paramétrable shortcode_atts() Flexible do_shortcode() Complexe ob_start()
  39. 39. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 <?php // Create the shortcode function function message_maker() { } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ?> Résultat
  40. 40. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 <?php // Create the shortcode function function message_maker() { // Démarrage du buffer de sortie ob_start(); } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ?> Résultat
  41. 41. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function message_maker() { // Démarrage du buffer de sortie ob_start(); ?> <ul> <li>Post title 1</li> <li>Post title 2</li> </ul> <?php } // Register the Shortcode using the API add_shortcode('message' , 'message_maker' ); ?> Résultat
  42. 42. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function message_maker() { // Démarrage du buffer de sortie ob_start(); ?> <ul> <li>Post title 1</li> <li>Post title 2</li> </ul> <?php // Lecture du buffer et effacement return ob_get_clean(); } Résultat
  43. 43. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function message_maker() { // Démarrage du buffer de sortie ob_start(); ?> <ul> <li>Post title 1</li> <li>Post title 2</li> </ul> <?php // Lecture du buffer et effacement return ob_get_clean(); } [message] Résultat
  44. 44. ob_start() Functions.php / includes / plugin Shortcode 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php // Create the shortcode function function message_maker() { // Démarrage du buffer de sortie ob_start(); ?> <ul> <li>Post title 1</li> <li>Post title 2</li> </ul> <?php // Lecture du buffer et effacement return ob_get_clean(); } [message] Résultat • Post Title 1 • Post Title 2
  45. 45. Functions.php / includes / plugin Shortcode 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 ) { // Handling the Attributes $a = shortcode_atts( array( '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(); ?> <!-- Build the HTML --> <li><?php the_title(); ?></li> </ul> <?php } echo '</ul>‘; // Restore the Global $post variable - Avoid WP Query inception conflict wp_reset_postdata(); return ob_get_clean(); } 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
  46. 46. 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”

×