• Paru le 20 juillet 2017 - mis à jour le 7 janvier 2018

Personnaliser Twenty Seventeen – astuces, bouts de code et extensions

2443 mots - 10mn

Personnaliser Twenty Seventeen – astuces, bouts de code et extensions

1024 682 Tout sur WordPress

Avec Twenty Seventeen, WordPress nous offre son thème le plus univer­sel : blog, maga­zine, site d’entreprise… et mobile first pour ne rien gâcher. Du poten­tiel, mais peu person­na­li­sable par défaut. Rédhibitoire ? Non, vous allez vite vous en rendre compte.

Attends, tu veux que j’utilise Twenty Seventeen ? Mais c’est le thème par défaut ! N’y pense même pas !

Et pour­tant si… Twenty Seventeen n’est pas n’importe quel thème par défaut : il se démarque de ses prédé­ces­seurs en n’étant plus orienté blog.

Bien sûr il convien­dra pour habiller un blog. Mais il permet égale­ment de créer un site d’entreprise, avec sa page d’accueil à sections et son image (ou sa vidéo) plein écran. Et cerise sur le gâteau, il est compa­tible avec les toutes dernières versions de WooCommerce, nati­ve­ment (un « module » dans WooCommerce assure la compa­ti­bi­lité).

En aparté, la démo propo­sée dans le dépôt WordPress(.org) n’est pas très enga­geante. WordPress.com en propose une plus abou­tie, qui donne déjà une meilleure idée du résul­tat.

Oui, il va falloir mettre la main à la pâte, aller fouiller dans les options de l’outil de person­na­li­sa­tion inté­gré, ajou­ter quelques exten­sions, modi­fier les CSS… mais même avec le thème par défaut, votre site aura un design bien à lui et ne vous aura rien coûté si ce n’est le temps consa­cré à sa person­na­li­sa­tion.

Première étape…

Créer un thème enfant

Modifier direc­te­ment un thème est toujours une (très) mauvaise idée. À moins de ne toucher qu’au style – et encore : unique­ment depuis l’outil de person­na­li­sa­tion.

Une exten­sion va vous permettre de créer un thème enfant sans trop de diffi­cul­tés : Child Theme Configurator. Si vous ne connais­sez pas cette exten­sion, je vous invite à lire l’article Pour modi­fier un thème WordPress, appre­nez à créer un thème enfant ! sur No Tuxedo.

Pour ceux qui sont pres­sés, ou qui ne sont pas encore à l’aise avec l’administration de WordPress, j’ai préparé un thème enfant prêt à l’usage, il ne vous reste plus qu’à le télé­char­ger, à l’installer et à l’activer.

Thème enfant pour Twenty Seventeen

Vous trou­ve­rez égale­ment des thèmes enfants dans le dépôt WordPress : Dynamic SeventeenDelectWinter Solstice et le plus abouti, Minimal 20/17 livré avec deux modèles de page supplé­men­taires (une landing page et une page sans titre) et le support de Visual Composer (à ne pas confondre avec WPBakery Page Builder for WordPress dont l’ancien nom était effec­ti­ve­ment Visual Composer).

Une fois le thème enfant en place, activez-le. Et main­te­nant, voyons comment…

Personnaliser Twenty Seventeen

Nous ne verrons certai­ne­ment pas toutes les possi­bi­li­tés de person­na­li­sa­tion de ce thème, mais nous allons tenter d’explorer un maxi­mum.

La première, la plus basique, c’est…

Via l’outil de personnalisation

Outil de personnalisation - Twenty Seventeen

Outil de person­na­li­sa­tion – Twenty Seventeen

Pour accé­der à l’outil de person­na­li­sa­tion, vous pouvez, dans l’interface d’administration, cliquer sur Apparence > Personnaliser. Ou depuis le site lui-même, cliquer sur l’entrée Personnaliser dans le menu d’administration.

Remplacer l’image plein écran de la page d’accueil

Pour modi­fier ou suppri­mer cette image, rendez-vous dans En-tête du média.

Twenty Seventeen ne se limite pas à propo­ser de chan­ger ou de suppri­mer l’image d’en-tête, il permet aussi d’utiliser une vidéo télé­char­gée en local ou sur Youtube (bien mieux pour ne pas surchar­ger votre serveur), couplée à une image qui s’affichera le temps que la vidéo se charge.

En aparté, la traduc­tion fran­çaise est parfois une traduc­tion à la louche – si En-tête du média ne vous parle pas, ne vous inquié­tez pas : je suis moi aussi resté perplexe devant cet inti­tulé – média d’en-tête serait plus appro­prié.

Paramétrer la page d’accueil

Depuis la page d’accueil, cliquez sur Options du thème.

Vous remar­que­rez que cet onglet n’est dispo­nible que depuis la page d’accueil elle-même, proba­ble­ment parce qu’il permet de gérer le contenu des diffé­rentes sections de cette page, mais il sert aussi à défi­nir le modèle géné­ral.

