Category

Aide et astuces

web-design

Les 10 dernières tendances du Web design

By Aide et astuces, Thèmes Wordpress, wordpress 3.9 No Comments

Le Web design est comparable au monde de la mode, voici donc les 10 dernières tendances du Web Design pour bien choisir votre thème WordPress.

1. Le RWD pour Responsive Web Design

Avec la multiplication des mobiles devices (smartphones et tablettes en tête), il n’est plus conservable de créer des site uniquement destiné ordinateurs de bureau. En ce qui concerne WordPress, les thèmes payants sont RWD. Pour ceux qui souhaite utiliser les thèmes gratuit disponible depuis le tableau de bord, pensez à cocher la case Largeur flexible pour filtrer tous les thème qui ne sont pas RWD encore trop nombreux actuellement.

2. Le Flat Design : Le nouveau style qui s’impose depuis fin 2013.

Le temps du Web 2.0 avec ses barres en dégradé et ses boutons glossy aux coins arrondis c’est finit, place au Flat Design.
Le Flat Design fait référence à un style de dessin d’interface épuré de toute formes stylistique afin de ne garder que des formes vectoriel en deux dimension au couleurs unis. Les barres et les boutons ont de nouveau des coins carré.
Le Flat Design reprend les codes des premiers site Internet que l’on pourrait appeler le Web 1.0. La grosse différence réside dans le choix des couleurs. Aujourd’hui les couleurs sont claire et pétillantes, souvent dans des tons pastels.

3. Les font icone : Une intégration progressive dans les thèmes wordpress ou drupal.

Eléments indispensables de tous bon site Flat Design qui se respecte, les fonts icone. Comme sont nom l’indique, il s’agit de police d’écriture (font en anglais) qui représentent non pas des lettres mais des icônes.
Ainsi, les avantages sont nombreux :
– il n’est plus nécessaire de savoir dessiner pour avoir de beaux icône ;
– les polices d’écriture sont des formes vectoriel, donc pas de risque de pixellisation
– le temps de chargement d’une police d’écriture est moins long que celui d’une image pixelisé.

4. Le Parallax Scrolling : A utiliser en fonction des sites, et avec modération.

Autre tendances old school qui revient sur le devant de la seine c’est le parallax scrolling ou défilement parallaxe. Ce concept emprunt au monde du jeux vidéo en 2D consiste à faire défiler l’arrière plant plus lentement que le premier plan, donnant ainsi une impression de profondeur dans le décor.
Appliqué au Web cela ce traduit par une image en arrière plan (le background de la page) défilant plus lentement que le contenue de la page (le texte principalement).

Si votre thème ne permet de faire du parallax scrolling une série de plugins sur le site officiel de WordPress est disponible.

5. Les big images : L’image et la vidéo au service du contenu.

Avec les big images, rien de bien révolutionnaire, il s’agit tous simplement d’utiliser de très grandes images (en HD de préférence) en guise de background.
L’idée n’est pas de faire de le spectaculaire, mais simplement de créer un ambiance sur le site.

6. Les background videos : Impressionnant pour porter votre site internet.

Les background videos sont des vidéos encodées en webm (pour Chrome, Firefox et Opera) et en mpeg4 (pour Internet Explorer et Safari) qui sont utilisées comme des background de page web.
Comme pour les big images, la vidéo recouvre l’intégralité de l’arrière plan du site.
Seul contrainte, le téléchargement de la vidéo réclame une bonne connexion Internet.

Nous avons d’ailleurs bien détailler le fonctionnement du format Webm sur ce même blog.

7. Le Scrolling

Le scrolling ou défilement en français, plus connu sous le nom de : single page ou encore one page (pour trouver des thèmes WordPress ces deux mots clé sont à privilégier), propose une navigation des pages comparable à un rouleau de papiers.
Ici les pages sont positionnés les unes à la suite des autres formant une longue et unique page avec un en-tête tous en haut, pied de page tout en bas et pas de barre latérale.
Cet disposition des élément est plus propice à une utilisation pour écran tactile que pour une utilisation classique avec la souris. Pour palier à cet problème ce type de site utilisent des liens de type ancres pour délimité les sections de page et des sticky menu pour la navigation.

8. Le Sticky Menu

Le sticky menu est un menu qui reste en permanence collé en haut de la page web même lors d’un défilement horizontal. La timeline de Facebook ou encore la fonction Figer les volets d’Excel sont souvent pris en exemple pour expliquer ce qu’est le stiky menu.
Pour ceux qui souhaiterez l’appliqué à leur thème WordPress, les directives CSS position:fixed ou encore position:absolute peuvent remplir très simplement cette mission.

9. Le full screen menu

