Inclure votre site marchand PrestaShop sur votre blog WordPress

=> Source: blog.joelgaujard.info <=

Vous retrouvez ici le tutorial complet pour inclure votre site marchand PrestaShop sur votre blog WordPress.

Pour commencer, voici quelques URLs où ce module est déjà en action :
Pour ce tutorial, il est nécessaire de posséder un site marchand PrestaShop et un blog WordPress. Vous aurez aussi besoin de télécharger 2 modules (un gratuit et un payant), les URLs vers ces derniers seront indiqués dans la suite…
Bonne lecture !

PrestaShop et WordPress installés !

Pour ce tutorial, nous utiliserons les dernières versions de ces 2 superbes solutions open source, à l’heure actuelle (lundi 18 janvier 2010 à 13:35 GMT+4h) il s’agit de WordPress 2.9.1 et de PrestaShop 1.2.5.Installation de PrestaShopPour ce tutorial, j’ai installé une version 1.2.5 de PrestaShop toute vierge.

Repertoire BLOGJ’ai ensuite crée un sous-repertoire « blog » parmi les fichiers de prestashop contenant l’ensemble de la solution WordPress.

WordPress installation successfullEnfin, j’ai installé une version toute neuve de WordPress 2.9.1.

Voici une capture d’écran après l’installation des 2 solutions. Pour ce tutorial, nous travaillerons avec le thème par défaut des 2 solutions.
prestashop et wordpress interface

Installation du module WordPress pour PrestaShop

Un module PrestaShop est nécessaire pour la suite de ce tutorial; il est téléchargeable sur ma boutique :http://prestashop.joelgaujard.info/product.php?id_product=17Repertoire module prestashopUne fois le module téléchargé, veuillez le dézipper (et l’uploader si nécessaire) dans le répertoire « module » de votre projet PrestaShop.

PrestaShop installation module WordPress
Accédez à votre interface de gestion de vos modules PrestaShop dans la console administration de votre boutique. Puis installez le !

Position des modules PrestaShop
Lors de l’installation du module, deux nouveaux hooks (crochets) ont été crée dynamiquement et ils contiennent l’ensemble des modules déjà présent dans le hook « top » (celui contenant l’entête) et ceux présents dans le hook « footer » (celui contenant le pied de page).
L’intérêt de ces 2 hooks est de pouvoir « personnaliser » ce qui sera afficher sur le blog; par exemple, le changement de monnaies peut être retirer vu qu’il n’y a pas d’intérêt à ce qu’il apparaisse ou encore le module contenant le changement de langue car WordPress n’a pas le multi-langue dans ses fonctionnalités de base.

Configuration du module WordPress pour PrestaShop
Vous devez impérativement configurer l’URL ou le dossier ou se trouve votre blog. Il est conseillé d’utiliser une URL de type « http://www.mon-site-marchand.com/blog/ » plutot que d’utiliser un nom de dossier de type « blog ».

Installation de l’extension pour WordPress

Maintenant que la partie PrestaShop est finie (ce qui était relativement simple et rapide) passons à la partie WordPress qui est plus complexe. Pour ceci, il est nécessaire de télécharger gratuitement l’extension disponible ici :http://wordpress.org/extend/plugins/wp-prestashopRépertoire du plugin PrestaShop pour WordPress
Il faut tout d’abord installer le module soit en le décompressant (et uploader si necessaire) soit en utilisant le fabuleux outil d’installation d’extension dans la console d’administration de WordPress.

Plugin wp-prestashop installé
L’extension est désormais accessible dans l’espace de gestion de ceux-ci dans la console d’administration de votre blog. Il ne reste plus qu’a l’activer.

Configuration du plugin prestashop pour wordpressUne fois l’extension installé, il faut le configurer ! Il suffit de saisir l’URL complète vers votre site marchand, du type : http://www.mon-site-marchand.com/
Un paramètre optionnel est présent afin d’appliquer les feuilles de style et les scripts en javascript sur votre blog. Pour ceci, il suffit de préciser le nom de votre thème PrestaShop. Si vous trouvez que votre thème WordPress est « cassé », laissez ce champ optionnel vide.

Édition de fichiers de votre thème WordPress

