13/12/2020

Comment customiser l’interface du backend de WordPress en fonction des rôles d’utilisateurs

Pour un client qui a des éditeurs dans différentes organismes, il fallait impérativement que chaque éditeur ne voie que ce qu’il pouvait modifier.

J’ai donc trouvé des scripts à mettre dans le fichier functions.php qui me permettaient d’ajouter et supprimer des éléments dans le menu de l’admin.

Mais il me fallait ensuite encore cacher différents éléments sur toutes les pages. J’ai lors trouvé un script me permettant d’ajouter une feuille de style pour l’interface d’admin dans le thème du site ! Cela permet donc que le fichier css ne soit pas écrasé lors de la màj de WordPress.

Ensuite j’ai encore du trouver un script me permettant de mettre une classe dans le body de l’admin avec le rôle de l’utilisateur connecté. Cela me permet donc de m’adresser à chaque rôle individuellement dans mon fichier CSS.

Je compile ci-dessous tous les scripts tels que je les ai adaptés. Dans mes commentaires se trouvent les liens vers les sources originales.

Ajouter des éléments dans le menu


// add pages to admin menu
//https://stackoverflow.com/questions/39978561/how-to-add-custom-link-on-wordpress-admin-sidebar
add_action( 'admin_menu', 'linked_url' );
function linked_url() {
add_menu_page( 'linked_url', 'FAQ', 'read', '/post.php?post=29&amp;amp;amp;action=edit', '', 'dashicons-text', 50 );
add_menu_page( 'linked_url', 'Liens utiles', 'read', '/post.php?post=49&amp;amp;amp;action=edit', '', 'dashicons-admin-links', 55 );
// on va ajouter le lien vers la page d'accueil uniquement pour éditeur plus bas
}

// si lien externe dans admin menu
// add_action( 'admin_menu' , 'linkedurl_function' );
// function linkedurl_function() {
// global $menu;
// $menu[1][2] = "http://www.example.com";
// }

&amp;amp;amp;nbsp;

Ajouter un séparateur dans le menu


add_action( 'admin_menu', 'add_admin_menu_separator' );
function add_admin_menu_separator()
{
add_menu_page( '', '', 'read', 'wp-menu-separator', '', '', '21' );
add_menu_page( '', '', 'read', 'wp-menu-separator', '', '', '56' );
// add_submenu_page( 'edit.php?post_type=page', 'wp-menu-separator', '', 'read', '11', '' );
}

Remove elements from editor menu

// remove elements from editor menu

function remove_menus(){
// get current login user's role
$roles = wp_get_current_user()->roles;

// test role
if( !in_array('editor',$roles)){
return;
}

//remove menu from site backend.
remove_menu_page( 'index.php' ); //Dashboard
remove_menu_page( 'edit.php' ); //Posts
remove_menu_page( 'upload.php' ); //Media
remove_menu_page( 'edit-comments.php' ); //Comments
remove_menu_page( 'themes.php' ); //Appearance
remove_menu_page( 'plugins.php' ); //Plugins

// remove_menu_page( 'profile.php' ); //profile
// remove_menu_page( 'users.php' ); //Users
remove_menu_page( 'tools.php' ); //Tools
remove_menu_page( 'options-general.php' ); //Settings
// remove_menu_page( 'edit.php?post_type=page' ); //Pages
// remove_menu_page('edit.php?post_type=testimonial'); // Custom post type 1
// remove_menu_page('edit.php?post_type=homeslider'); // Custom post type 2

remove_menu_page( 'WPML' );
remove_menu_page( 'Traductions' );
remove_menu_page( 'wpml_manage_languages' );
remove_menu_page( 'sitepress-multilingual-cms/menu/languages.php' );
remove_menu_page( 'admin.php?page=wpml-translation-management/menu/translations-queue.php' );
remove_menu_page( 'admin.php' );
// remove_menu_page( '#toplevel_page_wpml-translation-management-menu-translations-queue' );

// ajout lien vers page d'accueil
add_menu_page( 'linked_url', 'Page d\'accueil', 'read', '/post.php?post=5&action=edit', '', 'dashicons-admin-home', 0 );
add_menu_page( 'linked_url', 'Page Contact', 'read', '/post.php?post=286&action=edit&lang=fr', '', 'dashicons-email-alt', 30 );

}
add_action( 'admin_menu', 'remove_menus' , 100 );

