Category

Thèmes Wordpress

wp-editor-wordpress

Editeur de code pour WordPress : Modifier ses thèmes et ses plugins comme sur Dreamweaver ou Notepad +

By | Aide et astuces, Plugin Wordpress, Référencement Wordpress, Thèmes Wordpress | No Comments

Le meilleur éditeur de code à l’intérieur de WordPress : Le choix de Wp-Editor.

editeur code couleur wordpressNotre solution après en avoir essayé de très nombreuses extensions dédiées à la personnalisation de l’environnement du code, c’est le plug-in WP editor.

Il remplace ce qui est installé par défaut dans l’éditeur de thème de la page PHP ou de votre feuille de style CSS. Cette fonction en place nativement dans WordPress depuis 2 ans, ne permet néanmoins pas une vue habituelle, telle que le permettent des logiciels comme Dreamweaver ou Notepad +.
Avec les intégrations de couleurs, l’environnement vous permet tout de suite de faire des modifications puisque les balises HTML, les balises PHP, et tout type de code apparaissent directement pour permettre de faire des modifications comme si vous étiez sur un éditeur de type Dreamweaver.

Au delà des couleurs dans le code, vous pourrez également apprécier la numérotation des lignes dans l’éditeur de texte.

La numérotation de lignes est bien pratique, puisque désormais, beaucoup font les modifications directement à partir de l’inspecteur d’élément proposé par Firefox ou par Chrome. Cette éditeur de texte intégrant la numérotation de lignes, il est alors plus facile de faire un copier coller de l’inspecteur à l’éditeur, puis de faire le modification ajustée pour la validation définitive.

Rapide et efficace il s’agit de la meilleure solution d’aujourd’hui sur WordPress pour administrer son code.
Au-delà l’avantage est également de pouvoir aller dans les fichiers CSS même si ces derniers sont localisés dans des dossiers. Après avoir changé les droits d’écriture et de permissions sur vos fichiers à partir de votre logiciel ftp, il vous sera alors possible de modifier l’intégralité du code présent sur votre site.
Cette extension fait partie des 10 meilleurs plugins à utiliser systématiquement dans un site WordPress.

Quelque soit le thème ou le plugin sur lequel vous travaillez, Wp-Editor s’associe à votre feuille et vous permettra ainsi la modification pour une personnalisation plus rapide et plus efficace. Vous allez donc grâce à cela progressivement quitter vos éditeurs de texte, et ainsi travailler de plus en plus directement en ligne pour laisser au local que les débuts de votre site.

Au delà, n’oublions pas que le référencement sur WordPress passe par une optimisation du code, c’est donc l’un des outils nécessaire pour tous ceux qui souhaitent avancer sur le sujet;)

sticky menu

Créer un sticky menu en CSS

By | Aide et astuces, Le graphisme et wordpress, Thèmes Wordpress | No Comments

Le sticky menu est une des nouvelles tendances du webdesign. Cela consiste, à maintenir le menu principal collé en haut de la fenêtre du navigateur, lors du défilement vertical des pages.

Il est possible de créer un simple sticky menu à l’aide de la propriété CSS position: fixed. C’est la méthode qui va être présenté ici. L’avantage de cette méthode, c’est qu’elle est simple et donc à portée de tous. L’inconvenant est qu’il n’est pas possible de bloquer le menu seul. Il faudra bloquer tous l’entête de la page. Pour les thèmes ayant un en-tête fin (200px de haut environ) cela ne posera pas de problème, pour les autres oui. Car pendant le défilement vertical de la page cet en-tête figé sera trop imposant sur les écrans de petites tailles.

Pour ceux qui possède un en-tête trop volumineux, il est préférable d’utiliser un plugin, voir même de Jquery. Avec cette méthode, seul le menu sera maintenu en haut de page, le reste de l’en-tête disparaitra.