Le full screen menu est un menu qui recouvre l’intégralité de la page web. Cette tendances initié par Microsoft avec sont interface Metro, et parfaite pour les smartphones et éventuellement les tablettes 7 pouces. Les écrans sont petits et la navigation est tactile. Les boutons sur-dimensionnés font le bonheurs des mobinautes mal habile.
En revanche, pour les écrans de plus grande taille, non tactile, le succès est plus mitigé. Il faudra patienter encore un peut, le temps que les utilisateurs s’habituent au full screen menu sur de si grands écrans.

10.Le mobile first : Mobile, puis tablette puis desktop, pour une construction optimisée.

Le mobile first n’est pas vraiment une tendances mais plutôt une méthode de travail qui devient tendances.
Jusqu’à présent, les Web designers commençaient par créer la version desktop du site. Autrement dit, par la version la plus complète du site. Puis, ils l’épuraient une première fois pour la version tablettes puis une seconde et dernière fois pour la version smartphone.
Partant du principe que plus l’écran est petit, plus le contenu du site doit allé à l’essentiel, les Web designers conçoivent leurs site dans le sens inverse.
La méthode à prouvé qu’il était plus simple et plus rapide d’ajouter du contenue au fur et à mesure de l’avancement du site, plutôt que de faire le trier et réorganiser l’ensemble.

Les éléments présentés dans cet article peuvent être visualisés sur le site de Dronelis.

Themeforest : Le grand gagnant des thèmes et plugins WordPress

By Aide et astuces, Plugin Wordpress, Thèmes Wordpress, wordpress 3.9 No Comments

Création de sites Internet avec WordPress ne passe plus nécessairement par la création d’un thème graphique. Désormais avec la hausse du nombre de sites proposant des thèmes déjà créés, il suffit de choisir son mode de thème, sachant graphique, et de l’adapter aux couleurs de son client. Les connus était jusque là pour WordPress, MonsterTemplate, c’est désormais Themeforest, le petit poucet de l’époque qui est devenu grand.

Themeforest, référence et meilleure banque de données pour l’achat d’un thème WordPress Premium, de qualité professionnelle.

L’un des grands gagnants sur le sujet, spécialiste dans la création de thèmes WordPress (Drupal, Joomla, ou encore de simples feuilles HTML) c’est ThemeForest. Il s’agit d’une banque de données payantes mais libres de droit. Un avantage précieux par rapport au temps que cela fait gagner. Car au-delà des couleurs, et de la mise en forme, il y a surtout certains types de thèmes déjà intégrés, comme pour la création d’une boutique ou un site tout spécialement dédié aux photographes.

WordPress reste simple dans son administration est parfaitement accessible pour celui qui saura faire les modifications standards que l’on retrouve sur les blogs. À partir de la l’intégration d’un thème acheté, on peut donc facilement utiliser WordPress pour créer un site internet totalement professionnel, sans pour autant être un grand spécialiste du code.

Mais tout cela a une limite car en réalité, Themeforest s’adresse aux Agences qui achètent là une matière première plus aboutie que de simples lignes de code. Si on peut réaliser un site, le modifier reste donc à la porter des professionnels de la création web.

Themeforest est donc une banque de données que pourront utiliser les agences de création de sites au profit d’un gain de temps et ceci pour quelques euros. Un thème se vendra entre 30 et 50 $, et un plugin en moyenne entre 8 et 20 $.
Ainsi au lieu de créer un plugin dédié à quelque chose dont vous avez besoin dans votre site Internet, il suffira de l’acheter et de l’intégrer sur votre site. Le meilleur exemple reste l’utilisation de plugin permettant la création d’un CRM ou d’un système de facturation sur WordPress. Besoin de personnaliser en fonction de ce que fait l’entreprise, mais en aucun cas il n’est nécessaire de tout reprendre à zero. Il suffira donc d’acheter un plugin et de le faire ensuite évoluer. Pour souvent moins de 20€ on gagne plusieurs jours de programmation, c’est donc évidement rentable et pratique.

Mais Themeforest, s’il est concentré sur un très grand nombre de produit WordPress, ne travail pas que pour cela. Vous trouverez également des thèmes de qualité pour Drupal, Joomla, Photoshop, ou des simples feuilles en HTML pour les sites les plus simples. En dehors du Web, on peut également trouver de la matière pour le print, pour le son et le montage vidéo, permettant réellement d’aller très loin. Projet After Effect, présentations powerpoint… tout est là pour fournir à votre agence une matière première efficace.

WordPress reste un logiciel libre de droit ce qui permet donc de modifier, d’adapter et de personnaliser à la charte graphique de celui qui intégrera dans son site Web les éléments de Themeforest. La qualité du travail final n’est donc pas impacté, mais le temps gagné dans l’inspiration et la structuration du site est précieux!