Pour activer des fonctionnalités nécessaires à cette extension sur votre thème WordPress, vous devez insérer quelques lignes dans 3 fichiers. Pour ceci, vous pouvez soit utiliser votre éditeur préféré ou utilisez l’outil d’édition de fichier disponible dans la console d’administration de WordPress.Edition du fichier functions.php de votre thème

Afin d’insérer les 2 widgets de l’extension, il est nécessaire de créer 2 nouveaux espaces. Vous devez insérer les lignes suivantes dans le fichier « functions.php » de votre thème (n’importe où dans le fichier) :

if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'PrestaShop Header iframe',
    'id' => 'header_iframe'
  ));
if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'PrestaShop Footer iframe',
    'id' => 'footer_iframe'
  ));
Edition du fichier header.php dans WordPress

Dans le fichier « header.php » de votre thème, vous devez insérer la ligne suivante , elle permet d’activer un des espaces pour le widget (je vous conseille vivement d’insérer cette ligne juste en-dessous de la balise <body>) :

<?php if ( get_header('prestashop') ) get_header('prestashop'); ?>
Edition du fichier footer.php du thème WordPress

Dans le fichier « footer.php », vous devez y insérer la ligne suivante qui permet aussi la création de l’espace pour le widget (je vous conseille vivement de la mettre juste avant la balise </body>) :

<?php if ( get_footer('prestashop') ) get_footer('prestashop'); ?>
 

Copie de 2 fichiers de l’extension dans le répertoire de votre thème

Wordpress copie de fichiers dans le thème
Pour activer l’execution de ces 2 espaces, il vous faut copier les 2 fichiers ( »header-prestashop.php » et « footer-prestashop.php ») du dossier de l’extension dans le répertoire de votre thème.

Insertion de 2 widgets contenant chacun l’entête et le pied de page de votre site marchand

Nous voici bientôt à la fin de ce tutorial, maintenant que tout est prêt coté WordPress, il ne reste plus qu’à insérer les 2 widgets de l’extension…Nouveaux espaces pour widgets WordPress

Désormais lorsque vous accédez à la page de configuration des widgets dans la console d’aministration de votre blog WordPress, 2 nouveaux espaces sont présents ( »PrestaShop Footer iframe » et « PrestaShop Header iframe »).
Vous remarquez aussi qu’il existe 2 nouveaux widgets ( »PrestaShop Header » et « PrestaShop Footer »), ceux ci sont disponibles grâce à l’extension installé. Vous devez glisser et déposer ces 2 widgets dans leur espace correspondant.

Configuration des widgets PrestaShop pour WordPress

Lors de l’insertion d’un widget dans l’espace reservé, il vous sera demandé de le configurer afin d’insérer une hauteur et largeur. Sur l’image d’illustration, ces données sont à titre d’exemple, vous devez les personnaliser pour votre thème.

Le rendu final

Blog WordPress contenant des données PrestaShop
Nous voici arrivé à la fin de ce tutorial.
 
 
Publicités

Extraire de la musique ihpone, ipod, ipad

En suivant les forums divers et variés j’ai entendu parler de ce fameux logicielsharepod fait pour récuperer la musique qui est sur votre Ipod vers votre ordi… Et bien je vous apprend (peut être pas, mais bon c’est toujours utile de le rappeler ) qu’il ne sert strictement à RIEN (du moins pour récuperer sa musique depuis son Pod, après pour faire griller des tartines je dis pas ).
Alors, la méthode officielle (par moi )

1) Dans le panneau de configuration de votre ordinateur, ouvrez le dossier « Option des dossiers », dans l’onglet affichage, cochez « afficher les fichiers et dossiers cachés », retour à l’écran de base.

2) Dans le poste de travail séléctionnez votre iPod comme si vous l’utilisiez en mode disque dur. Vous remarquez l’apparition d’un nouveau dossier (en transparent, donc « caché ») nommé « iPod_Control ». Ouvrez le. A l’interieur vous trouvez tous les parametrages de votre Pod (n’y touchez pas, c’est un conseil). Ouvrez le dossier « Music », vous remarquez un grand nombre de dossiers avec des noms bizarres contenant des fichiers aux noms bizarres, des fichiers AUDIO!!! (avec les noms des auteurs en plus!). Copiez ces fichiers (cilc droit, copier) et placez les dans un dossier sur votre bureau.

