logo

Supprimer l’ajout automatique de liste sur les widget de wordpress [functions + PHP]

Accueil

Supprimer l’ajout automatique de liste sur les widget de wordpress [functions + PHP]

Par défaut, wordpress rajoute des puces lors de l’affichage des widgets. Il est bien sûr possible de supprimer l’affichage des puces mais on peut aussi supprimer la liste <li> de l’affichage html.

Sur functions.php

<?php

function remove_li_from_widget($params) {

    $params[0]['before_widget'] = preg_replace('/<li[^>]*>/', '', $params[0]['before_widget']);

    $params[0]['after_widget'] = preg_replace('/<\/li>/', '', $params[0]['after_widget']);

    return $params;

}

add_filter('dynamic_sidebar_params','remove_li_from_widget');

?>

Supprimer le style inline imposé par WordPress [functions]

WordPress nous impose une horrible tartine de style inline (pour Gutenberg). Pour ceux qui, comme nous, optimisent leur CSS et évitent de mettre leur style inline, voici la solution pour supprimer cette horreur de votre code. Attention  cependant ! Les couleurs proposées, en Back Office, par Gutenberg ne seront rattachées à aucun style (il est toujours possible de coller le style dans votre style.css, mais il ne sera pas mis à jour avec les nouvelles fonctionnalité de WordPress).

Dans functions.php

function remove_global_styles_and_svg_filters() {
    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
}
add_action('init', 'remove_global_styles_and_svg_filters');

Afficher et obtenir un permalien « SEO » d’une publication « future » sur wordpress [functions + PHP]

Pour diverses raisons vous pourriez avoir besoin de ce bout de code. Nous nous en servons particulièrement quand nous voulons afficher des actualités par date (actualités qui seront par conséquent « planifiées »). Normalement ces actualités ne s’affichent qu’à la date prévue.

Pour afficher les articles planifiés sur vos pages :

index.php ou archive.php et où vous voudrez

<?php
$args = array(
// 'posts_per_page' => 2,
'order' => 'ASC',
'orderby' => 'date',
'post_status' => 'future',
// 'cat'=> 17
);
$recent = new WP_Query($args);
while($recent->have_posts()) : $recent->the_post();
?>

// optimise l'affichage du lien (permalink)
<a href="<?php echo get_permalink_alternative($post_id, true); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a>
<div class="content"><?php the_excerpt();?></div>

<?php endwhile;
wp_reset_postdata(); ?>

 

functions.php

function get_permalink_alternative($post_id, $require = false){
    $post_status = get_post_status($post_id);
    if($post_status === 'future'){
     if($require){
       require_once(ABSPATH . 'wp-admin/includes/post.php');
     }
     $permalink_a = get_sample_permalink($post_id);
     $permalink = preg_replace('/\%postname\%/', $permalink_a[1], $permalink_a[0]);
    }else{
      $permalink = get_permalink($post_id);
    }
 return $permalink;
}

/* Montrer les "futures" pour les non connectés */
function show_future_posts($posts)
{
   global $wp_query, $wpdb;
   if(is_single() && $wp_query->post_count == 0)
   {
      $posts = $wpdb->get_results($wp_query->request);
   }
   return $posts;
}
add_filter('the_posts', 'show_future_posts');

Le lien de la page est souvent abscons malgré les réglages permaliens : https://wwww.site.com/?p=25&preview=true. Le code fourni permet également de changer le lien par quelque chose de plus … SEO.

 

Rediriger les nouveaux membres sur une autre page WordPress [functions + PHP]

Utile lorsque vous voulez ajouter des informations. Ce snippet permet de rediriger les nouveaux membres vers une page spécifique (ici appelé « nouveau-membre).

functions.php

<?php
function wps_registration_redirect(){
return home_url( '/nouveau-membre/' );
}
add_filter( 'registration_redirect', 'wps_registration_redirect' );
?>

Autoriser les SVG sur WordPress [functions + PHP]

Par défaut WordPress n’autorise pas les SVG en téléchargement sur les Médias. Pour des raisons de sécurité. Seuls les administrateurs pourront le faire (faites attention quand même).

 

<?php
//autoriser l'upload d'un SVG pour les administrateur
function smartwp_enable_svg_upload( $mimes ) {
//Only allow SVG upload by admins
if ( !current_user_can( 'administrator' ) ) {
return $mimes;
}
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';

return $mimes;
}
add_filter('upload_mimes', 'smartwp_enable_svg_upload');
?>

