本篇文章更新時間:2019/05/03
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣新台幣 贊助支持。


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

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

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

Elementor Page Builder

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

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

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

SHL Elementor Widget',
            'Elementor'
        );
        printf('

%1$s

', $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'), 'SHL Elementor Widget', 'Elementor', KS_MINIMUM_ELEMENTOR_VERSION ); printf('

%1$s

', $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'), 'SHL Elementor Widget', 'PHP', KS_MINIMUM_PHP_VERSION ); printf('

%1$s

', $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 '
'; echo ''; echo '
'; } protected function _content_template() { echo '
{{ settings.services_posts }}
'; } } \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new \Elementor_SHL_Widget()); } add_action('elementor/widgets/widgets_registered', 'ks_shl_elementor_widgets'); }

Gist: Link


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[///////////____36%_________]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


文章
Filter
Apply Filters
Mastodon