All Posts By

Franck

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.

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.

Geo my Wordpress

Utiliser la géolocation avec Geo my WordPress

By Plugin Wordpress, wordpress 3.9 No Comments

Geo my WordPress est une solution complète de géolocation pour WordPress.

Utilisant les API de Google Maps il permet d’ajouter l’emplacement à tous ou partie de vos articles, pages et même à vos membre BuddyPress lorsque celui-ci est installé.

 L’installation du plugin Geo, prenez juste la précaution de sélectionner le bon plugin.

L’installation ce fait de manière classique, attention toutes fois lors de l’installation automatique (via le tableau de bord de WordPress), car un autre plugin porte le même nom. Sans doute que les développeurs aient voulu s’approprier la notoriété de sont ainé. Quoi qu’il en soit, veuillez à bien installer celui qui déteind les 5 étoiles.

 

Le sous menu Modules

Ce menu permet l’ajout de modules complémentaires pour accroitre le nombre de fonctionnalité. Par défaut seul Post types locator est installé mais pas active. Activez-le tous de suite car il est indispensable pour la plupart des fonctionnalités de base.

Les plugins où figure le liserer rouge à coté du nom, signifie qu’ils ne sont pas activé. Le liserer passe en bleu lorsqu’ils sont activés. Certain plugin nécessite l’ajout d’un numéro de licence, il apparaissent avec le liserer vert.

Dans la liste figure un plugin nommé : Gravity Form Geo field. Pour ceux qui ne connaissent pas encore Gravity Form un article lui est consacré sur FranceWordpress.

Les fonctionnalités

Après avoir ajouter votre localité, il sera possible de créer un formulaire de recherche avancé en y incluant la localité et ainsi proposé un solution de recherche par taxonomie par localité. La recherche peut être étendu à l’aide d’un rayon d’action dont la distance peut être configurer en miles ou en kilomètres.

Geo My WordPress propose d’autres fonctionnalités comme : l’emplacement actuel de l’utilisateur de positionnement automatique, affichage de la distance de conduite,
TogethWP est très proche de Google Maps, en proposant la géolocalisation automatique de l’utilisateur et permétant d’afficher l’itinéraire jusqu’à votre lieu physique.

Les principales caractéristiques

  • Fonctionne avec les Articles et les Pages.
  • Fonctionne avec Buddypress – Les membres de Buddypress peuvent ajouter leur adresse.
  • Possible recherche par ville ou code postale.
  • Utilisé la localisation automatique pour obtenir l’emplacement actuel de l’utilisateur.
  • Utilisé la localisation automatique pour afficher les résultats à proximité de l’emplacement de l’utilisateur.
  • Rechercher dans n’importe quel rayon choisi parmi un menu déroulant..
  • Pour les post types – Utilisez les catégories pour filtrer resultats.
  • Pour Buddypress – Utiliser le champs profile pour des résultats complexes de filtrage.
  • Recherche par miles ou kilomètres
  • Afficher Google map avec les marqueurs de la fenêtre, des emplacements et des informations pour chacun des marqueurs.
  • Utilise les API de Google pour affiche les itinéraires.
  • Pagination – choisissez le nombre de résultats par pages.

Paramètres généraux.

  • Entrez votre Google API key
  • Choisissez votre région.
  • Choisissez si obtient automatiquement l’emplacement actuel de l’utilisateur lors de la première visite sur le site.
  • Personnalisez l’icône de localisation parmi les modèles proposés ou en en important les vôtres.
  • Choisissez le Post types où vous voulez ajouter la localisation.
  • Choisissez le thème de couleur pour les Titres, liens et adresse dans les résultats de recherche.

Nouveautés et mises à jour dans la page admin

  • Les champs d’adresse sont automatiquement créés pour les types de poste choisis.
  • Les Meta boxes pour le numéro de téléphone, fax, adresse email et site web for sont affiché dans les résultats et dans les fenêtres d’information de la carte.
  • Des Meta boxes pour ouvrir l’heure et la date.
  • Crée des champs d’adresse obligatoire pour s’assurer que les utilisateurs souhaitant créer un nouvel article soient bien une personne morale et nom un serveur.
  • 5 possibilités pour ajouter l’adresse et les coordonnées géographique (longitude, latitude) :
    • Géolocalisation automatique de l’emplacement actuel.
    • Champs de saisie auto-complété qui obtiennent des résultats de Google.
    • Glissez/Déplacez du marqueur sur la carte pour choisir la localité.
    • Entrez l’adresse manuellement pour retrouver la longitude et la latitude.
    • Entrez la longitude et la latitude manuellement pour retrouver l’adresse.

 

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.

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).

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