在wordpress中显示元素组的最佳方式

时间:2017-01-11 14:58:37

标签: wordpress wordpress-theming custom-wordpress-pages

我刚刚开始使用wordpress开展项目。我想知道显示这样一组列的最佳做法是什么(以红色突出显示)enter image description here

页面中的

(帖子)。我要求创建帖子的人可以插入具有不同文本和标题的默认列。 我尝试过短码但看起来太复杂了。我想要一些像输入字段的形式,它将生成列。感谢

1 个答案:

答案 0 :(得分:0)

我使用自定义帖子类型和短代码解决了这个问题。

插件(可选 - 您可以手动编码所有内容)

  • 自定义帖子类型和自定义字段创建者 - WCK
  • 直观的自定义发布订单

创建自定义帖子类型和字段。 使用直观的自定义发布顺序允许用户重新排序帖子。

自定义此短代码模板以符合您的代码和要求:

add_shortcode('cpt-list', 'jpro_cpt_list'); 

function jpro_cpt_list() {

    $args = array ( 
        'post_type' => array( 'cpt' ), 
        'posts_per_page' => '-1', 
        'orderby' => 'menu_order', 
        'order'   => 'ASC' 
    );
    $query = new WP_Query( $args );

    $cpt_list = '<div class="jpro-cpt cpt-list container">';    

    if ( $query->have_posts() ) {                                   
        while ( $query->have_posts() ) {
            $query->the_post(); 

            $post   = get_post($id);
            $postID = $post->ID;

            $image  = get_the_post_thumbnail( $postID, 'medium', array( 'class' => 'aligncenter' ));
            $name   = get_the_title($postID);   
            $bio    = apply_filters('the_content', $post->post_content); 


            if(!empty($image)){ 
                $output_image = '<div class="cpt-list image">'.$image.'</div>';
            } else {
                $output_image = '';
            }

            if(!empty($name)){
                $output_name ='<h3 class="cpt-name cpt-list">'.$name.'</h3>';
            } else {
                $output_name = '';
            }

            if(!empty($bio)){
                $output_bio ='<div class="cpt-bio cpt-list">'.$bio.'</div>';
            } else {
                $output_bio = '';
            }

                $cpt_list .= '<section class="jpro-cpt cpt-list columnClass">';
                $cpt_list .= $output_image;
                $cpt_list .= $output_name;
                $cpt_list .= $output_bio;               
                $cpt_list .= '</section>';

        }   
    } else {
        $cpt_list .='<p>Ooops! No cpt Found.</p>';
    }

    $cpt_list .='</div>';       
    wp_reset_postdata();
    return $cpt_list;

}