wordpress酷炫相册页面怎么制作

用一下几个插件就可以了

成都创新互联公司专注于企业全网营销推广、网站重做改版、嘉黎网站定制设计、自适应品牌网站建设、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正文。

好处：方便需要每天上载图片的用户。

缺陷：不太适合图片非常多，只想在正文中引用少数图片的用户，上载功能比较有限。

如何不用插件在WordPress上建一个相册

一般来说大家会用类似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元素里做一些和存档相册模板里基本同样的处理。不过在添加主图像和附件之前，你还需要加上相册标题和描述。这一步通过添加代码就可以完成了，像这样：

好了！大功告成！

wordpress写文章过程中添加创建的相册，如何给相册里的每张图片单独添加外链？

图片信息实际仍存储在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默认的媒体库功能，然后创建相册即可，只是这个需要你所使用的WordPress主题前端CSS的一个美化，你看看截图，是不是这样的效果呢！

本文题目：wordpress加相册 wordpress图片管理
网站地址：http://chengdu.cdxwcx.cn/article/dopcihi.html