13518219792
用一下幾個插件就可以了
成都創新互聯公司專注于企業全網營銷推廣、網站重做改版、嘉黎網站定制設計、自適應品牌網站建設、H5技術、電子商務商城網站建設、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為嘉黎等各大城市提供網站開發制作服務。
1.Coppermine相冊
簡介：Coppermine Gallery本身是個簡便易用的php相冊，而后推出的psnGallery插件使得WordPress用戶可以很方便地在blog里面插入圖片。
好處：psnGallery的功能非常強大，是圖片blog用戶的首選。
缺陷：Coppermine Gallery缺省安裝的界面非常復雜。
2.Menalto Gallery相冊
簡介：這個相冊可能是最受歡迎的網站相冊軟件了，非常容易安裝，而且支持自定義的html鑲嵌方式（通過修改html_wrap/wrapper.header文件），有各種上載方式，適合圖片文件很多的用戶。
好處：功能多，可以讓整個網站風格一致。
缺陷：沒有專門給WordPress用戶的插件，要在blog里引用圖片還需要剪貼代碼。
3.Pictorialis插件
簡介：這個插件是專門為了把WordPress變成圖片blog網站而開發的，可以從預設的目錄里讀取圖片文件，直接生成blog正文。
好處：方便需要每天上載圖片的用戶。
缺陷：不太適合圖片非常多，只想在正文中引用少數圖片的用戶，上載功能比較有限。
一般來說大家會用類似NextGen Gallery這樣一些插件來實現這種效果。其實除了使用第三方插件，還可以用WordPress自帶的功能來達到同樣的效果。不過在此之前大家要對WordPress和HTML/CSS有很好的了解哦。
相冊最終效果
在開始之前，讓我們先確定一下最終的效果:
用戶點擊相冊頁面時，頁面以網格狀展示不同的封面以表示不同月份的相冊。我們每個月會創建一個相冊，當月所有照片都會包含在其中。
如果用戶點擊相冊封面，就會看到一個相冊的專屬頁面，在那里你可以寫一點背景信息，同時把這個相冊里的所有照片都列出來。
如果用戶點擊單張照片，就可以去到每張照片各自的頁面，在那里他們可以看到每張照片的標題，拍攝者的信息和相關鏈接。
如果整個網站就是用來展示相冊，那么大家可以使用默認格式的post。但要是你還有個博客，那么這時就需要用自定義的post類型了。
讓我們來創建一個相冊吧
首先你要創建一個網站專屬插件(甚至是一個項目專屬插件)。
如果你要用自定義的post，那你應該生成一個代碼，再把它粘貼到網站專門的插件中去。
為了制造網格效果，接下來你需要在WordPress中設定一下附加圖像的尺寸。
例如：設完圖像尺寸之后，我們還要給媒體上傳目錄添加字段。這樣你就可以在上傳每個圖像的時候加上攝影者的名字和他們的URL了。
一旦做完這一步，我們就可以繼續添加相冊了。把所有你想要加到相冊里的圖上傳上去。然后再附上一張不同的照片封面，把它設為主圖像。大家可以在post的內容欄里寫上背景信息。
既然大家已經在后臺加好了幾個相冊，我們就可以加上代碼讓它運行了。假設你的自定義post類型叫做albums，那么你就會新建一個叫做archive-albums.php.的模板文件夾。粘貼上你想要的程序頭和尾，側邊欄和其他設計元素，然后新建一個post loop。
在那個PL中，我們將會列出同個post中的所有附件，但不包括超鏈接到單個頁面的縮略圖。
我們也會分別加上主post縮略圖（即相冊封面），再把它超鏈接到單個的post頁面上去（即相冊頁面）。
我們打算用列表的辦法來制作網格圖像。這段程序是這樣的：
對于主要的CSS風格，大家真正要考慮的問題是相冊網格分類這樣我們就可以把每張圖片都放在網格中合適的位置，以達到我們想要的風格了。
接下來大家需要新建一個單個附件的模板。這將會是今后用戶看到的頁面，以便他們就可以看到每一個圖像。用戶會在這里看到圖像的標題，攝影者的名字和他們的鏈接。大家可以隨意調整自己喜歡的單個模板。
現在還有最后一件事要做，還是假設你的自定義post類型叫做album，你需要新建一個single-albums.php文件，把所有程序頭、尾，工具欄或者其他你想要的設計元素都復制一下。
在loop元素里做一些和存檔相冊模板里基本同樣的處理。不過在添加主圖像和附件之前，你還需要加上相冊標題和描述。這一步通過添加代碼就可以完成了，像這樣：
好了！大功告成！
圖片信息實際仍存儲在posts表中，post_type為attachment
后臺相冊編輯界面里沒有專門的欄目用于填寫外鏈地址，不過可以通過其他字段實現啊
如下圖，在alt text字段里填上該圖片的外鏈
接著，需要參考wp-includes/media.php文件里的gallery_shortcode函數來重構gallery的輸出
在functions.php中添加代碼如下：
add_filter('post_gallery',?'my_post_gallery',?10,?3);
function?my_post_gallery(?$html?=?'',?$attr,?$instance?)?{
$post?=?get_post();
$html5?=?current_theme_supports(?'html5',?'gallery'?);
$atts?=?shortcode_atts(?array(
'order'??????=?'ASC',
'orderby'????=?'menu_order?ID',
'id'?????????=?$post???$post-ID?:?0,
'itemtag'????=?$html5???'figure'?????:?'dl',
'icontag'????=?$html5???'div'????????:?'dt',
'captiontag'?=?$html5???'figcaption'?:?'dd',
'columns'????=?3,
'size'???????=?'thumbnail',
'include'????=?'',
'exclude'????=?'',
'link'???????=?'none'
),?$attr,?'gallery'?);
$id?=?intval(?$atts['id']?);
if?(?!?empty(?$atts['include']?)?)?{
$_attachments?=?get_posts(?array(?'include'?=?$atts['include'],?'post_status'?=?'inherit',?'post_type'?=?'attachment',?'post_mime_type'?=?'image',?'order'?=?$atts['order'],?'orderby'?=?$atts['orderby']?)?);
$attachments?=?array();
foreach?(?$_attachments?as?$key?=?$val?)?{
$attachments[$val-ID]?=?$_attachments[$key];
}
}?elseif?(?!?empty(?$atts['exclude']?)?)?{
$attachments?=?get_children(?array(?'post_parent'?=?$id,?'exclude'?=?$atts['exclude'],?'post_status'?=?'inherit',?'post_type'?=?'attachment',?'post_mime_type'?=?'image',?'order'?=?$atts['order'],?'orderby'?=?$atts['orderby']?)?);
}?else?{
$attachments?=?get_children(?array(?'post_parent'?=?$id,?'post_status'?=?'inherit',?'post_type'?=?'attachment',?'post_mime_type'?=?'image',?'order'?=?$atts['order'],?'orderby'?=?$atts['orderby']?)?);
}
if?(?empty(?$attachments?)?)?{
return?'';
}
if?(?is_feed()?)?{
$output?=?"\n";
foreach?(?$attachments?as?$att_id?=?$attachment?)?{
$output?.=?wp_get_attachment_link(?$att_id,?$atts['size'],?true?)?.?"\n";
}
return?$output;
}
$itemtag?=?tag_escape(?$atts['itemtag']?);
$captiontag?=?tag_escape(?$atts['captiontag']?);
$icontag?=?tag_escape(?$atts['icontag']?);
$valid_tags?=?wp_kses_allowed_html(?'post'?);
if?(?!?isset(?$valid_tags[?$itemtag?]?)?)?{
$itemtag?=?'dl';
}
if?(?!?isset(?$valid_tags[?$captiontag?]?)?)?{
$captiontag?=?'dd';
}
if?(?!?isset(?$valid_tags[?$icontag?]?)?)?{
$icontag?=?'dt';
}
$columns?=?intval(?$atts['columns']?);
$itemwidth?=?$columns??0???floor(100/$columns)?:?100;
$float?=?is_rtl()???'right'?:?'left';
$selector?=?"gallery-{$instance}";
$gallery_style?=?'';
/**
*?Filters?whether?to?print?default?gallery?styles.
*
*?@since?3.1.0
*
*?@param?bool?$print?Whether?to?print?default?gallery?styles.
*????????????????????Defaults?to?false?if?the?theme?supports?HTML5?galleries.
*????????????????????Otherwise,?defaults?to?true.
*/
if?(?apply_filters(?'use_default_gallery_style',?!?$html5?)?)?{
$gallery_style?=?"
style?type='text/css'
#{$selector}?{
margin:?auto;
}
#{$selector}?.gallery-item?{
float:?{$float};
margin-top:?10px;
text-align:?center;
width:?{$itemwidth}%;
}
#{$selector}?img?{
border:?2px?solid?#cfcfcf;
}
#{$selector}?.gallery-caption?{
margin-left:?0;
}
/*?see?gallery_shortcode()?in?wp-includes/media.php?*/
/style\n\t\t";
}
$size_class?=?sanitize_html_class(?$atts['size']?);
$gallery_div?=?"div?id='$selector'?class='gallery?galleryid-{$id}?gallery-columns-{$columns}?gallery-size-{$size_class}'";
/**
*?Filters?the?default?gallery?shortcode?CSS?styles.
*
*?@since?2.5.0
*
*?@param?string?$gallery_style?Default?CSS?styles?and?opening?HTML?div?container
*??????????????????????????????for?the?gallery?shortcode?output.
*/
$output?=?apply_filters(?'gallery_style',?$gallery_style?.?$gallery_div?);
$i?=?0;
foreach?(?$attachments?as?$id?=?$attachment?)?{
$attr?=?(?trim(?$attachment-post_excerpt?)?)???array(?'aria-describedby'?=?"$selector-$id"?)?:?'';
if?(?!?empty(?$atts['link']?)??'file'?===?$atts['link']?)?{
$image_output?=?wp_get_attachment_link(?$id,?$atts['size'],?false,?false,?false,?$attr?);
}?elseif?(?!?empty(?$atts['link']?)??'none'?===?$atts['link']?)?{
$attr['alt']?=?get_the_title($post-ID);
$image_output?=?wp_get_attachment_image(?$id,?$atts['size'],?false,?$attr?);
$custom_link?=?trim(?strip_tags(?get_post_meta(?$id,?'_wp_attachment_image_alt',?true?)?)?);
$image_output?=?sprintf(?'a?href="%s"?title="%s"%sa',
$custom_link,
$attr['alt'],
$image_output
);
}?else?{
$image_output?=?wp_get_attachment_link(?$id,?$atts['size'],?true,?false,?false,?$attr?);
}
$image_meta??=?wp_get_attachment_metadata(?$id?);
$orientation?=?'';
if?(?isset(?$image_meta['height'],?$image_meta['width']?)?)?{
$orientation?=?(?$image_meta['height']??$image_meta['width']?)???'portrait'?:?'landscape';
}
$output?.=?"{$itemtag}?class='gallery-item'";
$output?.=?"
{$icontag}?class='gallery-icon?{$orientation}'
$image_output
/{$icontag}";
if?(?$captiontag??trim($attachment-post_excerpt)?)?{
$output?.=?"
{$captiontag}?class='wp-caption-text?gallery-caption'?id='$selector-$id'
"?.?wptexturize($attachment-post_excerpt)?.?"
/{$captiontag}";
}
$output?.=?"/{$itemtag}";
if?(?!?$html5??$columns??0??++$i?%?$columns?==?0?)?{
$output?.=?'br?style="clear:?both"?/';
}
}
if?(?!?$html5??$columns??0??$i?%?$columns?!==?0?)?{
$output?.=?"
br?style='clear:?both'?/";
}
$output?.=?"
/div\n";
return?$output;????
}
最后的效果:
這個其實可以直接使用WordPress默認的媒體庫功能，然后創建相冊即可，只是這個需要你所使用的WordPress主題前端CSS的一個美化，你看看截圖，是不是這樣的效果呢！