Pour créer un sticky menu, il faut commencer par repérer la balise div qui englobe la totalité du header de votre site. Généralement appelé header. Pour la localiser facilement, afficher la page d’accueil de votre site puis utiliser les outils de développement de votre navigateur web. Une fois localisé, ouvrez le fichier style.css de votre thème à l’aide de votre éditeur de texte préféré, puis en fin de fichier ajouter le code suivant :

.header {
	position: fixed;
	left: 10%;
	z-index: 1000;
	background-color: #FFF;
}

Dans l’exemple ci-dessus, l’en-tête du thème se trouve dans : div class= »header »
.

  • position: fixed. Permet de maintenir l’en-tête haut de la page pendant le défilement vertical.
  • left. Par défaut, l’élément vient se caller dans le coin supérieur gauche du navigateur, utilisez left pour recentrer l’en-tête.
  • z-index. Si le menu passe en dessous du contenu, ajoutez également la propriété z-index et le contenue passe en dessous.
  • background-color. Ajoutez en un car pendant le défilement de la page, le contenue peut être visible dans les espaces vides du header.

Pour la propriété left préférez une valeur en pourcentage, cela permet une meilleure intégration en responsiv web design. Ou bien, faite un en-tête faisant toute la largeur de la fenêtre du navigateur. La propriété left prendra la valeur auto

.header {
	position: fixed;
	left: auto;
	width: 100%;
	z-index: 1000;
	background-color: #FFF;
}

Pour finir, repérer la balise div qui contient le contenu de la page, généralement appelé : content, container ou wrap. Ajouter lui un padding-top dont la valeur correspond à la hauteur de l’en-tête.

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!

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.

Personnaliser un thème Wordpress

Personnaliser un theme WordPress

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

Personnaliser un thème WordPress est un bon compromis entre simplicité et personnalisation. Simplicité, car cela n’est pas donné à tout le monde de créer un thème de A à Z et personnalisation car le thème choisis qu’ils soient gratuit ou payant, est déjà installés sur d’autres sites que le vôtre et ainsi manquer très vite d’originalité.

La structure générique d’un thème

Les thèmes sont un ensemble de fichiers PHP, CSS et JavaScript placés dans un dossier portant (en général) le nom du thème le tout situé dans /wp-content/themes/nom_du_theme. Même si le nom et le nombre de fichiers varie d’un thème à l’autre, il y a tout de fois des inconditionnels tel que :

  • Header.php, dans lequel se trouvent les éléments de l’en-tête du site.
  • Footer.php, dans lequel se trouvent les éléments du pied de page du site.
  • Sidebar, dans lequel se trouvent les éléments de la barre latérale du site.
  • Page.php, c’est le gabarit qui permet à WordPress de créer les pages du site.
  • Index.php, c’est le gabarit de la page d’accueil du site.
  • Single.php, permet à WordPress d’afficher les articles de manière individuelle
  • Style.css, pour Cascading Style Sheet, pour la mise en forme du site.

Les éditeurs de texte

Personnaliser un thème WordPress se fait en modifiant directement les fichiers sources du thème. Soit par le billet d’un éditeur de texte, dans ce cas préférez des éditeurs de texte gérant le mode remote en d’autre termes, qui permettent de se connecté à un serveur FTP afin de na pas à avoir systématiquement besoin de télécharger les fichiers en local avant de les modifier. Soit depuis le tableau de bord de WordPress dans la rubrique Apparence -> Editeur.

L’éditeur de texte de WordPress est très sobre. Un peu trop d’ailleurs. Heureusement il est possible de compter sur des plugins tels que WP editor. Ce plugin offre une bonne lisibilité du code avec une colorisation syntaxique claire. De plus il permet d’accéder aux fichiers contenu dans des sous dossier, ce qui est un vrai plus par rapport à ses concurrents.

Une fois c’est modifications effectués, garder toujours une copie de vos fichiers, car chaque mise à jour de votre thème écrasera vos modifications. Cela peut paraitre rudimentaire, mais à ce jour il n’existe malheureusement de modifications sur les fichiers PHP et JavaScript.