Je vous conseil donc d’utiliser sans réserve cette source que beaucoup d’entre vous ont déjà dans leurs bases de données j’en suis certain!

Créer des animations simples avec CSS3

Créer des animations simples avec CSS3

By Aide et astuces, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 No Comments

L’animation d’objets n’est plus l’adage de JavaScript. Avec @keyframes il est possible de créer des animations simples avec CSS3.

Définition de @keyframes

@keyframes est un règle CSS3 qui permet de créer des animations.

L’animation est créée en modifiant progressivement une série de styles CSS à l’autre. Durant l’animation, il est possible de modifier le styles CSS à plusieurs reprises.
Pour préciser quand le changement de style CSS se produira il est possible d’utiliser les mots-clés from et to ou bien des pourcentages.

  • from ou 0%, détermine le début de l’animation.
  • to ou 100%, détermine la fin de l’animation.

Avec des valeurs en pourcentages il sera possible de créer des animations plus complexes comme dans le second exemple ci-dessous.

La règle @keyframes, est supporté par Internet Explorer 10, Firefox, et Opera. Pour Safari et Chrome il faudra utiliser la règle alternative .

Syntaxe et propriétés

La règle @keyframes s’utilise avec les propriétés suivantes :

animation-name, permet de nommer une animation. Cette propriété est obligatoire

animation-delay, Impose un délai avant de démarrer l’animation. Valeurs: s (secondes)ou ms (millisecondes)

animation-direction, Indique dans quel sens est joué l’animation lorsque celle-ci se répète. Valeurs : normal (sens identique) et alternate (sens inverse)

animation-duration, Détermine la durée de l’animation. Valeurs : s (secondes) ou ms (millisecondes)

animation-iteration-count, Spécifie le nombre de fois que l’animation sera jouée avant de s’arrêter. Valeurs : un nombre entier ou infinite pour créer un boucle infini.

animation-play-state, Permet de mettre en pause une animation, puis de là reprendre. Valeurs : paused (met en pause) et running (reprend l’animation en cours)

animation-timing-function, Détermine la vitesse d’exécution de l’animation au début, au milieu et à la fin. Valeurs : cubic-bezier(val1, val2, val3, val4), ease, ease-in, ease-out, ease-in-out, linear.

La syntaxe tel que là définit la W3C est : @keyframes animation_name.
Pour le moteur Gecko (Firefox) : @-moz-keyframes.
Pour le moteur Webkit (Chrome et Safari) : @-webkit-keyframes.
Pour le navigateur Opera : @-o-keyframes.

Exemple 1: Faire clignoter un élément

Jouons un peut avec les animation en réalisant un terminal factice dans lequel clignotera l’invite de texte.

linux-lo8i:/var/www #

_

Code source coté HTML

<div id="terminal">
	<div id="textarea">
		<p>linux-lo8i:/var/www # </p><span id="prompt">_</span>
	</div><!-- /textare -->
</div><!-- /terminal -->

L’élément à faire clignoter est le underscore situé dans l’id prompt.

Code source coté CSS

/* Prompt */

#terminal {
	background-color: black;
  	padding: 10px 0 22px 12px;
}
 
#textarea {
  	margin: 3px;
}
 
#textarea p {
  	color: rgba(10, 225, 10, 1);
	float: left;
}
 
/* animation du prompt */

span#prompt {
  
	animation-name: blinky;
  	animation-duration: 0.7s;
  	animation-iteration-count: infinite;  

  	-webkit-animation-name: blinky;
  	-webkit-animation-duration: 0.7s;
  	-webkit-animation-iteration-count: infinite;  

  	-moz-animation-name: blinky;
  	-moz-animation-duration: 0.7s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: blinky;
  	-o-animation-duration: 0.7s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: blinky;
  	-ms-animation-duration: 0.7s;
  	-ms-animation-iteration-count: infinite;

}
@keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-webkit-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-moz-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-o-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-ms-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

Pour réaliser l’animation, il faut ajouter les propriétés animation à l’élément concerné. Ici p#prompt. Pour animation-name le nom sera blinky, la durée sera de 0,7 seconde le tous dans une boucle infini.
Fermer l’accolade, puis ajouter la règle @keyframes suivit du nom de l’animation blinky.
from indique que l’opacité est de 1, to qu’elle passera à 0

Exemple 2 : Faire un bouton qui change de couleur

Dans le précèdent exemple l’animation avait été faite avec from et to. Créant une animation en deux temps. Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de ce second exemple où le bouton ci-dessous change de couleur 7 fois.

Bouton

Code source coté HTML

<div id="button">
	<p id="text-button">Bouton</p>