3) Pour éviter de vous fatiguer à réécrire tous les titres (perso 10G de musique ça me ferait un peu ch…) Connectez vous au net (sinon vous devrez tout taper à la main ) et ouvrez iTunes. Dans « fichier » cliquez sur « ajouter le dossier à la bibliothèque » et séléctionnez le dossier contenant tous vos autres dossiers.

Sinon:

Pour IPhone :
La meilleure solution FREEWARE est Iphone Explorer :http://www.macroplant.com/iphoneexplorer/

Tu peux copier toutes les données

Pour IPod :
IPod To PC
http://www.macroplant.com/ipodtopc/

How to Add Signature or Ads after Post Content in WordPress

=>SOURCE<=

All you have to do is add the following code in your theme’s functions.php file or in asite-specific plugin.

1 //Add Signature Link
2 function custom_content_after_post($content){
3 if (is_single()) { 
4     $content .= '<p>Load Your Content Here</p><img src="'. get_template_directory() .'/images/signature.png" alt="Your Name" />';
5 }
6     return $content;
7 }
8
9 add_filter( "the_content""custom_content_after_post" );

All you have to do is change the code after the = sign. You can use it to place an image like we did above. You can use it to add ads. This is by far the simplest way of doing so which will work in parent themes as well as child themes of popular frameworks like GenesisThesis etc.

Note: if you are using a child theme, and your image is stored in your child theme’s images folder then replace get_template_directory with get_stylesheet_directory.

If you don’t like to code, then you can use one of the many plugins that are available such as FT Signature Manager or WordPress Signature.

Lastly, if you were wondering how to add ads within post content (such as after the first paragraph of your post), then check out our article on how to insert ads within WordPress post content.

How to Create WordPress Custom Post Type

=>SOURCE<=

In this tutorial we are going to learn how to create custom post type in WordPress in an easy and simple way. No reason to think custom post type is hard and difficult to learn but instead let say “Hurray, I finally found out how to create custom post type for my great website in less than 30 minutes”.

Don’t worry, in this tutorial I will explain every steps as clear as possible so after reading this tutorial you can practice it your self.

The Questions

  • What is custom post type?
  • Why custom post type?
  • When we use custom post type?
  • Where custom post type can be optimal for use ?
  • How many post types we can have in WordPress based site?

You might ask “What makes custom post type so special?”.

Just like common type “post”, custom post type is :
  • still act as posts
  • by default do not display on common archive
  • by default do not appear on feed
  • can have its own permalink
  • can have its custom hierarchy
  • can have custom menu display on admin menu
  • and many thing you can do with them

In short, custom post type is like combination between type “pages” and “post” but you can customized it.

Let’s Start Playing with Custom Post Type

Let say we have a restaurant with a lot of food recipes from all over the world. Can it be done with common “post” ? Sure, but in this condition we want specific layout display and more organized besides the food recipes display side by side with restaurant news article.

We are going to create custom post type for our restaurant and named it “recipes” (without quotes off course). You can put the codes on your theme’s functions.php file.

1. Register our custom post type (make it integrated with WordPress post system)

1
register_post_type( 'recipes', $recipes_args );

2.  Define GUI options to display on Add / Edit post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$recipe_labels = array(
 'name' => 'Recipes',
 'singular_name' => 'Recipes',
 'menu_name' => 'Recipes',
 'add_new' => 'Add Recipes',
 'add_new_item' => 'Add New Recipes',
 'edit' => 'Edit',
 'edit_item' => 'Edit Recipes',
 'new_item' => 'New Recipes',
 'view' => 'View Recipes',
 'view_item' > 'View Recipes',
 'search_items' > 'Search Recipes',
 'not_found' => 'No Recipes Found',
 'not_found_in_trash' => 'No Recipes Found in Trash',
 'parent' => 'Parent Recipes',
 );

3. Define hierarchy and permalink

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$recipe_args = array(
 'labels' => $recipe_labels,
 'description' => 'put description for this recipes custom post type',
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'rewrite' => array('slug' =&gt; 'recipe-name'),
 'query_var' => true,
 'supports' => array('title','editor','excerpt','custom-fields','thumbnail'),
 'menu_position' => 5,
 'has_archive' => true,
 );

Up to this point our post type have been defined and registered, but still have no hierarchy or taxonomy.

4. Register taxonomy label (again make it integrated )

1
2
//register recipe taxonomy category
register_taxonomy( 'recipe-type', array( 'recipe' ), $taxonomy_recipe_category_args );

