WordPress4.7以前のような旧式テキストウィジェットを自作するカスタマイズ方法

WordPress4.8よりテキストウィジェットの仕様が変わりました。

仕様変更により、ビジュアルエディターが利用できるようになり便利になった反面、テキスト入力すると勝手に段落が付加されてしまうといった不便な面もでできました。

詳しい問題点は以下を参照してください。

WordPress4.8以降のテキストウィジェットでpやbrタグの余計な余白が入るのを除去する方法

Wordpress4.8のアップデートにより、テキストウィジェットの仕様が変わりました。それにより、新たにテキストウィジェットを設定する...

nelog.jp

2017-07-01 13:06

この問題に対処するため、「デフォルトがだめなら旧式のテキストウィジェットを作ってしまえばいいじゃない」ということで、「テーマをカスタマイズして旧タイプのテキストウィジェットを作成する方法」の紹介です。

今回のカスタマイズ方法は、「新たな機能をつけたい」とか「どのようなコードになっているのか知りたい」といった方向けです。単に、旧式テキストウィジェットを利用したいのであれば、旧式テキストウィジェットプラグインを利用することおすすめします。これだと管理画面のみの操作で完結するので。

主な手順

今回のカスタマイズで行う主な手順はこれだけです。

functions.phpにコードを貼り付ける

単にコピペ一発でカスタマイズすることができます。新たな機能を追加したりする場合は、その後、コードを編集してください。

functions.phpにコードを貼り付ける

クラシックタイプのテキストウィジェットをテーマ側で実装するには、以下のコードをfunctions.phpに追記してください。

///////////////////////////////////////////////////
//クラシックテキストウィジェットの追加
///////////////////////////////////////////////////
class DemoClassicTextWidget extends WP_Widget {

    public function __construct() {
        $widget_ops = array( 'classname' => 'classic-textwidget', 'description' => 'テキストエディターのみの旧タイプのテキストウィジェット（Wordpress4.8以前のビジュアルエディターのないテキストウィジェット）。' );
        $control_ops = array( 'width' => 400, 'height' => 350 );
        parent::__construct( 'DemoClassicTextWidget', 'クラシックテキストウィジェット', $widget_ops, $control_ops );
    }

    public function widget( $args, $instance ) {
            $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );

            $widget_text = ! empty( $instance['text'] ) ? $instance['text'] : '';

            $text = apply_filters( 'classic_widget_text', $widget_text, $instance, $this );

            echo $args['before_widget'];
            if ( ! empty( $title ) ) :
                echo $args['before_title'] . $title . $args['after_title'];
            endif; ?>
                <div class="classic-text-widget"><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
            <?php
            echo $args['after_widget'];
    }

    //アップデート処理
    public function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance['title'] = sanitize_text_field( $new_instance['title'] );

            if ( current_user_can( 'unfiltered_html' ) ){
                $instance['text'] = $new_instance['text'];
            } else {
                $instance['text'] = wp_kses_post( $new_instance['text'] );
            }

            $instance['filter'] = ! empty( $new_instance['filter'] );

            return $instance;
    }
    //ウィジェット画面の入力フォーム
    public function form( $instance ) {
            $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
            $filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
            $title = sanitize_text_field( $instance['title'] );
            ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>">タイトル：</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

            <p><label for="<?php echo $this->get_field_id( 'text' ); ?>">内容：</label>
            <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_textarea( $instance['text'] ); ?></textarea></p>

            <p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>">自動的に段落を追加する</label></p>
            <?php

    }
}
add_action('widgets_init', create_function('', 'return register_widget("DemoClassicTextWidget");'));

functions.php編集前はバックアップを取ってください。

上記コードは、以下のClassic Text Widgetプラグインのコードを参考にさせていただきました。

参考 Classic Text Widget — WordPress Plugins