Sélectionnez donc le mode d’affichage souhaité (une ou deux colonnes), enre­gis­trez vos modi­fi­ca­tions, créez les pages à inclure dans la page d’accueil (une page par section), avant de reve­nir à cet onglet pour défi­nir les pages à affi­cher et leur ordre.

Créer un menu pour vos réseaux sociaux

Eh oui, affi­cher les liens vers vos pages Twitter, Facebook, LinkedIn, Instagram… n’a jamais été aussi facile : cliquez sur Menus, puis sur Footer Menu.

Vérifiez que Menu des liens sociaux soit bien coché (il l’est par défaut), cliquez sur Ajouter des éléments puis sur l’onglet Liens person­na­li­sés avant de saisir (ou de coller) chaque lien et de le nommer.

Menu des liens sociaux - Twenty Seventeen

Menu des liens sociaux – Twenty Seventeen

L’icone de chaque réseau social appa­raî­tra dans le pied de page – simple et effi­cace.

Via les propriétés CSS

Même s’il est possible de modi­fier l’affichage en utili­sant l’outil de person­na­li­sa­tion (onglet CSS addi­tion­nel) il est préfé­rable d’intégrer vos modi­fi­ca­tions à la feuille de style du thème enfant (le fichier style.css  de votre thème enfant) pour opti­mi­ser le temps de char­ge­ment de vos pages.

Définir une image de fond fixe

Commencez par ajou­ter l’image à votre biblio­thèque de médias : dans l’interface d’administration de WordPress, cliquez sur Médias > Ajouter. Importez une image, puis cliquez sur Modifier.

Ajouter un média

Ajouter un média

Sélectionnez l’url du média en haut à gauche pour le copier dans la propriété CSS.

URL du média

URL du média

Enfin, insé­rez ces quelques lignes dans le fichier style.css .

En fonc­tion de l’image de fond insé­rée, pensez à modi­fier la couleur du thème : si votre image est plutôt dans des tons foncés, choi­sis­sez Foncé dans l’onglet Couleurs de l’outil de person­na­li­sa­tion.

Avoir un menu haut fixe, même dans la version mobile

Si le menu haut de Twenty Seventeen est fixe par défaut (sauf dans la page d’accueil, si vous avez une image d’en-tête), il n’en est pas de même lors de l’affichage en version mobile. Nous n’allons pas discu­ter des avan­tages et des incon­vé­nients d’un menu fixe sur un termi­nal mobile, il y en a qui le veulent ainsi – et j’en suis.

Désactiver le positionnement fixe du menu

Et pour ceux qui à l’inverse ne veulent pas du tout d’un menu fixe, collé en haut de page :

Placer la barre latérale à gauche

Sans rien chan­ger si ce n’est quelques proprié­tés CSS… Vu que la barre laté­rale ne s’affiche ni à droite, ni à gauche, mais en dessous pour les termi­naux mobiles, il est là aussi néces­saire de faire appel aux media queries .

Modifier la largeur de la barre latérale

La largeur de la barre laté­rale est par défaut de 36% (et 58% pour le contenu prin­ci­pal). Si vous souhai­tez modi­fier cette valeur, il vous suffit d’insérer ce code dans votre feuille de style :

Le total n’est pas de 100%, la diffé­rence règle l’écartement entre les deux colonnes pour le confort de lecture.

Centrer le logo, le titre et l’accroche du site

Redimensionner le logo

Les dimen­sions par défaut sont de 350x80px. Vous allez jouer avec max-height  et max-width  pour en augmen­ter ou en réduire la taille.

Égaliser la largeur des zones de widget du pied de page

Nous avons vu que la largeur des contenu et barre laté­rale sont par défaut de 58 et 36 %. Le pied de page est inversé avec 36% pour la première colonne et 58% pour la deuxième.

Vous pouvez envi­sa­ger toutes les combi­nai­sons possibles, en créant des mosaïques avec ces quatre zones, par exemple :

Modifier la largeur des pages et des articles (sans barre latérale)

La largeur maxi­male par défaut est de 740 pixels pour les pages et les articles de blog sans barre laté­rale. Vous souhai­tez allouer plus d’espace à votre contenu ? Renseignez la propriété max-width  avec la valeur de votre choix, en em, en pixels ou en pour­cen­tage.

Via le fichier de fonctions du thème

Les fonc­tions qui suivent sont direc­te­ment liées au thème, c’est donc dans le fichier functions.php de votre thème enfant que vous aller les enre­gis­trer.

Ajouter des sections à la page d’accueil

Les 4 sections propo­sées par défaut ne vous suffisent pas ? Ajoutez le bout de code ci-dessous :

Via le fichier de fonctions et les modèles de pages

Changer les crédits dans le pied de page