5. Define taxonomy label for custom post type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$taxonomy_recipes_category_labels = array(
 'name' => 'Recipes Types',
 'singular_name' => 'Recipes Types',
 'search_items' => 'Search Recipes Types',
 'popular_items' => 'Popular Recipes Types',
 'all_items' => 'All Recipes Types',
 'parent_item' => 'Parent Recipes Type',
 'parent_item_colon' => 'Parent Recipes Type:',
 'edit_item' => 'Edit Recipes Type',
 'update_item' => 'Update Recipes Type',
 'add_new_item' => 'Add New Recipes Type',
 'new_item_name' => 'New Recipes Type Name',
 'separate_items_with_commas' => 'Separate recipe type with commas',
 'add_or_remove_items' => 'Add or remove recipe types',
 'choose_from_most_used' => 'Choose from the most used recipe types',
 'menu_name' => 'Recipes Types',
 );

6. Define action options for taxonomy label

1
2
3
4
5
6
7
8
9
$taxonomy_recipe_category_args = array(
 'labels' => $taxonomy_recipe_category_labels,
 'public' => true,
 'show_ui' => true,
 'hierarchical' => true,
 'rewrite' => array( 'slug' =&gt; 'recipe-type' ),
 'query_var' => true,
 'singular_label' => 'Recipe Type',
 );

Finally, our custom post type have all requirements.

Breaking Down the Codes

Now that we have all the codes written, you probably wondering what on earth was those codes.

Fear not, I’m going to explain every bit of the above codes for you.

Step 1

On this step we define our custom post type name and for this example we name it “recipes”.

You can name it  with anything but just for suggestion make the name for custom post type simple and meet the purpose.

Step 2

We are defining how custom post type will look when we  add or edit or viewing archives of recipe post type (see screenshot for more detail).

Recipes Post Type

Step 3

On this step we can customizing how the custom post type action.

‘labels’  : Contain array from the step 1 ( $recipes_label )

‘description’ : ‘put description for this recipes custom post type’, : Optional post type description

‘public’ => true  : If we want to display this post type in admin UI.

‘show_ui’ => true, :  Display a user-interface for this post type

‘show_in_nav_menus’ => true,  : Whether post_type is available for selection in navigation menus

‘capability_type’ => ‘post‘, The post type to use for checking read, edit, and delete capabilities

‘hierarchical’ => false : Whether the post type is hierarchical. Allows parent to be specified (default is false)

‘rewrite’ => array(‘slug’ => ‘recipe-name’),  : Rewrite permalinks with this format (in this example the single custom post type will have slug ‘recipe-name’ – without quotes)

‘query_var’ => true :  Name of the query var to use for this post type

‘supports’ => array(‘title’,’editor’,’excerpt’,’custom-fields’,’thumbnail’)  : An alias for calling add_post_type_support() directly, by default is only title and editor.

In this example, the recipes custom post type that we made will have excerpt box, custom-fields box, and featured image as additional.

Need more options?

Don’t worry we can add more like : author, trackbacks, comment, revisions, and page-attribute.

‘menu_position’ => 5,  : Custom post type menu position. A little tips on menu position:

  •  5 – below Posts menu
  • 10 – below Media menu
  • 20 – below Pages menu

‘has_archive’=> true, : Will enables post type archives that displays all the items under corresponding post type.

For more options, WordPress Codex have reference in Function Reference : Register Post Type

Step 4

In this step we play with taxonomy hierarchy.

1
register_taxonomy( 'recipe-type', array( 'recipes' ), $taxonomy_recipe_category_args );

Our taxonomy is defined as ‘recipe-type’ and as part of custom post type ‘recipes’ (see code right above).

Step 5

We arranged how the taxonomy admin panel UI look like. I believe it’s easier to explain with a screenshot.

Recipe Types

Step 6

On this step, we made optional arguments for taxonomy label.

‘labels’ => $taxonomy_recipe_category_labels, : This label variable is array taken from Step 5.

 ’public’ => true : Option to display this taxonomy label in the admin UI

‘show_ui’ => true : Display a user-interface (admin panel) for this taxonomy

‘hierarchical’ => true : If we want to make the taxonomy hierarchical. Allows Parent to be specified