Changer le texte « lire plus » sur WordPress

Nous avions remarqué que « lire » et « plus » rentré parfois parmi les termes les plus utilisés de la page d’accueil quand celle-ci comportait un blog d’actualité. Dommage d’avoir pour « mots clé » ces deux mots. Pour y remédier, ce petit snippet vous permettra de mettre d’autres mots … voir des mots vides.

<?php
// Changer l'expression "read more"
function smartwp_change_excerpt_more_text( $more ){
global $post;
return '&hellip; <a class="read-more" href="'.get_permalink($post->ID).'" title="'.esc_attr(get_the_title($post->ID)).'">'.'Votre texte &raquo;'.'</a>';
}
add_filter('excerpt_more', 'smartwp_change_excerpt_more_text');
?>

Changer quotidiennement la description de votre site WordPress [functions]

Ce petit code, vous permettra de changer quotidiennement la description de votre page d’accueil. Nous ne savons pas vraiment si cette fonction apportera plus de dynamisme à votre site en terme SEO. Peut être pas, mais elle a tendance à rendre un peu plus active votre page de garde.

functions.php

<?
// création d'une boucle random pour la description
add_action('schedule_change', 'change_description');

// si la fonction n'existe pas
function activate_change() {
// check if schedule_change action/event already exists
if ( !wp_next_scheduled( 'schedule_change' ) ) {
// schedule new event to trigger schedule_change daily
wp_schedule_event( time(), 'daily', 'schedule_change');
}
}

// appel de la boucle
add_action('wp', 'activate_change');

// fonction pour changer la description
function change_description() {
// array of descriptions, anything you want
$description_list = array(
"Premiere description.",
"Deuxième description.",
"Troisième description."
);
$new_description = $description_list[array_rand($description_list)];
update_option( 'blogdescription', $new_description);
}
?>

Fenêtre pop-up & actualité sticky [PHP + JS + CSS]

Permet de mettre en avant une actualité qui s’affichera sur la première page dans une fenêtre pop-up de Bulma (s’ouvre au bout de 5 secondes et se ferme après 15)

Code HTML à coller sur la première page

