Cách chính xác để xây dựng một widget bằng OOP là gì


7

Tôi đang làm việc trên một tiện ích biểu mẫu tìm kiếm đơn giản, với khả năng tự động hoàn thành tích hợp (Bạn có thể tải xuống phiên bản hiện tại ở đây ). Plugin đang hoạt động, nhưng tôi hiện đang viết lại tất cả các mã bằng OOP. Một trong những vấn đề tôi gặp phải là thực tế Widget Wordpress đã là một phần của lớp WP_Widget. Tôi có thể chia mã thành 2 lớp. Cái đầu tiên tải tất cả các script và css, và khởi tạo widget. Dưới đây là phác thảo của mã:

class wdSearchForm {

        public function __construct() {
            // Action hook to load widget
            // Register and enqueue styles
            // Register and enqueue scripts
        }

        // register widget in WordPress so that it is available under the widgets section
        public function wd_searchform() {
            register_widget( 'wd_searchform' );
        }
}

Và đây là phác thảo cho lớp widget:

class wd_searchform extends WP_Widget {

    // Constructor
    function wd_searchform() {

    }

    // The widget itself
    function widget( $args, $instance ) {
        // The widget code
    }

    //Update the widget 
    function update( $new_instance, $old_instance ) {
        // Update code
    }

    function form( $instance ) {
        //Set up widget settings.
    }
}

Tôi muốn kết hợp cả hai, để sử dụng wp_localize_scriptvà tải tập lệnh với các tùy chọn widget. Tôi nên làm thế nào? Mọi lời đề nghị đều được chào đón, ngay cả khi bạn nói với tôi rằng tôi hoàn toàn sai hướng ...


3
Bạn nên sử dụng các phụ kiện nồi hơi ở đây.
Mr2P

Câu trả lời:


9

Bạn có thể chỉ cần đặt mã init của bạn trong hàm tạo của lớp. Ví dụ:

class myWidget extends WP_Widget{

    function myWidget(){
       // Init code here
    }

    function widget( $args, $instance ) {
       // The widget code
       wp_enqueue_script(...);
       wp_enqueue_style(...);

   }

   // Over methods...

}

register_widget('myWidget');

Sở thích của tôi là thực sự đặt các cuộc gọi enqueue trong chức năng xử lý shortcode để tránh các xung đột chi phí và tiềm năng liên quan đến việc tải JavaScript và các bảng định kiểu không được sử dụng trên một trang nhất định.


Cảm ơn bạn @Stephen. Bạn có thể giải thích về việc thực hiện các cuộc gọi enqueue trong chức năng xử lý shortcode không?
Yoav Kadosh

3
Đặt các cuộc gọi wp_enqueue_ của bạn trong phương thức thực sự xử lý việc xử lý shortcode / widget. Bằng cách này, bạn không tranh thủ JS và các kiểu trừ khi shortcode / widget thực sự được sử dụng trên một trang nhất định. Xem các chỉnh sửa ở trên.
Steve

5

Mã của bạn là kiểu PHP4. Mã kiểu PHP4 không nên được sử dụng nữa. Và chỉ cần đặt một số hàm bên trong một cấu trúc lớp không phải là OOP. Nếu bạn muốn viết mã có thể tái sử dụng, hãy tách mã của bạn.

Ví dụ:

class Widget_Setup
{
    public $widget_class  = '';
    public $admin_styles  = array();
    public $admin_scripts = array();
    public $front_styles  = array();
    public $front_scripts = array();

    public $script_defaults = array(
        'handle'    => '',
        'src'       => '',
        'deps'      => array(),
        'version'   => false,
        'in_footer' => false
    );

    public $style_defaults = array(
        'handle'   => '',
        'src'      => '',
        'deps'     => array(),
        'version'  => false,
        'media'    => 'all'
    );

    public function __construct( $widget_class = '', $admin_styles = array(), $admin_scripts = array(), $front_styles = array(), $front_scripts = array() ) {

        $this->widget_class  = $widget_class;
        $this->admin_styles  = $admin_styles;
        $this->admin_scripts = $admin_scripts;
        $this->front_styles  = $front_styles;
        $this->front_scripts = $front_scripts;

        add_action( 'admin_print_styles',    array( $this, 'add_styles' ) );
        add_action( 'admin_enqueue_scripts', array( $this, 'add_scripts' ) );
        add_action( 'wp_enqueue_scripts',    array( $this, 'add_styles' ) );
        add_action( 'wp_enqueue_scripts',    array( $this, 'add_scripts' ) );

        if( ! empty( $this->widget_class ) )
            add_action( 'widgets_init', array( $this, 'register_widget' ) );

    }

    public function register_widget() {

        register_widget( $this->widget_class );

        return true;

    }

    public function add_styles() {

        $styles = ( is_admin() ) ?
            $this->admin_styles : $this->front_styles;

        if( empty( $styles ) )
            return false;

        foreach( $styles as $style ) {

            $style = wp_parse_args( $style, $this->style_defaults );

            wp_enqueue_style(
                $style['handle'],
                $style['src'],
                $style['deps'],
                $style['version'],
                $style['media']
            );

        }

        return true;
    }

    public function add_scripts() {

        $scripts = ( is_admin() ) ?
            $this->admin_scripts : $this->front_scripts;

        if( empty( $scripts ) )
            return false;

        foreach( $scripts as $script ) {

            $script = wp_parse_args( $script, $this->script_defaults );

            wp_enqueue_script(
                $script['handle'],
                $script['src'],
                $script['deps'],
                $script['version'],
                $script['media']
            );

        }

        return true;
    }

}

Lớp này có thể được sử dụng lại cho mọi widget. Ý tưởng đằng sau OOP là sử dụng lại mã của bạn bằng cách viết các cấu trúc dữ liệu với chức năng bổ sung. Không sử dụng các cấu trúc lớp vì ai đó nói rằng đó là phong cách tốt.

Lớp có thể được sử dụng như thế này:

class MyAwesomeWidget extends WP_Widget
{

    const TEXTDOMAIN = 'widget_textdomain';

    public function __construct() {

        parent::__construct(

            'widget-name-id',
            __( 'Widget Name', self::TEXTDOMAIN ),
            array(
                'classname'   =>    __CLASS__,
                'description' =>    __( 'Short description.', self::TEXTDOMAIN )
            )
        );

        $admin_style = array(
            array( 'handle' => 'somehandle', 'src' => 'path/to/source' ),
            array( 'handle' => 'someotherhandle', 'src' => 'path/to/source' ),
        );

        $admin_scripts = array(
            array( 'handle' => 'scrpthandle', 'src' => 'path/to/source', 'deps' => array( 'jquery') ),
        );

        $front_styles = array(
            array( 'handle' => 'frontstyle', 'src' => 'path/to/src' ),
        );

        new Widget_Setup( __CLASS__, $admin_style, $admin_scripts, $front_styles );
    }

    public function widget( $instance, $args ) {}

    public function update( $new_instance, $old_instance ) {}

    public function form( $instance ) {}

}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.