[WordPress] 新增、開發 Elementor 小工具的方法

WordPress 內建有 shortcode 的機制，作為組裝頁面元素很方便。不過缺點自然就是後端編輯時有些太工程感了！

Visual Composer 這款老牌的頁面編輯器就是把那些 shortcode 的參數視覺化，強化了後端編輯的使用體驗。

近來頁面編輯器的演進也沒有停止，總心心念念的想朝著真正的「所見即所得」方向邁進。於是 Elementor 這款走開源策略也越發成熟！

這次因為案件需求，就去找一下之前的筆記：

Elementor 開發文件中是採用外掛的方式來教學，這對我的需求是整合在主題中稍有不便，所以抽取出對應的框架程式碼後，自己打包成一個檔案引入客製化開發主題中。

小工具的完整程式碼如下，是將某一個 Post Type 文章中的欄位抽出並顯示於前端，其中有運用 ACF 來處理客製化欄位，所以如果發現直接套上使用時沒有效果肯定是因為沒有那個 Post Type 與對應 ACF 欄位囉～

<?php
define('KS_MINIMUM_PHP_VERSION', 5.6); //定義最小支援的 PHP 版本
define('KS_MINIMUM_ELEMENTOR_VERSION', 2.0); //定義最小支援的 Elementor 版本

$ks_ele_widget_enable = true;
// Check if Elementor installed and activated
if (!did_action('elementor/loaded')) {
    add_action('admin_notices', function () {

        $message = sprintf(
            /* translators: 1: Plugin name 2: Elementor */
            esc_html__('"%1$s" requires "%2$s" to be installed and activated.', 'elementor-hello-world'),
            '<strong>SHL Elementor Widget</strong>',
            '<strong>Elementor</strong>'
        );
        printf('<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message);
    });
    $ks_ele_widget_enable = false;
}
// Check for required Elementor version
if (!version_compare(ELEMENTOR_VERSION, KS_MINIMUM_ELEMENTOR_VERSION, '>=')) {
    add_action('admin_notices', function () {

        $message = sprintf(
            /* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
            esc_html__('"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-hello-world'),
            '<strong>SHL Elementor Widget</strong>',
            '<strong>Elementor</strong>',
            KS_MINIMUM_ELEMENTOR_VERSION
        );
        printf('<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message);
    });
    $ks_ele_widget_enable = false;
}
// Check for required PHP version
if (version_compare(PHP_VERSION, KS_MINIMUM_PHP_VERSION, '<')) {
    add_action('admin_notices', function () {

        $message = sprintf(
            /* translators: 1: Plugin name 2: PHP 3: Required PHP version */
            esc_html__('"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-hello-world'),
            '<strong>SHL Elementor Widget</strong>',
            '<strong>PHP</strong>',
            KS_MINIMUM_PHP_VERSION
        );
        printf('<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message);
    });
    $ks_ele_widget_enable = false;
}

if ($ks_ele_widget_enable) {
    function ks_shl_elementor_widgets() {
        class Elementor_SHL_Widget extends \Elementor\Widget_Base {

            public function get_name() {
                return 'shl-random-banner-post';
            }

            public function get_title() {
                return 'SHL Random Banner Post';
            }

            public function get_icon() {
                return 'fa fa-code';
            }

            public function get_categories() {
                return ['general'];
            }

            protected function _register_controls() {
                global $wpdb;

                $this->start_controls_section(
                    'content_section',
                    [
                        'label' => 'Content',
                        'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                    ]
                );

                $querystr = "SELECT ID,post_title FROM $wpdb->posts WHERE $wpdb->posts.post_status = 'publish' AND $wpdb->posts.post_type = 'services' AND $wpdb->posts.post_date < NOW() ORDER BY $wpdb->posts.post_date DESC";

                $posts = $wpdb->get_results($querystr, ARRAY_A);
                $p_arr = array(0 => 'None');
                foreach ($posts as $key => $post) {
                    $p_arr[$post['ID']] = $post['post_title'];
                }

                $this->add_control(
                    'services_posts',
                    [
                        'label' => 'Choose a Post',
                        'type' => \Elementor\Controls_Manager::SELECT,
                        'default' => 0,
                        'options' => $p_arr,
                    ]
                );

                $this->end_controls_section();

            }

            protected function render() {

                $settings = $this->get_settings_for_display();
                $img = 'blank_image_url';

                if (function_exists('get_field')) {
                    $num = time() % 3 + 1;
                    $img = get_field("services_random_img_" . $num, $settings['services_posts']);
                }
                echo '<div class="ks post-' . $settings['services_posts'] . '">';
                echo '<img src="' . $img . '"/>';
                echo '</div>';

            }

            protected function _content_template() {
                echo '<div class="ks"> {{ settings.services_posts }}</div>';
            }
        }
        \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new \Elementor_SHL_Widget());
    }
    add_action('elementor/widgets/widgets_registered', 'ks_shl_elementor_widgets');
}

Gist: Link