</div>
<!-- /button -->

Code source coté CSS

/* Bouton */
  
#button {
  	padding-left: 30px;
}
 
p#text-button {
  	color: #FFF;
  	font-size: bold;
  	padding: 10px;
  	width: 10%;
  	text-align: center;

/* Annimation du buton */

  	animation-name: cameleon;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;

  	-webkit-animation-name: cameleon;
  	-webkit-animation-duration: 5s;
  	-webkit-animation-iteration-count: infinite;

  	-moz-animation-name: cameleon;
  	-moz-animation-duration: 5s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: cameleon;
  	-o-animation-duration: 5s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: cameleon;
  	-ms-animation-duration: 5s;
  	-ms-animation-iteration-count: infinite;
}
 
@keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}
 
 @-webkit-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-moz-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-o-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-ms-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

Pour résumé, le bouton p#text-button dont l’animation s’appelle caméléon, dont la durée est de 5 seconde, change de couleur 5 fois et se reproduit indéfiniment.

installer woocommerce

Installer WooCommerce

By Aide et astuces, Plugin Wordpress, Thèmes Wordpress, wordpress 3.9 2 Comments

Installer WooCommerce correctement peut s’avérer fastidieuse, l’aide officiel est très dense, et la configuration par défaut de WordPress n’est pas toujours adéquate.

Installation du plugin

Pour installer WooCommerce il faut impérativement télécharger les fichiers sources sur le site officiel, puis les décompacter dans le dossier /wp-content/plugins.

Changez le Chmod du dossier WooCommerce est de son contenue, la valeur par défaut est de 700, passez le en 775, sans oublier d’activer la recurtions pour les sous-dossiers

Pour finir, activer le plugin : Extensions -> Extensions installées, puis Activer

Finaliser l’installation du plugin

Après l’activation de WooCommerce le bandeau ci-dessous devrait s’affiché en haut du tableau de bord.

Installer WooCommerce

Cliquez sur Installer les pages WooCommerce, cela créera un ensemble de page d’exemple pour la boutique.

Pour finaliser l’installation, rendez-vous sur la page WooCommerce -> Etat du système. Un rapport système s’affiche alors, indiquant tous ce qui va (en vert) et tous ce qu’il ne va pas (en rouge). Les lignes inscrites en noir ne sont là qu’à titre indicatif.

Comme souvent les lignes WC Connexion et WP Limite mémoire sont en rouge.

WP Limite mémoire : indique que WordPress n’alloue pas suffisamment de mémoire pour les fichiers PHP. Ouvrez le fichier wp-config.php puis ajouter la ligne de code suivante en début de fichier.


define( 'WP_MEMORY_LIMIT', '64M' );

WC Connexion : indique le dossier qui contient les journaux d’évènements (logs) n’est pas accessible en écriture par WooCommer. Changer le Chmod du dossier woocommerce/logs en 777.

L’intégration du thème

Si votre thème ne déclare pas le support WooCommerce le bandeau suivant apparait en haut du tableau de bord :

Installer WooCommerce

Dans le cas contraire, l’installation de WooCommerce s’arrête là.

Pour les autres il va falloir remettre les mains dans le cambouis. Deux méthodes sont possibles, soit en créant un modèle de page, soit en éditant le fichier fonction.php de votre thème.

Créer un modèle de page

Créez un fichier nomé woocommerce.php, puis copier/coller le contenu du fichier page.php de votre thème.

Dans le fichier woocommerce.php, localisez la boucle (loop), le code devrait commencer par <?php if ( have_posts() ) : et se terminer par <?php endif; ?> Supprimer ce code et remplacez-le par <?php woocommerce_content(); ?>

Edition du fichier fonction.php

Ici l’idée est d’exploiter les crochés (hooks) de WordPress, afin de substituer la boucle du thème par celle de WooCommerce lorsqu’il est question d’afficher une page produit. Ouvre le fichier fonction.php et ajouter les lignes de code suivantes :


remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Ainsi que celle-ci à la suite:


add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '&amp;lt;section id=&amp;quot;main&amp;quot;&amp;gt;';
}

function my_theme_wrapper_end() {
  echo '&amp;lt;/section&amp;gt;';
}

Déclarer le support de Woocommerce

Le thèmes est à présent optimisé pour afficher les produits de la boutique dans la page. Toute fois, le bandeau figurant dans le tableau de bord indique toujours le contraire. Pour terminer cette optimisation, ouvrez de nouveau le fichier fonction.php puis insérez la ligne de code suivante :

add_theme_support( 'woocommerce' );

Cet ligne de code est à placer non pas à la suite mais avant celle qui ont été ajoutés dans le paragraphe précédent, comme dans l’exemple ci-desous:


