วิธีสร้างแกลลอรี่อัลบั้มรูปภาพใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

ในบทความนี้เราจะแสดง วิธีสร้างแกลเลอรีอัลบั้มรูปภาพใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

เราทุกคนรู้ดีว่าด้วยปลั๊กอินใน WordPress ไม่มีอะไรที่เป็นไปไม่ได้

แต่ยิ่งคุณใช้ปลั๊กอินมากเท่าไร ประสิทธิภาพของเว็บไซต์ของคุณก็จะยิ่งลดลงเท่านั้น

สำหรับเว็บไซต์ใดๆ แกลเลอรีมีบทบาทสำคัญมาก

หากแกลเลอรีของคุณมีงานและตัวกรองที่ซับซ้อน ประสิทธิภาพของเว็บไซต์โดยรวมก็อาจล้มเหลวได้

แกลเลอรีอัลบั้มรูปภาพควรมีรูปถ่ายหลายรูปอยู่ภายใน

เรากำลังสร้างอัลบั้มรายเดือนเพื่อให้ทุกอัลบั้มมีภาพหน้าปก และเมื่อมีการคลิกภาพหน้าปก ระบบจะนำคุณเข้าไปในอัลบั้มเพื่อดูภาพแต่ละภาพทีละภาพ

คุณต้องรู้ วิธีสร้างแกลเลอรีอัลบั้มรูปภาพใน WordPress โดยไม่ต้องใช้ปลั๊กอิน เพื่อทำงานที่ซับซ้อนซึ่งคุณจำเป็นต้องซื้อปลั๊กอินพรีเมียมหากต้องการใช้ปลั๊กอิน

นอกจากนี้ คุณอาจใช้ซอฟต์แวร์แก้ไขรูปภาพเหล่านี้เพื่อแก้ไขรูปภาพที่จะแนบไปกับแกลเลอรีอัลบั้มรูปภาพของคุณ

ขั้นตอนในการ สร้างแกลลอรี่อัลบั้มรูปภาพใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

คุณสมบัติทั้งหมดที่จำเป็นในการบรรลุวัตถุประสงค์สามารถทำได้โดยใช้ฟังก์ชันในตัวของ WordPress พิจารณาแต่ละอัลบั้มรายเดือนเป็นโพสต์ที่มีหน้าเดียว พิจารณาแต่ละภาพในอัลบั้มเป็นไฟล์แนบที่มีหน้าเดียว

อัลบั้มจะต้องมีภาพขนาดย่อ และคุณลักษณะนี้สร้างขึ้นใน WordPress หากเว็บไซต์ของคุณเป็นเว็บไซต์ของช่างภาพ คุณสามารถเปลี่ยนโพสต์เริ่มต้นด้วยอัลบั้มได้ มิฉะนั้น คุณต้องสร้างประเภทโพสต์ที่กำหนดเอง

สร้างปลั๊กอินเฉพาะไซต์ (ไม่ใช่แบบสำเร็จรูป) และประเภทโพสต์ที่กำหนดเอง

คุณต้องสร้างปลั๊กอินเฉพาะไซต์ซึ่งไม่ขึ้นอยู่กับธีมของคุณ มีประโยชน์สำหรับการสร้างประเภทโพสต์ที่กำหนดเอง เพิ่มรหัสย่อ แสดงภาพขนาดย่อ และในทำนองเดียวกัน ในการสร้างปลั๊กอินเฉพาะไซต์ คุณต้องไปที่ไดเร็กทอรีปลั๊กอินโดยใช้ FTP

ภายใต้ wp-content/plugins/ สร้างโฟลเดอร์ใหม่และตั้งชื่อโฟลเดอร์ด้วยชื่อเดียวกับปลั๊กอินที่คุณต้องการสร้าง เข้าไปในโฟลเดอร์และสร้างไฟล์ php ด้วยชื่อเดียวกับโฟลเดอร์ วางรหัสต่อไปนี้ในไฟล์

/*
ชื่อปลั๊กอิน: ปลั๊กอินของไซต์สำหรับเว็บไซต์.com
คำอธิบาย: การเปลี่ยนแปลงโค้ดเฉพาะไซต์สำหรับ website.com
*/
/* เริ่มเพิ่มฟังก์ชันใต้บรรทัดนี้ */
/* หยุดการเพิ่มฟังก์ชันใต้บรรทัดนี้ */

บันทึกไฟล์และออก รหัสที่กล่าวถึงข้างต้นไม่มีความหมายใดๆ และจะถูกแทนที่เมื่อสร้างประเภทโพสต์ที่กำหนดเอง

สร้างโค้ดสำหรับประเภทโพสต์ที่กำหนดเองจาก WordPress Custom Post Type Code Generator

การแสดงขนาดรูปภาพเพิ่มเติมและฟิลด์เพิ่มเติม–

จากแดชบอร์ดผู้ดูแลระบบ ไปที่ลักษณะที่ปรากฏ จากนั้นไปที่ตัวแก้ไข ค้นหาไฟล์ functions.php และเพิ่มรหัสต่อไปนี้สำหรับการลงทะเบียนขนาดรูปภาพเพิ่มเติมสำหรับการแสดงตาราง

add_image_size( 'album-grid', 225, 150, จริง );

