Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


En raison de notre feuille de route produit, nous avons passé beaucoup de temps à traiter le sujet ces derniers jours. API de personnalisation WordPress et plus précisément, avec l’ajout d’options de personnalisation de thème que nous voulons mais qui ne sont pas encore là. Dans ce didacticiel, nous allons vous montrer comment utiliser le personnalisateur de thème pour donner à l’utilisateur final un contrôle complet sur votre codage personnalisé.

Créer un éditeur de lien de pied de page

Un sujet qui revient sans cesse dans les forums Divi / Extra: Comment changer les liens de pied de page? Pour la plupart, j’ai encouragé les utilisateurs à installer un sous-sujet et à utiliser un fichier footer.php personnalisé. Changez simplement le code et vous êtes prêt à partir. Les deux problèmes avec ceci sont:

  1. Et si le client souhaite le modifier à nouveau?
  2. Que faire si Divi met à jour le pied de page et que je perds la fonctionnalité à moins que je ne mette à jour mon fichier enfant footer.php?

Dans les deux cas, la création / la maintenance de nombreux sites Web peut devenir ennuyeuse.

Ma nouvelle approche consistait donc à utiliser JS pour modifier les liens de pied de page. De cette façon, vous n’avez plus besoin du fichier footer.php inclus dans votre thème enfant (sauf si vous modifiez également un autre contenu), et nous pouvons mettre ce code dans le fichier functions.php et enregistrer une nouvelle option de personnalisation pour faire le sortie à contrôler. Le script suivant existe sous une forme ou une autre depuis Divi 2.2, mais c’est toujours un plaisir.

jQuery(document).ready(function(){
jQuery("#footer-info").text(' ');
jQuery('<p id="footer-info">Designed By <a href="http://eleganthemes.com/">Elegant Themes</a> | Powered By <a href="http://wordpress.org/">WordPress</a></p>').insertAfter("#footer-info");
});

L’ID «footer-info» est recherché et le texte actuel est vidé. Le texte personnalisé est ensuite ajouté à sa place. Vous pouvez modifier les liens et le texte dans le code ci-dessus et cela écrasera ce qui s’y trouve actuellement. La bonne chose à ce sujet est que c’est exactement la même chose pour Extra aussi. Nous avons donc un scénario dans lequel une solution unique convient à tous.

Vous avez toujours le problème que ce n’est pas exactement un changement facile pour quelqu’un qui n’aime pas plonger dans le code. Nous allons donc échanger le texte, les liens et le séparateur de lien contre des variables PHP auxquelles nous pouvons ensuite ajouter des options de personnalisation. Cela semble compliqué, mais suivez-le.

Les variables ne sont que des conteneurs pour stocker des informations stockées dans un emplacement différent. Par example:

<?php
$black = "#010101";
?>
<style type="text/css">
#main-header {
    background: <?php echo $black; ?>;
}

Dans cet exemple, nous avons remplacé la valeur de couleur dans le CSS par une variable. Nous pourrions utiliser cette variable $ black dans tout notre document et n’avons besoin de changer qu’un seul endroit, ce qui correspond à la valeur. Voyons maintenant comment nous pouvons affecter des variables à notre code JS.

Nous allons remplacer 7 informations par des variables.

function ds_tutorial_footer() {

$footer_one="Designed By";
$footer_two = 'Elegant Themes';
$footer_link_one="http://www.elegantthemes.com/";
$footer_three="Powered By";
$footer_four="WordPress";
$footer_link_two = 'https://wordpress.org/';
$footer_divider="|";

?>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#footer-info").text(' ');
jQuery('<p id="footer-info"><?php echo $footer_one; ?> <a href="https://divi.space/tutorials/adding-options-to-the-theme-customizer/<?php echo $footer_link_one; ?>"><?php echo $footer_two; ?></a> <?php echo $footer_divider; ?> <?php echo $footer_three; ?> <a href="<?php echo $footer_link_two; ?>"><?php echo $footer_four; ?></a></p>').insertAfter("#footer-info");
});
</script>