// add lang class to <body>

function append_language_class($classes) {
$classes[] = 'lang-' . ICL_LANGUAGE_CODE;
return $classes;
}
add_filter('body_class', 'append_language_class');

/**
* Enqueue a script in the WordPress admin on edit.php.
*
* @param int $hook Hook suffix for the current admin page.
*/
function wpdocs_selectively_enqueue_admin_script( $hook ) {
if ( 'post.php' != $hook ) {
return;
}
wp_enqueue_script( 'my_custom_script', get_stylesheet_directory_uri() . '/js/scripts-admin.js', array(), '1.0' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_selectively_enqueue_admin_script', PHP_INT_MAX );


// pour pouvoir styliser admin (et masquer éléments)
// custom admin style sheet
function my_admin_head() {
echo '<link href="'.get_stylesheet_directory_uri().'/css/wp-admin.css" rel="stylesheet" type="text/css">';
}
add_action('admin_head', 'my_admin_head');

13/12/2020

Créer son propre thème WordPress à partir de zéro

Ce petit tuto a pour but de vous permettre de créer en quelques minutes seulement votre propre thème en WordPress. Ce tuto s’adresse à tout public qui est à l’aise avec le HTML & le CSS. Il permet d’aller chercher tous les contenus WordPress pour les intégrer dans une production HTML & CSS pré-existante. Ou à faire dans un 2e temps une fois tous les contenus WordPress affichés.

Créer les fichiers minimum requis

Pour obtenir un premier résultat, il suffit de :

créer un nouveau répertoire dans wp-contents/themes p.ex. mon-propre-theme
y créer un fichier index.php
- dans ce fichier écrire p.ex. Salut, ça fonctionne
y créer un fichier style.css
- dans ce fichier copier le code suivant et modifier les informations

				
					/* Theme Name: NOM DE VOTRE THEME
   URI: http://www.VOTRE-SITE.COM
   Description: DESCRIPTION DE VOTRE THEME.
   Version: 1.0
   Author: VOTRE NOM   
*/

y créer un fichier screenshot.png (dimensions 1200×900) illustrant le thème
aller dans le backend apparence > thèmes et y activer le nouveau thème
retourner sur l’URL publique du site et rafraichir la page
La page affichera: Salut, ça fonctionne

Afficher des contenus dynamiques relatifs au site (nom, description, chemin vers le dossier du thème)

Maintenant que nous avons affiché le contenu de notre page index.php en activant le thème, passons en revue les quelques tags WP les plus utiles pour commencer, je pense notamment à:

titre du site
description / slogan du site
chemin vers le répertoire du thème, afin de pouvoir lier notre feuille de style style.css à notre page index.php

				
					<?php bloginfo('stylesheet_directory'); ?> <!-- chemin vers le répertoire/thème du site du site -->
<?php bloginfo('name'); ?> <!-- nom du site -->
<?php bloginfo('description'); ?> <!-- description du site -->

Bonne méthode pour lier la feuille de style

				
					function ajouter_style() {
     wp_enqueue_style( 'monstyle', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'ajouter_style', PHP_INT_MAX );

Créer une boucle pour afficher tous les articles et leurs contenus

Nous allons maintenant créer une boucle qui permet d’afficher tous les aritcles / posts. Par défaut ils seront affichés par ordre antéchronologique (les plus récent en premier)

				
					<!-- Commencer la boucle -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- Afficher les contenus de la boucle -->
<?php the_post_thumbnail(); ?> <!-- remplace la balise <img> ! 
alternativement, on peut remplacer l'attribut src de la balise <img> 
par --> <?php echo get_the_post_thumbnail_url(); ?>
<?php the_title(); ?>  <!-- titre du post -->
<?php the_content(); ?> <!-- contenu du post -->
<?php the_excerpt() ?> <!-- extrait du post-->
<?php echo get_the_date(); ?> <!-- date du post / on le fait des cette façon car
sinon WP n'affiche qu'une fois la date si plusieurs posts on la même date-->
<?php the_permalink(); ?> <!-- lien vers le détail du post -->
<?php the_time(); ?> <!-- date de création du post -->
<?php the_author(); ?> <!-- auteur du post -->
<?php the_category();?> <!-- la/les catégorie(s) assignée(s) au post -->

<!-- on peut également afficher le nom et/ou le slug du post type-->
<?php 
// Get current post type
$post_type = get_post_type();
// Get post type object
$post_type_obj = get_post_type_object( $post_type );
// Display post type name
echo 'Post Type Name: ' . esc_html( $post_type_obj->labels->singular_name );
// Display post type slug
echo 'Post Type Slug: ' . esc_html( $post_type_obj->name );
?>

<!-- Terminer la boucle -->
<?php endwhile; endif; wp_reset_query(); ?>

On peut aussi filtrer les boucles pour n’afficher que ce qui nous intéresse.

				
					<!-- n'afficher que les contenus de type 'post' (dans une page p.ex. -->
<?php query_posts('post_type=post') ?>

<!-- n'afficher que le premier post. On n'affiche qu'un post -->
<?php query_posts('posts_per_page=1'); ?>

<!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total-->
<?php query_posts('offset=1&posts_per_page=3'); ?>

<!-- afficher tout excepté le premier post. -->
<?php query_posts('offset=1'); ?>

<!-- afficher tout excepté les 4 premiers  posts. -->
<?php query_posts('offset=4'); ?>

<!-- afficher tous les posts de la catégorie trucmachin -->
<?php query_posts('category_name=trucmachin'); ?>

<!-- afficher les 3 derniers posts de la catégorie trucmachin -->
<?php query_posts('posts_per_page=3&category_name=trucmachin'); ?>

Requête plus complexe permettant de passer plus d’arguments. plus d’infos

				
					<?php
// 1) définir les arguments/filtres de la requête
$args = array(
   'post_type' => 'prof'
);

// 2) exécuter la requête et lancer la boucle
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
?>

<?php the_title(); ?> 

<?php
} // end while
} // end if
wp_reset_query(); ?>

Activer la possibilité d’ajouter une image mise en avant et créer des tailles personnalisées d'images

Dans functions.php, ajouter le code suivant

				
					//activer image mise en avant
add_theme_support( 'post-thumbnails' );

//créer des propres tailles
add_image_size( 'images-moyennes', 312, 255, true );
add_image_size( 'images-grandes', 527, 390, true );

Lorsque l’on veut afficher cette taille personnalisée, on peut le faire de cette façon

				
					  <?php the_post_thumbnail("images-moyennes"); ?>
    <?php the_post_thumbnail("images-grandes"); ?>

On peut encore ajouter une fonction pour que ces tailles soient disponibles dans le menu dropdown des médias dans le contenu des articles

				
					<?php add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'images-moyennes' => __('Images Moyennes'), 
        'images-grendes' => __('Images Grandes'),
    ));
} ?>