หากคุณต้องการเพิ่มฟิลด์กำหนดเองเพิ่มเติมใน Media Uploader เช่น ชื่อของช่างภาพ เพจ และข้อมูลอื่นๆ เมื่อคุณอัปโหลดภาพ คุณต้องเพิ่มโค้ดต่อไปนี้ใน functions.php

/**
 * เพิ่มช่องชื่อช่างภาพและ URL ให้กับผู้อัปโหลดสื่อ
 * @param $form_fields array, ฟิลด์ที่จะรวมในไฟล์แนบ form
 * @param $post object, บันทึกไฟล์แนบในฐานข้อมูล
 * @return $form_fields ฟิลด์แบบฟอร์มที่แก้ไข
 */

ฟังก์ชั่น be_attachment_field_credit( $form_fields, $post ) {
    $form_fields['be-photographer-name'] = array(
        'label' = 'ชื่อช่างภาพ',
        'อินพุต' = 'ข้อความ'
        'value' = get_post_meta( $post-ID, 'be_photographer_name', จริง),
        'helps' ='หากระบุ เครดิตรูปภาพจะแสดง',
    );
    $form_fields['be-photographer-url'] = array(
        'label' ='URL ของช่างภาพ',
        'อินพุต' = 'ข้อความ',
        'value' =get_post_meta( $post-ID, 'be_photographer_url', จริง),
        'helps' = 'เพิ่ม URL ของช่างภาพ',
    );
    ส่งคืน $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

/**
 * บันทึกค่าชื่อช่างภาพและ URL ในตัวอัปโหลดสื่อ
 * @param $post array, ข้อมูลโพสต์สำหรับฐานข้อมูล
 * @param $attachment array, ฟิลด์ไฟล์แนบจาก $_POST form
 * @return $post array, แก้ไขข้อมูลโพสต์
 */
ฟังก์ชั่น 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'] ) );
    ส่งคืน $ โพสต์;
}
add_filter( 'สิ่งที่แนบมา_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );

อย่างที่คุณเห็น มันจะเพิ่มฟิลด์ข้อความสองฟิลด์ใน Media Uploader ได้แก่ ชื่อช่างภาพ และ URL ของช่างภาพ

การสร้างเพจเพื่อแสดงอัลบั้มทั้งหมด

ถึงเวลาสร้างอัลบั้ม (ประเภทโพสต์ที่กำหนดเอง) และเพิ่มรูปภาพลงในอัลบั้ม ภาพเด่นจะเป็นภาพหน้าปกของอัลบั้ม เนื้อหาที่คุณเพิ่มในพื้นที่เนื้อหาของโพสต์จะกลายเป็นคำอธิบายสำหรับอัลบั้ม

หน้าเทมเพลตสำหรับอัลบั้ม

สร้างไฟล์และตั้งชื่อไฟล์ archive-albums.php คัดลอกส่วนหัว ส่วนท้าย แถบด้านข้าง และโค้ดองค์ประกอบ UI อื่นๆ แล้ววางลงในนั้น วางรหัสต่อไปนี้เพื่อแสดงอัลบั้มทั้งหมดในหน้าเดียว

<li class="album-grid">a href=" title=""</a></li>
post_type == 'อัลบั้ม' $post-post_status == 'เผยแพร่' ) {
        $สิ่งที่แนบมา = get_posts( อาร์เรย์ (
            'post_type' ='ไฟล์แนบ',
            'posts_per_page' =-1,
            'post_parent' =$โพสต์ ID,
            'ไม่รวม' =get_post_thumbnail_id()
        ) );
        ถ้า ( $สิ่งที่แนบมา ) {
            foreach ( $สิ่งที่แนบมาเป็น $สิ่งที่แนบมา) {
                $class = "หลังการแนบ mime-" Sanitize_title( $ไฟล์แนบ-post_mime_type );
                $title = wp_get_attachment_link( $attachment-ID, 'album-grid', จริง);
                echo '<li class="' . $class . ' album-grid">' . $ชื่อ '</li>';
            }           
        }
    }

วางโค้ดต่อไปนี้ในไฟล์ CSS หลักของธีมของคุณ เพื่อให้ภาพหน้าปกแสดงในตาราง

.album-grid {ความกว้าง: 225px; ความสูง: 150px; ลอย: ซ้าย; รายการสไตล์: none; รายการสไตล์ประเภท: none; ระยะขอบ: 0 18px 30px 0px;}

หน้าเทมเพลตสำหรับแต่ละภาพ

สร้างไฟล์และตั้งชื่อไฟล์ว่า single-attachments.php คัดลอกโค้ดทั้งหมดจาก single.php ที่สร้างไว้ล่วงหน้าของธีม คุณสามารถค้นหาได้ภายใต้ตัวแก้ไขจากเมนูลักษณะที่ปรากฏ จากนั้นค้นหารหัสลูปใน single-attachments.php และแทนที่ส่วนนั้นด้วยสิ่งต่อไปนี้

ถ้า ( have_posts() ) : ในขณะที่ ( have_posts() ) : the_post();

$photographer = get_post_meta($post-ID, 'be_photographer_name', จริง);

$photographerurl = get_post_meta($post-ID, 'be_photographer_url', จริง);

<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, "เต็ม"); 
                        <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>
 ในที่สุด; 
 เอนดิฟ;