Fièrement propulsé par WordPress ? D’accord, pour un crédit par défaut, pour­quoi pas ? Mais si vous voulez insé­rer vos propres crédits, il va falloir ajou­ter une fonc­tion, et modi­fier le fichier template-parts/footer/site-info.php .

Commencez par copier ce fichier dans votre thème enfant en respec­tant bien la struc­ture des réper­toires.

Éditez le, suppri­mez tout et insé­rez le code suivant :

Puis, dans le fichier functions.php , ajou­tez ces lignes de code :

Alternative : vous pouvez aussi coder « en dur » les infos du site dans le fichier template-parts/footer/site-info.php . Dans ce cas, vous n’avez pas besoin de toucher au fichier functions.php .

Ajouter une barre latérale aux pages

Par défaut, Twenty Seventeen réserve les barres laté­rales aux articles. Elles peuvent pour­tant être utiles sur les pages, pour affi­cher un formu­laire de contact et diverses infor­ma­tions par exemple.

Si vous vous tenez à vos barres laté­rales (si vous en avez l’utilité), il va falloir modi­fier le fichier  page.php . Commencez par le copier dans votre thème enfant. Éditez le et ajou­tez le code suivant entre </div><!-- #primary -->  et </div><!-- .wrap --> :

Puis, dans le fichier functions.php , ajou­tez ces lignes :

La barre laté­rale, si vous lui avez assi­gné des widgets, s’affichera désor­mais dans vos pages.

Pour ceux qui voudraient des pages avec barre laté­rale et d’autres sans, copiez dans votre thème enfant le fichier page.php initial, renommez-le en page-with-sidebard.php , éditez-le, effec­tuez les modi­fi­ca­tions ci-dessus et rempla­cez * The template for displaying all pages  par * Template Name: With Sidebar .

Si vous voulez affi­cher une barre laté­rale diffé­rente sur chaque page, l’extension Custom Sidebars – Dynamic Widget Area Manager est toute indi­quée.

Via des extensions dédiées

L’article Habillez votre site avec Twenty Seventeen et les exten­sions Bold Themes traite de la person­na­li­sa­tion avec les exten­sions Bold Themes.

Il existe une autre exten­sion pour person­na­li­ser Twenty Seventeen : Advanced Twenty Seventeen. Elle pousse la person­na­li­sa­tion plus loin que Customize Twenty Seventeen de BoldThemes, mais n’est pas couplée à un construc­teur de page. Il existe d’autres construc­teurs de pages qui pour­ront faire votre bonheur, tels que Elementor ou Visual Composer.

Conclusion

Brut de fonde­rie, Twenty Seventeen n’est jamais qu’un thème par défaut, bien moins confi­gu­rable qu’un thème « premium » vendu en géné­ral entre 60 et 100 €. Peu confi­gu­rable mais avec un poten­tiel inté­res­sant.

Les astuces, les bouts de code, les exten­sions présen­tés dans cet article compensent. Et dites-vous bien que ce n’est qu’un aperçu des person­na­li­sa­tions possibles pour ce thème.

Alors, on se sert de Twenty Seventeen, ou on cherche un autre thème ? Si vous voulez tester les astuces vues dans cet article, j’ai créé un thème enfant avec les CSS, les fonc­tions et les fichiers page-withsidebar.php  et  template-parts/footer/site-info.php . C’est à vous, laissez-vous tenter 😉

Thème enfant pour Twenty Seventeen

Et n’hésitez pas à donner votre avis sur ce thème dans les commen­taires !


Sources

Pour rédi­ger cet article, j’ai effec­tué quelques recherches sur inter­net. J’ai puisé dans les articles How to Customize the Free Twenty Seventeen WordPress Theme et 5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme du blog wpmu­devHow To Customize Twenty Seventeen WordPress Theme Using Child Theme du blog wpeka, et How To Master Twenty Seventeen (Or Any WordPress Theme in 2017) sur Design Bombs. Et un peu partout ailleurs.

 

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

