WordPress – Building Custom Widgets (自訂模組widget放在sidebar)(widget顯示版位)

WordPress 身為一個內容管理系統, 靈活性與模組化是其最大的優點, Widgets 就像手機上的一個資訊區塊, 可以放在手機桌面上, 同樣的道理, WordPress Widgets 可以讓你用拖拉的方式放到網頁的某一個區塊中, 靈活的呈現即時的訊息而不用編輯 HTML.

WordPress 的後台 (外觀->模組) , 有許多現成的模組可以使用, 但如果我們想要自創一個自己的Widgets, 以便需要時可以拖拉過去使用, 該如何做呢? 又該如何顯現在sidebar (右側欄) 中呢?

後台: 外觀->模組

假設, 我們現在要客製化一個Widgets, 用來在網頁中顯示自己的姓名與公告, 例如我們都可能出國玩, 一出國就可能無法更新我們的部落格, 因此需要放一塊公告說明, 說自己會在什麼時候出國, 什麼時候回國之類的訊息… (好貼心喔…) (我們會做成plugin外掛的方式讓你下載)

前台像是這樣, 會出現我們的公告區塊 Widgets (點圖看大圖):

sidebar 出現我們客製化的Widgets (點圖看大圖)

在後台的模組可以填寫公告資訊 (點圖看大圖):

在後台的模組可以填寫公告資訊 (點圖看大圖)

那現在就開始吧! 你可以把下面這些 code 放到: functions.php 裡面, 或是獨立成一個 plugin, 當然, 放在 theme 裡面的 functions.php 對初學者比較方便 (我們會做成plugin外掛的方式讓你下載來看).

基本的架構是這樣的 (這是一個範本與骨架):

add_action( ‘widgets_init’, ‘register_my_widget’ ); // function to load my widget

function register_my_widget() {} // 註冊我們自己寫的widge

class My_Widget extends WP_Widget () {} //繼承原來wordpress的Widget類, 享用前人的成果

function My_Widget() {} //Widget settings , 基本的設定

function widget() {} //前台 front-end 的呈現 (給網友看的)

function update() {} //後台更新資料時的動作

function form() {} //後台 back-end 的呈現 (給自家人用的拉)

接下來就來充實這個基本架構吧 (類別名稱可以自己更換) (你可以直接下載這個範例的Plugin檔, 直接看plugin檔內的code也可以 – 有註解) (這裡寫的code無斷行與縮排,你可以下載plugin來看code – 本頁最下方可下載 ):

1. 告訴 wordpress , 讓 wordpres 在適當時機 load 我們的 Widget:

add_action( ‘widgets_init’, ‘example_register_widgets’ ); //告訴 wordpress , 讓 wordpres 在適當時機 load 我們的 Widget.

function example_register_widgets() {
register_widget( ‘Custom_Widget’ ); //Custom_Widget 是我們自訂的class名稱
}

2. 開始設定我們的 widget :

// 自訂Custom_Widget 類別(class)，繼承(extend) WP_Widget 類別
class Custom_Widget extends WP_Widget {

function Custom_Widget() { //初始化設定

$widget_ops = array( ‘classname’ => ‘example’, ‘description’ => __(‘An Custom Widget that displays a name and announcement.’, ‘example’) );

//初始化設定
$control_ops = array( ‘width’ => 300, ‘height’ => 350, ‘id_base’ => ‘example-widget’ );

//初始化設定
$this->WP_Widget( ‘example-widget’, __(‘Custom Widget’, ‘example’), $widget_ops, $control_ops );

}

3. 前台 front-end 的呈現 (給網友看的):

function widget( $args, $instance ) { 　//前台 front-end 的呈現 (給網友看的)

extract( $args );
/* Our variables from the widget settings. */

$name = $instance['name'];
$announcement = $instance['announcement'];
$show_announcement = isset( $instance['show_announcement'] ) ? $instance['show_announcement'] : false;

/* Before widget (在themes裡面定義好的). */
echo $before_widget;

//顯示名字
if ( $name )
printf( ‘<div style="background-color:#CCC">’ . __(‘Hi, there, my name is %1$s.’, ‘example’) . ‘</div>’, $name );

//如果在後台有勾選: Display announcement
if ( $show_announcement )
printf( ‘<div style="background-color:#E9E9E9; height:60px;">’ . __(‘%1$s.’, ‘example.’) . ‘</div>’, $announcement );

/* After widget (在themes裡面定義好的). */
echo $after_widget;

}

4. 後台更新資料時的動作

function update( $new_instance, $old_instance ) {　//顧名思義, 後台更新資料 (update) 時的動作!

$instance = $old_instance;
$instance['name'] = strip_tags( $new_instance['name'] ); //做個去除HTML TAG: strip_tags
$instance['announcement'] = strip_tags( $new_instance['announcement'] ); //做個去除HTML TAG: strip_tags
$instance['show_announcement'] = $new_instance['show_announcement']; //勾選欄位
return $instance;

}

5. 後台 back-end 的呈現 (給自家人用的拉)

function form( $instance ) { //後台 back-end 的呈現 (給自己人在後台用的)

$defaults = array( ‘name’ => __(‘Sonic’, ‘example’), ‘announcement’ => ‘Hi, there, i will get back soon!’, ‘show_announcement’ => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>

<p><label for="<?php echo $this->get_field_id( ‘name’ ); ?>"><?php _e(‘Your Name:’, ‘example’); ?></label>

<input id="<?php echo $this->get_field_id( ‘name’ ); ?>" name="<?php echo $this->get_field_name( ‘name’ ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" /></p>

<p>

<label for="<?php echo $this->get_field_id( ‘announcement’ ); ?>"><?php _e(‘announcement:’, ‘example’); ?></label> <br />

<textarea id="<?php echo $this->get_field_id( ‘announcement’ ); ?>" name="<?php echo $this->get_field_name( ‘announcement’ ); ?>" cols="20″ rows="10″><?php echo $instance['announcement']; ?></textarea>

</p>

<p>
<input type="checkbox" <?php checked( isset($instance['show_announcement']), true ); ?> id="<?php echo $this->get_field_id( ‘show_announcement’ ); ?>" name="<?php echo $this->get_field_name( ‘show_announcement’ ); ?>" />

<label for="<?php echo $this->get_field_id( ‘show_announcement’ ); ?>"><?php _e(‘Display announcement?’, ‘example’); ?></label>
</p>

<?php

}
}

ok , 這些步驟都經歷過以後, 你已經完成了一個客製化的 widget ! 基本上都是很制式的步驟, 且需要遵循規則來設定.

ok, done ! 上傳外掛, 啟用外掛來看實際成果:

1. 下載外掛: 前往下載 (需登入Facebook後,即可下載)
2. 到wordpress後台, 外掛->安裝外掛->上傳的地方, 上傳剛剛下載的zip檔
3. 啟用 WP Custom Widget
4. 到外觀->模組把 Custom Widget 拖拉到右側邊欄區:

到外觀->模組把 Custom Widget 拖拉到右側邊欄區

5. 填寫名字和公告, 按下 “儲存" 即可!
6. 到前台看成果. ( 備註: 如果啟用外掛後前台沒有出現 widget , 請到外觀->主題選項底下的 預設頁面排版 來設定版面. )

這篇文章的網址(可分享到FB、LINE)：

用LINE分享給朋友: