本篇文章更新時間:2019/05/03
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。
WordPress 內建有 shortcode
的機制,作為組裝頁面元素很方便。不過缺點自然就是後端編輯時有些太工程感了!
Visual Composer 這款老牌的頁面編輯器就是把那些 shortcode 的參數視覺化,強化了後端編輯的使用體驗。
近來頁面編輯器的演進也沒有停止,總心心念念的想朝著真正的「所見即所得」方向邁進。於是 Elementor 這款走開源策略也越發成熟!
這次因為案件需求,就去找一下之前的筆記:
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