‘rewrite’ => array( ‘slug’ => ‘recipe-type’ ) : The permalink way for the taxonomy will have slug ‘recipe-type’. You can change it with other, just make sure to refresh / re-save the settings on Setting -> Permalinks

‘query_var’ => true : Name of the query var to use for this post type, (by default is true).

‘singular_label’ => ‘Recipe Type’ : name for one object of this taxonomy. Defaults to value of name

Further information can see Function Reference Register Taxonomy

Display Custom Post Type in Front End

To this point we have defined and registered our recipes post type easily, and now it’s time to make it real. Be ready, the following will need more attention and very seriously (just kidding, trust me it will be easy steps )

According to WordPress Template Tags guide, for single post item is displayed using single.php or single-postname.php template file.

But how about single post for custom post type?

You just need to make a file named single-custom-post-type-name.php. Based on our tutorial, our single post template file for for recipes post type is single-recipes.php

To test if it’s working, just copy single.php file of Twenty Eleven or Twenty Ten theme to your current theme folder that you use for this tutorial and rename it to single-recipes.php.

For displaying all archives for recipes post type you just need to create, a file named taxonomy-recipes.php and it will use something query arguments like WP_Query. Here’s a simple example of the archive page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php get_header(); ?>
<div id="wrapper">
    <div class="inner">
        <ul class="posts">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
                <h3 class="title"><a href="<?php the_permalink() ?>" title="<?php echo get_the_title(); ?>"><?php the_title(); ?></a></h3>
                <div class="the-content">
                    <?php the_content(); ?>
                </div>
            </li>
            <?php endwhile; ?>
            <div class="navigation clearfix">
                <?php previous_posts_link( __('&laquo; Previous', 'warrior') ); ?>
                <?php next_posts_link( __('Next &raquo;', 'warrior') ); ?>
            </div>
            <?php endif; ?>
        </ul>
    </div>
</div>
<?php get_footer(); ?>

Add Shortcut Links to the Toolbar

=>SOURCE<=

WordPress makes it easy to add custom stuff to the Toolbar. This is a great way to personalize the look and feel of the WP Admin with custom menus, links, or whatever makes sense. To further streamline workflow, you can create keyboard-shortcuts to open your Toolbar links with a single keystroke.

For example, the DigWP Toolbar contains a shortcut-link to our Gmail account, which is then linked back to the Admin area from the Google Toolbar. This helps minimize the number of open tabs and save time while working with related sites. In this tutorial, you’ll learn how toadd links to the WordPress Toolbar and then take it further with optional accesskey shortcuts and integration with the Google toolbar.

Adding a link to the WP Toolbar

As with many things, WordPress makes it easy to customize the Toolbar. To add or customize links, menus, and groups, we use the add_node() function to modify the$wp_admin_bar global-object. Here is the basic usage of add_node():

<?php $wp_admin_bar->add_node( $args ); ?>

Passing an array of arguments, add_node() adds a “node” to the WP Toolbar based on the specified criteria. As explained in the WordPress Codex:

Toolbar items are also called “nodes”. Nodes can be parents for other nodes, which creates dropdown menus. Group nodes together with add_group() to create distinct sections in a Toolbar menu.

In this case, the item we’re adding is a link to an external page, which will be our Gmail inbox for this tutorial. One reason why we’re using Gmail as an example is that you can link back to your site from the Google Toolbar, which we’ll get to in a bit. For now, here is a screenshot showing the Gmail link added to the WP Toolbar:

[ Screenshot: Gmail shortcut with accesskey displayed in the WP Toolbar ]

Adding our link to the Toolbar requires the following code in a plugin or your theme’sfunctions.php file:

// add a link to the WP Toolbar function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'gmail', 'title' => 'Gmail', 'href' => 'https://mail.google.com/mail/#inbox', 'meta' => array( 'class' => 'gmail', 'title' => 'sales@digwp.com' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Things to edit in this snippet:

  • 'id' => 'gmail' — the ID of the <li> element containing the custom link
  • 'title' => 'Gmail' — the anchor-text for the custom link
  • 'href' => 'https://mail.google.com/mail/#inbox' — the URL for the custom link
  • 'class' => 'gmail' — the class attribute for the custom link
  • 'title' => 'sales@digwp.com' — the title attribute for the custom link

That should do the trick, but there is much more customization possible. For a list of all the available parameters and arguments, check out the add_node() page at the WP Codex.

