如何在沒有插件的 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>
 結束； 
 萬一;