{"id":911,"date":"2017-04-02T09:57:53","date_gmt":"2017-04-02T07:57:53","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=911"},"modified":"2018-04-10T18:58:39","modified_gmt":"2018-04-10T16:58:39","slug":"creer-un-theme-complet-part-6","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=911","title":{"rendered":"Cr\u00e9er un th\u00e8me complet – Part 6"},"content":{"rendered":"

Table des mati\u00e8res<\/h4>\n

A_Probl\u00e8me des images d\u00e9form\u00e9es<\/a>
\nB_Personnaliser le texte du footer<\/a>
\nC_Ins\u00e9rer un menu r\u00e9seaux sociaux<\/a>
\nD_Ajouter des fontes<\/a>
\nE_Personnaliser l’arri\u00e8re plan du header<\/a>
\nF_Ajouter un logo au header<\/a>
\nG_Tailles d’images personnalis\u00e9es<\/a>
\nH_Utiliser des Custom Post Type<\/a><\/p>\n

A_Probl\u00e8me des images d\u00e9form\u00e9es<\/h4>\n

Il arrive que les images soient \u00e0 une dimension contrainte (150×150 pour les thumbnails des images \u00e0 la une) ou stretch\u00e9es lorsqu’il y a des hauteurs d’images diff\u00e9rentes dans une mosa\u00efque.<\/p>\n

1. Adapter les css flexbox<\/h6>\n

Dans un premier temps, il faut \u00e9viter que les images soient \u00e9tir\u00e9es verticalement pour s’adapter \u00e0 la taille de la plus grande sur une ligne. C’est un comportement naturel de flexbox. Pour cela, ajouter dans la r\u00e8gle css du conteneur des articles la propri\u00e9t\u00e9 suivante :<\/p>\n

align-items: flex-start;<\/code> (ou center<\/code> ou flex-end<\/code>, la valeur par d\u00e9faut \u00e9tant stretch<\/code>)<\/p>\n

2. Adapter l’insertion des thumnails (images \u00e0 la une)<\/h6>\n

Modifier le code d’insertion des thumbnails dans la boucle wordpress, fichier \u00ab\u00a0index.php\u00a0\u00bb en supprimant l’attribut 'thumbnail'<\/code> dans les parenth\u00e8ses.<\/p>\n

3. Supprimer les attributs ‘width’ et ‘height’ des images<\/h6>\n

Ajouter ce code au fichier \u00ab\u00a0functions.php\u00a0\u00bb :<\/p>\n

[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );\r\nadd_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );\r\n\r\nfunction remove_width_attribute( $html ) {\r\n   $html = preg_replace( '\/(width|height)="\\d*"\\s\/', "", $html );\r\n   return $html;\r\n}<\/code><\/pre>\n
[\/pcsh]<\/p>\n
Voir : https:\/\/css-tricks.com\/snippets\/wordpress\/remove-width-and-height-attributes-from-inserted-images\/<\/a><\/p>\n
4. Supprimer l’attribut ‘srcset’ des images<\/h6>\n
Ajouter \u00e9galement ce code au fichier \u00ab\u00a0functions.php\u00a0\u00bb, mais il semble que cela ne suffise pas! \ud83d\ude41 Si ce dernier code ne r\u00e9soud pas le probl\u00e8me, supprimez-le.
\n<\/strong><\/p>\n
[pcsh lang=\u00a0\u00bbapplescript\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
function wdo_disable_srcset( $sources ) {\r\n    return false;\r\n}\r\nadd_filter( 'wp_calculate_image_srcset', 'wdo_disable_srcset' );<\/code><\/pre>\n
[\/pcsh]<\/p>\n
Voir : https:\/\/wordpressdeveloperonline.com\/disable-responsive-images-srcset-wordpress\/<\/a><\/p>\n
Si toutes les solutions pr\u00e9c\u00e9dentes ne permettent pas de r\u00e9soudre le probl\u00e8me, c’est sans doute qu’il y a une erreur ou un conflit de CSS. Relisez-donc attentivement votre fichier \u00ab\u00a0style.css\u00a0\u00bb.<\/p>\n
\n
B_Personnaliser le texte du footer<\/h4>\n
1. Cr\u00e9er l’onglet de r\u00e9glage, ajouter le r\u00e9glage et le contr\u00f4le<\/h6>\n
Placer le code suivant dans le fichier \u00ab\u00a0functions.php\u00a0\u00bb. N’oubliez pas d’ajouter un commentaire pour d\u00e9crire ce que fait ce code.<\/p>\n
[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
function theme_customize_register($wp_customize) {\r\n\/\/ Cr\u00e9ation de la section de r\u00e9glage\r\n$wp_customize->add_section('ma_section', array(\r\n'title' => 'Modifier le footer',\r\n'description' => 'Modifier contenu du footer',\r\n'priority' => 200,\r\n));\r\n\/\/ Ajout du r\u00e9glage\r\n$wp_customize->add_setting('texte_pied_de_page', array(\r\n'default' => 'Saisissez votre texte'\r\n));\r\n\/\/ Ajout du contr\u00f4le\r\n$wp_customize->add_control(texte_pied_de_page', array(\r\n'label' => 'Texte du pied de page',\r\n'section' => 'ma_section',\r\n'type' => 'text',\r\n));\r\n}<\/code><\/pre>\n
[\/pcsh]<\/p>\n
2. Activer le r\u00e9glage<\/h6>\n
Placer \u00e0 la suite du code pr\u00e9c\u00e9dent la ligne :<\/p>\n
[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
add_action('customize_register', 'theme_customize_register');<\/code><\/pre>\n
[\/pcsh]<\/p>\n
3. L’affichage dans le pied de page<\/h6>\n
Il faut enfin placer le code suivant\u00a0 dans le fichier footer.php, \u00e0 l’emplacement de votre choix :<\/p>\n
[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<p>\r\n<?php echo get_theme_mod('texte_pied_de_page', ' \u00ae Fi\u00e8rement propuls\u00e9 par un bulldozer'); ?>\r\n<\/p><\/code><\/pre>\n
[\/pcsh]<\/p>\n
Dans le Tableau de Bord de WP, vous allez retrouver ce r\u00e9glage dans le menu Apparence > Personnaliser. Vous pouvez \u00e0 pr\u00e9sent modifier le texte du footer. N’oubliez pas d’enregistrer les modifications.<\/p>\n
4. Dans le cas d’un th\u00e8me enfant<\/h6>\n
Voir : http:\/\/wp-snippets.com\/change-footer-text-in-wp-admin\/<\/a><\/p>\n
\n
C_Ins\u00e9rer un menu r\u00e9seaux sociaux<\/h4>\n
Nous allons ins\u00e9rer ce menu dans le footer, mais la proc\u00e9dure est la m\u00eame pour un autre emplacement.<\/p>\n
1. Cr\u00e9er le menu<\/h6>\n
Dans le Tableau de Bord, il faut d’abord cr\u00e9er le menu (Apparence > Menu). Cr\u00e9er un nouveau menu, nomm\u00e9 \u00ab\u00a0r\u00e9seaux\u00a0\u00bb, \u00e0 placer dans le second emplacement pr\u00e9vu (Menu des r\u00e9seaux, id ‘secondaire’). Il faut ensuite utiliser des Liens personnalis\u00e9s, comme ci-dessous pour twitter et les ajouter au menu, sans oublier d’enregistrer le menu \u00e0 la fin.<\/p>\n
\"\"<\/a><\/p>\n
2. Placer le menu dans le code<\/h6>\n
Puis il faut ins\u00e9rer le menu dans la page \u00ab\u00a0footer.php\u00a0\u00bb avec le code suivant \u00e0 placer dans la balise footer<\/code>, apr\u00e8s le texte de copyright par exemple. Il faut bien entendu adapter l’id choisi pour la nav selon vos css (ici #reseaux<\/code>).<\/p>\n
[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<?php if ( has_nav_menu( 'secondaire' )) : ?>\r\n\t                <nav id="reseaux">\r\n\t                    <?php wp_nav_menu(array( 'theme_location' => 'secondaire' )); ?>\r\n\t                <\/nav>\r\n\t            <?php endif; ?><\/code><\/pre>\n
[\/pcsh]<\/p>\n
3. Ajouter les ic\u00f4nes avec une extension<\/h6>\n
Enfin, le plus simple est d’utiliser une extension pour ajouter des ic\u00f4nes de r\u00e9seaux sociaux. Il en existe deux principalement, Menu social icons<\/strong> qui fonctionne encore mais n’a pas \u00e9t\u00e9 mis \u00e0 jour depuis longtemps et que je ne recommande donc pas, et Menu Icons<\/strong>, plus r\u00e9cent et compatible, tr\u00e8s complet et efficace.<\/p>\n
Vous trouverez une documentation sur cette extension ici :
\nhttps:\/\/wpchannel.com\/wordpress\/plugins-wordpress\/ajouter-icones-menus-wordpress\/<\/a><\/p>\n
Pour en tirer le meilleur parti, apr\u00e8s l’avoir install\u00e9 et activ\u00e9 est de cocher toutes les ic\u00f4nes, y compris images<\/strong> et svg<\/strong>, qui autorisent \u00e0 utiliser des ic\u00f4nes personnelles dessin\u00e9es par vos soins. Dans Apparence > Menus ouvrez l’onglet Menu Icons Settings et cochez ce dont vous avez besoin.<\/p>\n
\"\"<\/a><\/p>\n
Revenez dans les liens du menu et rajoutez les ic\u00f4nes souhait\u00e9es en conservant le texte (label) ou non.<\/p>\n
4. Ajouter les ic\u00f4nes par une fonction<\/h6>\n
Il faut alors charger FontAwsome et cr\u00e9er une section de personnalisation par le fichier functions.php. Explications later\u2026<\/p>\n
Voir : https:\/\/premium.wpmudev.org\/blog\/add-icons-wordpress-menus\/<\/a><\/p>\n
et https:\/\/www.gd6d.fr\/ajouter-des-icones-dans-sa-barre-de-menu\/<\/a><\/p>\n
\n
D_Ajouter des fontes<\/h4>\n
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, \u00e0 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.<\/p>\n
Voir : https:\/\/premium.wpmudev.org\/blog\/custom-fonts-css\/<\/a><\/p>\n
Sinon, le mieux est d’utiliser des google fonts. Code \u00e0 ins\u00e9rer dans le head du HTML (fichier header.php) ou dans le fichier style.css (c’est une meilleure solution).<\/p>\n
Voir : https:\/\/wpexplorer-themes.com\/total\/docs\/add-custom-fonts\/<\/a><\/p>\n
Il est \u00e9galement possible d’utiliser une extension, Easy Google Font qui am\u00e8nera un dialogue de personnalisation pour acc\u00e9der \u00e0 toutes les google fonts. Plut\u00f4t pas mal si on a du mal \u00e0 choisir ses polices.<\/p>\n
Easy Google Fonts<\/a><\/p><\/blockquote>\n