Last active
June 23, 2022 08:55
-
-
Save Rayken/468b9534c9d84a08efcbda5ac5e0e618 to your computer and use it in GitHub Desktop.
Small plugin to enable linkable columns in Elementor (SEO friendly and "natively")
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Plugin Name: Elementor Linkable Columns | |
* Description: Elementor extension that enables linkable columns. | |
* Version: 1.0.1 | |
* Author: Rayken | |
* Text Domain: elementor-linkable-columns | |
*/ | |
/* | |
NOTES | |
- Make sure you do not have any <a>-tags within the column you want to make linkable, as it will break layout | |
- Heavily depends on the Elementor constant 'ALLOWED_HTML_WRAPPER_TAGS' (https://github.com/elementor/elementor/blob/master/includes/utils.php#L25) including the <a>-tag (or until Elementor adds a filter for it) | |
- Works as of this change: https://github.com/elementor/elementor/commit/20c86435a22f0faa33548dd01840756455875c41#diff-a4c20b6d7391a224faf11e6161c80b408e2a0f5a71a92dc11b7eafe3cad83f94R26 | |
- Can be expanded to work on sections too | |
- Grab lines 29-72 if you don't want a plugin | |
TODO | |
- Figure out if we can find all <a>-children and disable them | |
*/ | |
if( !defined( 'ABSPATH' ) ) | |
exit; | |
add_action( 'plugins_loaded', function() { | |
if( !did_action( 'elementor/loaded' ) ) | |
return; | |
// add a URL control to the column layout tab, if <a> is selected as html_tag | |
add_action( 'elementor/element/column/layout/before_section_end', function( $section, $args ) { | |
$section->add_control( | |
'column_link', | |
[ | |
'label' => __( 'Link', 'elementor' ) . ' (' . strtolower( __( 'Column', 'elementor' ) ) . ')', | |
'description' => 'NOTE: Using anchors within this column will break it! Anchors within anchors is not valid HTML.', | |
'type' => \Elementor\Controls_Manager::URL, | |
'placeholder' => __( 'https://your-link.com', 'elementor' ), | |
'show_external' => true, | |
'label_block' => true, | |
'default' => [ | |
'url' => '', | |
'is_external' => false, | |
'nofollow' => false | |
], | |
'dynamic' => [ | |
'active' => true, | |
], | |
'condition' => [ | |
'html_tag' => [ 'a' ] | |
] | |
] | |
); | |
}, 11, 2 ); | |
// add <a> to the html_tag control | |
add_action( 'elementor/element/column/layout/before_section_end', function( $control_stack, $args ) { | |
$control = \Elementor\Plugin::instance()->controls_manager->get_control_from_stack( $control_stack->get_unique_name(), 'html_tag' ); | |
$control['options']['a'] = __( 'a' ); | |
$control_stack->update_control( 'html_tag', $control ); | |
}, 10, 2 ); | |
// modify output of column to handle <a> | |
add_action( 'elementor/frontend/column/before_render', function( $widget ) { | |
$settings = $widget->get_settings_for_display(); | |
if( $settings['html_tag'] !== 'a' ) | |
return; | |
if( empty( $settings['column_link']['url'] ) ) | |
return; | |
$widget->add_link_attributes( '_wrapper', $settings['column_link'] ); | |
}, 10 ); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How could I expand the function to work on sections, too?