Cette le\u00e7on du didacticiel sur le th\u00e8me WordPress pour les d\u00e9butants se poursuit en ajoutant le code de base requis pour la configuration du th\u00e8me. Nous apprenons \u00e0 ajouter des supports de th\u00e8me, et \u00e0 la suite de cela, la fonctionnalit\u00e9 d’image en vedette de WordPress est activ\u00e9e. Dans cette le\u00e7on, nous corrigerons \u00e9galement le titre de la page d’accueil en appliquant notre premier filtre.<\/p>\n
Nous travaillerons principalement dans Tous les th\u00e8mes ont besoin de code pour le configurer en disant \u00e0 WordPress d’activer certaines fonctionnalit\u00e9s. Cela inclut l’activation des menus, des widgets, de la traduction, etc. Cela se fait g\u00e9n\u00e9ralement dans une "fonction de th\u00e8me de configuration", g\u00e9n\u00e9ralement accroch\u00e9e \u00e0 un crochet nomm\u00e9 de mani\u00e8re pratique Configurons une telle "fonction de th\u00e8me de configuration" dans notre Dans cette fonction, nous ajouterons un tas de fonctions de configuration communes et utiles pour les th\u00e8mes WordPress. Veuillez placer tous les morceaux de code suivants dans votre fonction de configuration.<\/p>\n Nous devons d’abord d\u00e9finir une largeur maximale d’images et d’int\u00e9grations (telles que des vid\u00e9os). Cela garantit que lorsque les auteurs ins\u00e8rent de grandes images dans les publications, les images restent dans une certaine largeur. Je l’ai r\u00e9gl\u00e9 sur 840 pixels (parce que je veux de la place pour la barre lat\u00e9rale), mais vous pouvez l’ajuster \u00e0 votre guise.<\/p>\n Nous devons \u00e9galement informer WordPress que le th\u00e8me est traduisible et o\u00f9 il peut rechercher des fichiers de traduction. J’entrerai dans la traduction du th\u00e8me WordPress en d\u00e9tail \u00e0 l’\u00e9tape suivante<\/a> de cette s\u00e9rie de didacticiels sur le th\u00e8me.<\/p>\n Notez l’utilisation d’une nouvelle fonction pour r\u00e9cup\u00e9rer votre r\u00e9pertoire de th\u00e8mes, Ensuite, nous devons ajouter des "supports de th\u00e8me", qui activent la fonctionnalit\u00e9 WordPress qui n’est pas activ\u00e9e par d\u00e9faut.<\/p>\n C’\u00e9tait tout un tas d’ Il existe de nombreuses autres fonctionnalit\u00e9s int\u00e9ressantes, je vous encourage donc \u00e0 parcourir la documentation de add_theme_support<\/a>. Par exemple, il y en a une assez nouvelle, Gardez \u00e0 l’esprit que si vous ajoutez la prise en charge de Enfin, nous en ajoutons quelques-uns Voici la fonction de configuration finale dans notre Apr\u00e8s avoir enregistr\u00e9, vous devriez maintenant pouvoir ajouter des images en vedette aux publications dans l’administration\u00a0! Ajoutons un autre correctif de th\u00e8me dans notre Ajoutons notre premi\u00e8re fonction de modification de filtre appropri\u00e9e, en utilisant Gardez \u00e0 l’esprit de toujours renvoyer<\/strong> la variable filtr\u00e9e dans vos fonctions de filtrage\u00a0! Tous les filtres modifient une variable, et si vous ne retournez rien, la variable devient ind\u00e9finie. Cela peut causer beaucoup de probl\u00e8mes. Pour plus de d\u00e9tails sur les filtres, jetez un \u0153il \u00e0 mon article expliquant tout sur les crochets et les filtres<\/a>.<\/p>\n Nous ne voulons personnaliser la variable de titre que si nous sommes sur la page d’accueil. Pour toutes les autres pages, nous voulons le laisser tel quel (il suffit de le retourner tel quel). Mais comment savons-nous quand nous sommes en premi\u00e8re page\u00a0?<\/p>\n Nous pouvons tirer parti des balises conditionnelles<\/a> de WordPress, qui sont tout un tas de fonctions utiles qui renvoient vrai ou faux en fonction d’une condition. Ceux-ci sont le plus souvent utilis\u00e9s pour demander si nous sommes sur une certaine page ou un certain mod\u00e8le. Nous pouvons simplement demander \u00ab\u00a0Sommes-nous en premi\u00e8re page\u00a0?\u00a0\u00bb. Si cette m\u00e9thode renvoie vrai, alors seulement nous modifierons la variable de titre.<\/p>\n Il convient de noter qu’il existe deux balises conditionnelles pour la page d’accueil, \u00e0 savoir Nous savons maintenant quel filtre utiliser et comment nous assurer de ne changer le titre que si nous sommes au bon endroit. Mais quel doit \u00eatre le titre? Habituellement, le titre de la page d’accueil serait le nom de votre site WordPress. Mais comment obtient-on cette information ?<\/p>\n Pour r\u00e9cup\u00e9rer des informations sur l’installation actuelle de WordPress, nous utilisons la Si vous actualisez votre page d’accueil, vous devriez voir que le nom de votre site appara\u00eet dans la Plus t\u00f4t, lorsque nous avons configur\u00e9 les supports de th\u00e8me, nous avons ajout\u00e9 le support des images en vedette. Avec cela activ\u00e9, nous pouvons maintenant sortir ces images dans nos mod\u00e8les. Faisons-le maintenant\u00a0!<\/p>\n Ouvrez-les Si votre message n’a pas d’image en vedette, vous ne verrez rien sortir apr\u00e8s le titre. Cependant, si vous d\u00e9finissez une image en vedette sur l’un de vos messages, functions.php<\/code>le fichier que nous avons ajout\u00e9 dans la le\u00e7on pr\u00e9c\u00e9dente<\/a>. \u00c0 la fin, nous ajouterons du code pour g\u00e9n\u00e9rer des images en vedette dans nos mod\u00e8les.<\/p>\nConfiguration du th\u00e8me<\/h2>\n
after_setup_theme<\/code>. Pour certaines choses sp\u00e9cifiques, nous devons utiliser le crochet d’initialisation de WordPress appel\u00e9 init<\/code>.<\/p>\n\u00c9crire le code de configuration de th\u00e8me n\u00e9cessaire pour
after_setup_theme<\/code><\/h3>\nfunctions.php<\/code>, accroch\u00e9e \u00e0after_setup_theme<\/code>\u00a0:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n$GLOBALS['content_width'] = 840;<\/code><\/pre>\nload_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\nget_stylesheet_directory()<\/code>. Ceci est tr\u00e8s similaire \u00e0 get_stylesheet_directory_uri()<\/code>ce que nous avons rencontr\u00e9 \u00e0 la derni\u00e8re \u00e9tape, mais ici nous avons besoin du chemin relatif, pas de l’URL.<\/p>\nadd_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n]);\nadd_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\nadd_theme_support<\/code>appels! Comme son nom l’indique, add_theme_support<\/code>indique \u00e0 WordPress d’activer des fonctionnalit\u00e9s qui ne sont pas activ\u00e9es par d\u00e9faut. Par exemple, les images en vedette ("post-vignettes"), la prise en charge des balises HTML5 et la fonctionnalit\u00e9 de logo personnalis\u00e9 de WordPress dans Customizer (ajustez l’image de logo souhait\u00e9e si vous le souhaitez !).<\/p>\ntitle-tag<\/code>, qui g\u00e8re la balise de titre. Je l’ai laiss\u00e9 de c\u00f4t\u00e9 dans ce tutoriel car nous avons d\u00e9j\u00e0 ajout\u00e9 la balise de titre header.php<\/code>manuellement.<\/p>\ntitle-tag<\/code>, vous devez supprimer la balise de titre de votre fichier d’en-t\u00eate pour \u00e9viter d’obtenir des balises de titre en double.<\/p>\nadd_theme_support<\/code>pour le nouveau Gutenberg dans WordPress. Nous ajouterons la prise en charge des sections larges, en activant la fonctionnalit\u00e9 des styles de bloc et la prise en charge des int\u00e9grations r\u00e9actives\u00a0:<\/p>\nadd_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\nLe r\u00e9sultat final<\/h3>\n
functions.php<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n $GLOBALS['content_width'] = 840;\n \/\/ Make your theme ready for translation\n load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n \/\/ Add theme support for WordPress functionality\n add_theme_support('automatic-feed-links');\n add_theme_support('title-tag');\n add_theme_support('post-thumbnails');\n add_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n ]);\n add_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n ]);\n add_theme_support('customize-selective-refresh-widgets');\n \/\/ Add theme support for Gutenberg specific functionality\n add_theme_support('wp-block-styles');\n add_theme_support('align-wide');\n add_theme_support('responsive-embeds');\n}<\/code><\/pre>\nfunctions.php<\/code>avant d’ajouter des images en vedette \u00e0 nos mod\u00e8les\u00a0; rappelez-vous que wp_title<\/code>dans notre header.php<\/code>par d\u00e9faut, vous ne pouvez pas faire \u00e9cho \u00e0 quoi que ce soit sur la page d’accueil\u00a0? R\u00e9parons \u00e7a.<\/p>\nAjout d’un filtre \u00e0
wp_title<\/code><\/h2>\nadd_filter()<\/code>. Le filtre auquel nous allons nous accrocher porte le m\u00eame nom que la fonction que nous avons utilis\u00e9e pour WordPress pour r\u00e9cup\u00e9rer dynamiquement le titre de la page ; wp_title<\/code>. Ce que nous allons corriger, c’est de nous assurer que le titre n’est pas vide sur la page d’accueil – ce qui est la valeur par d\u00e9faut dans WordPress. Lorsqu’il est sur la page d’accueil, nous voulons qu’il soit rempli avec le nom du site WordPress.<\/p>\nSavoir quand personnaliser le titre<\/h3>\n
is_home()<\/code>et is_front_page().<\/code>Celles-ci diff\u00e8rent en fonction de votre param\u00e8tre "Lecture" – que votre page d’accueil affiche ou non les derniers messages ou qu’elle soit d\u00e9finie sur une page fixe. Si vous suivez ce tutoriel avec une toute nouvelle installation WordPress avec le param\u00e8tre par d\u00e9faut, vous utilisez is_front_page()<\/code>.<\/p>\nObtenir le nom du site WordPress<\/h3>\n
bloginfo()<\/code>fonction. En param\u00e8tre, nous demandons de renvoyer le nom du site, ce qui se fait en d\u00e9finissant le param\u00e8tre sur ‘ name<\/code>‘. Et comme il s’agit d’un filtre et que nous devons le renvoyer, et non l’\u00e9cho, nous utilisons sa m\u00e9thode s\u0153ur get_bloginfo()<\/code>. L’appel bloginfo()<\/code>fera toujours \u00e9cho \u00e0 la sortie.<\/p>\nadd_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n if (is_front_page()) {\n return get_bloginfo('name');\n }\n return $title;\n}<\/code><\/pre>\n<title><\/code>balise (et dans l’onglet du navigateur)\u00a0! Notre filtre n’affecte que la page d’accueil, de sorte que toutes les autres pages telles que la publication unique doivent toujours renvoyer la m\u00eame chose qu’auparavant\u00a0; le titre du poste.<\/p>\nSortie d’images s\u00e9lectionn\u00e9es dans des fichiers mod\u00e8les<\/h2>\n
index.php<\/code>et trouvez-leur une place \u00e0 l’int\u00e9rieur de la boucle. J’ai choisi de le placer apr\u00e8s le titre, mais c’est \u00e0 vous de d\u00e9cider o\u00f9 vous les voulez. Vous utilisez la fonction the_post_thumbnail()<\/code>pour produire l’image. Il est recommand\u00e9 de v\u00e9rifier d’abord si la publication a m\u00eame d\u00e9fini une image en vedette, ce que nous faisons en utilisant has_post_thumbnail()<\/code>.<\/p>\n...\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php if (has_post_thumbnail()) {\n the_post_thumbnail();\n } ?>\n <?php the_excerpt(); ?>\n...<\/code><\/pre>\nthe_post_thumbnail()<\/code>une <img><\/code>balise avec l’image choisie sera g\u00e9n\u00e9r\u00e9e. Cette fonction accepte quelques param\u00e8tres suppl\u00e9mentaires. Par exemple, vous pouvez d\u00e9finir la taille d’image que vous souhaitez utiliser et contr\u00f4ler les attributs ajout\u00e9s \u00e0 l’image. Comme d’habitude, je vous encourage \u00e0 jeter un coup d’\u0153il rapide \u00e0 la documentation<\/a> et \u00e0 l’ajuster \u00e0 votre guise.<\/p>\nDocumentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n