You may also want to look at remove_node if you’re getting into customizing the WP Toolbar.

Taking it further with accesskey

Having a custom link in the WP Toolbar is nice, but when located at the top of the page, you may find yourself scrolling just to reach it. By adding an accesskey attribute to the anchor element, we create a keyboard-shortcut that will open our custom link directly. You can add an accesskey attribute to any anchor element like so:

<a href="..." accesskey="g">Gmail</a>

You can use any single character for the accesskey value in theory, but in practice you’ll avoid headaches in certain browsers (*cough*) by sticking with letters of the alphabet. Once a link (or form element) has an accesskey, visitors can open it with a keyboard shortcut. For example, for Chrome/Mac, the shortcut is control+alt+accesskey. Other browsers have their own similar shortcuts, all well-documented on the Web. Here is a good overview of accesskey for more information.

Tip: If you’re using Chrome, Display Access Keys enables you to view all the accesskey shortcuts while surfing the Web. You can see an example in the previous screenshot: the extension displays the little “[g]” next to the link. Learning the accesskeys of your favorite sites can speed-up navigation. And for even more control in Chrome, check out Vimium for vim-like shortcuts and page-navigation.

Implementing accesskey with Toolbar links

Unfortunately, accesskey isn’t on the list of supported attributes for the add_node() function. So unless you want to fiddle with a custom-walker, jQuery is probably the easiest way of doing it:

'html' => '<script>$j(document).ready(function(){$j(".gmail a").attr("accesskey","g");});</script>',

Just add that line to the custom_toolbar_link() function like so:

// add a link to the WP Toolbar function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'gmail', 'title' => 'Gmail', 'href' => 'https://mail.google.com/mail/#inbox', 'meta' => array( 'html' => '<script>$j(document).ready(function(){$j(".gmail a").attr("accesskey","g");});</script>', 'class' => 'gmail', 'title' => 'sales@digwp.com' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);

That will do the job, adding the specified accesskey attribute to the custom link in the Toolbar. Here is a peek under the hood, showing how the JavaScript is inserted immediately after the link, which then includes the requisite accesskey.

[ Screenshot: Toolbar link's accesskey attribute revealed in the source code ]

This also shows us that the content of add_node’s html parameter appears after the hyperlink. Unfortunately add_node() doesn’t include accesskey (or rel) attributes, so we’re taking the next-easiest way of getting there. Adding accesskey is easy with jQuery.

With everything in place, I press control+alt+g and I’m in Gmail. Getting back is (almost) just as easy..

Linking back from the Google Toolbar

The interesting thing about Google’s latest “black” toolbar is its similarity to the WP Toolbar:

[ Screenshot: Comparison of WordPress Toolbar vs Google Toolbar ]

They’re not the same height though, Google’s Toolbar is 30px while WP’s Toolbar is only 28px. Even so, when working together with your WordPress site and any of your Google stuff, the consistency is nice. It took awhile to find something that worked, but eventually found theGTools+ extension, which enables you customize the Google Toolbar. Here’s a screenshot showing GTools+ Options:

[ Screenshot: GTools+ extension ]

That box contains the links that appear in the Toolbar. Add or remove whatever you wish, and customize further with other settings as needed. After adding your URL to GTools+, you should see something like this:

[ Screenshot: Google Toolbar with custom-link to DigWP.com ]

Voilà! Navigating between Google and WordPress sites is even more seamless.. a sign of things to come? Who knows, but even without the link back to your site from the Google Toolbar, adding shortcut links to your WP Toolbar is a great way to personalize websites and streamline your workflow.

Comment insérer un plugin JQuery dans son thème WP

SOURCE

JDMWEB.com 

Partie 1: Anatomie d’un plugin jQuery

Dans cette partie, nous allons voir de quoi est généralement constitué un plugin jQuery, et où nous devons placer les différents composants. Tout au long de cet article, nous allons prendre l’exemple du plugin FancyBox (même s’il existe déjà une implémentation WordPress, c’est juste pour avoir un exemple concret).

A) La Source Javascript

jQuery est une librairie JavaScript, et les plugins servent à étendre ses possibilités, ils sont donc écrit en suivant la même syntaxe que jQuery. Chaque plugin que vous trouverez est écrit dans un fichier JavaScript. C’est le coeur même du plugin, et doit donc être inclus dans votre application:

  1. //Include the plugin script
  2. <script type= »text/javascript » src= »Chemin_vers/jquery.fancybox.js »></script>

