Date de la dernière modification: 31 octobre 2019
Deux de mes sites Web: Mon livre et mon site.
Lors de l’écriture de mes articles, ces dernières années 2018-2019, sur mes deux sites WordPress, je n’étais de loin pas satisfait avec la présentation du thème Twenty Sixteen, principalement avec la largeur du texte et la difficulté de créer des blocs de code similaires pour chaque type (C, Java, Python, console, etc). J’ai donc passé au thèmes Customify et à une procédure copier/coller directe de code HTML dans un bloc HTML.
Donc voici la procédure que j’ai adoptée pour faire ce travail.
– travailler sur mon PC et non mon site sur OVH
– ajouter le thème Customify
– créer un thème enfant Customify-child
– il faudra retirer les accès Facebook et autres dans l’en-tête
J’ai donc créé un répertoire D:\wamp64\www\wordpress\wp-content\themes\customify-child avec deux fichiers:
functions.php (remplacer le XXphp par <?php):
XXphp
add_action( 'wp_enqueue_scripts', 'wpsites_load_parent_styles');
function wpsites_load_parent_styles() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri().'/style.css' );
}
// JBB Ajout d'un shortcode pour insérer une date de dernière modification dans les articles - thierrycouteau.com
function datedermaj_handler($atts, $content=null){
$after = '';
return the_modified_date( 'j F Y', 'Date de la dernière modification: ' , $after, 0 );
}
add_shortcode( 'datemodif', 'datedermaj_handler' );
style.css
Ensuite il suffit de l’activer, avec Apparence / Thèmes, avant d’y apporter des adaptations.
/*
Theme Name: customify-child
Author: Your name here
Template: customify
Version: 1.0
*/
/*import the base style */
@import url('../customify/style.css');
Pour créer un bloc contenant du code, il faut insérer un bloc HTML et copier, par exemple, ce code de style (ce bloc-ci a été créé avec Classique et en adaptant la police avec Terminal et 12 points):
<pre class="wp-block-preformatted">
<pre style="padding: 8.5px;
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px;
border-radius: 4px; margin-top: 0px; margin-bottom: 9px;
line-height: 18px; word-break: break-all; word-wrap: break-word;
white-space: pre-wrap;
background-color: #99ffff;
border: 1px solid rgba(0, 0, 0, 0.15);">
<span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">
<span style="font-size: 16px; white-space: pre-wrap;">
from flask import Flask
app = Flask(name)
@app.route('/')
def salut_flaskeur():
return "Salut Flaskeur!"
if name == 'main':
app.run(host='0.0.0.0',port=5000, debug=True)
</span></span></pre>
</pre>
Le code ci-dessus devra venir d’un éditeur comme Notepad++, et non d’un browser comme Chrome. Il faudra peut-être cliquer sur résoudre et HTML.
Il faudra adapter background-color et font-size pour obtenir le look désiré. J’ai aussi parfois passé en mode HTML pour y ajouter des parties colorées en arrière plan:
Le texte est highlighted en jaune.
qui viennent de :
<span style="background-color: #FFFF00">Le texte est highlighted en jaune.</span>