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

行動版 for , 瀏覽人次: 2625  , SSL Connection SSL
  • WP Custom Widget

    自訂模組widget放在sidebar (Widgets API)


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


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


    後台: 外觀->模組

    後台: 外觀->模組


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


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


    sidebar 出現我們客製化的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 拖拉到右側邊欄區

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


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


回 文章列表頁