Nota : N’oubliez d’attribuer les droits 775 au dossier wp-content ainsi qu’à ses sous dossiers. Auquel cas le WP editor ne parviendra pas sauvegarder vos modifications dans les fichiers sources du thème.

Customiser le CSS

Pour la partie CSS les choses sont beaucoup plus souples. La plupart des thèmes payant et dit freemium ont dans leurs panneaux de configuration une section nommé Custom CSS. Il s’agit d’une aire de texte dans lequel il est possible de saisir du code CSS sans altérer le/les fichier(s) CSS du thème. Ainsi lors de mise à jour du thème, la partie CSS est préservée. Mais cela ne dispense pas de faire une sauvegarde des paramètres du thème. Lors des mises à jour du thème, tous les paramètres sont réinitialisés. Là encore, il n’est pas rare de trouver ce type de fonctionnalité sur ce genre de thème.

Pour ce qui est des thèmes entièrement gratuit, les développeurs ne prévoient rien de tout cela. Là encore c’est du côté des plugins qu’il faut se tourner. Taper Custom CSS comme mot clé lors de votre recherche de plugin. Parmi le florilège de résultat obtenu, Simple Custom CSS est un bon choix pour ceux qui souhaitent ajouter du code CSS en toute simplicité.

Nota : Ce type de fonctionnalité est surtout prévu pour ajouter des directives CSS. Mais il arrive parfois que l’on souhaite en retirer. Cela n’étant pas possible l’astuce consiste à les désactiver. Pour cela il suffit de taper la directive dans votre Custom CSS et de lui attribuer la valeur none. Comme dans l’exemple ci-dessous :

Dans le fichier style.css

h1 { padding-top: 10px ; }

Dans la fenêtre Custom CSS

h1 { padding-top: none ; }
wp-editor-wordpress

Wp-Editor l’éditeur de code indispensable pour WordPress

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

Après en avoir essayé de très nombreuses extensions dédiées à la personnalisation de l’environnement du code, WP-editor s’est avéré très efficace pour
Modifier ses thèmes et ses plugins comme sur Dreamweaver ou Notepad ++

Il remplace ce qui est installé par défaut dans l’éditeur de thème de la page PHP ou de votre feuille de style CSS. Cette fonction en place nativement dans WordPress depuis 2 ans, ne permet néanmoins pas une vue habituelle, telle que le permettent des logiciels comme Dreamweaver ou Notepad ++.

Avec les intégrations de couleurs, WP-Editor offre un environnement vous permet tout de suite de faire des modifications puisque les balises HTML, les balises PHP, et tout type de code apparaissent directement pour permettre de faire des modifications comme si vous étiez sur un éditeur du type Dreamweaver.

Au-delà des couleurs dans le code, vous pourrez également apprécier la numérotation des lignes dans l’éditeur de texte.

La numérotation de lignes est bien pratique, puisque désormais, beaucoup font les modifications directement à partir de l’inspecteur d’élément proposé par Firefox ou par Chrome. Cet éditeur de texte intégrant la numérotation de lignes, il est alors plus facile de faire un copier-coller de l’inspecteur à l’éditeur, puis de fairela modification ajustée pour la validation définitive.

Rapide et efficace il s’agit de la meilleure solution d’aujourd’hui sur WordPress pour administrer son code.
Au-delà l’avantage est également de pouvoir aller dans les fichiers CSS même si ces derniers sont localisés dans des dossiers. Après avoir changé les droits d’écriture et de permissions sur vos fichiers à partir de votre logiciel ftp, il vous sera alors possible de modifier l’intégralité du code présent sur votre site.
Cette extension fait partie des 10 meilleurs plug-ins à utiliser systématiquement dans un site WordPress.

Quel que soit le thème ou le plug-in sur lequel vous travaillez, Wp-editor s’associe à votre feuille et vous permettra ainsi la modification pour une personnalisation plus rapide et plus efficace. Vous allez donc grâce à cela progressivement quitter vos éditeurs de texte, et ainsi travailler de plus en plus directement en ligne pour laisser au local que le début de votre site.

