Este snippet de código define e registra um widget personalizado para o Elementor, chamado “WP24Horas Custom Widget”. Esse widget personalizado permite adicionar um título que pode ser configurado no editor do Elementor.
class WP24Horas_Custom_Widget extends ElementorWidget_Base {
public function get_name() {
return 'wp24horas_custom_widget';
}
public function get_title() {
return __('WP24Horas Custom Widget', 'wp24horas');
}
public function get_icon() {
return 'fa fa-code';
}
public function get_categories() {
return ['wp24horas-widgets'];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __('Content', 'wp24horas'),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'label' => __('Title', 'wp24horas'),
'type' => ElementorControls_Manager::TEXT,
'default' => __('Default Title', 'wp24horas'),
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
echo '<h2>' . $settings['title'] . '</h2>';
}
}
ElementorPlugin::instance()->widgets_manager->register_widget_type(new WP24Horas_Custom_Widget());
class WP24Horas_Custom_Widget extends ElementorWidget_Base { ... }: Define uma nova classe que estende a classe base de widgets do Elementor (ElementorWidget_Base). Esta classe contém todos os métodos necessários para criar e registrar o widget personalizado.public function get_name() { return 'wp24horas_custom_widget'; }: Define o nome único do widget.public function get_title() { return __('WP24Horas Custom Widget', 'wp24horas'); }: Define o título do widget que será exibido na interface do Elementor.public function get_icon() { return 'fa fa-code'; }: Define o ícone do widget usando uma classe da Font Awesome.public function get_categories() { return ['wp24horas-widgets']; }: Define a categoria do widget. Este widget será exibido na categoria ‘wp24horas-widgets’ no Elementor.protected function _register_controls() { ... }: Define os controles (configurações) do widget que aparecerão no painel do Elementor.$this->start_controls_section(...): Inicia uma nova seção de controles.$this->add_control(...): Adiciona um controle de texto para definir o título do widget.$this->end_controls_section(): Finaliza a seção de controles.protected function render() { ... }: Define como o widget será renderizado no front-end.$settings = $this->get_settings_for_display();: Obtém as configurações do widget.echo '<h2>' . $settings['title'] . '</h2>';: Exibe o título definido no editor do Elementor.ElementorPlugin::instance()->widgets_manager->register_widget_type(new WP24Horas_Custom_Widget());: Registra o widget personalizado no Elementor, tornando-o disponível no editor.Esse código pode ser usado adicionando-o ao arquivo functions.php do seu tema ou, preferencialmente, em um plugin específico para o site. Utilizar um plugin para essas customizações mantém o código organizado e seguro contra atualizações do tema.
Este snippet permite criar e registrar um widget personalizado no Elementor, adicionando flexibilidade e personalização ao seu site WordPress. O widget inclui um controle para definir um título, que é renderizado como um elemento <h2> no front-end.
Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes!
Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!