<!--  sticky - en avant -->
<?php
  $sticky = get_option( 'sticky_posts' );
  $args = array(
    'posts_per_page' => 1,
    'post__in'  => $sticky,
    'ignore_sticky_posts' => 1
  );
  $recentPosts = new WP_Query( $args );
  if ( isset($sticky[0]) ) {
    while ($recentPosts->have_posts()) : $recentPosts->the_post();
?>
<a href="#modalOpen" id="modalContentin"></a>
<div class="modal" id="modalOpen" role="dialog" aria-modal="true">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head background-color-black">
      <p class="modal-card-title has-text-centered has-text-weight-bold is-size-4 color-white"><?php the_title(); ?><?php edit_post_link('&#9998'); ?></p>
      <a class="delete" aria-label="close" href="#" id="modalContentout" title="Fermer la fenêtre"></a>
    </header>
    <section class="modal-card-body background-color-white">
      <div class="content">
      <?php if (has_post_thumbnail()) {?>
        <picture>
          <?php the_post_thumbnail('thumbnail'); ?>
        </picture>
        <?php } else { ?>
        <?php
                $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
                $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
                chdir($curdir);
                $file=$files[array_rand($files)];
                ?>
        <picture><img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" /></picture>
        <?php } ?>
        <?php the_excerpt();?>
        <p class="has-text-centered"><a class="button" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">en savoir plus</a><p>
      </div>
    </section>
  </div>
</div>
<script>
  setTimeout("CallButton()",500)
  function CallButton(){
    document.getElementById("modalContentin").click();
  }
  setTimeout("CallButton2()",20000)
  function CallButton2(){
    document.getElementById("modalContentout").click();
  }
</script>
<?php endwhile; 
}?>
CSS
/*--------------------------------------------------------------
# STICKY EN AVANT
--------------------------------------------------------------*/
/* Ouverture */
#modalOpen:target {
display: flex;
}
/* Fix styles bulma */
.modal {
z-index: 300;
}
.modal-card {
max-height: unset;
overflow: auto;
}
.modal-card-title {
flex-shrink: 1;
}
/* .bulma-card-body à décommenter si pas de footer dans le modal */
.modal-card-body {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.modal img{
margin: 1rem auto;
}

Carrousel produits mis en avant Woocommerce (Slick/Bulma) [PHP + JS + CSS]

Petite astuce pour afficher sous forme de carrousel les produits mis en avant. Fonctionne avec Slick carrousel et le CSS Bulma.

PHP (dans votre thème)

<!-- Produits mis en avant -->
<section class="section offres-moment content">
<div class="container">
<h2 class="title is-3 has-text-centered">Produits mis en avant</a></h2>

<?php
$args = array(
'post_type' => 'product',
'orderby' => 'id',
'order' => 'DESC',
'limit' => '10',
'tax_query' => array(
array(
'taxonomy' => 'product_visibility',
'field' => 'name',
'terms' => 'featured', <!-- supprimer cette partie pour avoir les dernier produits -->
),
),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) { 
$numberPosts = $loop->found_posts;
if ($numberPosts==1) {?>
<div class="products">
<?php } elseif ($numberPosts==2) {?>
<div class="slider-offres-moment-2 products">
<?php } elseif ($numberPosts==3) {?>
<div class="slider-offres-moment-3 products">
<?php } else {?>
<div class="slider-offres-moment-4 products">
<?php } while ( $loop->have_posts() ) : $loop->the_post();
global $product;
?>
<div <?php wc_product_class( '', $product ); ?>>
<?php
do_action( 'woocommerce_before_shop_loop_item' );
do_action( 'woocommerce_before_shop_loop_item_title' );
do_action( 'woocommerce_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item' );
?>
</div>
<?php endwhile; ?>
</div>
<?php } else { }
wp_reset_postdata();
?> 
</div>
</section>
<!-- /mis en avant -->

JS en plus de celui de Slick

$(document).ready(function () {
$('.slider-offres-moment-2').slick({
autoplay: true,
slidesToShow: 2,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});
$(document).ready(function () {
$('.slider-offres-moment-3').slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});
$(document).ready(function () {
$('.slider-offres-moment-4').slick({
autoplay: true,
slidesToShow: 4,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});

CSS (en plus de celle de Bulma)

/*--------------------------------------------------------------
# Produits mis en avant
--------------------------------------------------------------*/
.offres-moment {
background: rgba(255, 255, 255, 0.6);
}

.offres-moment .slick-dotted.slick-slider.products,
.offres-moment .products {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 5rem;
}

.offres-moment .slick-track {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}

.offres-moment .products .product {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 1em;
}

.offres-moment .products .product a img {
margin: 0 auto;
box-shadow: none;
width: 100%;
height: auto;
display: block;
}

.offres-moment .products .product .woocommerce-loop-product__title {
padding: .5em 0;
margin: 0;
font-size: 1em;
color: var(--main-text-color);
}

.offres-moment .products .product .price {
text-align: center;
display: block;
font-weight: 400;
margin-bottom: .5em;
font-size: .857em;
color: var(--color-1);
}

.offres-moment .products .product a.button {
display: block;
margin: 0 auto;
}

.offres-moment.content ul.slick-dots {
list-style: none;
margin: 0;
bottom: -50px;
}

.offres-moment span.onsale {
min-height: unset;
min-width: unset;
padding: 0.3rem;
line-height: 2;
border-radius: 3px;
background-color: var(--color-1);
font-weight: 700;
position: absolute;
text-align: center;
color: #fff;
font-size: .857em;
z-index: 9;
}

.offres-moment .products .product .onsale {
top: 0;
right: 0;
left: auto;
margin: 0;
}

@media screen and (max-width: 768px) {
.offres-moment .slick-track {
height: auto;
}
}

 

Afficher la liste des sous-catégories d’un catégorie wordpress [PHP]

Utile quand on en a besoin. Et ennuyeux quand on ne trouve pas.

PHP (274 étant l’ID de la catégorie – A changer selon vos besoins)

<h2></i></span> <a href="<?php echo get_category_link(274); ?>" ><?php echo get_cat_name(274); ?></a></h2>

<?php echo category_description(274); ?>

<ul>
<?php
$queried_object = get_queried_object();
$term_id = '274';
$taxonomy_name = 'category';
$term_children = get_term_children($term_id, $taxonomy_name);

foreach ($term_children as $child) {
$term = get_term_by('id', $child, $taxonomy_name);
echo '<li><a href="' . get_term_link($child, $taxonomy_name) . '">' . $term->name . '</a></li>';
}
?>
</ul>