<?php
}

add_action( 'wp_head', 'ds_tutorial_footer' );

Comme vous pouvez le voir, dans le script JS, nous avons remplacé chaque lien, le texte avant chaque lien et le séparateur de lien par des variables et avons entré leur texte par défaut en tant que valeurs de variable pour le moment.

L’étape suivante consiste à enregistrer une nouvelle option de personnalisation que l’utilisateur final peut utiliser pour mettre à jour la valeur associée à chacune de ces variables avec n’importe quelle valeur.

Enregistrer une nouvelle option de personnalisation

function ds_tutorial_links_editor($wp_customize) {
 
 $wp_customize->add_panel( 'footer_links_option', array(
 'priority' => 30,
 'capability' => 'edit_theme_options',
 'title' => __('Edit Footer Links', footer_links_title),
 'description' => __('Customize the login of your website.', footer_links_title),
 ));

C’est ainsi que nous enregistrons un nouveau panel. Un panneau est le niveau supérieur disponible dans le personnalisateur de thème et ressemble à ceci:

Dans la configuration du panneau, nous devons transmettre certaines informations:

add_panel = Donnez un nom au panneau.

Priorité = où nous souhaitons qu’il apparaisse dans la liste des autres champs d’options de rubrique. Ajustez ce nombre pour le déplacer de haut en bas dans la liste.

Capacité = Laissez l’option « Modifier les options du thème ».

Le titre et la description doivent être explicites. La description s’affiche lorsque vous déplacez la souris sur le petit point d’interrogation à côté du titre.

Chaque panneau est composé d’une section ou d’une série de sections. Nous allons simplement ajouter une section intitulée « Editeur de liens de pied de page ».

 $wp_customize->add_section('ds_footer_links_section', array(
 'priority' => 5,
 'title' => __('Footer Links Editor', footer_links_title),
 'panel' => 'footer_links_option',
 ));

Les sections ont leurs propres informations que nous devons également inclure.

Priorité = Où il doit apparaître dans la liste des autres sections du panneau de contrôle. Puisque nous n’en enregistrons qu’un seul, ce n’est pas un gros problème.

Titre = explicite

Panel = Quel est le nom du panel auquel la section doit être ajoutée?

Ainsi, un panneau contient une section / sections et une section contient des paramètres. Voici à quoi ressemblent nos paramètres:

Chaque option a des paramètres et des contrôles. C’est ainsi qu’ils sont embauchés …

 // Before Link One
 $wp_customize->add_setting('ds_footer_links_before_link_one', array(
 'default' => 'Designed By',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_before_link_one', array(
 'label' => __('Text Before First Link', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 5,
 'settings' => 'ds_footer_links_before_link_one'
 ));

Et encore une fois, nous devons ajouter des informations pour que notre option fonctionne –

Nous devons nommer le paramètre et le contrôle. Nous devons attribuer à quoi le texte standard devrait ressembler dans notre boîte et quel type de boîte il devrait être. Le personnalisateur dispose d’un certain nombre d’options prédéfinies telles que le sélecteur de couleurs, la zone de texte, les cases à cocher, etc. Ici.

Nous pouvons également organiser les contrôles dans chaque section avec priorité. Nos sept commandes ont chacune une priorité différente, de 5 (en haut) à 35 (en bas).

Voici à quoi ressemblent nos panneaux, zones, paramètres et commandes:

function ds_tutorial_links_editor($wp_customize) {
 
 $wp_customize->add_panel( 'footer_links_option', array(
 'priority' => 30,
 'capability' => 'edit_theme_options',
 'title' => __('Edit Footer Links', footer_links_title),
 'description' => __('Customize the login of your website.', footer_links_title),
 ));
 
 $wp_customize->add_section('ds_footer_links_section', array(
 'priority' => 5,
 'title' => __('Footer Links Editor', footer_links_title),
 'panel' => 'footer_links_option',
 ));
 // Before Link One
 $wp_customize->add_setting('ds_footer_links_before_link_one', array(
 'default' => 'Designed By',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_before_link_one', array(
 'label' => __('Text Before First Link', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 5,
 'settings' => 'ds_footer_links_before_link_one'
 ));
 // Link One 
 $wp_customize->add_setting('ds_footer_links_link_one', array(
 'default' => 'Elegant Themes',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_link_one', array(
 'label' => __('First Link Text', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 10,
 'settings' => 'ds_footer_links_link_one'
 ));
 // Link One URL 
 $wp_customize->add_setting('ds_footer_link_one_url', array(
 'default' => "https://divi.space/tutorials/adding-options-to-the-theme-customizer/#",
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_link_one_url', array(
 'label' => __('First Link URL', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 15,
 'settings' => 'ds_footer_link_one_url'
 ));
// Before Link Two
 $wp_customize->add_setting('ds_footer_links_before_link_two', array(
 'default' => 'Powered By',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_before_link_two', array(
 'label' => __('Text Before Second Link', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 20,
 'settings' => 'ds_footer_links_before_link_two'
 ));
 // Link Two
 $wp_customize->add_setting('ds_footer_links_link_two', array(
 'default' => 'WordPress',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_link_two', array(
 'label' => __('Second Link Text', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 25,
 'settings' => 'ds_footer_links_link_two'
 ));
 // Link Two URL 
 $wp_customize->add_setting('ds_footer_link_two_url', array(
 'default' => '###',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 $wp_customize->add_control('ds_footer_link_two_url', array(
 'label' => __('Second Link URL', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 30,
 'settings' => 'ds_footer_link_two_url'
 ));
 // Footer Divider 
 $wp_customize->add_setting('ds_footer_link_divider', array(
 'default' => '|',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 $wp_customize->add_control('ds_footer_link_divider', array(
 'label' => __('Footer Link Divider', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 35,
 'settings' => 'ds_footer_link_divider'
 ));
}

add_action('customize_register', 'ds_tutorial_links_editor');

La partie importante que nous n’avons pas mentionnée est de compléter par une action et d’enregistrer notre nouvelle option de personnalisation.

Ajout de variables aux paramètres de personnalisation

Nous y sommes donc presque. Nous avons enregistré un nouveau panneau de personnalisation avec sept nouvelles «options» prêtes à être ajoutées aux sept variables précédemment créées qui à leur tour remplissent le contenu de notre nouveau texte de pied de page basé sur JS. Voici comment nous éditons nos variables d’avant:

// before
$footer_one="Designed By";

//after
$footer_one = get_option('ds_footer_links_before_link_one','Designed By');

Voici quelques choses en cours:

Tout d’abord, nous avons dit à la variable d’obtenir ses données à partir de l’option ‘ds_footer_links_before_link_one’ que nous avons créée précédemment. Si vous faites défiler vers le haut, vous pouvez voir que c’est le nom que nous avons donné au premier paramètre et contrôle dans notre nouveau tableau d’options de personnalisation.

Ensuite, nous avons ajouté le texte «Conçu par» à l’emplacement secondaire. Cela signifie que la variable ne l’affichera que jusqu’à ce que nous la remplacions en la mettant à jour dans les options du personnalisateur.

Nous pouvons parcourir n’importe laquelle de nos variables et les lier à leur option, puis modifier la valeur de la variable dans le personnalisateur! Parfait pour ceux qui ne veulent pas que leurs clients fouillent dans le code pour apporter des modifications.

Si vous souhaitez ajouter cette fonctionnalité à votre thème enfant, voici le code complet de votre fichier functions.php.

<?php

// ====================== Footer Editor ======================

function ds_footer_links_editor($wp_customize) {
 
 $wp_customize->add_panel( 'footer_links_option', array(
 'priority' => 30,
 'capability' => 'edit_theme_options',
 'title' => __('Edit Footer Links', footer_links_title),
 'description' => __('Customize the login of your website.', footer_links_title),
 ));
 
 $wp_customize->add_section('ds_footer_links_section', array(
 'priority' => 5,
 'title' => __('Footer Links Editor', footer_links_title),
 'panel' => 'footer_links_option',
 ));
 // Before Link One
 $wp_customize->add_setting('ds_footer_links_before_link_one', array(
 'default' => 'Designed By',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_before_link_one', array(
 'label' => __('Text Before First Link', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 5,
 'settings' => 'ds_footer_links_before_link_one'
 ));
 // Link One 
 $wp_customize->add_setting('ds_footer_links_link_one', array(
 'default' => 'Elegant Themes',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_link_one', array(
 'label' => __('First Link Text', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 10,
 'settings' => 'ds_footer_links_link_one'
 ));
 // Link One URL 
 $wp_customize->add_setting('ds_footer_link_one_url', array(
 'default' => "https://divi.space/tutorials/adding-options-to-the-theme-customizer/#",
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_link_one_url', array(
 'label' => __('First Link URL', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 15,
 'settings' => 'ds_footer_link_one_url'
 ));
// Before Link Two
 $wp_customize->add_setting('ds_footer_links_before_link_two', array(
 'default' => 'Powered By',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_before_link_two', array(
 'label' => __('Text Before Second Link', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 20,
 'settings' => 'ds_footer_links_before_link_two'
 ));
 // Link Two
 $wp_customize->add_setting('ds_footer_links_link_two', array(
 'default' => 'WordPress',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));

 $wp_customize->add_control('ds_footer_links_link_two', array(
 'label' => __('Second Link Text', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 25,
 'settings' => 'ds_footer_links_link_two'
 ));
 // Link Two URL 
 $wp_customize->add_setting('ds_footer_link_two_url', array(
 'default' => '###',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 $wp_customize->add_control('ds_footer_link_two_url', array(
 'label' => __('Second Link URL', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 30,
 'settings' => 'ds_footer_link_two_url'
 ));
 // Footer Divider 
 $wp_customize->add_setting('ds_footer_link_divider', array(
 'default' => '|',
 'type' => 'option',
 'capability' => 'edit_theme_options',
 ));
 
 $wp_customize->add_control('ds_footer_link_divider', array(
 'label' => __('Footer Link Divider', footer_links_title),
 'section' => 'ds_footer_links_section',
 'type' => 'option',
 'priority' => 35,
 'settings' => 'ds_footer_link_divider'
 ));
}

add_action('customize_register', 'ds_footer_links_editor');

function ds_new_bottom_footer() {
 
$footer_one = get_option('ds_footer_links_before_link_one','Designed By');
$footer_two = get_option('ds_footer_links_link_one','Elegant Themes');
$footer_link_one = get_option('ds_footer_link_one_url','http://www.elegantthemes.com/');
$footer_three = get_option('ds_footer_links_before_link_two','Powered By');
$footer_four = get_option('ds_footer_links_link_two', 'WordPress');
$footer_link_two = get_option('ds_footer_link_two_url', 'https://wordpress.org/');
$footer_divider = get_option('ds_footer_link_divider','|');
 
?>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#footer-info").text(' ');
jQuery('<p id="footer-info"><?php echo $footer_one; ?> <a href="https://divi.space/tutorials/adding-options-to-the-theme-customizer/<?php echo $footer_link_one; ?>"><?php echo $footer_two; ?></a> <?php echo $footer_divider; ?> <?php echo $footer_three; ?> <a href="<?php echo $footer_link_two; ?>"><?php echo $footer_four; ?></a></p>').insertAfter("#footer-info");
});
</script>

<?php
}

add_action( 'wp_head', 'ds_new_bottom_footer' );
?>

J’espère que vous avez trouvé cela utile. 🙂 Faites-moi savoir dans les commentaires si vous l’utilisez.



Source link

Recent Posts