par Anne-Laure DELPECH | 5 Oct 2017 | Archives
Avec Divi, il est possible d’utiliser le module « Code » pour insérer des shortcodes dans un modèle. Ici, j’ai créé un shortcode pour pouvoir afficher automatiquement le titre et la description d’une catégorie.
Créer un thème enfant
On ne fait évidemment aucune modification du thème Divi puisqu’elle serait effacée en cas de mise à jour. On crée donc un thème enfant, comme indiqué dans « Créer un thème enfant pour Divi (WordPress) ».
Ce que je veux obtenir
Je veux pouvoir afficher automatiquement le titre d’une catégorie et sa description dans des modèles de catégorie.
Je veux que [[cat_display title= »yes » centrer= »yes » description= »yes »]] définisse que :
- oui, il faut aller chercher le nom de la catégorie et l’afficher ;
- oui, il faut centrer le titre sur la page
- oui, il faut aller chercher la description de la catégorie et l’afficher.
Le code
Dans functions.php du thème enfant, j’ai ajouté le code suivant :
/***** My shortcode with parameters for category title and description ***********/
// [cat_display title="yes" centrer="yes" description="yes"] will display both category and description
// source https://developer.wordpress.org/plugins/shortcodes/shortcodes-with-parameters/
function cdc_cat_title_desc_shortcode( $atts = [], $content = null ) {
// normalize attribute keys, lowercase
$atts = array_change_key_case((array)$atts, CASE_LOWER);
// override default attributes with user attributes
$wporg_atts = shortcode_atts( [
'title' => 'yes',
'centrer' => 'yes',
'description' => 'yes',
], $atts );
// start output
$o = '';
// start box
$o .= '<header class="archive-header">';
// title
if ( "yes" == $wporg_atts['title'] ) {
if ( "yes" == $wporg_atts['centrer'] ) {
$o .= '<h1 class="entry-title main_title" style="text-align:center;">' . single_cat_title( '', false ) . "</h1>";
} else {
$o .= '<h1 class="entry-title main_title">' . single_cat_title( '', false ) . "</h1>";
}
} else {
$o .="";
}
if ( "yes" == $wporg_atts['description'] ) {
$o .= '<div class="archive-meta">' . category_description() . "</div>";
} else {
$o .="";
}
// end box
$o .= '</header>';
// return output
return $o;
}
add_shortcode('cat_display', 'cdc_cat_title_desc_shortcode');
La dernière ligne,add_shortcode(‘cat_display’, ‘cdc_cat_title_desc_shortcode’); , définit que lorsque le shortcode [[cat_display]] est repéré, il faut exécuter la fonction cdc_cat_title_desc_shortcode.
Dans cette fonction,
- Je précise que je me suis inspirée de cette page pour créer la fonction : Shortcodes with Parameters ;
- $atts = array_change_key_case((array)$atts, CASE_LOWER); évite les anomalies liées à des « yes » contenant des majuscules ;
- Les lignes $wporg_atts = shortcode_atts( [ … ], $atts ); indiquent les différents paramètres applicables et leurs valeurs par défaut (yes) ;
- $o contient le html qui devra être inséré dans le modèle. Ici il prendra une valeur différente selon la valeur des paramètres.
Maintenant, je peux utiliser ce shortcode comme je le souhaite, et en particulier dans un module « code » de Divi.
L’utilisation de ce shortcode
J’explique comment l’utiliser dans l’article sur les modèles Divi pour l’affichage de pages de catégorie : Thème Divi : créer des modèles (layouts) spécifiques pour des catégories.
par Anne-Laure DELPECH | 5 Oct 2017 | Astuces rapides
Il arrive que le modèle ou qu’un module Divi ne se charge pas. On est alors bloqué sur une page avec un symbole indiquant qu’elle se charge. Dans ce cas :
Aller dans le menu « tableau de bord » de WordPress puis cliquer tout en haut sur le menu « supprimer le cache »
WordPress : supprimer le cache
Si même ça ne fonctionne pas, aller dans Apparence >> Thèmes, activer le thème parent (Divi), vérifier que le modèle se charge puis retourner dans Apparence >> Thèmes, activer le thème enfant de nouveau.
Et maintenant, les modèles ou modules se chargent de nouveau.
Si ça ne suffit pas, suivre les instructions de l’article « How to fix Divi Builder modules not opening/loading or Timeout Issue« .
par Anne-Laure DELPECH | 2 Oct 2017 | Archives
Dans l’article prototype d’éclairage LED mixte j’ai expliqué la construction à titre d’essai d’une lampe mêlant un ruban LED pour diffuser un éclairage doux et deux spots à LED également pour éclairer sur une surface restreinte et servir de liseuses. Ici je présente le montage de la version définitive.
Ma liste de courses
J’ai réutilisé tout ce que j’avais acheté pour réaliser le prototype. En plus, j’ai acheté :
- une planche de pin de 200 x 40 mm, épaisseur 18 mm (7.95 € chez Leroy Merlin) ;
- 6 charnières à visser 77×33 mm (ici chez Leroy Merlin, à 6.80€ le lot) ;
- des vis à double filets, diamètre 6mm, longueur 60 mm (ici chez Castorama, à 3.75 € le sachet de 10) et écrous et rondelles de diamètre 6 correspondantes.
En plus j’ai utilisé un tube plastique que j’avais (récupération d’une ancienne lampe à led qui était tombée en panne), deux coudes males 15×21, des vis diverses et un peu de tissu, ainsi que des chevilles de diamètre 8 pour fixer la lampe.
L’adaptation du circuit électrique de la pièce
Dans la pièce (une chambre) où va cette lampe, il y avait une arrivée électrique au mur actionnée par deux interrupteurs va et vient. Pour que le nouvel éclairage fonctionne, il fallait que l’arrivée électrique contienne :
- un + (déjà présent) ;
- un – actionné par le va-et-vient (déjà présent) ;
- un – « général », alimenté en permanence, à installer.
Voici le schéma électrique de la nouvelle installation :
Schéma électrique de l’alimentation murale, avec va et vient
Et l’essai réalisé avec deux ampoules, connectées toutes deux au +, avec l’une connecté au – général et l’autre au – des va et vients indique que tout va bien :
Le schéma électrique de la lampe
La lampe contient :
- un ruban led, alimenté par un transformateur, lui même alimenté par le – relié au va et vient et le +.
- deux spots, chacun actionné par un interrupteur spécifique, les deux interrupteurs étant reliés au + et au – général.
Voici le schéma électrique, et des photos des différents branchements :
Schéma électrique du coffret d’éclairage
câblage du transformateur (remarquer quel fil est noir et blanc)
Câblage des interrupteurs des spots
Le câblage terminé, il ne reste plus qu’à fixer les câbles aux planches
Branchement du ruban led
Le montage du coffret d’éclairage
Schéma de montage du coffret
Les planches (4) et (5) sont solidaires et sont fixées à la planche (3) par des charnières. Ainsi le coffret s’ouvre pour pouvoir être fixé au mur et relié aux arrivées électriques.
Les deux joues (6) sont vissées dans les pièces (1), (2) et (3). La pièce (2) est vissée sur (1).
Dans ma planche de pin de 2 m par 40 cm, j’ai réalisé les découpes suivantes :
- découpe à 1564 mm de long de la tablette ;
- Dans la planche de 1564 x 400, j’ai découpé les pièces (1) à (5) ;
- Dans ce qui restait, j’ai découpé les deux joues (6).
Les dimensions des 7 planches découpées sont :
- (1) 1564 x 48 mm (ce qui reste des 400 mm après avoir découpé (2) à (5)
- (2) 1564 x 40 mm (on doit avoir (2)+(5) = 104, je laisse un jeu de 1 mm)
- (3) 1564 x 105 mm
- (4) 1564 x 142 mm (on doit avoir (4) + 2 épaisseurs – 18 mm) = 178 mm)
- (5) 1564 x 65 mm
- (6) 2 morceaux de 178 x 105 mm
Dans les faits, si vous regardez bien mes photos, vous verrez que mes découpes n’étaient pas très justes, et des perçages défigurent un peu, c’est pourquoi j’ai habillé la lampe d’un tissu qui cache les défauts…
La fixation au mur
J’ai percé le mur en diamètre 8 mm pour y insérer des chevilles. J’ai ensuite placé les vis à double filet dans ces chevilles (en mettant temporairement deux écrous serrés l’un contre l’autre pour pouvoir utiliser une clé) de telle sorte que le filet « bois » soit dans la cheville et le filet « métal » sorte du mur.
La planche (1) contient 4 trous de diamètre 7 mm dans lequel les vis de diamètre 6 fixées au mur peuvent s’insérer. Il suffit ensuite de placer une rondelle et un écrou de 6 mm sur chaque vis pour fixer le coffre d’éclairage.
Ensuite, il suffit de connecter les 3 fils d’alimentation du mur dans les dominos prévus.
Et maintenant ?
Je suis contente d’avoir réalisé ce coffret, même si mes découpes sont imparfaites. J’ai appris de l’électricité, je sais maintenant utiliser un ruban led et j’ai fait un éclairage très fonctionnel pour un coût modéré.
par Anne-Laure DELPECH | 29 Sep 2017 | Astuces rapides, WordPress & Web
On peut définir des liens personnalisés dans les menus WordPress. Mais le visiteur qui clique sur l’élement de menu se trouve brutalement dans un autre site, sans en avoir été informé. Nous allons donc voir comment faire pour que le lien s’ouvre dans un autre onglet et que l’utilisateur en soit averti (attributs de titre) ?
Afin d’éviter que l’internaute se retrouve subitement dans un autre site, je me propose de régler les liens vers des url externes de telle sorte que :
- l’internaute ouvre un autre onglet lorsqu’il clique sur le menu (le site sur lequel il était reste ouvert dans l’onglet initial).
- L’internaute voit apparaître une information lui indiquant que le lien va s’ouvrir dans un autre onglet.
Les options de menu WordPress par défaut
Par défaut, voici ce que l’on voit lorsque l’on est administrateur dans un élément de menu WordPress :
Et l’internaute qui place sa souris sur un lien externe (ici « Ma chaîne Vidéos ») n’a aucune idée qu’il va être envoyé dans un site externe.
Activer d’autres options
Dans la page de réglage des menus de WordPress (Apparence >> Menus), il y a un tout petit bouton « options de l’écran » tout en haut à droite. Si on clique dessus, on voit apparaître différentes options :
Je clique sur les cases à cocher « cible du lien » et « Description »
Maintenant, je peux cocher « ouvrir le lien dans un nouvel onglet » et « attribut de titre » (qui s’affichera lorsque l’internaute place sa souris sur le lien).
Après sauvegarde du menu, l’internaute voit apparaître un « popup » qui l’informe qu’il sera envoyé vers un nouvel onglet et s’il clique sur le lien, un nouvel onglet s’ouvre dans son navigateur.
Une icone pour être encore plus explicite
Ce serait encore plus clair si le lien du menu affichait en permanence l’information que le lien est externe. On peut le faire en ajoutant une icone au titre de l’élément de menu :
j’ai ajouté « <span class= »dashicons dashicons-external »></span> » au titre.
Et maintenant l’internaute voit :
Ajuster le style de l’icone et du popup
J’ai donné une classe CSS à l’élément de menu « lien-ext » (on peut le faire si on a coché « classe CSS » dans les options d’affichage de la page de réglage du menu.
Réglages de menu WordPress : un titre de menu avec classe CSS spécifique
On peut modifier le fichier style.css (de notre thème enfant) et définir un style différent pour l’icone du menu et le popup :
/* --- Menus avec classe CSS "lien-ext" : icone et popup --- */
.lien-ext .dashicons.dashicons-external {
vertical-align: bottom !important;
}
.lien-ext a[title]:hover::after {
content: attr(title);
position: absolute;
left: 0;
top: -40%;
white-space: nowrap;
padding: 0.5rem;
border: none;
background-color: white;
font-style: italic;
font-weight: 400;
font-size: 90%;
text-align: right;
}
Maintenant l’internaute voit l’icone bien alignée par rapport au titre du menu et lorsqu’il pose sa souris sur le titre, il voit (deux…) popup l’informant qu’il sera envoyé dans un autre onglet.
Et maintenant ?
A vous de jouer !
par Anne-Laure DELPECH | 28 Sep 2017 | Archives
Le thème Divi, objet des articles de cette série Utiliser le thème DIVI d’Elegant Themes, ne permet pas d’ajouter un « fil d’Ariane » (breadcrumbs en anglais) pour permettre à tous les internautes de savoir où ils se situent dans un site web. J’explique ici comment utiliser une fonctionnalité de l’extension Yoast SEO pour afficher un fil d’Ariane sur les pages (toutes ou une partie) d’un site.
Pourquoi mettre un « fil d’Ariane » ?
Imaginez que vous visitez un nouveau site. Au gré des liens que vous suivez, vous pouvez vite être complètement perdu. Dans ce cas, vous pouvez parfois être sauvés par les menus de navigation, s’ils vous paraissent cohérents.
Dans d’autres cas, vous remarquerez le fil d’Ariane (ou breadcrumbs) qui vous permettra de comprendre la position de la page actuelle dans la hiérarchie du site. Evidemment, cela ne vous aidera que si la structuration du site vous paraît également cohérente.
En l’absence d’un fil d’Ariane, il est fort probable que vous quitterez ce site en pensant que son auteur est vraiment très désorganisé !
En plus, le fil d’Ariane peut aussi permettre aux robots des moteurs de recherche de mieux comprendre la structure d’un site, et donc de mieux l’indexer.
Comment intégrer un fil d’Ariane lorsque le thème ne le prévoit pas ?
Ma solution utilise l’extension Yoast SEO, mais vous pouvez aussi utiliser Breadcrumb NavXT, selon cet article (en anglais) qui m’a servi de référence.
Régler l’extension Yoast SEO
Dans le tableau de bord WordPress, menu SEO, menu Avancé, onglet « Fils d’Ariane : activer le fil d’Ariane. De nombreux paramètres peuvent alors être réglés :
Sur cette partie des réglages, la seule chose que j’ai modifié, c’est le texte d’ancrage pour la page d’accueil. A la place de « Accueil », j’ai placé : <span class= »dashicons dashicons-admin-home »> </span>. Maintenant mon fil d’Ariane démarre par une sympathique icone de maison et ça me semble beaucoup plus facile de comprendre à quoi sert cette ligne.
Cocher « Afficher la page de blog » est une astuce de Yoast SEO pour bien montrer la position du blog dans la structure générale du site. Je l’ai laissé comme c’est proposé par défaut.
Dans la deuxième partie des réglages de Yoast SEO, on trouve deux éléments :
- Taxonomie à afficher dans le fil d’Ariane pour les types de contenu : pour les articles, j’ai indiqué « catégorie ». Mon fil d’Ariane devient très long (ici j’ai tronqué le titre de l’article) :
- Type de contenu d’archive à afficher dans le fil d’Ariane pour les taxonomies : je n’ai pas essayé de régler autrement (pas sur « aucun ») car je n’utilise pas les taxonomies indiquées.
Une fois ces réglages effectués le thème Divi n’affiche pas les fils d’Ariane ! Il faut maintenant aller modifier le thème enfant.
Modifier le thème enfant pour intégrer le fil d’Ariane
Mon site WordPress utilise un thème enfant de Divi, thème enfant que j’ai créé (j’explique ici comment). Evidemment, il ne faut en aucun cas faire les modifications qui suivent directement dans un thème parent !
Comme je veux que le fil d’Ariane figure sur l’ensemble des pages du site, j’ai copié le fichier header.php de /wp-content/themes/Divi (thème parent) et je le place dans /wp-content/themes/clea-divi-child (mon thème enfant).
Tout en bas de header.php du thème enfant, en dessous de la ligne <div id= »et-main-area »> , j’ai ajouté le code suivant, comme indiqué dans cet article (en anglais).
<!-- #main-header -->
<?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
echo '<div class="container">';
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
echo '</div>';
} ?>
Maintenant le fil d’Ariane apparaît sur toutes les pages. Je fais quelques ajustements de style en ajoutant dans le fichier style.css du thème enfant les éléments suivants :
/* --- Yoast breadcrumbs inserted in header.php --- */
#breadcrumbs{
width: 100%;
margin-top: 1rem ;
font-size: 0.9rem;
}
Et voilà, j’ai terminé.
A vous maintenant !
par Anne-Laure DELPECH | 23 Sep 2017 | Archives
Par défaut, les pages de catégorie du thème Divi n’affichent ni le nom de la catégorie, ni le descriptif que l’on a défini lorsqu’on a créé la catégorie. Dans cet article de la série Utiliser le thème DIVI d’Elegant Themes, nous allons voir comment générer automatiquement ce texte avant l’affichage de la liste des articles de la catégorie.
Créer un thème enfant avant de démarrer
Voir les instructions dans l’article « Créer un thème enfant pour Divi (WordPress)« .
Créer un modèle (template) pour les pages de catégorie
Pour faire ça, je suis partie des idées de ces deux articles :
Créer un fichier category.php
Télécharger le fichier index.php de /wp-content/themes/Divi et le placer dans le répertoire du thème enfant (pour moi /wp-content/themes/clea-divi-child), puis le renommer category.php .
Pour vérifier qu’il fonctionne, on peut ajouter la ligne
<h2>NOUVEAU template pour les catégories</h2>
en dessous de la ligne
<div id="content-area" class="clearfix">
Lorsqu’on affiche une page de catégorie, on voit effectivement ce titre. Je suis donc certaine que mon fichier category.php est utilisé lors de l’affichage d’une page de catégorie.
Ajouter le titre et la description de la catégorie
J’ai ajouté les éléments des lignes 10 à 19, au début du fichier category.php :
<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php
if ( have_posts() ) : ?>
<!-- Display category title and description -->
<header class="archive-header">
<h1 class="archive-title"><?php single_cat_title( '', true ); ?></h1>
<!-- Display optional category description -->
<?php if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</header>
<?php
while ( have_posts() ) : the_post();
single_cat_title( », true ); indique qu’il faut afficher le titre de catégorie (true) et ne pas lui ajouter de texte avant ( »).
echo category_description() ; va afficher la description de la catégorie telle qu’elle a été saisie en définissant la catégorie (menu articles >> catégories).
Maintenant, lorsque j’affiche une page de catégorie, j’ai bien son titre et sa description avant la liste des articles de cette catégorie.
Changer le style de la description
Dans le fichier style.css, j’ajoute :
.archive-meta {
margin-bottom: 2%;
font-style: italic;
}
Et maintenant la description est correctement séparée de la liste des articles, et le texte de la description est en italique :
Insérer automatiquement le titre et la description de la catégorie dans une page catégorie avec Divi pour WordPress
Rendre visible les liens vers les catégories
Divi prévoit que toutes les méta descriptions des articles restent dans la couleur choisie pour le texte (ici un noir). Mais je veux que les liens vers les catégories soient plus visibles, comme dans la copie d’écran ci-dessus, où la catégorie « Vivre ses rêves » est en orange et pas en noir.
Dans la feuille de style, j’ajoute un style pour les liens vers des catégories (a[rel= »category tag »] ) :
#left-area .post-meta a[rel="category tag"] {
color: #ed693b;
}
Et maintenant ?
Mon thème enfant fonctionne et modifie le thème parent Divi comme je le souhaitais.
Dans un autre article de cette série, j’explique comment créer des modèles de pages de catégories avec le générateur DIVI, en ayant un modèle générique et des modèles spécifiques à certaines catégories.
par Anne-Laure DELPECH | 23 Sep 2017 | Archives
J’ai besoin de modifier des fichiers (php et css) du thème Divi. Je crée donc un thème enfant qui me permettra de faire ces modifications sans toucher au thème Divi et en maintenant sa capacité à se mettre à jour. Dans cette article de la série Utiliser le thème DIVI d’Elegant Themes, j’explique comment s’organiser et créer ce thème enfant.
La situation initiale
Je suis sur un site de test, avec le thème Divi que j’ai déjà largement réglé. Bon nombres d’éléments de la personnalisation et des options du thème ont été modifiés. J’ai aussi réglé des barres latérales avec des widgets.
Il va donc falloir que je conserve tous ces ajustements.
Créer un thème enfant
Normalement, pour créer un thème enfant, il suffit de créer un répertoire dans wp-config/themes/ et d’y placer un fichier style.css contenant au moins un nom (theme name) et indiquant que c’est un thème enfant de Divi (Template: Divi) :
/*---------------------------------------------------------------------------------
Theme Name: LE NOM DU THEME
Theme URI:
Description: A child theme for Divi
Author: Anne-Laure
Author URI: https://knowledge.parcours-performance.com/
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* On peut mettre du CSS additionnel à partir d'ici */
Mais je ne connais pas encore bien Divi, et j’ai vu qu’il existait un site « constructeur de thème enfant pour Divi ». Alors j’ai essayé.
Je suis donc allée sur la page du « Divi child theme builder » du site divi.space.
J’ai rempli les lignes du formulaire puis téléchargé le fichier zip.
En regardant le contenu des fichiers, j’ai constaté que login-editor.php contient des éléments qui modifient la personnalisation de la page de login du site. J’ai décidé de laisser ce fichier, et l’instruction qui le requiert dans functions.php. Mais on peut certainement les supprimer.
Ensuite, j’ai installé le fichier zip sur le site mais je ne l’ai pas activé tout de suite.
Sauvegarder les réglages du thème parent
Avant d’activer le thème enfant, sauvegarder les fichiers de réglage de divi, comme indiqué dans l’article Importer et exporter des paramètres et modèles du thème Divi pour WordPress, (uniquement ce qui concerne la personnalisation et les options du thème).
Pour les widgets placés dans des barres latérales (les « sidebars » qui peuvent aussi être en dessous ou au dessus !), je ne sais pas comment les récupérer automatiquement. Il faut donc faire des copies d’écran et de contenus…
MAJ du 28/09/2017 pour exporter les réglages de widgets :
pour les widget, utiliser l’extension Widget Settings Importer/Exporter. Attention, toutes les extensions utilisées pour générer des éléments des widgets doivent avoir été activées au préalable et réglées si nécessaire.
Ensuite dans le tableau de bord WordPress, menu outils, on a Widget Settings Import et export.
On peut choisir ce que l’on exporte. On obtient un fichier widget_data.json que l’on sauvegarde. Ensuite on pourra importer ce fichier. Ca marche parfaitement pour moi.
Activer le thème enfant puis le régler
J’active le thème enfant puis j’mporte la personnalisation et les options du thème Divi que j’ai sauvegardé.
Je recrée les barres latérales à la main ou par importation avec l’extension Widget Settings Importer/Exporter.
Et ça y est, on a un thème enfant fonctionnel !
Et maintenant ?
Dans le prochain article de cette série Utiliser le thème DIVI d’Elegant Themes, je modifie Divi grâce à mon thème enfant : je crée un nouveau modèle (template) pour les pages de catégories et j’ajoute un style spécifique.
par Anne-Laure DELPECH | 5 Sep 2017 | Archives
Je veux me faire un jardin en permaculture, surélevé. J’ai décidé de faire un prototype pour voir ce qui est le mieux. Ce prototype de jardin potager surélevé est réalisé avec un chevron traité (classe 3) et des planches de coffrage en pin, non traitées. Un film est placé à l’intérieur pour éviter que la terre ne soit au contact direct du bois et aussi pour éviter qu’elle ne tombe entre les planches horizontales.
Les composants et le matériel
Pour réaliser cette jardinière de 180 x 120 cm, sur une hauteur de 50 cm, j’ai utilisé :
- 1 chevron de section 63×75 mm, longueur 3 m, traité classe 2 (4.95 € chez Brico Dépôt)
- 6 planches de coffrage en épicéa, 27 x 150 de section, longueur 3 m, non traitées (3.80 € pièce chez Brico Dépôt)
- 48 vis bichromatées 4×45
- 1 fer à béton de section 10 mm, débité en morceaux de 60 cm environ
- 4 tasseaux réutilisables pour servir de cale entre les planches de côté.
Le matériel était :
- une perceuse avec foret de 5 à bois, et un outil pour fraiser la position de la tête de vis ;
- une scie égoïne ;
- une visseuse ou un tournevis ;
- une agrafeuse électrique (ou un marteau)
Construction des éléments
J’ai choisi de construire la jardinière en morceaux faciles à déplacer jusqu’au potager. L’assemblage final a été réalisé en place, au potager.
Réalisation de la première section longue
J’ai d’abord fixé 3 planches de coffrage, non découpées, au chevron non découpé. L’intervalle entre les planches est défini par deux tasseaux.
Je découpe ensuite le chevron.
Je mesure pour tracer à trait perpendiculaire à 120 mm de l’extrémité des planches de coffrage.
Je pré-perce les trous pour fixer les planches de coffrage au deuxième chevron.
Je coupe les planches de coffrage. J’ai un côté long de prêt (il me reste à recouper le chevron) et 3 planches de coffrage de 120 cm de long.
Je fais le deuxième côté long de la même manière.
Je préperce les 6 planches de 120 cm.
Après avoir amené les deux côtés (sur lesquels j’ai fixé le film avec une agrafeuse électrique) et les planches, j’assemble les planches de 120 cm à ces deux côtés.
Et voilà le résultat !
On distingue ici l’un des deux fers à béton que j’ai placé à un angle pour ancrer la jardinière.
par Anne-Laure DELPECH | 31 Août 2017 | Archives
Je souhaite créer une lampe qui permette d’avoir un éclairage tamisé ou au contraire des éclairages directs focalisés pour lire. Afin d’apprendre comment faire, j’ai d’abord créé un prototype, hideux mais fonctionnel. Voici comment j’ai fait.
Mes objectifs et spécifications
Il s’agit de créer une lampe qui fonctionne à partir de deux fils électriques qui sortent du mur, et qui possède trois modes, non exclusifs :
- éclairage tamisé, non éblouissant, permettant de bien voir dans toute la pièce (16 m²), mais pas de lire un livre ;
- éclairage gauche, permettant de lire un livre en dessous, mais sans éclairer (trop) hors de la position du livre ;
- éclairage droit, identique au gauche.
Je veux également apprendre comment utiliser un ruban led.
Ma liste de courses
J’avais déjà une planche de bois, une petite caisse en polystyrène et un bout de plexiglass. Je n’ai acheté que les composants électriques :
- boîte pas chère de 5 interrupteurs encastrables (ici chez Leroy Merlin, à 3.90 €)
- Ruban led 1m, 120 lumen, 2W, couleur chaude, à brancher (ici chez Leroy Merlin, à 9.90 €)
- Transformateur 36W max (ici chez Leroy Merlin, pour 10.90 €)
- 2 spots à led, orientables, sans lampe (ici chez Leroy Merlin, pour 4.80 € l’unité), avec culot de type GU10
- 2 ampoules led 4.5W, 345 lumen, angle 36°, couleur blanc chaud -2700 K, culot GU10 (ici chez Leroy Merlin, pour 4.99 € l’unité) – Noter que c’est trop, en fait c’est mieux soit avec des ampoules qui acceptent un interrupteur variateur, soit avec des ampoules comme celles que j’ai acheté, mais en 3W et 230 lumen (ici chez Leroy Merlin, pour 3.99 € l’unité).
Le montage
Le montage électrique
Je n’ai pas utilisé la prise transformateur fournie avec le ruban LED. Je l’ai sectionnée. De même l’interrupteur fourni avec le transformateur ne m’intéressait pas. J’ai connecté le ruban led au fil avec le connecteur pour le transformateur en faisant deux soudures. Pour le reste, les toutes les arrivées 220 V se raccordent entre elles via des dominos.
J’ai oublié de prendre une photo du contenu de la boîte polystyrène avant de la fixer… Je corrigerai l’erreur lorsque je démonterai le prototype pour fabriquer la version définitive.
Et voici une photo du cablage général, avec le contenu de la boîte polystyrène :
Le montage des spots et interrupteurs
J’ai volontairement placé les deux spots à des hauteurs différentes car je voulais voir ce que ça faisait comme différence pour lire en dessous. Les trous en trop ne servent à rien…
Dans cette vue de côté, on voit l’ampoule au mur qui ne sert plus maintenant que le prototype est en place pour tests. La version finale se branchera directement sur les fils qui alimentent l’ampoule, pas à une prise de courant comme actuellement. Dans cette vue, on distingue la caisse polystyrène qui abrite le ruban led.
Fixation temporaire du prototype
Cette fixation rend assez simple le réglage de hauteur. Il me suffit en effet de décaler les deux équerres qui prennent appui sur la tête de lit.
Conclusion de cet essai
L’éclairage ambiant me paraît très satisfaisant. Il n’éblouit pas et éclaire suffisamment.
Le spot de droite paraît à la bonne hauteur (axe à 92 cm du matelas) mais pourrait sans doute donner un éclairage plus localisé s’il était un peu plus bas.
Et maintenant
Il faut que j’essaie une autre ampoule pour les spots :
- ampoule acceptant les variateurs, ce qui me coûtera plus cher
- ampoule 3W, 230 Lumen, 2700 K (blanc chaud) et angle 36° (ici chez Leroy Merlin, pour 3.99 € l’unité)
Il faut que je voies si je peux réutiliser les interrupteurs du va-et-vient pour allumer seulement la lumière tamisée et malgré tout amener une source permanente de 220 V pour alimenter les deux spots qui auraient chacun leur interrupteur.
par Anne-Laure DELPECH | 3 Août 2017 | Archives
Dans cet article de la série « Utiliser le thème DIVI d’Elegant Themes« , je me demande si c’est une bonne idée d’installer le thème Divi ! Je me pose en effet les questions suivantes :
- Est-ce que ce thème est utilisable dans de nombreux contextes WordPress ?
- Est-ce qu’il est simple de transférer les réglages d’un site vers l’autre puis de faire quelques ajustements ?
- Que se passe-t-il si je décide de changer complètement de thème ? Que deviennent les contenus que j’ai placé grâce au Divi Builder ?
- Est-ce qu’il est facile de créer un thème enfant, ou une extension, pour ajouter quelques fonctions ou styles ?
- Est-ce que ce thème permet d’accélérer un site réalisé avec le thème que j’utilise habituellement ?
Je vais répondre à 4 de ces 5 questions. A ce stade, je n’ai pas encore ajouté de fonctions et je n’ai pas encore eu besoin d’une extension ou d’un thème enfant.
Utilisation du thème Divi dans des contextes très différents ?
Est-ce que ce thème est utilisable dans de nombreux contextes WordPress ?
La réponse est oui, sans hésiter ! Je l’affirme après seulement quelques heures d’exploration des possibilités du thème. On peut tout faire avec.
- Le thème Divi est compatible Woocommerce ;
- Le thème Divi permet de réaliser à peu près tous les styles de site sans codage ;
- Le thème Divi fonctionne sans difficultés avec les extensions que j’utilise habituellement ;
- Le thème Divi est bien documenté, avec de très nombreux tutoriels, en français comme en anglais ;
Et quand je vois le nombre de développeurs WordPress qui l’utilisent, je me dis qu’ils ne le feraient pas si ils devaient changer de thème, ou passer du temps à développer du spécifique dès que la demande client est un peu différente.
Transférer des réglages de Divi d’un site à un autre ?
Est-ce qu’il est simple de transférer les réglages d’un site vers l’autre puis de faire quelques ajustements ?
La réponse à cette question est importante puisqu’il s’agit de ne pas réinventer l’eau chaude pour chaque nouveau site, et de ne pas perdre de temps. Et la réponse est encore Oui ! J’ai fait des tests sur un site puis transféré la personnalisation du thème, les options du thème et même des modèles vers un autre site. C’est remarquablement bien fait (j’en parle dans le prochain article de cette série).
Est-on définitivement lié à Divi ?
Que se passe-t-il si je décide de changer complètement de thème ? Que deviennent les contenus que j’ai placé grâce au Divi Builder ?
Dans l’article If you use the Divi theme with WordPress, it better be forever, Chris Lema dit avec justesse que si on utilise un thème Divi avec WordPress, on a intérêt à ce que ce soit pour toujours ! Il a raison évidemment. Toute page, ou article, créé avec le thème Divi ne sera pas restituée correctement si on change de thème. Mais c’est vrai avec n’importe quel thème. Et maintenant que le Divi Builder est une extension séparée du thème, je pourrai sans doute récupérer l’essentiel de mon travail.
Vitesse d’un site Divi ?
Est-ce que ce thème permet d’accélérer un site réalisé avec le thème que j’utilise habituellement ?
J’ai testé un site WordPress sur lequel j’ai installé Divi, et utilisé le Divi Builder uniquement pour la page d’accueil. Les tests avec PageSpeed Insights et Test My Site with Google indiquent qu’il n’y a ni dégradation ni amélioration notable.
Et après avoir subitement pensé à redimensionner toutes les miniatures avec l’extension Regenerate Thumbnails, il n’y a aucun changement.
Et maintenant ?
Il faudra que je voie plus tard si il est facile de créer un thème enfant, ou une extension, pour ajouter quelques fonctions ou styles. En attendant, mon prochain article de cette série, Utiliser le thème DIVI d’Elegant Themes,portera sur le transfert de réglages et de modèles Divi d’un site à l’autre.
Commentaires récents