2016年8月24日 星期三

wordpress好工具: Content Views 輕鬆建立grid post 不用任何程式碼

介紹:


wordpress對於post的擺設是自由的,但往往使用者會受到theme的限制,例如:單欄(one column)、雙欄(two column)、三欄、四欄、格狀(grid)等。


post的排列方式會影響來訪人的觀感,讓人耳目一新的或是方便閱讀的風格都可以增加回訪率(return visitor rate : RVR)。




單欄:




雙欄:




格狀:



不同於post的portfolio類型:


有些theme會看到有這種portfolio類型,目的在於完成不同於單欄的其他形式,通常的使用方式參考這邊,也有些會有自己的shortcode。


portfolio的文章叫projects,且有自己的type跟tag,用法跟post一模一樣,如下圖:



一般的shortcode長成這樣:
[portfolio display_types=true display_tags=false include_type=ui-design,app-design columns=3 showposts=10 orderby=title]


使用方式為放在自己想要的page裡面,在那頁page上便會依照shortcode產生portfolio 


display_types : 是否顯示 Project Types
display_tags : 是否顯示tag
include_type : 包含的project type
columns: 為一行顯示的數量
showpost : 為顯示的總數量
orderby : 為排序方式


詳細介紹參考上面連結。


但是此shortcode的缺點是不包含頁數,只能不斷的往下拉,假設有幾百個projects,要看到最後一個project,需要拉動很長的距離。


現在進入正題,開始介紹一個好用的wordpress plugins-Content views。


Content views

教學影片:




如下圖,他會在你的面板新增一個新的類型。


在此以Twenty sixteen的主題為例,為了方便看出功能性,我以wp_insert_post function去新增20個post。


php code:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<?php
        require('wp-blog-header.php');   //重要!!  讓wp_insert_post作用

    for($a=0;$a<20;$a++)
    {
       $my_post['post_title'] = "TEST".$a;
       $my_post['post_content'] = "TEST TEST";
       $my_post['post_type'] = 'post';
       $my_post['post_status']= "publish";
       $post_id=wp_insert_post( $my_post );
       Generate_Featured_Image( "圖片路徑", $post_id  ); 
    } 
    function Generate_Featured_Image( $image_url, $post_id  ){
    $upload_dir = wp_upload_dir();
    $image_data = file_get_contents($image_url);
    $filename = basename($image_url);
    if(wp_mkdir_p($upload_dir['path']))     $file = $upload_dir['path'] . '/' . $filename;
    else                                    $file = $upload_dir['basedir'] . '/' . $filename;
    file_put_contents($file, $image_data);

    $wp_filetype = wp_check_filetype($filename, null );
    $attachment = array(
        'post_mime_type' => $wp_filetype['type'],
        'post_title' => sanitize_file_name($filename),
        'post_content' => '',
        'post_status' => 'inherit'
    );
    $attach_id = wp_insert_attachment( $attachment, $file, $post_id );
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    $attach_data = wp_generate_attachment_metadata( $attach_id, $file );
    $res1= wp_update_attachment_metadata( $attach_id, $attach_data );
    $res2= set_post_thumbnail( $post_id, $attach_id );
 } ?>
</html>

完整網頁如下圖,可以看到它是單欄的樣式,並且有頁碼共3頁。



現在我們將使用Content views讓他變成格狀的樣式。


設定:

content type設定post,Taxonomy 可以過濾多個category。



view type設定樣式選擇grid,items by row設定4表示每一行顯示4個post。



Thumbnail size可以選擇大小,Content裡的show excerpt是在post下顯示文章不完整的部分,words是字數,20 words就是20個字,不過注意這裡指的是英文的字,以空白鍵做區分,不適用於中文的標點符號。


Pagination為分頁,也就是產生頁碼,items per page是一頁顯示多少個post,15就是1頁只顯示15個posts。



SAVE之後會產生一個id:


結果:


沒有留言:

張貼留言