add_theme_support( 'woocommerce' );

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '&amp;lt;section id=&amp;quot;main&amp;quot;&amp;gt;';
}

function my_theme_wrapper_end() {
  echo '&amp;lt;/section&amp;gt;';
}

créer un theme enfant

Comment créer un thème enfant ?

By Aide et astuces, Thèmes Wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 No Comments

Cette capacité qu’a WordPress qui est de créer un thème enfant, offre la possibilité a des développeurs en herbe maitrisant le langage CSS de personnaliser une thème existant, sans pour autant se priver des mises à jours proposé par le développeur original du thème. Depuis la version 2.7 de WordPress, il même possible de modifier les fichiers PHP.

Qu’es ce qu’un thème enfant ?

Avant d’aller plus loin, petit mise au point sur ce qu’est thème enfant et un thème parant. L’idée est de créer un thème dit « enfant » en fonction d’un autre thème qui est autre le thème parant. Ainsi il est possible de faire des modifications profondes dans le code source du thème parant sans pour autant voir sont travail anéantie par une mise à jour de celui-ci.

Exemple : Un site utilisant le thème Twety Twelve. Ce sera notre thème parant. Figurant parmi les thèmes par défaut de WordPress, il n’est pas surprenant que ce dernier soit déjà utilisé sur des milliers de site. Pour personnaliser le thème parant sans pour autant perdre le bénéfice des mises à jours, un thème enfant sera créé. Ainsi toutes les modifications se feront dans le thème enfant.

Créer un thème enfant

Rendez-vous dans le dossier /wp-content/themes puis créez un nouveau sous-dossier avec le nom du thème enfant.

Ex : /wp-content/themes/childTT

Dans ce sous-dossier, créer un fichier style.css. Comme pour la création d’un thème classique, insérez les informations qui permettront de différencier ce thème des autres.

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Thème enfant pour le thème Twenty Twelve
Author:         Votre nom ici
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

Ici, les informations sont les mêmes que pour n’importe quel thème, à un détail prés;La ligne template : twenty twelve à était ajouté pour permettre à WordPress d’associer ce thème au thème parant Twenty Twelve.

A ce stade, si le thème enfant était activé depuis la tableau de bord de WordPress, le code CSS du thème parant serait écrasé parce celui du thème enfant. Autrement-dit, il n’y a plus aucune règle CSS. Pour ceux qui souhaitent importer les règle CSS dans le thème enfant, ajoutez dans le fichier nouveau fichier style.css la ligne de code suivante :


@import url("../twentytwelve/style.css");
@import url("../twentytwelve/rtl.css");

Il doit y avoir autant le ligne d’importation qu’il y à de fichies CSS dans le thème parant. Pour l’exemple, seul les fichier style.css et rtl.css on étaient importé.

Activation du thème enfant

Rendez-vous à présent sur le tableau de bord de WordPress, plus précisément dans Apparence > Themes, le thème enfant devrait y figurer. Activez-le.

Votre thème enfant est à présent créé, activé et opérationnel. Dorénavant, le code CSS sera saisit dans le fichier style.css du thème enfant, et quant au fichiers PHP, il suffit de créer un nouveau fichier PHP emprunt du même nom que celui qui figure dans le thème parant, et d’y mettre votre propre code.

Intégrer les balises schema.org dans WordPress : Event, person…

By Aide et astuces, Plugin Wordpress, Référencement Wordpress One Comment

Le plugin schema.org pour WordPress : un prérequis pour toutes les pages exigeant la présence d’un Rich Snippets.

La presse est connue pour intégrer facilement dans son code les qualités requises par Google pour le bon référencement d’un site Internet.

Après les filtres Pinguin et Panda, Google a largement privilégié la qualité de contenu, permettant à l’utilisateur du site Internet d’avoir des des informations précises.

Il faut donc s’appliquer et privilégier la qualité de contenu au détriment d’un backlinking de parfois trop exagéré.

L’intégration des balises schema.org dans WordPress, la condition nécessaire d’un bon référencement des pages spécialisées.

Schéma.org invite les créateurs de sites Internet à préciser le type de contenu intégré dans les articles ou dans les pages de leurs sites Internet. Ces le cas pour l’intégration d’un événement, l’intégration d’un auteur, ou une notation de pages. C’est ainsi qu’on voit fleurir sur les sites Internet des éléments propres à leur métier. Le premier exemple c’est celui des hôtels, qui peuvent proposer directement leurs chambres dans le moteur de recherche. Il y a également les cinémas, la presse, et pour les choses courantes il y a des événements et des personnes.

C’est ainsi qu’on voit fleurir sur les pages de recherche Google des images liées à l’auteur d’une page par exemple.

