Question

我想注册这样的侧边栏。我已使用此代码注册了一个小部件

register_sidebar(array(
            'name'=>esc_html__('Main Sidebar', 'software'),
            'id'=>'sidebar-1',
            'description'=>'This widget is for Right Sidebar',
            'before_widget'=>'<aside class="col-sm-3 right-part pr0">',
            'after_widget'=>' </aside>',
            'before_title'=>'<div class="col-sm-12"><h2>',
            'after_title'=>'</h2></div>'
            ));

我的HTML代码是

<aside class="col-sm-3 right-part pr0">
<div class="col-sm-12 sms p0">
    <img src="images/sms-add.jpg" class="img-responsive">
    <h2>Recommended</h2>
</div>
<div class="col-sm-12 apps p0">
    <div class="col-sm-3 mb-img recommended p0">
        <img src="images/window.png" class="img-responsive">
    </div>
    <div class="col-sm-9 recommended pr0">
        <h4>Windows 7 mainstrem support ends</h4>
    </div>
</div></aside>

那我怎么能这样做呢。我需要注册自定义小部件吗？还是有其他解决方案？

先谢谢。

Answer 1

是的，您也可以自定义，但请按照此插件进行操作

https://wordpress.org/plugins/recent-posts-widget-with-thumbnails/

https://wordpress.org/plugins/flexible-posts-widget/

所以从这两个方面你得到你想要的输出。

** WITH OUT PLUGIN **

STEP -1

在functions.php文件中，编写以下代码：

<?php 
class Realty_Widget extends WP_Widget{
function __construct() {
    parent::__construct(
        'realty_widget', // Base ID
        'Realty Widget', // Name
        array('description' => __( 'Displays your latest listings. Outputs the post thumbnail, title and date per listing'))
       );
}
function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['numberOfListings'] = strip_tags($new_instance['numberOfListings']);
        return $instance;
}


} //end class Realty_Widget
register_widget('Realty_Widget');

STEP -2 form（）方法

包含2个字段的非常简单的表单：Widget标题的文本字段，以及我们要显示的列表数量的下拉列表：

<?php function form($instance) {
    if( $instance) {
        $title = esc_attr($instance['title']);
        $numberOfListings = esc_attr($instance['numberOfListings']);
    } else {
        $title = '';
        $numberOfListings = '';
    }
    ?>
        <p>
        <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'realty_widget'); ?></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 $title; ?>" />
        </p>
        <p>
        <label for="<?php echo $this->get_field_id('numberOfListings'); ?>"><?php _e('Number of Listings:', 'realty_widget'); ?></label>
        <select id="<?php echo $this->get_field_id('numberOfListings'); ?>"  name="<?php echo $this->get_field_name('numberOfListings'); ?>">
            <?php for($x=1;$x<=10;$x++): ?>
            <option <?php echo $x == $numberOfListings ? 'selected="selected"' : '';?> value="<?php echo $x;?>"><?php echo $x; ?></option>
            <?php endfor;?>
        </select>
        </p>
    <?php
    }

STEP - 3 widget（）方法

<?php 
function widget($args, $instance) {
    extract( $args );
    $title = apply_filters('widget_title', $instance['title']);
    $numberOfListings = $instance['numberOfListings'];
    echo $before_widget;
    if ( $title ) {
        echo $before_title . $title . $after_title;
    }
    $this->getRealtyListings($numberOfListings);
    echo $after_widget;
}

STEP -4拉我们的自定义帖子

此方法将查询我们的自定义帖子。它只会返回我们在小部件中保存的帖子数量。将此代码添加到我们的课程中：

<?php 
function getRealtyListings($numberOfListings) { //html
    global $post;
    add_image_size( 'realty_widget_size', 85, 45, false );
    $listings = new WP_Query();
    $listings->query('post_type=listings&posts_per_page=' . $numberOfListings );
    if($listings->found_posts > 0) {
        echo '<ul class="realty_widget">';
            while ($listings->have_posts()) {
                $listings->the_post();
                $image = (has_post_thumbnail($post->ID)) ? get_the_post_thumbnail($post->ID, 'realty_widget_size') : '<div class="noThumb"></div>';
                $listItem = '<li>' . $image;
                $listItem .= '<a href="' . get_permalink() . '">';
                $listItem .= get_the_title() . '</a>';
                $listItem .= '<span>Added ' . get_the_date() . '</span></li>';
                echo $listItem;
            }
        echo '</ul>';
        wp_reset_postdata();
    }else{
        echo '<p style="padding:25px;">No listing found</p>';
    }
}

请注意以上第4步，我的帖子类型是列表所以我用它

您可以设置自己的帖子类型。

ex-你需要像这样使用

$listings->query('post_type=post&posts_per_page=' . $numberOfListings );

AND IN END一旦获得图像和文本，然后根据您的设计设置自己的CSS。

如何使用帖子缩略图注册小部件并发布标题

1 个答案: