Un bloc personnalisé est un bloc que l’on crée soi-même pour l’éditeur WordPress afin d’ajouter une fonctionnalité ou un design qui n’existe pas par défaut dans l’éditeur qu’on utilise ( Gutenberg ou Elementor ).
Par défaut, WordPress propose des blocs standards : paragraphe, image, titre, galerie, bouton, colonnes, etc.
Mais lorsque ces blocs ne suffisent pas à votre besoin, on crée un bloc personnalisé.
Un bloc personnalisé Gutenberg est un composant WordPress sur mesure, visuel pour l’éditeur, mais connecté au code pour un rendu et un comportement exactement adaptés à votre projet.
Les blocs personnalisés créés pour Gutenberg ne sont visibles et utilisables que dans l’éditeur Gutenberg.
Elementor est un éditeur différent, avec son propre système de widgets et de rendu. Il ne “lit” pas les blocs Gutenberg comme des éléments éditables.
En pratique :
- Bloc Gutenberg → utilisable uniquement dans Gutenberg
- Widget Elementor → utilisable uniquement dans Elementor
Un widget Elementor est un composant que l’on crée pour ajouter une fonctionnalité ou un élément visuel personnalisé dans l’éditeur Elementor. Il fonctionne exactement comme les widgets natifs (Titre, Image, Bouton, Section, etc.), mais avec votre propre logique et votre propre design.
Exemple : Créons notre premier widget Element
Images du widgets
rw-elementor-widgets
Étape 1 : créer un petit plugin pour votre widget
Dans wp-content/plugins/, créez un dossier par exemple :
rw-elementor-widgets
Puis créez un fichier :
rw-elementor-widgets.php
<?php
/**
* Plugin Name: RW Elementor Widgets
* Description: Widgets Elementor personnalisés.
*/
if (!defined('ABSPATH')) exit;
add_action('elementor/widgets/register', function($widgets_manager) {
require_once(__DIR__ . '/widgets/widget-card.php');
$widgets_manager->register(new \RW_Card_Widget());
});
Puis créez un dossier :
widgets
et dedans :
widget-card.php
Étape 2 : créer votre widget Elementor
Dans widgets/widget-card.php :
<?php
if (!defined('ABSPATH')) exit;
class RW_Card_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'rw_card';
}
public function get_title() {
return 'Carte personnalisée';
}
public function get_icon() {
return 'eicon-post';
}
public function get_categories() {
return ['general'];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => 'Contenu',
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'label' => 'Titre',
'type' => \Elementor\Controls_Manager::TEXT,
'default' => 'Votre titre ici',
]
);
$this->add_control(
'description',
[
'label' => 'Description',
'type' => \Elementor\Controls_Manager::TEXTAREA,
'default' => 'Votre description ici',
]
);
$this->add_control(
'image',
[
'label' => 'Image',
'type' => \Elementor\Controls_Manager::MEDIA,
]
);
$this->add_control(
'button_text',
[
'label' => 'Texte du bouton',
'type' => \Elementor\Controls_Manager::TEXT,
'default' => 'En savoir plus',
]
);
$this->add_control(
'button_link',
[
'label' => 'Lien du bouton',
'type' => \Elementor\Controls_Manager::URL,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="rw-card-widget">
<?php if (!empty($settings['image']['url'])) : ?>
<img src="<?php echo esc_url($settings['image']['url']); ?>" alt="">
<?php endif; ?>
<h3><?php echo esc_html($settings['title']); ?></h3>
<p><?php echo esc_html($settings['description']); ?></p>
<?php if (!empty($settings['button_link']['url'])) : ?>
<a href="<?php echo esc_url($settings['button_link']['url']); ?>"
class="rw-card-btn">
<?php echo esc_html($settings['button_text']); ?>
</a>
<?php endif; ?>
</div>
<?php
}
}
Étape 3 : activer le plugin
Dans WordPress :
- Extensions → Activer RW Elementor Widgets
- Allez dans une page avec Elementor
- Vous verrez le widget Carte personnalisée
Étape 4 : ajouter un minimum de style (optionnel mais conseillé)
Un plugin doit idéalement embarquer ses propres styles, afin d’être totalement indépendant du thème :
Dans votre plugin, faites ceci :
Structure :
rw-elementor-widgets/
│
├── rw-elementor-widgets.php
├── widgets/
│ └── widget-card.php
└── assets/
└── css/
└── widget-card.css
Dans assets/css/widget-card.css :
.rw-card-widget {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
border-radius: 8px;
}
.rw-card-widget img {
max-width: 100%;
margin-bottom: 15px;
}
.rw-card-widget h3 {
font-size: 20px;
margin-bottom: 10px;
}
.rw-card-widget p {
font-size: 14px;
color: #555;
}
.rw-card-btn {
display: inline-block;
padding: 10px 20px;
background: #000;
color: #fff;
text-decoration: none;
margin-top: 10px;
border-radius: 4px;
}
Puis, dans votre fichier principal rw-elementor-widgets.php, ajoutez l’enregistrement du CSS :
add_action('elementor/frontend/after_enqueue_styles', function() {
wp_enqueue_style(
'rw-elementor-widgets-style',
plugin_dir_url(__FILE__) . 'assets/css/widget-card.css',
[],
'1.0.0'
);
});
Ainsi :
- Le CSS est chargé automatiquement
- Il est lié au plugin, pas au thème
- Si vous changez de thème, votre widget garde son style
- Votre plugin devient portable et réutilisable