介紹:
wordpress對於post的擺設是自由的,但往往使用者會受到theme的限制,例如:單欄(one column)、雙欄(two column)、三欄、四欄、格狀(grid)等。
post的排列方式會影響來訪人的觀感,讓人耳目一新的或是方便閱讀的風格都可以增加回訪率(return visitor rate : RVR)。
詳細介紹參考上面連結。
但是此shortcode的缺點是不包含頁數,只能不斷的往下拉,假設有幾百個projects,要看到最後一個project,需要拉動很長的距離。
現在進入正題,開始介紹一個好用的wordpress plugins-Content views。
現在我們將使用Content views讓他變成格狀的樣式。
設定:
content type設定post,Taxonomy 可以過濾多個category。
Thumbnail size可以選擇大小,Content裡的show excerpt是在post下顯示文章不完整的部分,words是字數,20 words就是20個字,不過注意這裡指的是英文的字,以空白鍵做區分,不適用於中文的標點符號。
SAVE之後會產生一個id:
結果:
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>
20>
完整網頁如下圖,可以看到它是單欄的樣式,並且有頁碼共3頁。
設定:
content type設定post,Taxonomy 可以過濾多個category。
view type設定樣式選擇grid,items by row設定4表示每一行顯示4個post。
Pagination為分頁,也就是產生頁碼,items per page是一頁顯示多少個post,15就是1頁只顯示15個posts。
SAVE之後會產生一個id:
結果:







沒有留言:
張貼留言