QUESTION#1 →
此线程是所讨论内容的扩展here, 但既然答案已经被接受了,所以我正在创建一个新的线程。
我们经常会遇到这样的情况,即我们必须在垂直侧栏和水平侧栏中显示相同的小部件。为了完美地实现这一点,我们必须调整CSS的一个侧栏。要么我们通过一些javascript,要么通过一些drop down/CHECKBOX 小部件表单中的安排,可以记录其他CSS 对于horizontal 或vertical 侧栏。还建议不要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 , __( \'…\', \'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
最合适的回答,由SO网友:Dave Romsey 整理而成
下面是小部件的更新版本,它处理垂直布局选项,包括类别和排除类别。
处理垂直布局选项非常简单;我们只需检查该选项是否被选中,如果被选中,则输出相应的类。
处理类别的包含/排除稍微复杂一些,因为我们将这些设置作为字符串(以逗号分隔的ID列表)从用户处获取,并将这些值转换为数组,以便在WP_Query
参数category__in
和category__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 , __( \'…\', \'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\');
});