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)

452 vues

Publié le

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

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
452
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 5’ Introduction :
    - Remerciements – 1ere fois – team
    - On va parler des shortcodes en 3 parties : intro, code, q-a -> question voisins si pas voisin stopper moi!
    Sondage
    MAIS premiere question , c’est quoi un SHORTCODE???
  • Exemple
  • Exemple
  • page / post / custom post type
    widget
  • ******* 5’ *******

    TOUT gratuit ou open source!
  • ******* 10’ *******

    Gratuit ! Pas de plugin en plus !
  • Type et caracteristiques des SHORTCODES
  • Function principale en VERT

    Dans FUNCTIONS, INC ou PLUGIN
    PRECEDURALE OU EN ORIENTE OBJET
  • ON ENREGISTRE LE SHORTCODE
  • Shortcode dans la page de la homepage par exemple
  • Exemple du copyright ou signature en bas de page
  • ******* 15’ *******
  • Example du lorem ipsum pour l’integrateur et son CSS
  • Get_lorem autre function utilisant l’API lorem ipsum
  • Et si je dois prendre en compte tout un paragraphes ou plusieurs??
  • Mise en capitales
  • Comme des balises HTML – CLOSING TAG
  • ET si on compliquait un peu???
    Exemple de texte en capital avec la date ou une signature a la fin
    Ou une image de homepage
  • ******* 20’ *******
  • example de la LOOP
    Attention au wp_reset_query
  • Buffer / tampon / temporisateur de sortie
    Pas specifique a API shortcode wordpress! Mais utile!
  • Type de posts
    Un titre
    Du HTML
    Reset post data
  • 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”

    ×