Afficher le menu

Vous verrez que par défaut il ne vous est pas possible d’ajouter un menu. Il faut le spécifier à WordPress. Dans le fichier functions.php, copier le code suivant:

				
					// ajouter une zone de menu
register_nav_menu( 'primary', __( 'Navigation Menu' ) );

Ensuite dans votre thème, vous pouvez appeler votre menu de cette façon

				
					<?php wp_nav_menu(); ?>

On peut aussi passer toute une série d’arguments dans le menu, comme ici: pas de container autour du UL, un ID et des classes sur le UL

				
					<?php
wp_nav_menu(array(
  'container' => false, // Ne pas mettre de container
  'menu_class' => 'navbar-nav fw-bold justify-content-end align-items-center flex-grow-1', // Ajouter des classes à <ul>
  'menu_id' => 'navbar', // Ajouter un ID à <ul>
));
?>

Personaliser le lien Suite…

Dans functions, copier ce code:

				
					//personaliser "lire la suite" 

function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';
}
 
add_filter( 'the_content_more_link', 'modify_read_more_link' );

Ensuite dans le style personaliser la classe more-link

Ajouter une zone de widgets

Dans functions, copier ce code:

				
					// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
    register_sidebar( array(
                    'name'          => 'Ma zone de widgets',
                    'id'            => 'zone-widgets',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );




// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>

Ajouter plusieurs zones de widgets

				
					// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
    register_sidebar( array(
                    'name'          => 'Ma zone de widgets',
                    'id'            => 'zone-widgets',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
	
	register_sidebar( array(
                    'name'          => 'Ma zone de widgets 2',
                    'id'            => 'zone-widgets-2',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );




// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>
<?php dynamic_sidebar( 'zone-widgets-2' ); ?>

Ajouter des classes sur le body

				
					<body <?php body_class(); ?>>

Ajouter wp_head() et wp_footer()

Pour terminer, il faut encore ajouter les 2 fonctions qui permettent à WordPress d’ajouter tout le code nécessaire au bon fonctionnement des plugins etc.

				
					<!-- Pour wp_head(), il faut le mettre juste avant la fermeture de la balise <head> -->

    <?php wp_head(); ?>    
</head>


<!-- Pour wp_footer(), il faut le mettre juste avant la fermeture de la balise <body> -->

    <?php wp_footer(); ?>    
</body> 

<!-- ou alors tout en bas si on inclut la fermeture des balises body et html dans le footer -->

Afficher les taxonomies en tant que liens (pour un post donné)

				
					<?php 
  $categories = get_the_terms(get_the_ID(), 'type-sneakers');
  $couleurs = get_the_terms(get_the_ID(), 'couleurs-sneakers');

  if (!empty($categories)) {

    foreach ($categories as $category) {
        echo '<a href="'.get_site_url().'/type-sneakers/'.$category->slug.'">'.$category->name.'</a> ';
    }

}

    echo '<br><br><br><br>';

    if (!empty($couleurs)) {
    foreach ($couleurs as $couleur) {
        echo '<a href="'.get_site_url().'/couleurs-sneakers/'.$couleur->slug.'">#'.$couleur->name.'</a> ';
    }
}


?>

Divers

				
					<!--  Insérer le nom d'une page ou d'un post suivi du nom du site dans la balise <title> -->

<title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Pour aller plus loin

06/11/2019

Créer un thème enfant dans WordPress

Lorsque vous installez un thème sur votre site WordPress, il se peut que vous apportiez des modifications dans le fichier CSS ou dans les fichiers PHP du site. Le problème est que lorsque ce thème sera mis à jour par ses créateurs et que vous décidez de mettre ce thème à jour sur votre site, toutes les modifications seront perdues.

Il existe heureusement une alternative à cela, les thèmes enfant.

Il s’agit d’un thème que vous allez créer qui reprend l’ensemble des propriétés d’un thème existant dans lequel vous pourrez apporter toutes les modifications que vous voulez et qui ne seront jamais écrasées lorsque le thème principal (que l’on qualifie de thème parent) sera mis à jour.

Via FPT

Pour faire un thème enfant, vous aurez besoin du thème original et de 2 fichiers que vous allez créer.

Choisir un thème et l’activer dans Apparence > Thèmes p.ex. Twenty Sixteen
Se rendre dans le dossier wp-content/themes et y identifier le nom du thème actif, dans notre cas twentysixteen
Dans de même dossier wp-content/themes, créer un nouveau répertoire p.ex. child-twentysixteen (par convention on peut reprendre le nom du répertoire du thème principal précédé de child- mais le nom du dossier est libre!)
Dans le nouveau dossier (dans ce cas child-twentysixteen ) créer 2 fichiers
1. functions.php
2. style.css

Dans le fichier functions.php copiez le code ci-dessous. Cela a pour effect de récupérer le style du thème parent et enfant NB: N’oubliez pas d’inclure ce code dans des balises PHP <?php code ici ?>


<?php
add_action( "wp_enqueue_scripts", "my_theme_enqueue_styles", 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" );
wp_enqueue_style( "child-style", get_stylesheet_uri() );
} ?>

Dans le fichier style.css, copiez le code ci-dessous


/*
Theme Name: Mon site enfant de Twenty Sixteen
Template: twentysixteen
Author: Emmanuel Lemal
Description: Thème enfant crée sur base du thème Twenty Fifteen
Version: 1.0.0
*/

Le plus important ici est la valeur attribuée à Template. Il doit impérativement s’agir du nom du dossier du thème parent !

Une fois cela fait, envoyez tout vote nouveau dossier en FTP sur le serveur (pas nécessaire si vous travaillez en local)
Si vous voulez, vous pouvez créer dans ce même dossier une image que vous appelez screenshot.png ou .jpg qui illustrera votre thème
Allez dans Apparence > Thèmes et activez le nouveau thème
Vous pouvez maintenant apporter toutes les modifications que vous désirez dans le fichier style.css

Via ZIP

Pour faire un thème enfant, vous aurez besoin du thème original et de 2 fichiers que vous allez créer.

Choisir un thème et l’activer dans Apparence > Thèmes p.ex. Twenty Sixteen
Identifier le nom du dossier du thème parent en allant sur le site
1. afficher code source
2. rechercher « themes »
3. identifier le dossier (c’est la partie derrière /themes/nom-du-dossier/) dans ce cas-ci twentysixteen
Nimpote où sur votre ordinateur, créer un nouveau répertoire p.ex. child-twentysixteen (par convention on peut reprendre le nom du répertoire du thème principal précédé de child- mais le nom du dossier est libre!)
Dans le nouveau dossier (dans ce cas child-twentysixteen ) créer 2 fichiers
1. functions.php
2. style.css


<?php
add_action( "wp_enqueue_scripts", "my_theme_enqueue_styles", 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" );
wp_enqueue_style( "child-style", get_stylesheet_uri() );
} ?>

Dans le fichier style.css, copiez le code ci-dessous


/*
Theme Name: Mon site enfant de Twenty Sixteen
Template: twentysixteen
Author: Emmanuel Lemal
Description: Thème enfant crée sur base du thème Twenty Fifteen
Version: 1.0.0
*/

Le plus important ici est la valeur attribuée à Template. Il doit impérativement s’agir du nom du dossier du thème parent !

Si vous voulez, vous pouvez créer dans ce même dossier une image que vous appelez screenshot.png ou .jpg qui illustrera votre thème
Une fois cela fait, zippez votre dossier nouvellement créé
Allez dans Apparence > Thèmes > Ajouter un thème > Téléverser un thème et choisissez votre fichier .zip
Vous pouvez maintenant apporter toutes les modifications que vous désirez dans le fichier style.css via Apparence > Editeur de fichiers et de thèmes

A noter:

toutes les modifications que vous apporterez dans le style.css de votre thème enfant viendront s’ajouter au style principal tu thème parent
En revanche, si vous désirez changer des éléments dans les fichiers PHP, vous devrez d’abord copier le fichier PHP que vous voulez éditer depuis le thème parent dans votre thème enfant avant d’y apporter des modifications. Car contrairement au style.css du thème enfant qui s’ajoute au style.css parent, les fichiers PHP remplacent les fichiers PHP du thème parent !

Plus d’informations sur https://codex.wordpress.org/fr:Thèmes_Enfant

lab.elastik

Wordpress - Bloc 3

Derniers cours : Wordpress

Récupérer toutes les catégories / taxonomies associées à un post pour les afficher en tant que classe

Masquer les événements passés dans un agenda réalisé avec ACF

Comment ajouter des classes à un menu WordPress et à son container ? Par exemple pour le rendre compatible avec Bootstrap

Comment customiser l’interface du backend de WordPress en fonction des rôles d’utilisateurs

Ajouter des éléments dans le menu

Ajouter un séparateur dans le menu

Remove elements from editor menu

Créer son propre thème WordPress à partir de zéro

Créer son propre thème WordPress à partir de zéro

Créer les fichiers minimum requis

Afficher des contenus dynamiques relatifs au site (nom, description, chemin vers le dossier du thème)

Bonne méthode pour lier la feuille de style

Créer une boucle pour afficher tous les articles et leurs contenus

Activer la possibilité d’ajouter une image mise en avant et créer des tailles personnalisées d'images

Afficher le menu

Personaliser le lien Suite…

Ajouter une zone de widgets

Ajouter plusieurs zones de widgets

Ajouter des classes sur le body

Ajouter wp_head() et wp_footer()

Afficher les taxonomies en tant que liens (pour un post donné)

Divers

Pour aller plus loin

Créer un thème enfant dans WordPress

Via FPT

Via ZIP

A noter:

Cloner un site WordPress avec Duplicator