需要帮助将其他控件添加到自定义小部件第2部分

时间:2017-05-04 作者:The WP Intermediate

QUESTION#1

此线程是所讨论内容的扩展here, 但既然答案已经被接受了,所以我正在创建一个新的线程。

我们经常会遇到这样的情况,即我们必须在垂直侧栏和水平侧栏中显示相同的小部件。为了完美地实现这一点,我们必须调整CSS的一个侧栏。要么我们通过一些javascript,要么通过一些drop down/CHECKBOX 小部件表单中的安排,可以记录其他CSS 对于horizontalvertical 侧栏。还建议不要pollify too much code with Javascript.

让我进一步解释一下→

public function widget($args, $instance) {
    extract( $args );
    $title = apply_filters( \'widget_title\', $instance[\'title\'] );

/* Display the markup before the widget. */
echo $before_widget;
if ( $title ) {
    echo $before_title . $title . $after_title;
}
/* Create a custom query and get the most recent 4 projects. */
$queryArgs = array(
    /* Do not get posts from the Uncategorized category. */
    \'cat\' => \'-1\',
    /* Order by date. */
    \'orderby\' => \'date\',
    /* Show all posts. */
    \'posts_per_page\' => \'4\'
);
$query = new WP_Query( $queryArgs );
if ( $query->have_posts() ) : ?>
    <ul class="unbullet">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <li class="snippet-box">
            <div>
                <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                <?php the_post_thumbnail( \'medium\', array( \'class\' => \'hundred\' ) ); ?>
                <div class="snippet-text">
                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
            <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( \'large\', array( \'class\' => \'img-responsive\' ) ); ?></a> -->
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif;
/* Display the markup after the widget. */
echo $after_widget;
}
上面是一段在水平侧栏上成功运行的代码,但如果我们希望在垂直侧栏中显示它,那么我们只需再添加两个类,即→

垂直

解开-v

这意味着<ul class="unbullet"> 必须更改为→

<ul class="unbullet unbullet-v">
以及

<li class="snippet-box"> 必须换成这个

<li class="snippet-box vertical">
借助于此post 我可以在backend 类型

我已成功将此表单添加到小部件表单方法中→

<p>
        <input class="checkbox" type="checkbox" <?php checked( $instance[ \'vertical_sidebar_check\' ], \'on\' ); ?> id="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>" name="<?php echo $this->get_field_name( \'vertical_sidebar_check\' ); ?>" />
        <label for="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>"><?php _e(\'Select for Vertical Sidebar\', \'text-domain\'); ?></label>
</p>
这在小部件更新方法中→

$instance[ \'vertical_sidebar_check\' ] = $new_instance[ \'vertical_sidebar_check\' ];

但是,虽然我理解逻辑,但不知道如何将其应用到PHP代码中。

英语的逻辑是这样的→

    <ul class="unbullet <?php If the check box is ticked then echo this class: unbullet-v ?> ">
        <li class="snippet-box ?php If the check box is ticked then echo this class:vertical ?> ">
但我不知道如何用纯PHP代码实现上述逻辑。

LAST QUESTION:我还想在后端为类别过滤器显示的帖子提供一个选项,这意味着类别选择的后端表单方法,然后小部件更新方法和小部件前端方法将根据所选类别显示帖子。

小部件的完整源代码→

<?php
ini_set(\'display_errors\',0);
error_reporting(E_ALL|E_STRICT);
class chimp_post_widget extends WP_Widget {
    function __construct() {
        //Create Widget
        parent::__construct(
            \'post_display_widget\',
            esc_html__(\'The Post Widget\',\'text_domain\'),
            array(
                \'classname\'       =>    \'post-widget\',
                \'description\'     =>    esc_html__(\'A Post Thumbnail Widget\', \'text_domain\' )
            )
        );
    }

    public function form( $instance ) {
       $title = isset( $instance[\'title\'] ) ? $instance[\'title\'] : \'\';
       $number_of_posts = isset( $instance[\'number_of_posts\'] ) ? absint( $instance[\'number_of_posts\'] ) : 5;
       $number_of_words = isset( $instance[\'number_of_words\'] ) ? absint( $instance[\'number_of_words\'] ) : 20;
       ?>
       <p><label for="<?php echo $this->get_field_id( \'title\' ); ?>"><?php _e( \'Title:\', \'text_domain\' ); ?></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( \'number_of_posts\' ); ?>"><?php _e( \'Number of projects to show:\', \'text_domain\' ); ?></label>
       <input class="tiny-text" id="<?php echo $this->get_field_id( \'number_of_posts\' ); ?>" name="<?php echo $this->get_field_name( \'number_of_posts\' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_posts; ?>" size="3" /></p>

       <p><label for="<?php echo $this->get_field_id( \'number_of_words\' ); ?>"><?php _e( \'Set the word limit for project descriptions:\', \'text_domain\' ); ?></label>
       <input class="tiny-text" id="<?php echo $this->get_field_id( \'number_of_words\' ); ?>" name="<?php echo $this->get_field_name( \'number_of_words\' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_words; ?>" size="4" /></p>

       <p>
        <input class="checkbox" type="checkbox" <?php checked( $instance[ \'vertical_sidebar_check\' ], \'on\' ); ?> id="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>" name="<?php echo $this->get_field_name( \'vertical_sidebar_check\' ); ?>" />
        <label for="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>"><?php _e(\'Select for Vertical Sidebar\', \'text-domain\'); ?></label>
      </p>


       <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance[\'title\']           = sanitize_text_field( $new_instance[\'title\'] );
        $instance[\'number_of_posts\'] = absint( $new_instance[\'number_of_posts\'] );
        $instance[\'number_of_words\'] = absint( $new_instance[\'number_of_words\'] );
        $instance[ \'vertical_sidebar_check\' ] = $new_instance[ \'vertical_sidebar_check\' ];
        return $instance;
    }

    public function widget($args, $instance) {
        extract( $args );
        $title = apply_filters( \'widget_title\', $instance[\'title\'] );

        /* Display the markup before the widget. */
        echo $args[\'before_widget\'];
       if ( ! empty( $instance[\'title\'] ) ) {
           echo $args[\'before_title\'] . apply_filters( \'widget_title\', $instance[\'title\'] ) . $args[\'after_title\'];
       }

       $number_of_posts = ( ! empty( $instance[\'number_of_posts\'] ) ) ? absint( $instance[\'number_of_posts\'] ) : 5;
       if ( ! $number_of_posts ) {
           $number_of_posts = 5;
       }

       $number_of_words = ( ! empty( $instance[\'number_of_words\'] ) ) ? absint( $instance[\'number_of_words\'] ) : 20;
       if ( ! $number_of_words ) {
           $number_of_words = 20;
       }
        /* Create a custom query and get the most recent 4 projects. */
        $queryArgs = array(
            /* Do not get posts from the Uncategorized category. */
            \'cat\' => \'-1\',
            /* Order by date. */
            \'orderby\' => \'date\',
            /* Show all posts. */
            \'posts_per_page\' => $number_of_posts,
        );
        $query = new WP_Query( $queryArgs );
        if ( $query->have_posts() ) : ?>
            <ul class="unbullet unbullet-v">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <li class="snippet-box vertical">
                    <div>
                        <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                        <?php the_post_thumbnail( \'medium\', array( \'class\' => \'hundred\' ) ); ?>
                        <div class="snippet-text">
                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <p><?php echo wp_trim_words( get_the_excerpt(), $number_of_words , __( \'&hellip;\', \'text_domain\' ) ); ?>
                                    </p>
                        </div>
                    </div>
                    <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( \'large\', array( \'class\' => \'img-responsive\' ) ); ?></a> -->
                </li>
            <?php endwhile; ?>
            </ul>
        <?php endif;
        /* Display the markup after the widget. */
        echo $after_widget;
    }
}

add_action(\'widgets_init\', function(){
    register_widget(\'chimp_post_widget\');
})
?>
只有勾选复选框时,我们才能打印或使这些类适用→

 1. unbullet-v 
 2. vertical

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

下面是小部件的更新版本,它处理垂直布局选项,包括类别和排除类别。

处理垂直布局选项非常简单;我们只需检查该选项是否被选中,如果被选中,则输出相应的类。

处理类别的包含/排除稍微复杂一些,因为我们将这些设置作为字符串(以逗号分隔的ID列表)从用户处获取,并将这些值转换为数组,以便在WP_Query 参数category__incategory__not_in.

class chimp_post_widget extends WP_Widget {
    function __construct() {
            //Create Widget
            parent::__construct(
                    \'post_display_widget\',
                    esc_html__(\'The Post Widget\',\'text_domain\'),
                    array(
                            \'classname\'       =>    \'post-widget\',
                            \'description\'     =>    esc_html__(\'A Post Thumbnail Widget\', \'text_domain\' )
                    )
            );
    }

    public function form( $instance ) {
        $title = isset( $instance[\'title\'] ) ? $instance[\'title\'] : \'\';
        $number_of_posts = isset( $instance[\'number_of_posts\'] ) ? absint( $instance[\'number_of_posts\'] ) : 5;
        $number_of_words = isset( $instance[\'number_of_words\'] ) ? absint( $instance[\'number_of_words\'] ) : 20;

        $cat_include = isset( $instance[\'cat_include\'] ) ? $instance[\'cat_include\'] : \'\';
        $cat_exclude = isset( $instance[\'cat_exclude\'] ) ? $instance[\'cat_exclude\'] : \'\';

        $vertical_sidebar_check =  isset( $instance[ \'vertical_sidebar_check\' ] ) && ( \'on\' === $instance[ \'vertical_sidebar_check\' ] ) ? \'on\' : \'off\';
        ?>
        <p><label for="<?php echo $this->get_field_id( \'title\' ); ?>"><?php _e( \'Title:\', \'text_domain\' ); ?></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( \'number_of_posts\' ); ?>"><?php _e( \'Number of projects to show:\', \'text_domain\' ); ?></label>
        <input class="tiny-text" id="<?php echo $this->get_field_id( \'number_of_posts\' ); ?>" name="<?php echo $this->get_field_name( \'number_of_posts\' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_posts; ?>" size="3" /></p>

        <p><label for="<?php echo $this->get_field_id( \'number_of_words\' ); ?>"><?php _e( \'Set the word limit for project descriptions:\', \'text_domain\' ); ?></label>
        <input class="tiny-text" id="<?php echo $this->get_field_id( \'number_of_words\' ); ?>" name="<?php echo $this->get_field_name( \'number_of_words\' ); ?>" type="number" step="1" min="1" value="<?php echo $number_of_words; ?>" size="4" /></p>

        <p><label for="<?php echo $this->get_field_id( \'cat_include\' ); ?>"><?php _e( \'Include Categories:\', \'text_domain\' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( \'cat_include\' ); ?>" name="<?php echo $this->get_field_name( \'cat_include\' ); ?>" type="text" value="<?php echo esc_attr( $cat_include ); ?>" />
        <small>Comma separated list of category IDs to <strong>include</strong> in post query. e.g.: 11,17,347<br>If blank, all categories will be included.</small>
        </p>

        <p><label for="<?php echo $this->get_field_id( \'cat_exclude\' ); ?>"><?php _e( \'Exclude Categories:\', \'text_domain\' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( \'cat_exclude\' ); ?>" name="<?php echo $this->get_field_name( \'cat_exclude\' ); ?>" type="text" value="<?php echo esc_attr( $cat_exclude ); ?>" />
        <small>Comma separated list of category IDs to <strong>exclude</strong> in post query. e.g.: 1,16<br>If blank, no categories will be excluded.</small>
        </p>

        <p><input class="checkbox" type="checkbox" <?php checked( $vertical_sidebar_check, \'on\' ); ?> id="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>" name="<?php echo $this->get_field_name( \'vertical_sidebar_check\' ); ?>" />
        <label for="<?php echo $this->get_field_id( \'vertical_sidebar_check\' ); ?>"><?php _e(\'Select for Vertical Sidebar\', \'text-domain\'); ?></label></p>


         <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance[\'title\']           = sanitize_text_field( $new_instance[\'title\'] );
        $instance[\'number_of_posts\'] = absint( $new_instance[\'number_of_posts\'] );
        $instance[\'number_of_words\'] = absint( $new_instance[\'number_of_words\'] );
        $instance[\'cat_include\']     = sanitize_text_field( $new_instance[\'cat_include\'] );
        $instance[\'cat_exclude\']     = sanitize_text_field( $new_instance[\'cat_exclude\'] );
        $instance[ \'vertical_sidebar_check\' ] = isset( $new_instance[ \'vertical_sidebar_check\' ] ) && ( \'on\' === $new_instance[ \'vertical_sidebar_check\' ] ) ? \'on\' : \'off\';
        return $instance;
    }

    public function widget($args, $instance) {
        extract( $args );

        $title = apply_filters( \'widget_title\', $instance[\'title\'], $instance, $this->id_base );

        echo $args[\'before_widget\'];
        if ( $title ) {
            echo $args[\'before_title\'] . $title . $args[\'after_title\'];
        }

        $number_of_posts = ( ! empty( $instance[\'number_of_posts\'] ) ) ? absint( $instance[\'number_of_posts\'] ) : 5;
        if ( ! $number_of_posts ) {
            $number_of_posts = 5;
        }

        $number_of_words = ( ! empty( $instance[\'number_of_words\'] ) ) ? absint( $instance[\'number_of_words\'] ) : 20;
        if ( ! $number_of_words ) {
            $number_of_words = 20;
        }

        // Convert comma separated string to array for use in WP_Query.
        $category_include = $instance[\'cat_include\'];
        if ( $category_include ) {
            $category_include = explode( \',\', $instance[\'cat_include\'] );
        } else {
            $category_include = array();
        }

        // Convert comma separated string to array for use in WP_Query.
        $category_exclude = $instance[\'cat_exclude\'];
        if ( $category_exclude ) {
            $category_exclude = explode( \',\', $instance[\'cat_exclude\'] );
        } else {
            $category_exclude = array();
        }

        $vertical_sidebar_check = isset( $instance[ \'vertical_sidebar_check\' ] ) && ( \'on\' === $instance[ \'vertical_sidebar_check\' ] ) ? \'on\' : \'off\';

        /* Create a custom query and get the most recent x projects. */
        $queryArgs = array(
            \'category__in\' => $category_include,
            \'category__not_in\' => $category_exclude,
            /* Order by date. */
            \'orderby\' => \'date\',
            /* Show all posts. */
            \'posts_per_page\' => $number_of_posts,
        );

        $query = new WP_Query( $queryArgs );
        if ( $query->have_posts() ) : ?>
                <ul class="unbullet<?php echo $vertical_sidebar_check === \'on\' ? \' unbullet-v\' : \'\'; ?>">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                        <li class="snippet-box<?php echo $vertical_sidebar_check === \'on\' ? \' vertical\' : \'\'; ?>">
                            <div>
                                <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                                <?php the_post_thumbnail( \'medium\', array( \'class\' => \'hundred\' ) ); ?>
                                <div class="snippet-text">
                                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                                    <p><?php echo wp_trim_words( get_the_excerpt(), $number_of_words , __( \'&hellip;\', \'text_domain\' ) ); ?></p>
                                </div>
                            </div>
                            <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( \'large\', array( \'class\' => \'img-responsive\' ) ); ?></a> -->
                        </li>
                <?php endwhile; ?>
                </ul>
        <?php endif;
        /* Display the markup after the widget. */
        echo $after_widget;
    }
}

add_action(\'widgets_init\', function(){
    register_widget(\'chimp_post_widget\');
});

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'