Afin de faire cela facilement je vous propose de tester un plugin nommé All In One Schema.org Rich Snippets, permettant d’ajouter du contenu enrichi directement dans votre page sans être obligé de coder. S’il n’est pas très difficile de coder les Rich snippets, il est plus facile de les intégrer par l’utilisation d’un Short Code code qui fera le travail à notre place. De toute façon c’est le code qui est lu par Google qui intéresse, l’avantage de ce plug-in étant justement de produire quelque chose de propre et sans erreur.

Pour les balises de type Event, person, c’est beaucoup plus facile de les automatiser que de taper soi-même le code. En effet, surtout pour les événements, qui changent régulièrement, il vaut mieux éviter les fautes de code et faire confiance à la machine!

All in one Schema.org n’est pas très compliqué à utiliser. En bas de chaque article ou de chaque page, vous aurez l’élément qui vous permettra de choisir votre micro data, de la remplir.

Elle s’intégrera directement dans votre page et sera visible sur Google.

 

 

réseaux sociaux comme profil utilisateur Wordpress

Utiliser les réseaux sociaux comme profil utilisateur WordPress

By Aide et astuces, Plugin Wordpress No Comments

Utiliser les réseaux sociaux comme profil utilisateur WordPress.

C’est un bon moyen de gérer les blogs, les forums et les sites e-commerce. De plus en plus de sites e-commerce de renommé nationale et internationale s’y sont déjà mis. Proposer ce type de service ne peut que renforcer l’image de marque de votre site et ainsi jouer dans la cours des grands.

Non pas que la gestion des profils proposés par WordPress ne soit pas efficace, mais la gestion des comptes utilisateurs peut vite devenir un fardeau. Les utilisateurs perdent souvent leurs identifiants et mots de passe. De plus, le piratage de compte utilisateurs semble à la mode ces derniers temps.

Beaucoup de plugins WordPress proposent déjà ce type de service, mais la majorité d’entre eux se cantonnent aux trois leaders que sont Facebook, Twitter et Google+. Pourquoi se contenter de trois réseaux sociaux quand on peut en proposer vingt-deux ? C’est ce que propose le plugin WordPress Social Login. Bien entendu, il n’est pas obligatoire de tous les activer. Mais pour certains types de sites, plus axés sur la photo par exemple, il est bien pratique de mettre en avant un réseau social comme instagram par exemple.

Installation de WordPress Social Login

L’installation se fait depuis le tableau de bord de WordPress, Extentions -> Ajouter, puis recherchez Wodpress Social Login. Actiez le plugin.

Nota : Suite à l’activation du plugin, il se peut qu’un message d’erreur de type : WordPress Social Login – FAIL! Cela est dû à la configuration d’Apache. Pour en savoir plus sur le problème en question, cliquez sur le bouton Run the plugin requierements test.

Configuration de WordPress Social Login

Allez dans Réglages -> WP Social Login, onglet Netwoks pour configurer les réseaux sociaux. Pour permettre à vos utilisateurs d’utiliser un fournisseur donné, vous devez définir l’option Enabled sur Yes. Par défaut seul Facebook, Google+ et Twitter sont actifs. Pour activer les autres, il suffit de cliquer sur leurs icones à droite de la page.

Si un fournisseur requière un Application ID et une Application Secret cliquez sur Where do I get this info ? Et suivez les indications.

Il est dès à présent possible pour les internautes de se connecter avec leurs comptes depuis la page www.votre_domaine.com/wp-login.php et la sidebar lorsque le widget Meta est activé (voir menu Apparence -> Widgets).

Migrer la base de donnée de Wordpress

Migrer la base de donnée de WordPress

By Aide et astuces, sauvegarde wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 No Comments

Migration d’une base de donnée de WordPress d’un serveur web à un autre ou d’une installation locale vers un serveur pro.

La migration d’un base de donnée WordPress fait partie de ces opérations indispensable pour pouvoir migrer sont site WordPress d’un serveur Web à un autre. Qu’il s’agisse d’un changement de prestataire ou tout simplement d’une installation en local de Wordpres (via MAMP, WAMP ou XAMP) que l’on souhaite migrer chez un hébergeur, cette migration permettra de récupérer tous le contenu de votre site : pages, articles, menus…

Les prés-requis : Phpmyadmin, référence pour la gestion de votre base de données.

Les opérations export/import de la base de données, se feront à l’aide du logiciel PHPmyAdmin. Même si les avis sur ce logiciels sont très controversé, jugé facile d’utilisation par certain, jugé sur ses failles de sécurités par d’autre, en attendant, il a mérite d’être installé sur de nombreux serveurs xAMP. C’est pourquoi cet article sera articulé autour de ce dernier.