B) Le Code Javascript

Une fois le plugin inclus, vous êtes souvent amené à écrire quelques lignes de code afin de faire marcher votre plugin avec votre application. La plupart du temps, cela consiste à écrire quelques lignes afin de faire marcher le plugin avec un élément particulier de votre page, et avec un évènement particulier. Comme par exemple, faire marcher la FancyBox après un clic sur un lien:

  1. //Write the plugin setup
  2. <script type= »text/javascript »>
  3. jQuery(document).ready(function(){
  4. //Fancybox
  5. jQuery(« a.fancy »).fancybox({
  6. overlayShow: true,
  7. overlayOpacity: 0.7
  8. });
  9. });
  10. </script>

C) Les styles additionnels

Certains plugins marchent avec des styles particuliers, comme les fenêtres modales comme la FancyBox par exemple. Ces styles sont requis et garantissent le bon fonctionnement du plugin. Ils doivent donc être inclus dans l’application.

  1. //Include the plugin Stylesheet
  2. <link rel= »stylesheet » type= »text/css » href= »Chemin_vers/jquery.fancybox.css » />

D) Comment tout mettre en place ?

Une fois que vos fichiers sont prêts, c’est une pratique courante et recommandée de les ajouter à votre application en mettant les styles dans le header de la page, et les scripts juste avant la fermeture du tag </body>.

Partie 2: Comment tout intégrer dans WordPress?

Maintenant que nous avons une meilleure compréhension des différents éléments que l’on peut trouver dans un plugin jQuery, et où ils sont sensé aller, voyons comment nous pouvons faire de même dans WordPress.

Comment déclarer un plugin WordPress ?

A) Dans WordPress, les plugins sont stockés dans le dossier /wp-content/plugins. Il suffit donc de se rendre dans ce dossier, et de créer un dossier du même nom que votre plugin, dans notre cas, FancyBox.

B) Dans ce dossier, copiez tous les fichiers nécessaires au bon fonctionnement de votre plugin jQuery, (script, css, images etc).

C) Créez un fichier appelé init.php. Init.php est un fichier particulier que va utiliser WordPress pour reconnaître notre nouveau plugin. Ouvrez ce fichier et copiez le code suivant dedans:

  1. /*
  2. Plugin Name: FancyBox //Your plugin name (here we’d write Fancybox)
  3. Plugin URI: http://www.jdmweb.com/resources/fancybox //Url of your choice
  4. Description: Implementation of the FancyBox for jQuery //Brief PLugin Description
  5. Version: 1.0 //Version of your plugin
  6. Author: Jeremy Desvaux //Name of the author
  7. Author URI: http://jdmweb.com/ //Url of your site
  8. License: Creative Commons Attribution-ShareAlike //Licence
  9. //Other terms and conditions
  10. This program is free software; you can redistribute it and/or modify
  11. it under the terms of the GNU General Public License as published by
  12. the Free Software Foundation; either version 2 of the License, or
  13. (at your option) any later version.
  14. */

Comme vous pouvez le voir, dans ce fichier on spécifie un nom, une URL, une description et deux trois autres informations du même type. Ces informations sont ensuite réutilisées par WordPress dans l’interface d’administration des plugins comme vous pouvez le voir sur l’image suivante:

Plugin Interface Screenshot

Depuis cette image, nous pouvons voir que notre futur plugin a été reconnu par WordPress, et qu’il contient les informations que nous avons spécifiées. Le moment est venu de tout faire marcher maintenant. D’après ce que nous avons wu dans la partie 1, il nous faut trouver un moyen d’inclure nos fichiers dans le header et le footer de notre application.

Comment inclure des fichiers dans le header de WordPress?

Ce que l’on veut faire, c’est inclure notre feuille de style, dans le header de la page. En html, on le fait en plaçant une balise link directement dans le header. Dans WordPress, c’est déconseillé, il existe une fonction spécifique pour réaliser cela, elle s’appelle wp_enqueue_style() (ref codex ici)

wp_enqueue_style accepte plusieurs paramètres, principalement le nom de votre feuille de style et son url. On peut aussi ajouter des dépendances (c’est à dire d’autres styles qui doivent être inclus avant), et un numéro de version. Dans notre cas, afin d’ajouter notre feuille de style dans le header, on utiliserait wp_enqueue_style comme ceci:

  1. //Add the stylesheet into the header
  2. wp_enqueue_style(
  3. « jquery.fancybox »,
  4. WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false,
  6. « 1.3.1 »
  7. );