48 commentaires
  • Anouchka 17 février 2018 à 12 h 04 min

    Bonjour,
    Je découvre sous peu vos conseils et recom­man­da­tions.
    Je viens de créer mon nouveau site web, qui est toujours en construc­tion. Avant que je déve­loppe davan­tage, notam­ment l’intégration de l’extension WooCommerce, je voulais m’assurer que le thème Twenty Seventeen convienne vrai­ment. Je n’ose pas choi­sir un autre thème, de peur de tout perdre. Je suis encore un peu débu­tante sur WordPress mais je me débrouille. Quels sont vos conseils me concer­nant ?
    Mille mercis et je me réjouis de suivre vos news !
    Anouchka

    • Pascal CESCATO 17 février 2018 à 14 h 00 min

      Bonjour Anouchka, et merci pour votre commen­taire !
      Je suis passé sur votre site, il commence effec­ti­ve­ment à prendre forme et il est bien sympa­thique. Twenty Seventeen est compa­tible nati­ve­ment avec WooCommerce (je le dis d’ailleurs dans l’article 😉).

      Concernant votre site je vous conseille­rais juste de hiérar­chi­ser votre menu dans un premier temps, vous n’avez pas besoin de tout mettre au niveau zéro. (je pense surtout à Panier / Commande / Mon compte qui peuvent être en sous-menu de Boutique, à Histoire et Conseils que je passe­rais dans À propos).

      De même, je remarque que vous avez gardé la mise en page à deux colonnes qui est la mise en page par défaut. Avez vous tenté la « pleine largeur » (choi­sir Une colonne dans l’outil de person­na­li­sa­tion, dans l’onglet Options du thème acces­sible depuis la page d’accueil unique­ment) ?

      Voilà, il n’y a pas grand chose d’autre à dire, il vous reste certai­ne­ment à faire mais Rome ne s’est pas construite en un jour 🙂

  • Meric 15 février 2018 à 23 h 53 min

    Bonsoir,
    Merci pour ce tuto, j’aurais besoin si possible d’un coup de pouce, j’ai une page accueil, A visi­ter, actua­li­tés et contact, j’ai supprimé les titres de chaque page, j’ai réussi à réduire l’espace dans ma page d’accueil entre le menu et les blocks texte, mais impos­sible sur les autres.
    Si vous avez une astuce.
    Merci

    • Pascal CESCATO 16 février 2018 à 0 h 57 min

      Bonsoir Meric, en fait les modèles de la page d’accueil et des pages ne sont pas les mêmes. Pour les pages en géné­ral il s’agit du fichier template-parts/page/content-page.php et pour la page d’accueil, du fichier template-parts/page/content-front-page.php. Il se peut que les classes CSS ne soient pas les mêmes, tout dépend de votre propre page d’accueil et des éléments que vous y avez inté­gré.

      Dans le menu de Chrome par exemple, allez à Plus d’outils > Outils de déve­lop­pe­ment ou faites direc­te­ment un clic droit dans la page pour Inspecter l’élément html qui vous inté­resse. Repérez la classe CSS que vous avez à modi­fier, testez la modi­fi­ca­tion direc­te­ment depuis la console Chrome ou en utili­sant l’onglet CSS addi­tion­nel dans le panneau de person­na­li­sa­tion de WordPress.

      • Meric 16 février 2018 à 9 h 12 min

        Merci Pascal, en utili­sant l’outil de Chrome j’ai trouvé de suite, j’ai pas le reflex d’utiliser le navi­ga­teur, je passe un temps fou dans le CSS à cher­cher.
        Encore MERCI

  • Sylvie Lemire 13 février 2018 à 21 h 41 min

    Bonjour Pascal, mon thème est bien Twenty Seventeen. Dans les sous-pages déjà exis­tantes, l’une sert à infor­mer mes citoyens des diffé­rentes acti­vi­tés exis­tantes. J’aimerais pour chacune des acti­vi­tés propo­sées, ajou­ter un hyper­lien qui condui­rait l’internaute sur une nouvelle page pour s’y inscrire et payer son abon­ne­ment. Est-ce que pour faire cela je dois télé­char­ger WooCommerce ou télé­char­ger une exten­sion comme Stripe ? Que me conseillez-vous pour à la fois conser­ver tout ce que j’ai fait dans mon thème Twenty Seventeen et inscrire mes clients à diffé­rents services de loisirs ? Merci !!!

  • Fred 31 janvier 2018 à 17 h 13 min

    Bonjour Pascal,
    Je fais mes premiers pas sur WP / twenty seven­teen et ne connais rien au code, mais grâce à vos conseils avisés j’avance et je tords Twenty seven­teen pour m’approcher du résul­tat que je veux…

    J’ai pu chan­ger le nombre de sections de 5 à 20 mais depuis que je l’ai fait, cette ligne de code appa­raît en bas de chaque page du site :
    function tsct_front_page_sections() { 10; } add_filter( 'twentyseventeen_front_page_sections', 'tsct_front_page_sections' );
    et je ne sais pas d’où vient cette ligne (pas des fichiers function.php du parent ou de l’enfant qui sont para­mé­trés à 5 ou 20) et pour­quoi elle s’affiche dans le site.
    Auriez vous une petite idée la-dessus ?

    Par ailleurs, comme Vincent, je cherche à épurer le thème au maxi­mum et il y a donc une opti­mi­sa­tion que souhai­te­rais sans savoir si c’est réali­sable : rendre les images mises en avant de chaque section cliquables pour renvoyer sur une url et ainsi éviter la présence sous chaque image d’une icone qui remplit cette fonc­tion.

    merci pour vos conseils

    • Fred 31 janvier 2018 à 18 h 18 min

      pour la ligne de code je viens de trou­ver. « une bonne âme » me l’avais rajou­tée dans un des fichiers en pensant bien faire.

    • Pascal CESCATO 31 janvier 2018 à 22 h 15 min

      Bonsoir Fred, c’est possible mais un peu compli­qué.

      En fait il te faut créer un fichier dans le thème enfant pour y arri­ver.

      Commence par créer un réper­toire template-parts dans lequel tu crées un deuxième réper­toire, pages.

      Copie le fichier template-parts/page/content-front-page-panels.php du thème parent (Twenty Seventeen) dans ce dernier réper­toire.

      Tu ouvres le fichier avec un éditeur de code et tu cherches les lignes suivantes :

      Tu supprimes ces lignes et les remplaces par :

      Enfin, dans la page où tu souhaites insé­rer le lien, il te faut créer un champ person­na­lisé que tu vas nommer Panel Url et dans lequel tu vas enre­gis­trer l’URL de ton choix avant de publier ou de mettre à jour la page.

      Les champs person­na­li­sés sont en-dessous de la fenêtre d’édition, mais ils ne sont pas affi­chés par défaut, il va te falloir cliquer sur Options de l’écran (en haut à droite dans le navi­ga­teur) puis cocher Champs person­na­li­sés.

      Et voilà, c’est fait !

  • Régis 16 janvier 2018 à 20 h 55 min

    Bonsoir Pascal
    Merci pour ces nombreuses contri­bu­tions fort utiles pour un débu­tant comme moi.
    J’ai donc installé le thème Twenty Seventeen Child que tu proposes en télé­char­ge­ment cepen­dant après avoir installé l’extension Yoast SEO, l’édition du fichier sitemap.xml ne peut pas se faire car il semble­rait qu’il y ait une erreur de codage.
    Or d’après ce que j’ai compris après avoir enre­gis­tré mon site sur la Google Search Console ces fichiers sont néces­saires pour opti­mi­ser le réfé­ren­ce­ment natu­rel. Je n’y connais rien en codage et CSS. Peux-tu appor­ter la correc­tion au message suivant qui s’affiche sur le rapport de Yoast ?

    Erreur d’analyse XML : erreur de syntaxe
    Emplacement : http://mariecoiff.com/main-sitemap.xsl
    Numéro de ligne 1, Colonne 50 :
    ————————————————-^
    Je rencontre d’ailleurs le même message avec un autre site que j’ai réalisé avec le même thème…

    Et ques­tion subsi­diaire si tu as le temps de t’y pencher : j’ai installé l’extension « Sola Testimonials » qui permet d’afficher les avis et témoi­gnages de satis­fac­tion récu­pé­rés sur FB Google et Pagesjaunes sur une page du site dédiée à cela. Contre toute attente, après la publi­ca­tion du site ce dernier a disparu des listes de réponses alors qu’il s’affichait en première page la veille. Penses-tu que Google assi­mile cela à du contenu dupli­qué ? Comment dans ce cas affi­cher les avis ?
    Merci pour tes conseils éclai­rés et à bien­tôt.

    • Pascal CESCATO 16 janvier 2018 à 21 h 46 min

      Bonjour Régis et merci pour ton commen­taire.

      Il n’y a pas de raison que le thème enfant génère ce type de problème, mais pour s’en assu­rer, il existe une solu­tion simple : active un autre thème, comme Twenty Sixteen par exemple. Si le problème dispa­raît, c’est qu’il est effec­ti­ve­ment lié au thème. Sinon, c’est qu’il est proba­ble­ment lié à une exten­sion. Dans ce cas, désac­tive toutes les exten­sions à l’exception de Yoast SEO et véri­fie que le message ne s’affiche plus dans la console Yoast. Si le message a disparu, réac­tive les exten­sions une à une, en véri­fiant la console Yoast à chaque ré-activation pour trou­ver l’extension fautive.

      Concernant le réfé­ren­ce­ment, je ne pense pas que Sola Testimonials soit assi­milé à du contenu dupli­qué. Commence par régler le bug de Yoast, il se peut que ce soit le cœur du problème.

      • Régis 17 janvier 2018 à 22 h 18 min

        Bonsoir Pascal.
        Vérification faite comme préco­nisé, le bug concer­nant l’erreur de syntaxe est toujours là.
        La Google Console Search confirme qu’il n’y a pas de site­map…
        Un conseil pour corri­ger le CSS défaillant ?

        • Pascal CESCATO 17 janvier 2018 à 22 h 22 min

          As-tu tenté de désac­ti­ver toutes les exten­sions et de les ré-activer une à une ? Et de quel CSS parles-tu ? Si c’est à propos du bug qui appa­raît dans la console Yoast, ce n’est pas un CSS défaillant mais sûre­ment un bout de code PHP qui pose problème.

          • Régis 18 janvier 2018 à 21 h 14 min

            Bonsoir Pascal
            Je vais formu­ler ma ques­tion diffé­rem­ment :
            Pourquoi Google Console Search ne détecte pas de site­map dans le thème enfant que tu nous mets gracieu­se­ment à dispo­si­tion ?

          • Pascal CESCATO 18 janvier 2018 à 21 h 23 min

            Parce que le site­map ne dépend pas du thème, c’est une fonc­tion­na­lité amenée par une exten­sion telle que Yoast SEO ou Jetpack, par exemple. Si tu ne trouves pas de solu­tion, désac­tive la fonc­tion­na­lité Yoast SEO (SEO > Sitemaps XML) et tente Google XML Sitemaps ou désac­tive Yast SEO et remplace le par All in One SEO Pack par exemple.

  • isaax 5 janvier 2018 à 15 h 25 min

    bonjour Pascal, je débute avec wp j’utilise ce thème Twenty Seventeen
    j’ai un souci avec la page d accueil je voudrai chan­ger l’image mais impos­sible de mettre la bonne taille
    celle d’origine est de 2000x1200 si je met la mienne de même taille, elle est tron­quée g essayé toutes les tailles ou l’image est tron­quée ou wp l’élargit c fou qu’on ne puisse pas simple­ment redi­men­sion­ner une simple image pour qu’elle appa­raisse entiè­re­ment en page d accueil???!!
    auriez vous la solu­tion svp (n’oubliez pas, je débute) merci

    • Pascal CESCATO 5 janvier 2018 à 15 h 38 min

      Bonjour Isaax, il faut insé­rer l’image d’en-tête via l’outil de person­na­li­sa­tion de WordPress (menu Apparence > Personnalisation). Dans la barre laté­rale, allez à Média de l’en-tête et sélec­tion­nez l’image que vous souhai­tez mettre. C’est tout simple, mais il faut le savoir 😉

  • Maarkuus 29 décembre 2017 à 14 h 27 min

    Bonjour Pascal,
    Je ne trouve pas de solu­tion à mon petit souci d’affichage de la page d’accueil en utili­sant le thème twenty seven­teen child. En effet, il appa­raît un « bout » de l’image d’accueil tout en bas lorsque je scrolle en fin de page d’accueil . Je ne sais pas quoi faire car esthé­ti­que­ment ce n’est pas terrible. Par contre sur les autres pages je n’ai pas ce problème. Une idée ? Merci.

    • Pascal CESCATO 29 décembre 2017 à 14 h 57 min

      Bonjour Maarkuus, après analyse de ta page le problème ne vient ni de Twenty Seventeen ni du thème enfant, mais de l’iframe géné­rée par hupso, l’extension qui gère a priori les boutons de partage pour les réseaux sociaux sur ton site. Il y a des alter­na­tives à cette exten­sion dans le dépôt WordPress, dont Share Buttons by AddThis ou WP Social Sharing. À moins que tu ne trouves une solu­tion pour l’extension hupso elle-même.

      • Maarkuus 29 décembre 2017 à 15 h 46 min

        Merci beau­coup Pascal pour ta réac­ti­vité. Je me suis en effet aperçu un peu plus tard aussi que l’origine du déca­lage venait du widget hupso. Du coup je réflé­chis à, soit modi­fier les para­mètres iframe du widget, soit en choi­sir un autre. Par contre, comment expli­quer que le problème ne se pose pas pour les autres pages?…
        Merci encore !

  • Vincent 8 septembre 2017 à 17 h 01 min

    Merci beau­coup pour votre réac­ti­vité Pascal, je teste tout cela et vous tiens au courant le cas échéant, mais je ne vais pas non plus vous harce­ler 😉
    Bonne fin de jour­née,
    Vincent

    • Pascal CESCATO 8 septembre 2017 à 17 h 04 min

      Vincent, c’est avec plai­sir que je réponds. Et ce compor­te­ment avec le thème Twenty Seventeen m’intrigue… tenez-moi au courant, s’il vous plaît.

    • Pascal CESCATO 8 septembre 2017 à 18 h 56 min

      Avez-vous mis l’image qui doit appa­raître en « Image mise en avant », avec une taille de 2000x1200px ? Il ne faut surtout pas insé­rer l’image dans l’article…

      • Vincent 8 septembre 2017 à 19 h 07 min

        Mon souhait est d’intégrer des pages avec des photos de grandes tailles pouvant être « cliquées » pour mener ensuite à une gale­rie, l’image de mise en avant dispose de limite dans ce contexte : pas de clic possible et par ailleurs, une seule image possible. Du coup je n’utilise pas cette oppor­tu­nité.
        En tout état de cause, vous suggé­rez de ne pas utili­ser des images de cette taille dans une page : trop lourdes ?
        Incompatible avec les devices mobiles ? Pourquoi ne surtout pas faire ceci ?
        Bien cordia­le­ment,
        Vincent

  • Vincent 8 septembre 2017 à 16 h 37 min

    Qu’entendez vous par là, un compres­seur d’image sous forme d’un plug-in inté­gré à WP en exten­sion par exemple ? Non, vrai­ment je ne vois pas, je ne dispose d’aucune exten­sion active pour le moment.
    Je me demande si la syntaxe du code est la bonne sinon ? Cela s’insère bien sans autre forme de procès, à la fin du functions.php du thème enfant ou prin­ci­pal ?

    • Pascal CESCATO 8 septembre 2017 à 16 h 44 min

      Sous forme d’extension, effec­ti­ve­ment.

      Concernant la fonc­tion en elle-même, je la rajou­te­rais plutôt dans un snip­pet plutôt que dans functions.php (cf. Centralisez vos bouts de code avec « Code Snippets »).

      Éventuellement essayez la fonc­tion suivante, écrite de manière plus clas­sique :

      Enfin si vous tenez à la placer dans le fichier de fonc­tions du thème, c’est dans le thème actif qu’il faut la placer, donc dans le thème enfant. Placée dans le thème parent, elle fonc­tion­ne­rait aussi, jusqu’à ce qu’elle soit écra­sée lors d’une mise à jour.

  • Vincent 8 septembre 2017 à 15 h 35 min

    Bonjour Pascal,
    J’aurais une autre ques­tion pour vous si possible. (Au niveau tutoiement/vouvoiement je ne suis pas tip top, je suis confus)
    Je cherche à empê­cher WordPress de compres­ser mes images et j’ai trouvé ce bout de code :

    Il est dit qu’il faut l’insérer dans le fichier functions.php
    Ce que j’ai effec­tué dans le (bas du) fichier en ques­tion situé dans mon child-thème.
    Mes images dans les pages sont ok en prévi juste après créa­tion, sauf que lorsque j’intègre la page dans le site, les photos sont de nouveau compres­sées (un peu le même problème que précé­dem­ment pour les largeurs de pages…) Du coup j’ai placé ce bout de code un peu partout (…), functions.php du thème origi­nal, du réper­toire wp-includes égale­ment, dans l’éditeur CSS inté­gré, mais rien à faire. Je suis complè­te­ment largué.
    Auriez-vous un conseil à me donner à ce sujet s’il vous plaît ?
    Merci par avance,
    Vincent

  • Vincent 7 septembre 2017 à 20 h 45 min

    Bonsoir Pascal,
    Je fais suite à mon message juste au dessus, voilà j’ai trouvé ceci qui fonc­tionne à priori pour « élar­gir » mes pages sous twenty seven­teen.

    Voilà, si cela peut aider un rookie dans mon genre c’est cool, ton point de vue sur le code sera inté­res­sant le cas échéant.
    Merci encore pour tes diffé­rents partages et bonne soirée,
    Vincent

  • Vincent 7 septembre 2017 à 17 h 01 min

    Bonjour Pascal,
    Merci pour toutes ces infos, c’est chouette vrai­ment. Je suis photo­graphe et je tente de faire quelque chose avec twenty seven­teen, à la mesure de ma mécon­nais­sance.
    Je souhaite dispo­ser de page plus « larges ».
    Lorsque j’applique (dans personnalisation/CSS addi­tion­nel) le code de votre section « Modifier la largeur des pages et des articles (sans barre laté­rale) », il se passe le truc suivant :
    A la créa­tion d’une page c’est nickel, mes photos notam­ment exploitent la nouvelle largeur de page.
    Si j’intègre cette page dans options du thème, bam je perds les carac­té­ris­tiques de largeur de page et le tout se rétré­cie à nouveau 🙁
    Bon je ne sais pas si je suis compré­hen­sible, mais si vous avez un regard là-dessus, cela me m’aiderait sévè­re­ment 🙂
    Bien cordia­le­ment,
    Vincent

  • Arduino 30 juillet 2017 à 21 h 34 min

    Bonsoir,
    J’ai trouvé ce que je veux faire sur le conte­nant mais je n’arrive pas a le mettre en place et comment le mettre en place voici les liens :
    https://codepen.io/ariona/pen/geFIK ou https://codepen.io/Kseso/pen/JBrcD
    Si vous avez encore un peu de temps a me consa­crer.
    Bonne soirée – Ludovic

    • Pascal CESCATO 30 juillet 2017 à 21 h 40 min

      Bonsoir Ludovic,
      Désolé, il va vous falloir faire par vous-même… je fais effec­ti­ve­ment de l’intégration de scripts de temps à autre, mais outre le fait que ce n’est pas un domaine dans lequel j’excelle, c’est un service que je facture. Votre demande dépasse le cadre de l’article, je ne peux décem­ment faire payer mes clients et vous offrir mes services 😉 en espé­rant que vous compre­nez.
      Bonne soirée à vous aussi et bonne inté­gra­tion.

  • Arduino 27 juillet 2017 à 13 h 54 min

    J’ai fini par trou­ver je suis tombé sur cela :

    Mais est-il possible de défi­nir une taille de page (le conte­nant) avec une valeur mini car quand on écrit pas grand chose ça fait un peu bête.

    Cordialement – Ludovic

  • Arduino 27 juillet 2017 à 6 h 20 min

    Bonjour,

    Merci encore pour le temps passé, cela fonc­tionne pas comme je veux ça change l’image du fond mais je voudrais si cela est possible modi­fier que le fond ou j’écris car quand j’utilise le script, cela met l’image en haut a gauche mais non au milieu ou j’écris, je sais pas si je suis clair dans mon expli­ca­tion, par exemple je veux garder mon fond vert et mettre au milieu un fond noir un peu comme ma page contact garder le vert et la ou il y a la carte un fond noir ou autre avec du texte, je veux modi­fier le fond ou j’écris un peu comme là : https://wpformation.com/migrer-wordpress-com-wordpress-org/ .

    Merci par avance si cela est possible. Cordialement,

    Ludo

    • Pascal CESCATO 27 juillet 2017 à 8 h 45 min

      Il n’y a pas de solu­tion miracle, mais vous pouvez jouer sur les blocs (le conte­neur géné­ral et celui qui contient le texte) :

      Si vous optez pour cette solu­tion, il ne faut pas utili­ser le code pour l’image d’arrière plan, car elle prend la main sur la couleur. Mais en raison de la struc­ture des pages du thème, le résul­tat n’est pas spécia­le­ment très esthé­tique…

      • Arduino 27 juillet 2017 à 11 h 35 min

        Rebonjour

        Vous allez dire celui-la il est super chiant, mais cela change tous les blocs pas que celui de la page, même l’arrière du menu etc…
        De plus pour­quoi ma page accueil est coller au menu alors que les autres pages non (je préfère non coller).

        Je vous remer­cie pour le temps passé et le partage de connais­sance.

        Une ques­tion encore le site ( http://doudouetpinou.fr/wp/ ) c’est un site que je fait pour mon épouse et ma belle sœur pour la créa­tion de leur projet, pour­riez vous me dire ce qui ne va pas au niveau de celui-la les images se sont des tests.

        Encore mille merci pour tous.

        Ludovic

        • Pascal CESCATO 27 juillet 2017 à 11 h 53 min

          Je ne dirais pas « chiant », je dirais que vous tâton­nez… Pour décol­ler le bloc du menu, il suffit d’ajouter une marge au bloc :

          Pour que je puisse vous dire ce qui ne va pas (éven­tuel­le­ment) sur votre site, il faudrait que vous avan­ciez un peu plus dans votre projet, et que vous mettiez du contenu.
          Voilà, bonne jour­née Ludovic.

  • Arduino 26 juillet 2017 à 13 h 46 min

    Bonjour

    J’ai réussi a faire ce que je voulais je suis en phase de test, le fond du site j’ai réussi grâce a votre article.
    Je vous solli­cite encore, je souhaite modi­fier le fond de mes pages afin de faire la diffé­rence entre le fond des pages et le fond du site.

    Merci encore pour vous, merci de votre aide. Voici mon site : http://doudouetpinou.fr/wp/

    Bonne conti­nua­tion

    Ludo

    • Pascal CESCATO 26 juillet 2017 à 15 h 16 min

      Bonjour Ludo, merci pour votre retour, ça fait toujours plai­sir.
      Pour mettre une image d’arrière plan spéci­fique à chaque page, il faut pous­ser plus loin la person­na­li­sa­tion. Il va falloir utili­ser les champs person­na­li­sés pour le fond de page. S’ils n’apparaissent pas à l’écran, cliquez sur Options de l’écran en haut à droite. Nommez votre champ bgimg par exemple, et entrez l’url de l’image (ou faites un copier / coller depuis la biblio­thèque des médias). Dans le fichier functions.php, ajou­tez les lignes suivantes :

      Voilà ! En espé­rant que ce bout de code fasse l’affaire…

  • Arduino 24 juillet 2017 à 18 h 34 min

    Bonsoir, je suis novice, juste­ment j’utilise ce thème, est-il possible de modi­fier la couleur de fond du menu ou de mettre une image en arrière plan du menu de même pour le fond du thème il y a clair ou foncer mais est il possible de de mettre une image en fond ?

    Merci par avance de votre aide.

    • Pascal CESCATO 24 juillet 2017 à 19 h 05 min

      Bonsoir, oui il est possible de chan­ger l’image de fond, cet article juste­ment donne la marche à suivre (para­graphe « Définir une image de fond fixe »). Si vous ne voulez pas que le fond soit fixe, il suffit de suppri­mer la ligne background-attachment: fixed;.

      Pour chan­ger la couleur de fond (et la couleur du texte) du menu, ajou­ter une image de fond au menu, voici le code :

      Bonne soirée et bonne chance avec votre site !

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :