WordPress est utilisé sur une grande partie des sites sur le Web. Il nous permet de créer une variété de différents types de sites, mais l'un des composants les plus importants de tout site Web est toujours la page d'accueil. La page de destination parfaite vous aidera à réduire les taux de rebond, à augmenter le trafic et les clients. Dans cet article, nous couvrirons la façon dont nous pouvons créer une page d'accueil (ou une page de destination) personnalisée d'un site Web WordPress.
Il existe de nombreuses façons d'atteindre cet objectif, c'est juste uniforme .
Tout d'abord, nous terminerons ces étapes de base:
Ensuite, nous examinerons les sujets avancés suivants:
Maria Antonietta Perna a couvert Kirki dans un article précédent, si vous cherchez une bonne introduction sur le sujet.
Pour le souci de modularité, j'ai créé un dossier nommé bibliothèque et mis tous les fichiers de fonction à l'intérieur afin qu'il devienne facile de modifier uniquement le composant nécessaire. N'hésitez pas à alimenter mon thème chez Github. Dans ce thème, j'ai appelé tous les fichiers à l'intérieur du dossier de la bibliothèque à partir du fichier functions.php. J'ai utilisé le cadre de la fondation CSS pour ce thème.
Vous trouverez un fichier nommé thème-options.php dans le dossier de la bibliothèque que nous modifierons le plus dans ce tutoriel. Ouvrez ce fichier dans votre éditeur de texte préféré et préparez-vous à vous salir les mains!
Kirki n'est pas un cadre. Il s'agit d'une boîte à outils permettant aux développeurs WordPress d'utiliser le personnalisateur et de profiter de ses fonctionnalités avancées et de sa flexibilité en abstraction du code et en facilitant la création d'une expérience utilisateur magnifique et significative.
Nous pouvons utiliser Kirki pour ajouter des configurations, des champs, des sections et des panneaux au personnalisateur. Cela ne remplace pas l'API WordPress Customizer. L'API de Kirki est simplement un emballage pour les méthodes WordPress par défaut, simplifiant la syntaxe et vous permettant d'écrire plus avec moins de code et de profiter de certaines de ses fonctionnalités les plus avancées.
Téléchargez les fichiers Kirki à partir de GitHub et mettez-le dans un dossier nommé «Kirki» à l'intérieur de votre dossier de thème.
Tout d'abord, vous devrez créer une nouvelle configuration. Les configurations ont un ID unique et tous les champs qui utilisent la même config_id hériteront des propriétés de cette configuration.
Une fois que vous avez ajouté votre configuration, vous pouvez ensuite ajouter des panneaux, des sections et des champs. Veuillez noter que vous devez avoir au moins une section dans votre personnalisateur afin de pouvoir ajouter des champs. Les champs ne peuvent pas être «orphelins», ils doivent être regroupés dans une section.
Kirki vous permet de créer des configurations pour vos plugins ou thèmes et de les regrouper par un identifiant. Tous les champs qui sont ensuite liés à cet ID hériteront des propriétés de configuration.
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
Les panneaux sont des emballages pour les sections, un moyen de regrouper plusieurs sections.
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
sont des emballages pour les champs, un moyen de regrouper plusieurs champs. Tous les champs doivent appartenir à une section, aucun champ ne peut être un orphelin.
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Les champs sont les options telles que la zone de texte et la case à cocher qui sont fournies afin que les utilisateurs puissent saisir du texte personnalisé à l'intérieur. Chaque champ doit être associé à une section spécifique uniquement.
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>Assez de l'introduction. Maintenant, personnalisons notre thème!
La première chose que nous devrons faire est d'intégrer Kirki à notre thème. Pour ce faire, ouvrez votre fichier thème-options.php que vous trouverez dans le dossier de la bibliothèque et ajoutez-y le code suivant:
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
Le code ci-dessus relie les fichiers Kirki avec notre thème. Veuillez noter que comme mentionné précédemment, les fichiers que nous avons téléchargés à partir de la source GitHub devraient être placés dans un dossier nommé «Kirki» dans le dossier du thème.
Comme indiqué précédemment, nous devons créer une configuration que nous pouvons utiliser avec nos options. Ajoutez le code suivant à votre fichier thème-options.php.
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
Nous avons créé avec succès une configuration pour notre thème. Maintenant, nous utiliserions MC comme Option_name dans nos options.
Voyons maintenant la conception de notre page de destination. Notre page d'accueil sera composée des éléments suivants:
Nous couvrirons comment faire ces points un par un pour notre page d'accueil.
Toutes les options seront personnalisables via l'option WordPress Customizer. Vous devrez visiter l'apparence> Personnaliser l'option dans votre panneau d'administration WordPress pour personnaliser ces options.
Nous ne voudrions pas modifier notre fichier index.php car nous pouvons créer un modèle personnalisé pour notre première page. Dans ce modèle personnalisé, nous ajouterons notre code afin qu'il affiche notre première page personnalisée. Nous allons donc créer un modèle personnalisé qui affichera le contenu en première page.
Créez un nouveau fichier à l'intérieur de votre dossier de thème appelé homepage.php et ajoutez ce qui suit:
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
À l'intérieur de ce fichier, nous ajoutons le code pour afficher le curseur.
Nous devons régler cela sur notre première page statique. Mais, initialement, il n'y a pas de page qui utilisera ce modèle. Nous devrons créer une nouvelle page qui utilisera ce modèle. Suivez les étapes suivantes:
Maintenant, définissez l'option Front Page statique à l'intérieur du Customizer WordPress sur une page statique et sélectionnez ma page d'accueil personnalisée (ou si vous avez utilisé un autre nom pour la page, sélectionnez celui-ci) dans la liste déroulante en dessous.
N'oubliez pas de cliquer sur le bouton Enregistrer et publier du personnalisateur.
Vous ne remarquerez pas encore de modifications visibles dans le personnalisateur, car nous n'avons pas ajouté de code à notre fichier HomePage.php. Ouvrez HomePage.php et commençons à y ajouter du code!
Ajoutons le code suivant:
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
Le code ci-dessus inclut nos fichiers en-tête.php et footter.php à partir de notre répertoire de thème actuel. Si vous actualisez votre personnalisateur maintenant, vous ne verrez probablement que la navigation et les menus de pied.
Un curseur de produit montre vos produits les plus créatifs ou les plus vendus. Ce sont les produits qu'un visiteur voit d'abord sur votre site Web. La création d'un curseur de produit implique les étapes suivantes:
Comme mentionné précédemment, nous utilisons Flexslider pour montrer un curseur dans notre thème. Donc, d'abord, nous devrons télécharger Flexslider à partir de GitHub. Nous n'aurons qu'à utiliser le jQuery.flexslider.js, flexslider.css, le bg_play_pause.png et le dossier des polices. Copiez ces ressources dans votre dossier de thème.
Si vous travaillez avec le thème que j'ai fourni, vous pouvez copier jQuery.flexslider.js à l'intérieur du dossier du fournisseur, présent à l'intérieur du dossier JS, le fichier flexslider.css à l'intérieur du dossier CSS, le fichier bg_play_pause.png à l'intérieur à l'intérieur de Le dossier Images et le contenu du dossier Fonts (de la source GitHub de Flexslider) à l'intérieur du dossier FONTS qui est déjà à l'intérieur du dossier du thème.
Maintenant, nous devrons mettre ces fichiers avec notre thème. Nous allons ajouter le code d'essai suivant dans le fichier ENQUEUe-Scripts.php présent dans le dossier de la bibliothèque:
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
Ensuite, nous entrandons le fichier CSS à l'intérieur de notre style Enqueue.
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
Remarque
Tout d'abord, créons un panneau à l'intérieur de notre personnalisateur WordPress qui montrera les images, les liens et les légendes pour notre curseur.
Ouvrez à nouveau les options de thème.php et ajoutez-y le code suivant:
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Ensuite, nous devons ajouter une section nommée curseur de produit pour la page d'accueil. Cela peut être fait en ajoutant le code suivant au fichier thème-options.php:
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>Ensuite, nous ajoutons un champ pour afficher des images. Nous pouvons créer un champ d'image en utilisant le code suivant:
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
À travers le champ d'image, nous pouvons ajouter des images qui seront affichées dans le curseur. Nous créerons quatre autres champs similaires afin que nous puissions avoir au moins cinq images pour le curseur. Le code suivant ajoutera quatre autres champs d'image:
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
Nous pouvons télécharger des images via ces champs, puis les afficher sur la page de destination. ajoutant une image d'arrière-plan au curseur
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
Ces lignes récupèrent les images pour chaque diapositive que nous avions enregistrée dans notre personnalisateur. Dans notre prochaine étape, nous vérifierons si l'une de ces images existe ou non. Si l'un d'eux existe, nous appellerons notre curseur.
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
Cette ligne vérifie si une image à l'intérieur d'une diapositive existe ou non. Si la ou les images existent, alors Flexslider est appelé. Maintenant, nous allons faire écho aux images pour chaque diapositive en utilisant le code ci-dessous:
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Ensuite, il nous suffit d'ajouter le javascript pour le Flexslider à fonctionner.
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>Nous pouvons également ajouter une légende à nos diapositives. Nous devons simplement ajouter un nouveau champ dans notre personnalisateur qui acceptera la légende (texte) pour chaque diapositive et l'écho.
Ajoutons d'abord le champ.
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
Nous pouvons faire une chose similaire pour quatre autres diapositives.
Maintenant, dans le frontend, à l'intérieur de notre modèle de page d'accueil personnalisé, nous devons modifier un peu notre code pour afficher ces légendes.
Tout d'abord, nous devons stocker les légendes dans les variables:
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
Ensuite, remplacez le code suivant:
<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
avec le code suivant:
<span>// Add the header </span><span>get_header(); </span> <span>// Add the footer </span><span>get_footer();</span>
Description Les boîtes peuvent fournir des descriptions utiles sur nos produits. Ces boîtes sont positionnées juste en dessous du curseur afin qu'elle attire l'attention de nos visiteurs. Ces boîtes sont utiles si vous souhaitez montrer des détails sur vos produits. En règle générale, il peut y avoir trois à quatre boîtes (ou panneaux), mais vous pouvez en avoir plus si vous le souhaitez.
Dans ce tutoriel, nous créons trois boîtes et utilisons la propriété d'équaliseur de données du cadre CSS de fondation pour fournir une hauteur uniforme pour chaque panneau.
Allons au travail!
Au début, nous créons un panneau séparé pour afficher les cases description. Nous pouvons également fournir toutes les options dans le même panneau (dans le premier panneau que nous avons créé), mais c'est une bonne habitude de garder les choses séparées pour une utilisation ultérieure.
Nous devons ajouter le code suivant dans notre fichier de thème-options.php:
<span>// adding flexslider scripts file in the footer </span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true ); </span> <span>wp_enqueue_script( 'flexslider-js' );</span>
Nous allons maintenant créer deux sections pour la description du produit. Nous téléchargerons les images sur une section et ajouterons la description dans une autre section.
Tout d'abord, créez une section pour les images en utilisant le code suivant:
<span>// flexslider stylesheet </span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' ); </span> <span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>
Nous créons ensuite une section pour la description:
<span>// Adding the Product Slider panel </span><span>Kirki<span>::</span>add_panel( 'product_slider', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'Product Slider', 'magnificient' ), </span> <span>'description' => __( 'A slider to show the products', 'magnificient' ), </span><span>) );</span>
Ensuite, nous devons créer trois champs (car il y aura trois cases et donc trois images) pour l'entrée d'image et après cela, nous créerons trois champs pour les descriptions du produit. Le code ressemble à ce qui suit:
<span>// Adding the Product Slider for Homepage section </span><span>Kirki<span>::</span>add_section( 'product_slider_for_homepage', array( </span> <span>'title' => __( 'Product Slider for Homepage', 'magnificient' ), </span> <span>'description' => __( 'This slider will be shown on the front page of your website', 'magnificient' ), </span> <span>'panel' => 'product_slider', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Maintenant, nous devrons afficher la sortie sur notre modèle personnalisé en utilisant le code suivant.
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
Cela affiche la sortie pour la première boîte. De même, nous ferons de même pour les deux autres cases.
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
allez maintenant à votre personnalisateur et ajoutez les images et la description et vous verrez la page afficher votre entrée!
Cette pièce contient deux lignes où il y a une image d'un côté et une description de l'autre côté. Cette partie ou section de cette page peut être utilisée comme visuel pour les aspects les plus importants des produits aux visiteurs.
Créons d'abord un panneau. Nous l'appellerons les détails du produit.
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Nous ferons une section pour les champs en utilisant le code ci-dessous:
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>Semblable aux concepts précédemment couverts, nous créerons deux champs d'image et deux champs de zone de texte en utilisant le code ci-dessous.
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
Nous devons afficher la sortie sur le modèle de page d'accueil personnalisé. Ouvrez votre fichier HomePage.php et ajoutez le code suivant:
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
Faites aussi de même pour l'autre ligne. Ensuite, allez à votre personnalisateur et actualisez-le.
Cette section de la page est utilisée pour fournir des informations sur votre équipe. Cette section devrait être utile, car elle permet à nos visiteurs de savoir avec qui ils travailleront.
En règle générale, cette section pourrait être composée de nombreux membres de l'équipe. Dans cet exemple, nous ne fournirons que des options pour trois membres, mais vous pouvez l'étendre au besoin.
Nous allons créer un nouveau panneau et l'appeler la vitrine de l'équipe.
<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
Ensuite, nous allons créer une section qui a des options pour la vitrine de l'équipe.
<span>// Add the header </span><span>get_header(); </span> <span>// Add the footer </span><span>get_footer();</span>
Il y aura un total de six champs qui se composent de trois champs d'image pour les avatars et trois champs de texte pour les noms des membres.
<span>// adding flexslider scripts file in the footer </span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true ); </span> <span>wp_enqueue_script( 'flexslider-js' );</span>
Nous allons maintenant afficher les images et les noms des trois membres de l'équipe sur notre modèle de page d'accueil personnalisé. Ouvrez la page d'accueil.php et insérez ce qui suit:
Stockons d'abord les valeurs des images et le texte dans les variables.
<span>// flexslider stylesheet </span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' ); </span> <span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>
Ensuite, nous pouvons afficher chaque membre en utilisant le code ci-dessous:
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
Nous pouvons également récupérer le contenu d'une autre page dans notre page d'accueil. Ceci est particulièrement utile si vous souhaitez afficher des informations sur votre entreprise et que vous avez déjà une page à propos de nous. Vous n'avez pas besoin d'écrire à nouveau le même contenu. Vous pouvez simplement récupérer ce contenu en utilisant Kirki.
Nous pouvons créer un panneau séparé pour fournir cette option, faisons-le!
Voici le code du panneau:
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
et voici le code de la section:
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
Ensuite, nous allons afficher une liste déroulante à partir de l'endroit où l'administrateur peut choisir la page à afficher sur la première page. Nous pouvons utiliser l'option déroulante des pages déroulantes de Kirki.
Nous pouvons ajouter le champ en utilisant les éléments suivants:
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>Cela permet l'option à l'intérieur du personnalisateur WordPress. Nous pouvons maintenant modifier notre fichier HomePage.php pour afficher le contenu. Ouvrez ce fichier et copiez le code suivant où vous souhaitez que ce contenu soit affiché:
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
Créer une barre latérale pour votre thème est simple si vous suivez le codex WordPress. Plutôt que d'aller dans trop de détails ici, j'ajouterais simplement la barre latérale à ce thème en utilisant le code suivant à l'intérieur du fichier bibliothèque / widget-areas.php.
Ouvrez widget-areas.php et ajoutez ce qui suit:
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
Le fichier widget-areas.php situé à l'intérieur du dossier de la bibliothèque contient toutes les zones de widget pour ce thème, donc j'ai ajouté le code de la barre latérale là-bas.
Ensuite, nous devons simplement modifier notre fichier homepage.php pour afficher cette zone de widget sur cette page. Ouvrez votre page d'accueil.php et ajoutez le code suivant:
<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
Maintenant, lorsque vous ajoutez un widget dans cette barre latérale, il sera affiché sur la page frontale uniquement.
Dans ce tutoriel, j'ai expliqué comment créer une page de destination pour votre site Web WordPress à l'aide de la boîte à outils Kirki. Vous pouvez décorer cela avec un CSS et le personnaliser comme vous le souhaitez. Ce serait formidable d'avoir des idées intéressantes sur la mise en œuvre de cette boîte à outils et faites-le moi savoir dans la section des commentaires ci-dessous. Si vous rencontrez des problèmes ou si vous avez des questions, faites-le moi savoir et je serai heureux d'aider.
La création d'une première page statique dans WordPress est assez simple. Tout d'abord, vous devez vous connecter à votre tableau de bord WordPress. Ensuite, accédez aux «pages» et cliquez sur «Ajouter un nouveau». Nommez cette nouvelle page «Accueil» ou tout autre nom que vous préférez. Après cela, créez une autre nouvelle page et nommez-la «blog» ou «publics». Une fois que vous avez créé ces deux pages, accédez aux «paramètres», puis «lecture». Sous «vos écrans de page d'accueil», sélectionnez «une page statique». Dans les menus déroulants, définissez la «page d'accueil» sur la page que vous avez créée pour votre maison et la page «Posts» sur la page que vous avez créée pour votre blog ou vos articles. Cliquez sur «Enregistrer les modifications» pour finaliser vos paramètres.
WordPress offre une variété de façons de personnaliser votre page d'accueil. Vous pouvez utiliser le personnalisateur WordPress, qui vous permet de prévisualiser les modifications en temps réel. Pour y accéder, accédez à «Apparence», puis «personnaliser». Ici, vous pouvez modifier l'identité de votre site, les couleurs, l'image d'arrière-plan, les menus, les widgets, etc. Alternativement, vous pouvez utiliser un plugin Page Builder comme Elementor ou Beaver Builder. Ces plugins fournissent une interface glisser-déposer qui facilite la conception de votre page d'accueil exactement comment vous le souhaitez.
Lors de la conception d'un Page d'accueil WordPress, il est important de garder à l'esprit votre public et votre objectif. Assurez-vous que votre page d'accueil communique clairement qui vous êtes et ce que vous faites. Utilisez des images de haute qualité et des titres convaincants pour attirer l'attention des visiteurs. Gardez votre design propre et simple pour faciliter la navigation pour les visiteurs de votre site. Assurez-vous également que votre site est adapté aux mobiles, car un grand pourcentage de trafic Web provient des appareils mobiles.
pour ajouter un En-tête personnalisé sur votre page d'accueil WordPress, accédez à «l'apparence», puis «personnaliser». Cliquez sur «En-tête» ou «image d'en-tête», selon votre thème. De là, vous pouvez télécharger une nouvelle image, la recadrer à la taille souhaitée et ajouter tout texte ou lien souhaité. Cliquez sur «Enregistrer et publier» lorsque vous avez terminé.
L'ajout d'un pied de page personnalisé à votre page d'accueil WordPress est similaire à l'ajout d'une personnalité en-tête. Allez à «l'apparence», puis «personnaliser». Cliquez sur «pied de page» ou «paramètres de pied de page», selon votre thème. Ici, vous pouvez personnaliser le texte de votre pied de page, ajouter des widgets et modifier la disposition. Cliquez sur «Enregistrer et publier» lorsque vous avez terminé.
Pour ajouter un curseur à votre page d'accueil WordPress, vous aurez besoin d'un plugin de curseur comme Slider Revolution ou Smart Slider 3. Une fois que vous avez installé et que vous avez installé et que vous avez installé et que vous avez installé et que vous avez installé et que vous avez installé et Activé votre plugin choisi, vous pouvez créer un nouveau curseur, ajouter des images et personnaliser les paramètres. Ensuite, vous pouvez ajouter le curseur à votre page d'accueil à l'aide d'un shortcode, d'un widget ou d'une balise de modèle, en fonction du plugin.
à Ajoutez une section de blog à votre page d'accueil WordPress, assurez-vous d'abord d'avoir créé une page distincte pour vos articles de blog. Ensuite, allez à «l'apparence», puis «personnalisez». Cliquez sur «Paramètres de page d'accueil» et sélectionnez «Vos derniers messages» sous «vos affichages de page d'accueil». Cela affichera vos articles de blog les plus récents sur votre page d'accueil.
Pour ajouter des icônes de médias sociaux à votre page d'accueil WordPress, vous pouvez utiliser un Plugin de médias sociaux comme le widget des médias sociaux ou des icônes sociales simples. Une fois que vous avez installé et activé votre plugin choisi, vous pouvez ajouter vos liens de médias sociaux et choisir votre style et votre taille d'icône préférés. Ensuite, vous pouvez ajouter les icônes des médias sociaux à votre page d'accueil à l'aide d'un widget.
pour faire de votre page d'accueil WordPress Séo, à commencer par Choisir un thème propre et réactif. Utilisez un plugin SEO comme Yoast SEO pour optimiser votre balise de titre et votre description Meta. Incluez les mots clés pertinents dans votre contenu, mais évitez la farce des mots clés. Utilisez des balises d'en-tête pour structurer votre contenu et facilitez la lecture. Assurez-vous également que votre site se charge rapidement, car la vitesse de la page est un facteur de classement.
Pour ajouter un formulaire de contact à votre page d'accueil WordPress , vous aurez besoin d'un plugin de formulaire de contact comme le formulaire de contact 7 ou WPFORMS. Une fois que vous avez installé et activé votre plugin choisi, vous pouvez créer un nouveau formulaire de contact et personnaliser les champs selon les besoins. Ensuite, vous pouvez ajouter le formulaire de contact à votre page d'accueil à l'aide d'un shortcode.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Utilisation régulière de grep
Espace d'expression régulière
Les étincelles Douyin peuvent-elles être rallumées si elles sont éteintes depuis plus de trois jours ?
que signifie la concentration
Carte graphique de qualité passionnée
Le concept m2m dans l'Internet des objets
Comment utiliser split en python
utilisation de plusieurs fonctions
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