Mise à jour de WordPress 3.6 disponible.

By | Thèmes Wordpress, Wordpress 3.6 | No Comments

wordpress 3.6La nouvelle version de WordPress est sortie la semaine dernière et vous permettra de profiter de quelques ajustements nécessaire aux exigences des utilisateurs.

Les principales nouveautés de WordPress 3.6.

  • Un nouveau thème, Twenty-Thirteen. Le thème est pour la première fois, coloré, ce qui va faire du bien aux puristes. De même il conserve sa forme responsive qui avait marqué l’évolution de l’ancien thème.
  • Blocage et sauvegarde des articles révisés : Cette révision répond à l’exigence des sites ou blogs multi auteurs. Les sauvegardes et le verrouillage se fait désormais par auteur, un bon moyen de rendre chaque auteur indépendant sur son travail et sur son article.
  • La gestion HTML5 est améliorée et intégrée nativement.  Plus besoin de plugins tiers, la gestion HTML5, pour l’audio et la video sont désormais parfaitement gérés.

Pour le reste, c’est surtout un avant goût de la version 3.7 qui engagera des changements plus profonds. Il répond en attendant à des exigences de Google qui donne de plus en plus de place à l’auteur pour qualifier la qualité d’un blog ou d’un site internet. Un moyen précieux de répondre de façon automatique à cette question de l’authorrank.

Editeur de code pour WordPress : Modifier ses thèmes et ses plugins comme sur Dreamweaver ou Notepad +

By | Plugin Wordpress, Thèmes Wordpress | No Comments

Le meilleur éditeur de code à l’intérieur de WordPress : Le choix de Wp-Editor.

editeur code couleur wordpressNotre solution après en avoir essayé de très nombreuses extensions dédiées à la personnalisation de l’environnement du code, c’est le plug-in WP editor.

Il remplace ce qui est installé par défaut dans l’éditeur de thème de la page PHP ou de votre feuille de style CSS. Cette fonction en place nativement dans WordPress depuis 2 ans, ne permet néanmoins pas une vue habituelle, telle que le permettent des logiciels comme Dreamweaver ou Notepad +.
Avec les intégrations de couleurs, l’environnement vous permet tout de suite de faire des modifications puisque les balises HTML, les balises PHP, et tout type de code apparaissent directement pour permettre de faire des modifications comme si vous étiez sur un éditeur de type Dreamweaver.

Au delà des couleurs dans le code, vous pourrez également apprécier la numérotation des lignes dans l’éditeur de texte.

La numérotation de lignes est bien pratique, puisque désormais, beaucoup font les modifications directement à partir de l’inspecteur d’élément proposé par Firefox ou par Chrome. Cette éditeur de texte intégrant la numérotation de lignes, il est alors plus facile de faire un copier coller de l’inspecteur à l’éditeur, puis de faire le modification ajustée pour la validation définitive.

Rapide et efficace il s’agit de la meilleure solution d’aujourd’hui sur WordPress pour administrer son code.
Au-delà l’avantage est également de pouvoir aller dans les fichiers CSS même si ces derniers sont localisés dans des dossiers. Après avoir changé les droits d’écriture et de permissions sur vos fichiers à partir de votre logiciel ftp, il vous sera alors possible de modifier l’intégralité du code présent sur votre site.
Cette extension fait partie des 10 meilleurs plug-ins à utiliser systématiquement dans un site WordPress.

Quelque soit le thème ou le plug-in sur lequel vous travaillez, Wp-Editor s’associe à votre feuille et vous permettra ainsi la modification pour une personnalisation plus rapide et plus efficace. Vous allez donc grâce à cela progressivement quitter vos éditeurs de texte, et ainsi travailler de plus en plus directement en ligne pour laisser au local que les débuts de votre site.