wordpress酷炫相冊頁面怎么制作

用一下幾個插件就可以了

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、嘉黎網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為嘉黎等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1.Coppermine相冊

簡介：Coppermine Gallery本身是個簡便易用的php相冊，而后推出的psnGallery插件使得WordPress用戶可以很方便地在blog里面插入圖片。

好處：psnGallery的功能非常強(qiáng)大，是圖片blog用戶的首選。

缺陷：Coppermine Gallery缺省安裝的界面非常復(fù)雜。

2.Menalto Gallery相冊

簡介：這個相冊可能是最受歡迎的網(wǎng)站相冊軟件了，非常容易安裝，而且支持自定義的html鑲嵌方式（通過修改html_wrap/wrapper.header文件），有各種上載方式，適合圖片文件很多的用戶。

好處：功能多，可以讓整個網(wǎng)站風(fēng)格一致。

缺陷：沒有專門給WordPress用戶的插件，要在blog里引用圖片還需要剪貼代碼。

3.Pictorialis插件

簡介：這個插件是專門為了把WordPress變成圖片blog網(wǎng)站而開發(fā)的，可以從預(yù)設(shè)的目錄里讀取圖片文件，直接生成blog正文。

好處：方便需要每天上載圖片的用戶。

缺陷：不太適合圖片非常多，只想在正文中引用少數(shù)圖片的用戶，上載功能比較有限。

如何不用插件在WordPress上建一個相冊

一般來說大家會用類似NextGen Gallery這樣一些插件來實現(xiàn)這種效果。其實除了使用第三方插件，還可以用WordPress自帶的功能來達(dá)到同樣的效果。不過在此之前大家要對WordPress和HTML/CSS有很好的了解哦。

相冊最終效果

在開始之前，讓我們先確定一下最終的效果:

用戶點擊相冊頁面時，頁面以網(wǎng)格狀展示不同的封面以表示不同月份的相冊。我們每個月會創(chuàng)建一個相冊，當(dāng)月所有照片都會包含在其中。

如果用戶點擊相冊封面，就會看到一個相冊的專屬頁面，在那里你可以寫一點背景信息，同時把這個相冊里的所有照片都列出來。

如果用戶點擊單張照片，就可以去到每張照片各自的頁面，在那里他們可以看到每張照片的標(biāo)題，拍攝者的信息和相關(guān)鏈接。

如果整個網(wǎng)站就是用來展示相冊，那么大家可以使用默認(rèn)格式的post。但要是你還有個博客，那么這時就需要用自定義的post類型了。

讓我們來創(chuàng)建一個相冊吧

首先你要創(chuàng)建一個網(wǎng)站專屬插件(甚至是一個項目專屬插件)。

如果你要用自定義的post，那你應(yīng)該生成一個代碼，再把它粘貼到網(wǎng)站專門的插件中去。

為了制造網(wǎng)格效果，接下來你需要在WordPress中設(shè)定一下附加圖像的尺寸。

例如：設(shè)完圖像尺寸之后，我們還要給媒體上傳目錄添加字段。這樣你就可以在上傳每個圖像的時候加上攝影者的名字和他們的URL了。

一旦做完這一步，我們就可以繼續(xù)添加相冊了。把所有你想要加到相冊里的圖上傳上去。然后再附上一張不同的照片封面，把它設(shè)為主圖像。大家可以在post的內(nèi)容欄里寫上背景信息。

既然大家已經(jīng)在后臺加好了幾個相冊，我們就可以加上代碼讓它運(yùn)行了。假設(shè)你的自定義post類型叫做albums，那么你就會新建一個叫做archive-albums.php.的模板文件夾。粘貼上你想要的程序頭和尾，側(cè)邊欄和其他設(shè)計元素，然后新建一個post loop。

在那個PL中，我們將會列出同個post中的所有附件，但不包括超鏈接到單個頁面的縮略圖。

我們也會分別加上主post縮略圖（即相冊封面），再把它超鏈接到單個的post頁面上去（即相冊頁面）。

我們打算用列表的辦法來制作網(wǎng)格圖像。這段程序是這樣的：

對于主要的CSS風(fēng)格，大家真正要考慮的問題是相冊網(wǎng)格分類這樣我們就可以把每張圖片都放在網(wǎng)格中合適的位置，以達(dá)到我們想要的風(fēng)格了。

接下來大家需要新建一個單個附件的模板。這將會是今后用戶看到的頁面，以便他們就可以看到每一個圖像。用戶會在這里看到圖像的標(biāo)題，攝影者的名字和他們的鏈接。大家可以隨意調(diào)整自己喜歡的單個模板。

現(xiàn)在還有最后一件事要做，還是假設(shè)你的自定義post類型叫做album，你需要新建一個single-albums.php文件，把所有程序頭、尾，工具欄或者其他你想要的設(shè)計元素都復(fù)制一下。

在loop元素里做一些和存檔相冊模板里基本同樣的處理。不過在添加主圖像和附件之前，你還需要加上相冊標(biāo)題和描述。這一步通過添加代碼就可以完成了，像這樣：

好了！大功告成！

wordpress寫文章過程中添加創(chuàng)建的相冊，如何給相冊里的每張圖片單獨(dú)添加外鏈？

圖片信息實際仍存儲在posts表中，post_type為attachment

后臺相冊編輯界面里沒有專門的欄目用于填寫外鏈地址，不過可以通過其他字段實現(xiàn)啊

如下圖，在alt text字段里填上該圖片的外鏈

接著，需要參考wp-includes/media.php文件里的gallery_shortcode函數(shù)來重構(gòu)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默認(rèn)的媒體庫功能，然后創(chuàng)建相冊即可，只是這個需要你所使用的WordPress主題前端CSS的一個美化，你看看截圖，是不是這樣的效果呢！