Code qui permet d’avoir des accès après l’envoi du formulaire avec Contact Form 7
document.addEventListener( 'wpcf7mailsent', function( event ) {
setTimeout( () => {
location = 'http://example.com/';
}, 3000 ); // Wait for 3 seconds to redirect.
}, false );Un shortcode qui permet d’ajouter des liens de partages sur les réseaux sociaux.
Icones à adapter à la charte client.
<?php
function partages_rs_shortcode() {
$current_url = esc_url(get_permalink());
$title = esc_attr(get_the_title());
// Réseaux sociaux
$social_networks = [
'facebook' => [
'url' => "https://www.facebook.com/sharer/sharer.php?u={$current_url}",
'onclick' => "window.open(this.href, 'facebook-share-dialog', 'width=800,height=600'); return false;",
'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#0D3856" fill-rule="evenodd" d="M6 10.807V7.68c0-.315.263-.607.577-.607h1.89v-1.56c0-3.63 1.86-5.483 5.566-5.513 1.237 0 2.415.158 3.517.48.345.105.473.315.45.66l-.42 3.045a.81.81 0 0 1-.24.397c-.157.083-.315.136-.473.106-.66-.188-1.335-.263-2.1-.263-1.05 0-1.207.21-1.207 1.298v1.35h3.39c.315 0 .608.314.608.66l-.263 3.127c0 .315-.263.533-.578.533H13.56v12c0 .314-.263.607-.578.607H9.075c-.315 0-.6-.293-.6-.608v-12h-1.89A.585.585 0 0 1 6 10.808Z" clip-rule="evenodd"/></svg>'
],
'twitter' => [
'url' => "https://twitter.com/intent/tweet?url={$current_url}",
'onclick' => "window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;",
'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#0D3856" fill-rule="evenodd" d="M23.25 4.77c-.87.368-1.74.615-2.663.713a4.486 4.486 0 0 0 2.04-2.535c-.91.533-1.9.915-2.932 1.132-.922-.96-2.063-1.455-3.383-1.455-2.557 0-4.627 2.048-4.627 4.59 0 .367.053.713.127 1.035C8.108 8.078 4.68 6.3 2.318 3.465a4.478 4.478 0 0 0-.645 2.317c0 1.553.773 2.933 2.063 3.795-.75-.022-1.44-.224-2.115-.57v.053c0 2.167 1.59 4.065 3.705 4.485a4.62 4.62 0 0 1-1.215.172c-.225 0-.525-.022-.848-.097a4.552 4.552 0 0 0 4.306 3.18c-1.665 1.305-3.585 1.973-5.745 1.973-.42 0-.795-.023-1.073-.075 2.138 1.38 4.5 2.07 7.058 2.07 5.467 0 9.622-3.008 11.632-6.976 1.02-1.995 1.515-4.02 1.515-6.067V7.38c-.022-.127-.022-.225-.022-.247a9.496 9.496 0 0 0 2.317-2.37" clip-rule="evenodd"/></svg>'
],
'linkedin' => [
'url' => "https://www.linkedin.com/shareArticle?mini=true&url={$current_url}&title={$title}",
'onclick' => "window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;",
'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#0D3856" fill-rule="evenodd" d="M0 2.005C0 .898.897 0 2.005 0h19.99C23.102 0 24 .897 24 2.005v19.99A2.005 2.005 0 0 1 21.995 24H2.005A2.005 2.005 0 0 1 0 21.995V2.005ZM9.5 9.15h3.25v1.633C13.219 9.844 14.419 9 16.223 9c3.457 0 4.277 1.869 4.277 5.299v6.351H17v-5.57c0-1.954-.468-3.055-1.66-3.055-1.652 0-2.34 1.188-2.34 3.054v5.571H9.5V9.15Zm-6 11.35H7V9H3.5v11.5Zm4-15.25a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" clip-rule="evenodd"/></svg>'
],
'pinterest' => [
'url' => "http://pinterest.com/pin/create/button/?url={$current_url}",
'onclick' => "window.open(this.href, '_blank'); return false;",
'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#0D3856" d="M0 12.001c.062-3.406 1.265-6.25 3.61-8.53C5.955 1.19 8.751.03 12.001 0c3.5.062 6.368 1.258 8.603 3.586 2.234 2.328 3.367 5.134 3.398 8.415-.062 3.375-1.264 6.212-3.61 8.509-2.345 2.295-5.14 3.459-8.39 3.49a11.51 11.51 0 0 1-3.376-.516c.219-.343.437-.735.656-1.171.25-.53.561-1.532.938-3 .094-.406.235-.954.423-1.642.218.374.592.717 1.125 1.032 1.407.655 2.89.593 4.453-.188 1.625-.938 2.75-2.39 3.375-4.358.561-2.062.492-3.978-.212-5.742-.703-1.766-1.96-3.038-3.773-3.82-2.28-.656-4.5-.587-6.656.21C6.8 5.602 5.3 6.97 4.455 8.907a9.554 9.554 0 0 0-.399 2.134 9.975 9.975 0 0 0 .07 2.062c.094.672.329 1.274.703 1.805.375.53.876.938 1.5 1.22.156.062.281.062.375 0 .125-.063.25-.313.374-.75.125-.437.173-.734.142-.89a5.729 5.729 0 0 0-.187-.329c-.656-1.063-.876-2.18-.656-3.35.219-1.172.704-2.166 1.453-2.977a6.518 6.518 0 0 1 4.007-2.07c2.063-.218 3.734.53 5.015 2.242 1.281 1.711 1.406 3.632.374 5.757-.656 1.28-1.547 2.188-2.67 2.718-1.125.531-2.187.532-3.188 0-.313-.156-.548-.344-.703-.563a.84.84 0 0 1-.141-.36c-.032-.094-.008-.242.07-.445.062-.219.141-.53.235-.937.062-.312.172-.772.328-1.38.156-.609.281-1.094.375-1.454l.187-.703c.156-.53.188-1.063.093-1.602-.063-.374-.219-.758-.469-1.14-.25-.383-.602-.644-1.055-.781-.562-.156-1.125.047-1.687.61-.25.25-.47.593-.656 1.03-.188.437-.312.86-.375 1.265a10.485 10.485 0 0 0-.093 3.445 5.969 5.969 0 0 0 1.531 3.61c.812.844 1.781 1.319 2.907 1.422 1.062.094 2.125-.094 3.188-.563 1.47-.624 2.578-1.593 3.328-2.906.75-1.312 1.062-2.78.937-4.406a8.97 8.97 0 0 0-.937-3.484A9.688 9.688 0 0 0 12.002 2c-2.97.062-5.406 1.109-7.312 3.14C2.783 7.17 1.748 9.53 1.498 12.345c-.062.5-.124.984-.187 1.453-.095.657-.234 1.36-.422 2.109-.156.53-.281 1.078-.375 1.641-.094.531-.156 1.062-.188 1.593v.125c0 .125-.004.274-.014.445.032-.047.07-.156.125-.328z"/></svg>'
]
];
ob_start();
?>
<div class="rs-box">
<?php foreach ($social_networks as $network => $data) : ?>
<a class="btn btn-<?php echo esc_attr($network); ?>" href="<?php echo esc_url($data['url']); ?>" onclick="<?php echo esc_attr($data['onclick']); ?>">
<?php echo $data['icon']; ?>
</a>
<?php endforeach; ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode('partages_rs', 'partages_rs_shortcode');On utilise le générateur : Generate WordPress Post Type (generatewp.com)
Pour éviter à avoir à réécrire tous les labels en FR, voici la variable « args » avec les labels + notre domain (pour les trads) :
$labels = array(
'name' => _x( 'FAQs', 'Post Type General Name', 'mahiiro' ),
'singular_name' => _x( 'FAQ', 'Post Type Singular Name', 'mahiiro' ),
'menu_name' => __( 'FAQs', 'mahiiro' ),
'name_admin_bar' => __( 'FAQs', 'mahiiro' ),
'archives' => __( 'Archives', 'mahiiro' ),
'attributes' => __( 'Attributs', 'mahiiro' ),
'parent_item_colon' => __( 'Parents', 'mahiiro' ),
'all_items' => __( 'Tous', 'mahiiro' ),
'add_new_item' => __( 'Ajouter', 'mahiiro' ),
'add_new' => __( 'Ajouter', 'mahiiro' ),
'new_item' => __( 'Nouveau', 'mahiiro' ),
'edit_item' => __( 'Editer', 'mahiiro' ),
'update_item' => __( 'Mettre à jour', 'mahiiro' ),
'view_item' => __( 'Voir', 'mahiiro' ),
'view_items' => __( 'Voir', 'mahiiro' ),
'search_items' => __( 'Chercher', 'mahiiro' ),
'not_found' => __( 'Non trouvé', 'mahiiro' ),
'not_found_in_trash' => __( 'Non trouvé dans la corbeille', 'mahiiro' ),
'featured_image' => __( 'Image à la une', 'mahiiro' ),
'set_featured_image' => __( 'Choisir l\'image à la UNE', 'mahiiro' ),
'remove_featured_image' => __( 'Retirer l\'image à a une', 'mahiiro' ),
'use_featured_image' => __( 'Utiliser l\'image à la une', 'mahiiro' ),
'insert_into_item' => __( 'Insérer dans l\'élément', 'mahiiro' ),
'uploaded_to_this_item' => __( 'Chargé dans l\'élément', 'mahiiro' ),
'items_list' => __( 'Liste d\'éléments', 'mahiiro' ),
'items_list_navigation' => __( 'Items list navigation', 'mahiiro' ),
'filter_items_list' => __( 'Filter items list', 'mahiiro' ),
);Un accordéon tout simple avec du JS sans library.
function accordionToggler(el) {
let checkeds = document.querySelectorAll(`input[name="${el.target.name}"]`);
for (var i = 0; i < checkeds.length; i++) {
if(checkeds[i].id != el.target.id) {
checkeds[i].checked = false;
}
}
}.accordion {
position: relative;
}
.accordion input {
position: absolute;
top: 0;
opacity: 0;
z-index: -1;
}
.accordion label {
display: block;
margin-bottom: 10px;
padding-bottom: 6px;
font-weight: bold;
border-bottom: 1px solid var(--purple-light);
}
.accordion div p {
margin-top: 20px;
}
.accordion div p span {
text-transform: uppercase;
display: inline-block;
padding-top: 9px;
}
.accordion div {
max-height: 0px;
overflow: hidden;
transition: max-height ease-in 0.6s;
}
.accordion input:checked + label + div {
max-height: 600px;
}On utilise le générateur : Generate WordPress Taxonomy (generatewp.com)
Pour éviter à avoir à réécrire tous les labels en FR, voici la variable « args » avec les labels + notre domain (pour les trads) :
$labels = array(
'name' => _x( 'Catégories (faq)', 'Taxonomy General Name', 'mahiiro' ),
'singular_name' => _x( 'Catégorie (faq)', 'Taxonomy Singular Name', 'mahiiro' ),
'menu_name' => __( 'Catégorie', 'mahiiro' ),
'all_items' => __( 'Tous', 'mahiiro' ),
'parent_item' => __( 'Elément parent', 'mahiiro' ),
'parent_item_colon' => __( 'Elément parent:', 'mahiiro' ),
'new_item_name' => __( 'Nouveau', 'mahiiro' ),
'add_new_item' => __( 'Ajouter', 'mahiiro' ),
'edit_item' => __( 'Editer', 'mahiiro' ),
'update_item' => __( 'Mettre à jour', 'mahiiro' ),
'view_item' => __( 'Voir', 'mahiiro' ),
'separate_items_with_commas' => __( 'Séparer par des virgules', 'mahiiro' ),
'add_or_remove_items' => __( 'Ajouter ou supprimer des éléments', 'mahiiro' ),
'choose_from_most_used' => __( 'Choisir le plus utilisé', 'mahiiro' ),
'popular_items' => __( 'Eléments populaires', 'mahiiro' ),
'search_items' => __( 'Chercher', 'mahiiro' ),
'not_found' => __( 'Non trouvé', 'mahiiro' ),
'no_terms' => __( 'Pas d\'éléments', 'mahiiro' ),
'items_list' => __( 'Liste d\'éléments', 'mahiiro' ),
'items_list_navigation' => __( 'Items list navigation', 'mahiiro' ),
);Une fenêtre modale simple avec un peu de JS et pas de librarie.
<script>
function openModal(id) {
let modal = document.getElementById(id);
modal.classList.add('animate-modal');
setTimeout(function(){ modal.classList.add('animated-modal'); modal.classList.remove('animate-modal'); }, 400);
}
function closeModal(id) {
let modal = document.getElementById(id);
modal.classList.add('animate-out-modal');
modal.classList.remove('animated-modal');
setTimeout(function(){ modal.classList.remove('animate-out-modal'); }, 400);
}
</script><style>
/* ===================================================================*/
/* ============================= MODAL ============================ */
/* ===================================================================*/
.modal-mahii {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(31,32,38,.7);
z-index: 99;
}
.modal-mahii-content {
position: fixed;
top: 10vh;
left: 50%;
transform: translateX(-50%);
width: 600px;
max-width: 95vw;
background-color: #fff;
padding: 30px 0 30px 30px;
}
.modal-mahii-content-inner {
max-height: 70vh;
overflow: auto;
}
.modal-mahii-header {
padding-bottom: 12px;
}
.close-modal {
position: absolute;
top: 0px;
right: 15px;
cursor: pointer;
font-size: 4rem;
color: #000;
}
.animate-modal {
display: block !important;
opacity: 0;
animation: fadeIn 0.4s ease-in-out 1 forwards;
}
.animated-modal {
display: block !important;
opacity: 1;
}
.animate-out-modal {
display: block !important;
animation: fadeIn 0.4s ease-in-out 1 reverse backwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>Petit code qui permet de faire en sorte de faire avancer (ou reculer) une animation CSS en fonction du scroll.
.animate .animation {
animation: 1s linear;
animation-play-state: paused;
animation-delay: calc(0 * -1s);
animation-iteration-count: 1;
animation-fill-mode: both;
}
.animate.fadeIn .animation {
opacity: 0;
animation-name: fadeIn;
}
.animate.zommScrollImg .animation {
transform: scale(1);
animation-name: zommScrollImg;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes zommScrollImg {
to {
transform: scale(1.3);
}
}<script>
function elementInView(elem){
return elem.getBoundingClientRect().top > 0 && elem.getBoundingClientRect().top < window.innerHeight;
}
// L'animation se délenche quand le haut de l'élément est à 0% de la hauteur de la fenêtre et se termine quand le bas de l'élément atteint 50% de la hauteur de la fenêtre
function getScrollPercentage(element) {
const rect = element.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (rect.bottom <= viewportHeight * 0.5) {
return 1;
}
if (rect.top >= viewportHeight) {
return 0;
}
const distanceFromBottom = viewportHeight - rect.top;
const totalScrollableDistance = viewportHeight + rect.height - (viewportHeight * 0.5);
const percentage = distanceFromBottom / totalScrollableDistance;
return Math.min(1, Math.max(0, percentage));
}
const animate = document.querySelectorAll('.animate');
window.addEventListener('scroll', scrollAnimate);
function scrollAnimate() {
for(var i = 0; i < animate.length; i++) {
if( elementInView(animate[i]) ) {
let offsetY = animate[i].getBoundingClientRect().top + window.scrollY;
var stateAnimation = getScrollPercentage(animate[i]);
animate[i].querySelector(".animation").style.animationDelay = 'calc('+stateAnimation+' * -1s)';
}
}
}
</script>