Ligne 3, vous pouvez voir le nom que l’on donne à notre feuille de style, l’url de sa source, avec l’emploi de la constante WP_PLUGIN_URL qui renferme le chemin vers le dossier des plugins. Du coup si l’utilisateur décide de le changer, le lien vers la feuille de style ne sera pas brisé. Ligne 5, false veut dire qu’il n’y a pas de dépendance. et ligne 6, 1.3.1 détermine la version de la feuille.

Voilà tout pour le header. En fait, pour récapituler, au lieu d’ajouter par nous même la feuille de style dans le header directement, on demande à WordPress de le faire pour nous.

Comment inclure des fichiers dans le footer de WordPress?

D’une manière très similaire, afin d’ajouter nos scripts dans le footer de WordPress, nous faisons à nouveau appel à une fonction, cette fois ci appellée wp_enqueue_script() (ref codex ici).

wp_enqueue_script accepte des paramètres similaires à wp_enqueue_style, c’est à dire un nom de script, une url, des dépendances et un numéro de version. Le dernier paramètre est un booléen et vous permet de spécifier où vous désirez inclure vos fichiers. Si c’est 0 (par défaut), le script sera inclus dans le header, sinon, si c’est 1, dans le footer. Dans notre cas, afin d’inclure les fichiers dans le footer, on utilisera le booléen avec la valeur 1.

Il est maintenant temps d’inclure nos scripts avec wp_enqueue_script:

  1. //Add the scripts in the footer
  2. wp_enqueue_script(« jquery »);
  3. wp_enqueue_script(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  5. array(« jquery »), « 1.3.1 »,1);
  6. wp_enqueue_script(
  7. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  8. array(« jquery », »jquery.fancybox »), «  »,1);

Lignes 3 et 6, vous pouvez voir wp_enqueue_script en action. On ajoute les scripts en sépcifiant leur nom, chemin, dépendance et version, et on les places dans le footer grâce au 1 à la fin. Comme vous pouvez le voir, la FancyBox a une dépendance (jQuery) et le script d’initialisation en a 2, (jQuery et FancyBox).

Il est temps de tester.

Votre plugin est maintenant prêt à l’emploi. Si vous retournez dans l’interface d’administration des plugins et que vous l’activez, WordPress va ajouter vos fichiers aux bons endroits, et votre plugin commencera à marcher.

Comment utiliser le plugin sur des pages spécifiques seulement?

Maintenant que notre plugin est actif, WordPress va ajouter les fichiers spécifiés dans init.php dans chaque page de votre application. Alors si c’est ce que vous voulez car vous utilisez le plugin sur toutes les pages c’est très bien. Sinon, c’est un gaspillage de ressources, et cela rajoute du temps de téléchargement pour rien.

Je vais vous montrer une petite technique toute simple que j’utilise pour avoir plus de contrôle. C’est très simple.

L’astuce consiste à rassembler le code que l’on vient d’écrire, et de la placer dans une nouvelle fonction que l’on appellera FancyBox_wp_setup():

  1. //Group the code inside a function
  2. function fancybox_wp_setup(){
  3. wp_enqueue_style(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false, « 1.3.1 »);
  6. wp_enqueue_script(« jquery »);
  7. wp_enqueue_script(
  8. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  9. array(« jquery »), « 1.3.1 »,1);
  10. wp_enqueue_script(
  11. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  12. array(« jquery », »jquery.fancybox »), «  »,1);
  13. }

Ceci à 2 effets différents. Cela empêche WordPress d’ajouter vos fichiers de partout, ce qui est ce que l’on voulait, mais cela vous donne aussi accès à la fonction FancyBox_wp_setup(), que vous pouvez appeler sur chaque page où vous désirez utiliser le plugin.

Conclusion

Quand vous trouvez le plugin idéal pour votre nouveau design, l’intégrer dans WordPress n’est qu’à quelques lignes de code! J’espère que la prochaine fois que vous trouverez un plugin que vous souhaitez utiliser, vous vous souviendrez de cet article et que vous le transformerez en un plugin WordPress en 5 petites minutes.