Il faudra également un éditeur de texte permettant d’ouvrir des fichiers au format .sql. Il devra permettre également de rechercher un terme et de le remplacer par un autre. L’idée est de remplacer toutes les lignes où est mentionnée l’URL actuel pour la remplacer par la nouvelle. Ici c’est Notepad++ qui est retenu pour sa notoriété, bien que cette fonction existe dans tous bons éditeurs de texte qui se respectent.

Exportation de la base de données :

Dans un premier temps il faut se connecter à PHPmyAdmin.

Pour ceux qui sont sur une installation en local via MAMP, WAMP, XAMP voire même sur un serveur LAMP maison, ouvrez votre navigateur, puis taper l’adresse IP du serveur suivit de phpmyadmin (ex : http://192.168.1.254/phpmyadmin).

Pour les autres qui doivent avoir installé WordPress chez un hébergeur, il faudra se connecter  au tableau de bord de l’hébergeur. Une fois dans ce tableau de bord repérez l’endroit où l’on gère les bases de données. Un bouton PHPmyAdmin devrait s’y trouver. En cas de besoin n’hésitez pas à contacter le support technique de l’hébergeur.

Nota : mise en garde concernant les serveurs LAMP. Il n’est pas rare que le dossier contenant PHPmyAdmin soit écrit comme ceci PhpMyAdmin mélangeant des majuscules/minuscule. Pour le vérifier, allez dans /usr/share. Pour rappel, Linux est sensible à la casse, pensez bien à mettre les majuscules dans l’URL, soit : http://192.168.1.254/PhpMyAdmin, ou bien créer un lien symbolique à l’aide la commande suivant :

# ln –s /usr/share/PhpMyAdmin /usr/share/phpmyadmin

Sélectionnez votre base de données dans la barre latérale de gauche, puis cliquez sur l’onglet Exporter.

Migrer la base de donnée de WordPress fait partie de ces opérations indispensable pour pouvoir migrer sont site WordPress d’un serveur Web à un autre. Qu’il s’agisse d’un changement de prestataire ou tout simplement d’une installation en local de Wordpres (via MAMP, WAMP ou XAMP) que l’on souhaite migrer chez un hébergeur, cette migration permettra de récupérer tous le contenu de votre site : pages, articles, menus…   Les prés-requis  Les opérations export/import de la base de données, se feront à l’aide du logiciel PHPmyAdmin. Même si les avis sur ce logiciels sont très controversé, jugé facile d’utilisation par certain, jugé sur ses failles de sécurités par d’autre, en attendant, il a mérite d’être installé sur de nombreux serveurs xAMP. C’est pourquoi cet article sera articulé autour de ce dernier. Il faudra également un éditeur de texte permettant d’ouvrir des fichiers au format .sql. Il devra permettre également de rechercher un terme et de le remplacer par un autre. L’idée est de remplacer toutes les lignes où est mentionnée l’URL actuel pour la remplacer par la nouvelle. Ici c’est Notepad++ qui est retenu pour sa notoriété, bien que cette fonction existe dans tous bons éditeurs de texte qui se respectent.  Exportation de la base de données :  Dans un premier temps il faut se connecter à PHPmyAdmin.  Pour ceux qui sont sur une installation en local via MAMP, WAMP, XAMP voire même sur un serveur LAMP maison, ouvrez votre navigateur, puis taper l’adresse IP du serveur suivit de phpmyadmin (ex : http://192.168.1.254/phpmyadmin).  Pour les autres qui doivent avoir installé WordPress chez un hébergeur, il faudra se connecter  au tableau de bord de l’hébergeur. Une fois dans ce tableau de bord repérez l’endroit où l’on gère les bases de données. Un bouton PHPmyAdmin devrait s’y trouver. En cas de besoin n’hésitez pas à contacter le support technique de l’hébergeur. Nota : mise en garde concernant les serveurs LAMP. Il n’est pas rare que le dossier contenant PHPmyAdmin soit écrit comme ceci PhpMyAdmin mélangeant des majuscules/minuscule. Pour le vérifier, allez dans /usr/share. Pour rappel, Linux est sensible à la casse, pensez bien à mettre les majuscules dans l’URL, soit : http://192.168.1.254/PhpMyAdmin, ou bien créer un lien symbolique à l’aide la commande suivant : # ln –s /usr/share/PhpMyAdmin /usr/share/phpmyadmin Sélectionnez votre base de données dans la barre latérale de gauche, puis cliquez sur l’onglet Exporter. IMAGE_2 Laissez les réglages par défaut, puis cliquez sur le bouton Exécuter, puis sur Enregistrer le fichier. Une fois enregistrer, ouvrez le fichier avec l’éditeur de texte. Dans Notepad++, allez dans le menu Rechercher, puis Remplacer…. Dans le champ Recherche : saisissez l’ancien nom de domaine de votre blog. Pour ceux qui utilisent un serveur local il s’agit de l’adresse IP du serveur (ex :http://192.168.1.254). Dans le second champ, Remplacer par : saisissez le nouveau nom de domaine, puis cliquez sur Remplacer tout. Notpad++ va alors modifier toutes les lignes où se trouve l’ancien nom de domaine par le nouveau.  Importation de la base de données :  Il va falloir se connecter au tableau de bord de l’hébergeur ou nouvel hébergeur pour ceux qui migrent d’un prestataire à l’autre. Rendez-vous à présent dans PHPMyAdmin, puis allez directement dans l’onglet Importer. Cliquez sur le bouton Parcourir… recherchez votre fichier.sql, puis cliquez sur le bouton Exécuter pour lancer l’opération

Laissez les réglages par défaut, puis cliquez sur le bouton Exécuter, puis sur Enregistrer le fichier.

Une fois enregistrer, ouvrez le fichier avec l’éditeur de texte. Dans Notepad++, allez dans le menu Rechercher, puis Remplacer…. Dans le champ Recherche : saisissez l’ancien nom de domaine de votre blog. Pour ceux qui utilisent un serveur local il s’agit de l’adresse IP du serveur (ex :http://192.168.1.254). Dans le second champ, Remplacer par : saisissez le nouveau nom de domaine, puis cliquez sur Remplacer tout. Notpad++ va alors modifier toutes les lignes où se trouve l’ancien nom de domaine par le nouveau.

Importation de la base de données :

Il va falloir se connecter au tableau de bord de l’hébergeur ou nouvel hébergeur pour ceux qui migrent d’un prestataire à l’autre. Rendez-vous à présent dans PHPMyAdmin, puis allez directement dans l’onglet Importer.

Cliquez sur le bouton Parcourir… recherchez votre fichier.sql, puis cliquez sur le bouton Exécuter pour lancer l’opération.

processingjs

Utiliser Processingjs sous WordPress

By Aide et astuces, Plugin Wordpress, Wordpress 3.8, wordpress 3.9 No Comments

Processingjs est une librairie JavaScript permettant de faire du dessin vectoriel en 2D ou en 3D. Ces tracés vectoriels peuvent être fixes ou animés. Le code source Processingjs s’utilise avec la balise HTML <canvas>. C’est pourquoi il est compatible avec tous les navigateurs HTML 5 et ne requière aucun plugin particulier pour les internautes.



Cet exemple intitulé Multiple Particle Systems est disponible sur le site officiel de Processing.

Installation par le plugin

Par défaut il n’y qu’une seule façon d’installer Processingjs. Mais Wordpres est un framework populaire, ainsi il existe une seconde méthode plus simple. Cette méthode consiste à installer le plugin du même nom.

Depuis le tableau de bord de WordPress, allez dans Extentions -> Ajouter puis taper processingjs en tant que mot-clef. Installez le plugin nomé: Processing.js

Installation pour les puristes

Rendez-vous sur le site officiel de processingjs pour y télécharger la dernière version du fichier processing.js. Placez-le à la racine de votre thème WordPress, puis chargez le script dans la balise <head> de votre thème.

Ouvrez le fichier header.php puis ajouter la ligne de code suivante :


<script src="/chemin-vers-votre-dossier/processing.js"></script>

Intégration du code source avec le plugin

Le plugin permet d’intégrer le code source à l’intérieur d’une page ou d’un article.

Créez votre nouvelle page/article, puis insérez les shortcodes [processing] et [/processing].

Le code source Processing devra être insérer à l’intérieur des shortcodes.

Intégration du code source sans le plugin

L’avantage de cette méthode par rapport à la précédente est que l’intégration du code Processing ne se limite pas aux articles et aux pages de votre site. Il est également possible de l’intégrer directement dans les fichiers sources de votre thème. Car ici pas de shortcode, mais l’utilisation de la balise .

Première méthode à privilégier si votre sketch est constituer de plusieurs ou fichiers (au format .pde), ou bien que votre code est très dense.

Exemple avec un seul sketch :


<canvas data-processing-sources="/hemin-vers-votre-dossier/sketch.pde">
</canvas>

Exemple avec deux sketchs :

<canvas data-processing-sources="/chemin-vers-votre-dossier/sketch_1.pde chemin-vers-votre-dossier/sketch_2.pde">
</canvas>

Deuxième méthode à privilégier si votre sketch est très court et qu’il tient dans un seul fichier. Le code s’intègre à l’aide d’une balise JavaScript. Le code source Processing est à saisir dans les balises