如何在没有插件的 WordPress 中创建相册库

已发表: 2021-11-12

相册画廊

在本文中，我们将向您展示如何在没有插件的情况下在 WordPress 中创建相册库。

我们都知道，使用 WordPress 中的插件，没有什么是不可能实现的。

但是您使用的插件越多，您的网站性能下降得越多。

对于任何网站来说，图库都扮演着非常重要的角色。

如果您的画廊涉及复杂的作品和过滤器，则整个网站的性能可能会受到打击。

相册画廊应该有几张照片驻留在里面。

在这里，我们正在创建一个月度相册，以便每个相册都有一个封面图片，当点击封面图片时，它会带您进入相册以单独查看每张照片。

您还需要知道如何在没有插件的情况下在 WordPress 中创建相册库来完成复杂的任务，如果您想使用插件，您需要购买高级插件。

此外，您可以使用这些照片编辑软件之一来编辑将附加到您的相册画廊的照片。

相册画廊

在没有插件的 WordPress 中创建相册库的步骤

实现该目的所需的所有功能都可以使用 WordPress 内置功能来完成。将每个月度专辑视为具有自己单页的帖子。将相册中的每个图像视为具有自己单页的附件。

相册需要缩略图，该功能内置在 WordPress 中。如果您的网站是摄影师的网站，那么您可以将默认帖子转为相册。否则，您必须创建自定义帖子类型。

创建特定于站点的插件（不是现成的）和自定义帖子类型

您需要创建一个不依赖于您的主题的特定于站点的插件。它们对于创建自定义帖子类型、添加短代码、显示缩略图等非常有用。要创建特定于站点的插件，您必须使用 FTP 转到插件目录。

在 wp-content/plugins/ 下创建一个新文件夹，并将该文件夹命名为与您要创建的插件相同的名称。进入文件夹并创建一个与文件夹同名的 php 文件。将以下代码粘贴到文件中。

/*
插件名称：website.com 的站点插件
描述： website.com 的特定于站点的代码更改
*/
/* 开始在此行下方添加函数 */
/* 停止在此行下方添加函数 */

保存文件并退出。上述代码没有任何意义，在创建自定义帖子类型时会被替换。

从 WordPress 自定义帖子类型代码生成器生成自定义帖子类型的代码。

显示其他图像尺寸和其他字段–

在管理仪表板中，转到外观，然后转到编辑器。找到文件 functions.php 并添加以下代码，用于为网格显示注册额外的图像大小。

add_image_size('相册网格', 225, 150, true );

相册画廊

如果您想在上传图片时向媒体上传器添加额外的自定义字段，例如摄影师的姓名、他们的页面和其他信息，您需要在 functions.php 中添加以下代码。

/**
 * 将摄影师姓名和 URL 字段添加到媒体上传器
 * @param $form_fields 数组，包含在附件表单中的字段
 * @param $post 对象，数据库中的附件记录
 * @return $form_fields，修改后的表单字段
 */

功能 be_attachment_field_credit( $form_fields, $post ) {
    $form_fields['be-photographer-name'] = array(
        '标签' = '摄影师姓名',
        '输入' = '文本',
        'value' = get_post_meta($post-ID, 'be_photographer_name', true ),
        'helps' ='如果提供，将显示照片来源',
    );
    $form_fields['be-photographer-url'] = 数组（
        'label' ='摄影师网址',
        '输入' ='文本',
        'value' =get_post_meta($post-ID, 'be_photographer_url', true ),
        'helps' = '添加摄影师 URL',
    );
    返回 $form_fields;
}
add_filter('attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2);

/**
 * 在媒体上传器中保存摄影师姓名和 URL 的值
 * @param $post 数组，数据库的发布数据
 * @param $attachment 数组，来自 $_POST 表单的附件字段
 * @return $post 数组，修改后的数据
 */
函数 be_attachment_field_credit_save($post, $attachment) {
    if(isset($attachment['be-photographer-name']))
        update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );
    if(isset($attachment['be-photographer-url']))
update_post_meta( $post['ID'], 'be_photographer_url', esc_url( $attachment['be-photographer-url'] ) );
    返回 $post;
}
add_filter('attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2);

如您所见，它将在媒体上传器中添加两个文本字段，即摄影师姓名和摄影师 URL。

创建页面以显示所有专辑

现在，是时候创建一些相册（自定义帖子类型）并向其中添加照片了。特色图片将是专辑的封面图片。您添加到帖子内容区域的内容将成为相册的描述。

相册模板页面

创建一个文件并将其命名为archive-albums.php。复制页眉、页脚、侧边栏和其他 UI 元素代码并粘贴到其中。将以下代码粘贴到其中以在一页中显示所有专辑。

<li class="album-grid">a href="title=""</a></li>
post_type == '专辑' $post-post_status == 'publish' ) {
        $attachments = get_posts（数组（
            'post_type' ='附件',
            'posts_per_page' =-1,
            'post_parent' =$post-ID,
            '排除' =get_post_thumbnail_id()
        ));
        如果（$附件）{
            foreach ( $attachments 作为 $attachment ) {
                $class = "后附件 mime-" 。 sanitize_title($attachment-post_mime_type);
                $title = wp_get_attachment_link($attachment-ID, 'album-grid', true );
                echo '<li class="' . $class . ' album-grid">' . $标题。 '</li>';
            }           
        }
    }

将以下代码放在主题的主 CSS 文件中，以便封面图像显示在网格中。

.album-grid{宽度：225px; 高度：150px； 向左飘浮; 列表样式：无； 列表样式类型：无； 边距：0 18px 30px 0px;}

每个图像的模板页面

创建一个文件并将其命名为 single-attachments.php。复制主题的预构建 single.php 中的所有代码。您可以在外观菜单的编辑器下找到它。然后在您的 single-attachments.php 中找到循环代码并将该部分替换为以下内容。


if ( have_posts() ) : while ( have_posts() ) : the_post();

$photographer = get_post_meta($post-ID, 'be_photographer_name', true);

$photographerurl = get_post_meta($post-ID, 'be_photographer_url', true);

<h1>the_title();</h1>
<div class="photometa"><span class="photographername"> echo $photographer; </span> // <a href=" echo $photographerurl " target="_blank" class="photographerurl" rel="noopener noreferrer"> echo $photographerurl </a></div>
                        <div class="entry-attachment">
 if ( wp_attachment_is_image( $post-id ) ) : $att_image = wp_get_attachment_image_src( $post-id, "full"); 
                        <p class="attachment"><a>id); "title="the_title(); " rel="attachment"<img src=" echo $att_image[0];" width=" echo $att_image[1];" height="echo $att_image[2];" class="attachment-medium">post_excerpt ;" /</a>
                        </p>
 别的 ：
                        <a>ID) "title="echo wp_specialchars(get_the_title($post-ID), 1)" rel="attachment"echo basename($post-guid) </a>
 万一; 
                        </div>
 结束； 
 万一;