Dernière mise à jour le 10 avril 2018 par LMD
Table des matières
A_Problème des images déformées
B_Personnaliser le texte du footer
C_Insérer un menu réseaux sociaux
D_Ajouter des fontes
E_Personnaliser l’arrière plan du header
F_Ajouter un logo au header
G_Tailles d’images personnalisées
H_Utiliser des Custom Post Type
A_Problème des images déformées
Il arrive que les images soient à une dimension contrainte (150×150 pour les thumbnails des images à la une) ou stretchées lorsqu’il y a des hauteurs d’images différentes dans une mosaïque.
1. Adapter les css flexbox
Dans un premier temps, il faut éviter que les images soient étirées verticalement pour s’adapter à la taille de la plus grande sur une ligne. C’est un comportement naturel de flexbox. Pour cela, ajouter dans la règle css du conteneur des articles la propriété suivante :
align-items: flex-start; (ou center ou flex-end, la valeur par défaut étant stretch)
2. Adapter l’insertion des thumnails (images à la une)
Modifier le code d’insertion des thumbnails dans la boucle wordpress, fichier « index.php » en supprimant l’attribut 'thumbnail' dans les parenthèses.
3. Supprimer les attributs ‘width’ et ‘height’ des images
Ajouter ce code au fichier « functions.php » :
[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}[/pcsh]
Voir : https://css-tricks.com/snippets/wordpress/remove-width-and-height-attributes-from-inserted-images/
4. Supprimer l’attribut ‘srcset’ des images
Ajouter également ce code au fichier « functions.php », mais il semble que cela ne suffise pas! 🙁 Si ce dernier code ne résoud pas le problème, supprimez-le.
[pcsh lang= »applescript » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
function wdo_disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'wdo_disable_srcset' );[/pcsh]
Voir : https://wordpressdeveloperonline.com/disable-responsive-images-srcset-wordpress/
Si toutes les solutions précédentes ne permettent pas de résoudre le problème, c’est sans doute qu’il y a une erreur ou un conflit de CSS. Relisez-donc attentivement votre fichier « style.css ».
B_Personnaliser le texte du footer
1. Créer l’onglet de réglage, ajouter le réglage et le contrôle
Placer le code suivant dans le fichier « functions.php ». N’oubliez pas d’ajouter un commentaire pour décrire ce que fait ce code.
[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
function theme_customize_register($wp_customize) {
// Création de la section de réglage
$wp_customize->add_section('ma_section', array(
'title' => 'Modifier le footer',
'description' => 'Modifier contenu du footer',
'priority' => 200,
));
// Ajout du réglage
$wp_customize->add_setting('texte_pied_de_page', array(
'default' => 'Saisissez votre texte'
));
// Ajout du contrôle
$wp_customize->add_control(texte_pied_de_page', array(
'label' => 'Texte du pied de page',
'section' => 'ma_section',
'type' => 'text',
));
}[/pcsh]
2. Activer le réglage
Placer à la suite du code précédent la ligne :
[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
add_action('customize_register', 'theme_customize_register');[/pcsh]
3. L’affichage dans le pied de page
Il faut enfin placer le code suivant dans le fichier footer.php, à l’emplacement de votre choix :
[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
<p>
<?php echo get_theme_mod('texte_pied_de_page', ' ® Fièrement propulsé par un bulldozer'); ?>
</p>[/pcsh]
Dans le Tableau de Bord de WP, vous allez retrouver ce réglage dans le menu Apparence > Personnaliser. Vous pouvez à présent modifier le texte du footer. N’oubliez pas d’enregistrer les modifications.
4. Dans le cas d’un thème enfant
Voir : http://wp-snippets.com/change-footer-text-in-wp-admin/
C_Insérer un menu réseaux sociaux
Nous allons insérer ce menu dans le footer, mais la procédure est la même pour un autre emplacement.
1. Créer le menu
Dans le Tableau de Bord, il faut d’abord créer le menu (Apparence > Menu). Créer un nouveau menu, nommé « réseaux », à placer dans le second emplacement prévu (Menu des réseaux, id ‘secondaire’). Il faut ensuite utiliser des Liens personnalisés, comme ci-dessous pour twitter et les ajouter au menu, sans oublier d’enregistrer le menu à la fin.
2. Placer le menu dans le code
Puis il faut insérer le menu dans la page « footer.php » avec le code suivant à placer dans la balise footer, après le texte de copyright par exemple. Il faut bien entendu adapter l’id choisi pour la nav selon vos css (ici #reseaux).
[pcsh lang= »php » tab_size= »4″ message= » » hl_lines= » » provider= »manual »]
<?php if ( has_nav_menu( 'secondaire' )) : ?>
<nav id="reseaux">
<?php wp_nav_menu(array( 'theme_location' => 'secondaire' )); ?>
</nav>
<?php endif; ?>[/pcsh]
3. Ajouter les icônes avec une extension
Enfin, le plus simple est d’utiliser une extension pour ajouter des icônes de réseaux sociaux. Il en existe deux principalement, Menu social icons qui fonctionne encore mais n’a pas été mis à jour depuis longtemps et que je ne recommande donc pas, et Menu Icons, plus récent et compatible, très complet et efficace.
Vous trouverez une documentation sur cette extension ici :
https://wpchannel.com/wordpress/plugins-wordpress/ajouter-icones-menus-wordpress/
Pour en tirer le meilleur parti, après l’avoir installé et activé est de cocher toutes les icônes, y compris images et svg, qui autorisent à utiliser des icônes personnelles dessinées par vos soins. Dans Apparence > Menus ouvrez l’onglet Menu Icons Settings et cochez ce dont vous avez besoin.
Revenez dans les liens du menu et rajoutez les icônes souhaitées en conservant le texte (label) ou non.
4. Ajouter les icônes par une fonction
Il faut alors charger FontAwsome et créer une section de personnalisation par le fichier functions.php. Explications later…
Voir : https://premium.wpmudev.org/blog/add-icons-wordpress-menus/
et https://www.gd6d.fr/ajouter-des-icones-dans-sa-barre-de-menu/
D_Ajouter des fontes
Cela se fait soit par les CSS. Pour utiliser des fontes persos, il faut les convertir en 5 formats afin qu’elles soient reconnues par tous les navigateurs : TTF, OTF, WOFF, WOOF2 et EOT. Pour ce faire, à partir du format otf par exemple, utiliser le font generator du site Fontsquirrel, mais il faut avoir une licence de la fonte pour pouvoir le faire.
Voir : https://premium.wpmudev.org/blog/custom-fonts-css/
Sinon, le mieux est d’utiliser des google fonts. Code à insérer dans le head du HTML (fichier header.php) ou dans le fichier style.css (c’est une meilleure solution).
Voir : https://wpexplorer-themes.com/total/docs/add-custom-fonts/
Il est également possible d’utiliser une extension, Easy Google Font qui amènera un dialogue de personnalisation pour accéder à toutes les google fonts. Plutôt pas mal si on a du mal à choisir ses polices.
Enfin, pour charger et utiliser la bibliothèque Font Awesome, voir ces deux liens, pour l’installer et pour l’utiliser :
Utiliser une police d’icônes FontAwesome dans votre thème WordPress
E_Personnaliser l’arrière plan du header
Voir Part 5 de ce tutoriel : http://lamartinieredesign.fr/wordpress/creer-un-theme-complet-part-5/
F_Ajouter un logo
Commencez par créer un dossier nommé images au premier niveau de votre thème. Placez-y une image. Par exemple : logo.png
Puis à l’endroit où vous voulez voir apparaître cette image, ici dans le header avant le titre du site bloginfo('name'), placez ce code :
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="logo">
Dans une balise img, le chemin doit être décrit par le chemin du dossier du thème en php : <?php echo get_template_directory_uri(); ?> directement suivi du chemin habituel en HTML, soit ici /images/logo.png
Pour le chemin du dossier du thème, il est également possible d’utiliser ce code, au cas où le précédent ne fonctionnerait pas :
<?php bloginfo('template_directory'); ?>
G_Tailles d’images personnalisées
Les images uploadées dans wordpress sont générées avec 3 tailles par défaut. Pour en utiliser d’autres, il faut les déclarer dans le fichier functions.php
Voir : https://www.oboqo.com/blog/tailles-images-personnalisees-wordpress/
et http://wordpress.bbxdesign.com/astuces/definir-dautres-dimensions-dimage
H_Utiliser des Custom Post Type
Voir cet article qui détaille la procédure pour créer des Custom Post Type pour un portfolio :
http://wordpress.bbxdesign.com/custom-post-type-custom-taxonomy
Les champs personnalisés
En anglais Custom Fields, les champs personnalisés permettent d’ajouter du contenu spécifique associé à des articles ou à des Pages. Par exemple, ce peut être un chapeau pour les articles ou bien un titre de livre ou de film, une légende, etc.
Pour cela, il faut accéder à cette fonctionnalité à partir du Tableau de bord, lorsqu’un article ou une page sont affichés. En haut à droite, un onglet indique « Options de la page ». Cliquez dessus et cochez les options supplémentaires que vous voulez activer, notamment la case « Champs personnalisés ».
Des boîtes supplémentaires apparaissent alors en bas de l’article. Il faut y saisir un nom et un contenu personnalisé. Le même nom devra être utilisé dans les autres articles pour définir un type de contenu.
Il reste à placer une fonction PHP pour afficher ces contenus personnalisés dans la boucle WordPress, sur les templates où vous voulez qu’ils apparaissent. On va le faire dans la page index.php.
À l’intérieur de la boucle, rajoutez le code suivant :
<?php echo get_post_meta($post->ID, 'legende', true); ?>
Vous noterez que le second argument à l’intérieur des parenthèses est ‘legende’, c’est-à-dire le nom que vous avez choisi lors de la saisie du contenu personnalisé, ce qui est nécessaire pour que cela fonctionne.
I_Utiliser JQuery avec WordPress
Voir : http://wordpress.bbxdesign.com/astuces/ajouter-correctement-ses-scripts-jquery-avec-wordpress
Z_Ressources
https://codex.wordpress.org/Function_Reference
http://wp-snippets.com/