Merci à pluginiz pour cette solution qui me sauve sur un projet
Les cours sont classés par ordre où ils ont été donnés, du plus récent au plus ancien.
Merci à pluginiz pour cette solution qui me sauve sur un projet
Je développe régulièrement des thèmes WordPress à partir d’un layout fourni en Adobe XD ou autre et j’utilise essentiellement Bootstrap pour pour son système de grille mais aussi pour sa navigation. Dans le component de navigation de Bootstrap une série de classes et d’ID sont nécessaires à son fonctionnement. Sur le container du menu, sur le menu en soi (élément UL) ainsi que sur les LI et les A à l’intérieur des LI.
Je décris ci-dessous les fonctions utilisés dans le fichier functions.php. J’y ajoute des arguments à la création du menu qu’il faudra donc ajouter à l’appel de la fonction <?php wp_nav_menu($args); ?> dans le thème.
Dans l’exemple ci-dessous je vais vais décrire comment appliquer au menu WordPress les classes nécessaires à la création de la Navbar décrite dans la documentation de Bootstrap https://getbootstrap.com/docs/4.0/components/navbar/#nav
UPDATE BOOTSTRAP 5 !!!
https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
et modifier la ligne
'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>', comme ceci
'items_wrap' => '<ul id="%1$s" class="navbar-nav">%3$s</ul>',
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.
// 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;action=edit', '', 'dashicons-text', 50 );
add_menu_page( 'linked_url', 'Liens utiles', 'read', '/post.php?post=49&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;nbsp;
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
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');
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.
Pour obtenir un premier résultat, il suffit de :
/* Theme Name: NOM DE VOTRE THEME
URI: http://www.VOTRE-SITE.COM
Description: DESCRIPTION DE VOTRE THEME.
Version: 1.0
Author: VOTRE NOM
*/
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 à:
<?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 -->
function ajouter_style() {
wp_enqueue_style( 'monstyle', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'ajouter_style', PHP_INT_MAX );
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(); ?>
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'),
));
} ?>
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>
));
?>
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
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' ); ?>
// 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' ); ?>
<body <?php body_class(); ?>>
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 -->
<?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> ';
}
}
?>
<!-- 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>
I ran into this problem when I realised that there was a bug in Safari which brakes the column-count property in the print version. Since I didn’t find a solution for this (and I didn’t want o revamp the entire structure) we agreed with the customer on displaying a message to Safari users once they hit CTRL+P or CMD+P.
I combine the detection of CTRL+P or CMD+P press and the browser used :
document.addEventListener("keydown", function (event) {
// event.stopPropagation();
// event.preventDefault();
if(event.ctrlKey && event.keyCode == 80) // pour CTRL
{
console.log("CTRL + P was pressed!");
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
//alert("1chrome") // Chrome
} else {
alert("For best printing experience please use one of the following browsers // Pour une meilleure expérience d'impression, veuillez utiliser l'un des navigateurs suivants: Chrome, Firefox, Edge, Opera... autre que Safari!") // Safari
}
}
}
else if(event.metaKey && event.keyCode == 80) { // pour CMD mac
console.log("CMD + P was pressed!");
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("1chrome") // Chrome
} else {
alert("For best printing experience please use one of the following browsers // Pour une meilleure expérience d'impression, veuillez utiliser l'un des navigateurs suivants: Chrome, Firefox, Edge, Opera... autre que Safari!") // Safari
}
}
}
else
{
// console.log("Something else was pressed.");
}
}); // document add listener
Cet article de yesyouweb répertorie les propriétés CSS les plus couramment utilisées.
https://yesyouweb.com/css3-guide-reference/