Le thème Divi permet d’insérer des liens vers les réseaux sociaux dans le pied de page et une barre tout en haut. Par défaut les réseaux paramétrables sont facebook, Twitter, Google + et RSS. Pour le site d’un consultant je souhaitais ajouter un lien, avec icone, vers une page LinkedIn. Et bien c’est possible !
Pour réaliser cette action, il faudra que vous ayez un accès FTP aux fichiers de votre site WordPress et avoir un éditeur pour modifier légèrement le code PHP d’un fichier du thème.
On peut utiliser le module réseaux sociaux » du divi builder pour les contenus construits à l’intérieur d’une page ou d’un article. Mais pour générer automatiquement le lien en haut du site ou dans le pied de page, il faut modifier un fichier du thème Divi selon le processus ci-dessous :
Faire une copie du fichier social_icons.php (répertoire du thème : /wp-content/themes/Divi/includes).
Editer le fichier d’origine en y ajoutant des lignes à la fin, comme indiqué ci-dessous.
Le thème Divi est très souvent mis à jour. Un article, en anglais, de Elegant Theme, l’agence qui conçoit et commercialise le thème vient d’annoncer une avancée importante. L’article « Divi’s Website-Wide Design Editor » ( que l’on pourrait traduire par « Un éditeur Divi de design pour l’ensemble d’un site ») annonce bien la couleur :
Gérez les styles par défaut de votre site plutôt qu’adapter les modules à chaque création de nouvelles pages !
L’idée générale c’est que maintenant, on peut simplement modifier les caractéristiques par défaut de tous les modules identiques d’un même site. Il suffit de cliquer sur le petit onglet » Edit Global Texte Defaults » sur le côté en haut à droite de la fenêtre de réglage du module.
Si vous comprenez un peu l’anglais, je vous invite à aller lire l’article complet, qui contient une vidéo qui se comprend plutôt facilement.
Contact form 7 est une excellente extension pour les formulaires de contact. Et Divi est un excellent thème, auquel j’ai accès gratuitement via mon hébergerment web Infomaniak. Mais jusqu’à présent, je ne pouvais pas avoir un formulaire de contact qui sont fonctionnel ET beau.
Cet article a été mis à jour le 13/09/2019 suite à un gros dysfonctionnement de l’extension Contact Form Styler. On a maintenant deux solutions, l’une avec l’extension Contact Form Styler (qui a j’espère été réparée), et l’autre qui ne requière pas d’extension mais nécessite un peu de CSS.
Créer un formulaire de contact avec Contact Form 7
installer et activer contact form 7 de Takayuki Miyoshi puis créer un formulaire contact form 7 classique et noter le shortcode correspondant : [
Erreur : Formulaire de contact non trouvé !
].
En l’absence de feuille de style (css) dédiée, c’est assez moche… :
Option 1 sans ajout d’extension
L’amélioration passe par du CSS ajouté et par une toute petite modification du formulaire de contact
modification du formulaire de contact
Le formulaire de contact est exactement comme d’habitude sauf qu’une classe est ajoutée pour le bouton de soumission de la demande :
<p>[text* your-name placeholder "Vos prénom NOM (requis)"] </p>
<p>[email* your-email placeholder "Votre adresse mail (requis)"] </p>
<p>[tel tel-405 placeholder "Votre n° de téléphone (recommandé)"]</p>
<p>[textarea your-message 50x placeholder "Votre message"] </p>
<p>!! ATTENTION : si l'autorisation ci-dessous n'est pas cochée, votre message ne pourra pas être envoyé !!
[acceptance acceptance-443 default: on] J’autorise l’utilisation de mes données personnelles pour m'envoyer une réponse par mail. [/acceptance]</p>
[submit class:submit class:et_pb_button "Envoyer"]
<p>Pour plus d'informations, vous pouvez consulter la <a href="https://cohesiondurable.com/page-de-politique-de-confidentialite/" target="_blank">politique de confidentialité de ce site</a></p>
"class:submit class:et_pb_button" va indiquer que le bouton sera des deux classes submit et et_pb_button. Ainsi il va adopter le style défini pour les boutons dans la personnalisation du thème Divi.
Ajout de CSS
Dans la personnalisation du css (options du thème Divi, tout en bas de l’onglet général), on ajoute le code qui va permettre d’avoir un formulaire un peu plus attirant :
Notre formulaire est maintenant tout à fait présentable :
Un formulaire Contact Form 7 avec un peu de CSS et une classe pour le bouton Envoyer
Option 2 avec une extension (solution non recommandée)
J’ai trouvé cette solution, grâce à cet article, en anglais : » How to Make Contact Form 7 Look Like Divi « . Elle m’a bien plu mais j’ai rencontré des problèmes lors d’une mise à jour de l’extension Contact Form Styler. Je laisse les instructions pour l’utiliser mais je ne recommande pas cette solution.
Avec le constructeur Divi ou le Divi Builder, ajouter un nouveau module, et choisir « contact form 7 styler »
Choisir le formulaire à utiliser dans select form puis définir le style souhaité avec l’onglet style. je n’ai pas réglé grand-chose, simplement modifié les couleurs du « submit button », et la marge interne dans la partie dimensionnement. Et voici ce que cela donne :
c’est tout de même moins joli, non…
Et maintenant ?
Nous pouvons maintenant concilier la fonctionnalité de contact form 7 et l’esthétique de Divi. C’est chouette, non ?
Dans cet article, je note rapidement ce que j’ai choisi comme nouveau moyen de faire du « syntax highlighting » (mise en évidence de la syntaxe) du code que je partage dans ce site ou d’autres.
L’extension utilisée jusqu’à présent
J’utilisais Crayon Syntax Highlighter, mais malheureusement l’extension ne fonctionnait plus depuis le passage de WordPress en version 5.0, avec l’éditeur Gutenberg et les blocs.
Sur le site WordPress.org de l’extension, on voit que l’extension, malgré 50 000 installations actives, n’est plus mise à jour depuis 3 ans. Il faut donc que je cesse de l’utiliser.
Comment remplacer Crayon Syntax Highlighter ?
Ce qui a déclenché cette recherche, et cet article, c’est la lecture d’un très bon article du blog d’Elegant Themes, le créateur du thème Divi. L’article s’intitule « How to Share and Style Code Snippets in Divi (3 Methods)« . Il contient des informations concrètes sur :
créer des boîtes Divi pour code, avec ajout manuel de code ou utilisation d’une extension
encodage de code HTML pour l’afficher dans une page wordpress
utilisation de Gist
utilisation d’extensions dédiées à la mise en évidence de code
Pour ma part, j’ai décidé de remplacer Crayon Syntax Highlighter par l’extension proposée dans l’article d’Elegant Themes. Et pour écrire cet article j’ai utilisé l’encodage de code HTML qui est aussi présenté dans l’article des créateurs du thème Divi.
encodage de code HTML
WordPress transforme le code HTML saisi directement dans un bloc paragraphe classique, et le sépare même en autant de blocs. Ci-dessous j’ai juste mis les trois premières lignes :
<!– Code collé dans un bloc paragraphe –>
<!DOCTYPE
html>
<html>
Si je place le code dans un bloc « code » classique, toutes les lignes sont dans un même bloc.
<!-- Code collé dans un bloc paragraphe -->
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Et maintenant j’encode l’HTML avec Code Beautify, puis je le place dans un bloc « paragraphe » classique, le code se présente correctement :
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Mais tout ceci est compliqué. Et on n’a pas de mise en évidence de la syntaxe, et c’est difficile à analyser puis copier-coller pour l’internaute.
Utilisation de l’extension Code Prettify
Utilisation de l’extension Code Prettify. C’est une très bonne extension, très simple. Par exemple, elle fait du « syntax highlighting » automatiquement de ce code Processing (java) :
L’inconvénient est qu’il faut que j’aille modifier le style des blocs de code pour par exemple faire des retours à la ligne (word-wrap je crois).
L’extension SyntaxHighlighter Evolved
SyntaxHighlighter Evolved est également citée dans l’article de Elegant Themes, et c’est finalement le choix que j’ai fait. Je n’ai fait aucun réglage, j’ai simplement installé l’extension.
On peut utiliser des shortcodes mais je préfère choisir le bon bloc d’édition.
Maintenant dans l’éditeur, je peux trouver un bloc de mise en page, intitulé « SyntaxHighlighter Code » :
Bloc SyntaxHighlighter Code de l’extension SyntaxHighlighter Evolved
Si je place le code HTML vu précédemment dans deux blocs successifs, le premier sans spécifier que le langage est HTML, le deuxième en le spécifiant, voici ce que j’obtiens :
SyntaxHighlighter Evolved comme syntax highlighter
L’extension ne reconnait pas automatiquement le langage mais la mise en page est vraiment réussie.
Et l’ancien code ???
Est-ce qu’il faut que j’aille corriger tout le code partagé ces dernières années ?
Dans ce site, de nombreux articles contiennent du code partagé. Il faut continuer à le partager mais pas question d’aller corriger chaque article ! Par exemple, l’article https://knowledge.parcours-performance.com/processing-video-ou-gif-anime/ contient du code défini avec l’ancienne extension Crayon Syntax Highlighter. Le code se présentait ainsi :
Crayon Syntax Highlighter sur du code java
Avec la nouvelle extension, il est toujours lisible, et copiable, mais plus rien ne met en évidence la syntaxe. Il faudra donc que je fasse des corrections si je met à jour des articles.
Dès maintenant je supprime Crayon Syntax Highlighter.
Les requêtes SQL requièrent souvent de limiter le nombre de lignes en limitant les dates retournées. C’est pourtant assez difficile car les méthodes diffèrent selon le SQL.
Cet article sera mis à jour au fur et à mesure de mes découvertes.
Avec le SQL de Firebase : datediff
La requête suivante fonctionne avec du SQL Firebase.
WHERE datediff(year, MVT_DATE, cast('now' as date))=0
Ici, on ne retourne que les lignes dont la date est de la même année qu’aujourd’hui. Cette instruction fonctionne sur une base Firebird.
Requête de Gab dans FlameRobin qui montre que datediff fonctionne parfaitement sur une base firebird
En principe la commande suivante fonctionne dans MySQL Workbench
AND T_Code_Temps BETWEEN '20191001' AND '20191231'
SELECT * FROM candidats WHERE
id NOT IN (SELECT idCandidat FROM calendrier WHERE dateNonDispo BETWEEN '2013-10-01' AND '2013-10-18')
AND candidats.statut = 1
Supposons que nous ayons un fichier excel, avec des macros, et un onglet (une feuille), qui contient des données que nous voudrions placer dans un autre fichier excel, facile à utiliser et imprimer.
Dans ce script, nous réalisons les actions suivantes :
Définir une variable texte à partir d’éléments présents dans le fichier ou calculés.
partage des variable entre fichier
créer une copie sans macros d’une feuille qui en contient
enregistrer cette nouvelle feuille dans un autre fichier avec un nom correspondant à la variable texte ci-dessus ;
fermer le fichier
Définir une variable texte à partir d’éléments divers
Voici l’ensemble du script VBA
Public extension As String
Public chemin As String, nomfichier As String
Sub Créer_fichier_excel()
Dim Sh As Worksheet
'les variables extension, chemin et nomfichier sont déclarées Public pour passer d'un classeur à l'autre
'il faut d'abord créer une copie de la feuille SANS MACROS
' source https://www.developpez.net/forums/d1044048/logiciels/microsoft-office/excel/macros-vba-excel/ajouter-feuille-n-existe/
On Error Resume Next
Set Sh = ThisWorkbook.Sheets("modeleSANS")
'On vérifie l'existance de la feuille "modeleSANS"
If Not Sh Is Nothing Then
' la feuille existe, on la vide
Sh.Select
Sh.UsedRange.ClearContents
Cells.Select
Selection.UnMerge
Else
' La feuille modeleSANS n'existe pas, on la crée
Set Sh = ThisWorkbook.Sheets.Add(After:=ThisWorkbook.Worksheets(ThisWorkbook.Worksheets.Count))
Sh.Name = "modeleSANS"
End If
' Maintenant on copie le contenu et le format de modele mais PAS les macros
Sheets("modele").Select
Cells.Select
Selection.Copy
Sheets("modeleSANS").Select
Cells.Select
Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
:=False, Transpose:=False
Selection.PasteSpecial Paste:=xlPasteAllUsingSourceTheme, Operation:=xlNone _
, SkipBlanks:=False, Transpose:=False
Application.CutCopyMode = False
' tant qu'on est dans le bon fichier on va chercher le nom du futur fichier
Sheets("TabDyn").Select
Range("H38:K39").Select
Selection.Copy
Range("H40").Select
Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
:=False, Transpose:=False
Range("H40").Select
Application.CutCopyMode = False
nomfichier = "Inventaire-" & Sheets("TabDyn").Range("H40").Value & "-"
nomfichier = nomfichier & Format(Date, "yy-mm-dd") & extension
' nomfichier = nomfichier & Year(Now) & Month(Now) & Day(Now) & extension
' et maintenant on peut enfin copier la feuille dans le fichier !
Sheets("modeleSANS").Select
ThisWorkbook.ActiveSheet.Copy
extension = ".xlsx"
chemin = ThisWorkbook.Path
' Actions dans le fichier nouvellement crée
Par exemple définir la zone d’impression
With ActiveWorkbook
.SaveAs Filename:=chemin & "\" & nomfichier
.Close
End With
End Sub
Variables partagées entre fichiers
Les variables publiques sont déclarées à l’extérieur de la macro
Les variables ci-dessus extension, chemin et nomfichier doivent être partagées entre le fichier source (qui contient ce qui va définir les contenus) et le fichier cible qui va prendre ce nom. Si ces variables ne sont pas déclarées à l’extérieur de la macro, en mode Public, le fichier créé n’a pas de nom et une fenêtre nous demande le nom à attribuer.
créer une variable composée d’éléments du fichier
Les deux lignes ci-dessous créent une variable nomfichier qui est une chaine de caractères sous la forme Inventaire-XXX-AA-MM-JJZZZ, avec
XXX qui correspond à ce qui est dans la cellule H40 de l’onglet TabDyn
créer une copie sans macros d’une feuille qui en contient
Dans le script final, on regarde si l’onglet modeleSANS existe. S’il n’existe pas, on le crée.
Ensuite, on copie le contenu de cellules de l’onglet modele et on le colle sous différentes formes dans l’onglet modeleSANS : valeurs uniquement (Paste:=xlPasteValues), puis formats (Paste:=xlPasteAllUsingSourceTheme). On a ainsi un onglet qui contient tout sauf les macros.
Copier un onglet dans un autre fichier
les deux lignes ci-dessous enregistrent la feuille modeleSANS dans un autre fichier qui n’a pas de nom à ce stade.
Nous avons un tableau pour définir la valeur d’une variable v1 pour l’ensemble des produits chaque jour de l’année depuis le début de l’année. Le tableau fait 89 colonnes et plusieurs centaines de lignes.
Article_Code
01/01/2019
02/01/2019
03/01/2019
04/01/2019
05/01/2019
06/01/2019
07/01/2019
08/01/2019
4INTTHO001
0
0
0
0
0
0
0
0
4CBPHYP001
2,18
2,18
2,18
2,18
2,18
2,18
2,18
2,18
4CBPHYP002
2,18
2,18
2,18
2,18
2,18
2,18
2,18
2,18
4CBPHYP004
2,38
2,38
2,38
2,38
2,38
2,38
2,38
2,38
4CBPHYP010
0
0
0
0
0
0
0
0
4BBHYP001
2,18
2,18
2,18
2,18
2,18
2,18
2,18
2,18
4CBPHYP003
2,18
2,18
2,18
2,18
2,18
2,18
2,18
2,18
4CBPHYP006
2,05
2,05
2,05
2,05
2,05
2,05
2,05
2,05
4CBPHYP005
2,1
2,1
2,1
2,1
2,1
2,1
2,1
2,1
4KERHYP001
4,25
4,25
4,25
4,25
4,25
4,25
4,25
4,25
Le problème, c’est que pour entrer ces données dans la base de données, il nous faudra quelque chose comme :
Article_Code
T_Code_Temps
variable_txttxt
4MARSOU002
20190101
2,18
4MARSOU002
20190102
2,18
4MARSOU002
20190103
2,18
4MARSOU002
20190104
2,18
4MARSOU002
20190105
1,74
4MARSOU002
20190106
1,74
4MARSOU002
20190107
1,74
4MARSOU002
20190108
1,89
La solution c’est de « décroiser » le tableau.
Ca se fait facilement en suivant ce tutoriel pour Excel 2016. Et pour Excel 2010 ou 2013, on pourra utiliser l’utilitaire Power Pivot fourni gratuitement par Microsoft et suivre cet autre tutoriel.
J’ai parfois envie de « photographier » une page web entière, pour la visualiser dans sa globalité. Mais ce n’est pas facile du tout à faire lorsque la page est très longue. Heureusement Google Chrome dispose d’outils pour le faire (source : un article en anglais ).
Imaginons que je veuille faire une capture de l’ensemble de la page d’accueil du site Parcours-Performance. Je commence par aller sur ce site avec le navigateur Chrome.
Dans le site, j’accède aux outils de développement de chrome par un Clic droit et « inspecter » ou par la combinaison de touches CTRL+MAJ+I .
Taper CTRL+ MAJ +P, commencer à écrire screenshot dans la fenêtre qui s’ouvre, après le >. Puis choisir screenshot Capture full size screenshot
J’utilise le thème DIVI depuis que j’ai choisi un hébergement chez Infomaniak car cet hébergeur donne un accès gratuit à ce thème premium et quelques extensions premium également.
J’ai déjà écrit plusieurs articles sur Divi (voir les articles de la série Utiliser le thème DIVI d’Elegant Themes. Dans celui ci, je souhaite faire un récapitulatif rapide de ce qu’il est possible de faire avec les « layouts », ou mises en pages prédéfinies.
L’utilisation de ces mises en page prédéfinies est décrite dans les articles, en anglais, suivants :
J’ai mis une copie d’écran d’une des pages qui peuvent être ainsi créés en bas de cet article. Pour voir d’autres exemples, on peut aller sur cette page, qui contient le catalogue de tous les « premade layouts » pour DIVI.
Les éléments principaux de la suite Microsoft Office, Word,
Excel et PowerPoint disposent d’un système de modèles. Ces modèle sont
particulièrement utiles pour gagner du temps et pour s’assurer de la cohérence
des styles d’un document à l’autre.
Ce tutoriel explique comment partager les modèles entre ordinateurs par l’intermédiaire de dossiers partagés (réseau interne ou cloud, par exemple DropBox). Il se fonde principalement sur les informations glanées dans cet article en anglais.
Où sont rangés mes modèles ?
Les fichiers de modèles Word (au moins 2007 et 2010) ont des extension dotx ou dotm. Les extensions dotx correspondent aux modèles de base de Word tandis que les dotm prennent en charge les macros.
En principe tous les modèles sont rangés dans le même
répertoire.
Pour Word 2010 cliquer sur le menu FICHIERS puis sur Options
Dans la fenêtre qui s’ouvre, cliquer sur l’onglet options avancées et descendre jusqu’à général (copie d’écran ci-dessous)
Où sont rangés mes modèles ?
Cliquer sur le bouton « Emplacement des fichiers ». Ici je vois que mes modèles sont stockés dans le répertoire C:\Users\Anne-Laure\AppData\Roaming\Microsoft\Templates
Créer un répertoire partagé des modèles à utiliser
Dans C:\Users\Anne-Laure\AppData\Roaming\Microsoft\Templates je trouve des modèles que j’aurais du supprimer depuis longtemps, des modèles pour word (dotx) des modèles pour excel (xltx) des modèles pour powerpoint (potx). Quelques modèles commencent par ~$. Ce sont des modèles en cours d’utilisation. Il va falloir que je ferme word pour qu’ils disparaissent.
Et mes palettes de couleur sont stockées dans C:\Users\Anne-Laure\AppData\Roaming\Microsoft\Templates\Document Themes\Theme Colors
Je crée un répertoire dans mon Dropbox (on peut aussi utiliser un répertoire partagé d’un réseau local) et je le nomme modeles.
J’y place tous les modèles et palettes de couleur que je souhaite utiliser et partager
Dire à Word, excel et Powerpoint d’utiliser ces modèles
Dans Word, faire comme pour trouver où sont rangés les modèles. Mais ce coup ci, je sélectionne la ligne « modèle groupe de travail »
et je modifie la localisation des modèles pour qu’elle corresponde au répertoire partagé que je viens de créer.
Choix d’un modèle
Maintenant si je clique sur nouveau dans word, il me propose
les quelques modèles que j’ai mis dans le répertoire partagé. Les palettes de
couleur sont visibles dans un autre onglet (flèche orange)
Et dans excel et powerpoint, sans aucun réglage les modèles sont aussi pris dans le répertoire défini via Word.
Commentaires récents