Voici quelques réglages personnalisés intéressants pour wordPress 4, avec le thème twentyseventeen :
- Ajouter une zone de widgets en bas de page,
- Ajouter un menu dans le footer,
- Ajouter une barre d’icones sociaux et un lien de connexion,
- Avoir des langues différentes dans les espaces public (frontend) et privé (backend).
Afin de faire cela, on définit un thème enfant du thème 2017 de wordPress. On crée un répertoire 2017-child dans le répertoire des thèmes et à l’intérieur un fichier style.css avec les commentaires suivants :
style.css
|
1 2 3 4 5 6 7 8 |
/* Theme Name: xavier bs 2017 child Description: Twenty Seventeen Child Theme Author: xavier_bs Author URI: http://murviel-info.com Template: twentyseventeen Text Domain: xavierbs */ |
Cela suffit pour créer un thème enfant. On crée ensuite un fichier functions.php afin, pour commencer, d’intégrer les feuilles de styles du thème enfant et la feuille de style du thème parent.
functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php define( 'CHILD_THEME_URI', get_stylesheet_directory_uri() ); define( 'CHILD_THEME', get_stylesheet_directory() ); // Favicons // frontend favicon add_action( 'wp_head', 'xbs_favicon' ); function xbs_favicon() { echo '<link rel="icon" href="' . CHILD_THEME_URI . '/images/favicon.ico?v=1" />' . "\n"; } // backend favicon add_action( 'admin_head', 'xbs_backend_favicon' ); function xbs_backend_favicon() { echo '<link rel="icon" href="' . CHILD_THEME_URI . '/images/favicon_admin.ico?v=1" />' . "\n"; } // Enqueue Style and js add_action( 'wp_enqueue_scripts', 'xbs_enqueue_files' ); function xbs_enqueue_files() { // Enqueue the parent stylesheet wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // Enqueue the child stylesheets wp_enqueue_style( 'xbs_fonts', CHILD_THEME_URI . '/css/fonts.css' ); wp_enqueue_style( 'xbs_fontastic', 'https://file.myfontastic.com/Your_Code/icons.css' ); wp_enqueue_style( 'xbs_child_style', CHILD_THEME_URI . '/css/style.css' ); wp_enqueue_style( 'fancybox_css', CHILD_THEME_URI . '/fancybox-3.0/dist/jquery.fancybox.min.css' ); wp_enqueue_script( 'fancybox_js', CHILD_THEME_URI . '/fancybox-3.0/dist/jquery.fancybox.min.js', array( 'jquery' ), '3.0', true ); wp_enqueue_script( 'xbs_custom_js', CHILD_THEME_URI . '/js/xbs_custom.js', array( 'jquery' ), '1.0', true ); // aJax localisation wp_localize_script( 'xbs_custom_js', 'ajaxurl', admin_url( 'admin-ajax.php' ) ); } // aJax files require_once( CHILD_THEME . '/ajax/manage_ajax.php' ); // Add custom css, js to back office add_action( 'admin_enqueue_scripts', 'xbs_custom_admin_scripts' ); function xbs_custom_admin_scripts() { wp_enqueue_style( 'admin_style', CHILD_THEME_URI . '/css/xbs_custom-admin.css' ); wp_enqueue_script( 'admin_js', CHILD_THEME_URI . '/js/xbs_custom-admin.js', array( 'jquery' ), '', true ); } /* tinymce editor */ add_filter( 'tiny_mce_before_init', 'xbs_tinymce_init' ); function xbs_tinymce_init( $init ) { if( is_admin() ) { $css = explode( ',', $init['content_css'] ); $content_css = ''; foreach( $css as $style ) { if( false === strpos( $style, 'editor-style.css' ) ) { $content_css .= $style . ','; } } $content_css .= CHILD_THEME_URI . '/css/fonts.css,'; $content_css .= CHILD_THEME_URI . '/css/editor_style.css'; $init['content_css'] = $content_css; // Allow all elements and all attributes $ext = '*[*],script[language|type|src],style'; // Add to extended_valid_elements if it already exists if ( isset( $init['extended_valid_elements'] ) ) { $init['extended_valid_elements'] .= ',' . $ext; } else { $init['extended_valid_elements'] = $ext; } $init['toolbar2'] .= 'superscript, subscript, fontselect, fontsizeselect'; } return $init; } |
Ce code est un extrait du début d’un fichier functions.php permettant d’inclure la feuille de style du thème parent et celles du thème enfant (que l’on place dans un répertoire css) et les scripts jQuery (frontend et backend placées dans le répertoire js), ainsi que la définition des favicons et des options de l’éditeur visuel tinyMCE. Le répertoire images contient les fichiers images nécessaires au thème. Au fur et à mesure, on place dans le répertoire du thème enfant les scripts du thème parent que l’on veut modifier. Ainsi, lors d’une mise à jour du thème parent, les modifications et améliorations du thème sont préservées.
Ajouter une zone de widgets :
On ajoute cette zone en appelant register_sidebar(). On ajoute à functions.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 3rd Footer widget area add_action( 'widgets_init', 'xbs_widgets_init', 11 ); function xbs_widgets_init() { register_sidebar( array( 'name' => __( 'Footer 3', 'xavierbs' ), 'id' => 'sidebar-4', 'description' => __( 'Add widgets here to appear in your footer.', 'xavierbs' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } |
Le thème parent est twentyseventeen (2017) qui dispose d’une zone de widgets dans la barre latérale et de deux zones de widgets dans le footer nommées sidebar-1, sidebar-2, sidebar-3. On nomme la nouvelle zone sidebar-4. On ajoute le paramètre 11 à add_action() pour que l’ajout du widget se fasse après les définitions de widgets du thème parent (la priorité par défaut est 10, et les fonctions du thème parent s’exécutent normalement après celles du thème enfant).
on obtient alors ceci dans l’admin des widgets :
On recopie le dossier template-parts dans le répertoire de son thème enfant et l’on modifie le script templates-parts/footer/footer-widgets.php en ajoutant sidebar-4 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) : ?> <aside class="widget-area" role="complementary"> <?php if ( is_active_sidebar( 'sidebar-2' ) ) { ?> <div class="widget-column footer-widget-1"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div> <?php } if ( is_active_sidebar( 'sidebar-3' ) ) { ?> <div class="widget-column footer-widget-2"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div> <?php } if ( is_active_sidebar( 'sidebar-4' ) ) { ?> <div class="widget-column footer-widget-3"> <?php dynamic_sidebar( 'sidebar-4' ); ?> </div> <?php } ?> </aside><!-- .widget-area --> <?php endif; ?> |
Il suffit alors d’ajouter quelques règles CSS afin de changer l’affichage. Les deux zones de widgets du thème parent 2017 sont affichées avec des règles float: right et float: left. Je choisis d’utiliser les flexbox CCS3 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.site-footer .widget-area { display: flex; flex-wrap: wrap; justify-content: center; } .site-footer .widget-column { float: none !important; width: auto !important; min-width: 250px; max-width: 350px; margin: 0 1.5em; } |
Ajouter une zone de menu :
Le thème 2017 possède deux menus : un menu en haut de la page qui se contracte sur les petits écrans, et qui reste fixe en haut de la page lors du défilement ; et un menu destiné au préalable aux icones sociaux, situé dans le bas du footer. L’objectif est donc de rajouter un emplacement de menu juste au dessus du footer.
On enregistre donc un nouveau menu dans functions.php :
|
1 2 3 4 5 |
// Footer menu function xbs_footer_register_menu() { register_nav_menu( 'footer', __( 'Footer Menu', 'xavierbs' ) ); } add_action( 'after_setup_theme', 'xbs_footer_register_menu', 11 ); |
Ces quelques lignes suffisent à enregistrer un nouveau menu, que l’on définit dans l’espace privé :
Le menu étant enregistré et défini, il suffit de le placer dans le footer de wordPress et de le styliser.
On ajoute au fichier footer.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
</div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="wrap"> <?php // Footer Menu if ( has_nav_menu( 'footer' ) ) { get_template_part( 'template-parts/navigation/navigation', 'footer' ); } get_template_part( 'template-parts/footer/footer', 'widgets' ); if ( has_nav_menu( 'social' ) ) : ?> <nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>"> <?php wp_nav_menu( array( 'theme_location' => 'social', 'menu_class' => 'social-links-menu', 'depth' => 1, 'link_before' => '<span class="screen-reader-text">', 'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ), ) ); ?> </nav><!-- .social-navigation --> <?php endif; get_template_part( 'template-parts/footer/site', 'info' ); ?> </div><!-- .wrap --> </footer><!-- #colophon --> </div><!-- .site-content-contain --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html> |
Et l’on crée un fichier navigation-footer.php dans le répertoire template-parts/navigation/ et on écrit le code :
navigation-footer.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php /** * Displays footer menu * xavierbs 2017 Child Theme /* to open -> menu icon: icon-bars to close -> menu icon: icon-close-round */ ?> <nav id="footer-nav" class="footer-navigation responsive-menu" role="navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'xavierbs' ); ?>"> <button class="xbs-toggle icon-bars" aria-controls="footer-menu" aria-expanded="false"></button> <?php wp_nav_menu( array( 'container' => false, 'menu_class' => 'flex-menu footer-menu', 'theme_location' => 'footer', 'menu_id' => 'footer-menu', ) ); ?> </nav><!-- #footer-nav --> |
Les classes icon-bars et xbs-toogle sont destinées à être utilisées par le responsive design. L’appel à wp_nav_menu() suffit pour mettre en place le menu.
Barre sociale et connexion :
Il s’agit d’ajouter des liens vers les réseaux sociaux du site et un bouton de connexion/deconnexion. Cette barre est placée en position: fixed, en haut à droite de la page. On pourrait utiliser la barre de menus liens sociaux déjà présente dans le thème 2017, mais je préfère disposer d’un fichier que je peux inclure dans n’importe quel thème.
On crée un fichier social-sign-icons.php que l’on inclut dans le fichier header.php du thème. Les classes des items de listes proviennent d’une police d’icones Fontastic. Les comptes Facebook, Twitter et Google+ sont ceux d’un utilisateur que l’on recherche. Pour mon site, je mets mon pseudo dans la recherche. Si l’on veut d’autres comptes, il suffit de créer un utilisateur avec les metas données désirées.
social-sign-icons.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?php /* * Social icons and signin button */ $user = get_users( array( 'search' => 'Your Search: id, nickname, longname, URL...' ) ); $userID = $user[0]->data->ID; $user_meta = get_user_meta( $userID ); $urls = array( 'facebook' => $user_meta['facebook'][0], 'twitter' => 'https://twitter.com/' . $user_meta['twitter'][0], 'googleplus' => $user_meta['googleplus'][0] ); ?> <ul class="social-icons"> <li class="social-icon social-facebook"> <a href="<?php echo $urls['facebook']; ?>" class="icon-facebook-official"> <span>Facebook</span> </a> </li> <li class="social-icon social-twitter"> <a href="<?php echo $urls['twitter']; ?>" class="icon-twitter"> <span>Twitter</span> </a> </li> <li class="social-icon social-google-plus"> <a href="<?php echo $urls['googleplus']; ?>" class="icon-google-plus"> <span>Google</span> </a> </li> <li class="social-icon social-rss"> <a href="/feed/" class="icon-rss"> <span>RSS</span> </a> </li> <!-- Connexion --> <li class="social-icon xbs-connexion"> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo wp_logout_url( get_permalink() ); ?>" class="icon-sign-out"></a> <?php else : ?> <a href="<?php echo wp_login_url( get_permalink() ); ?>" class="icon-sign-in"></a> <?php endif; ?> </li> </ul> |
et on include ce fichier dans header.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php /** * The header for our theme * ... */ ?><!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a> <header id="masthead" class="site-header" role="banner"> <?php require_once CHILD_THEME . '/inc/social-sign-icons.php'; ?> <?php get_template_part( 'template-parts/header/header', 'image' ); ?> <?php if ( has_nav_menu( 'top' ) ) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?> </div><!-- .wrap --> </div><!-- .navigation-top --> <?php endif; ?> </header><!-- #masthead --> <?php // If a regular post or page, and not the front page, show the featured image. if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) : echo '<div class="single-featured-image-header">'; the_post_thumbnail( 'twentyseventeen-featured-image' ); echo '</div><!-- .single-featured-image-header -->'; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> |
Le fichier social-sign-icons.php est placé dans le répertoire inc du thème enfant.
Les règles CSS de l’exemple capturé :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Social icons */ ul.social-icons { position: fixed; right: 0; z-index: 10; display: flex; /* justify-content: flex-end; */ list-style-type: none; margin: 5px; /* width: 1400px; */ } ul.social-icons li { margin: 5px; } ul.social-icons li a:hover { transform: scale(1.3) translateY(2px); } ul.social-icons a { display: inline-block; transition: transform 0.1s ease-out; color: #FFFFFF; } ul.social-icons a span { display: none; } |
Si l’on ne désire plus le Social Links Menu de base du thème twentyseventeen, on peut compléter la fonction de création de menu du footer en désenregistrant le menu social :
|
1 2 3 4 5 6 |
// Footer menu function xbs_footer_register_menu() { register_nav_menu( 'footer', __( 'Footer Menu', 'xavierbs' ) ); unregister_nav_menu( 'social' ); } add_action( 'after_setup_theme', 'xbs_footer_register_menu', 11 ); |
Et l’on efface le menu Social Links Menu dans le backend.
Langages public et privé différents :
Depuis la version 4.1, cette fonctionnalité est incluse dans wordPress. On sélectionne la langue du site dans Settings e General, et on règle la langue de l’espace public. Pour la langue de l’espace admin, cela se fait pour chaque utilisateur. On va dans Users et l’on règle pour chaque utilisateur la langue du backend si celle-ci est différente de la langue du site. La liste de sélection propose les langages disponibles sur le serveur, et les langages à télécharger si besoin.
Et hop, quelques réglages utiles et bien intéressants pour wordPress.
Bonjour
merci beaucoup pour cet article très complet et très intéressant.
J’avais un problème avec twenty-seventeen : j’avais mis deux zones de pieds de page et ils ne superposaient pas pour un format smartphone. J’ai utilisé le code que tu nous as donné à la fin de la partie « Ajouter une zone de widgets », et j’ai remplacé min-width: 250px par min-width: 200px.
Maintenant les deux pieds de page se superposent bien pour les petits écrans.
Je garde ce site dans mes marques-pages. Bonne journée