플러그인 없이 WordPress에서 사진 앨범 갤러리를 만드는 방법
게시 됨: 2021-11-12
이 기사에서는 플러그인 없이 WordPress에서 사진 앨범 갤러리를 만드는 방법을 보여줍니다.
WordPress의 플러그인을 사용하면 달성할 수 없는 것이 없다는 것을 모두 알고 있습니다.
그러나 사용하는 플러그인이 많을수록 웹 사이트의 성능이 저하됩니다.
모든 웹사이트에서 갤러리는 매우 중요한 역할을 합니다.
갤러리에 복잡한 작업과 필터가 포함된 경우 전체 웹사이트의 성능이 저하될 수 있습니다.
사진 앨범 갤러리에는 여러 장의 사진이 있어야 합니다.
여기에서는 모든 앨범에 표지 이미지가 있고 표지 이미지를 클릭하면 앨범 내부로 이동하여 각 사진을 개별적으로 확인할 수 있도록 월간 앨범을 만들고 있습니다.
플러그인을 사용하려면 프리미엄 플러그인을 구입해야 하는 복잡한 작업을 수행하려면 플러그인 없이 WordPress에서 사진 앨범 갤러리를 만드는 방법 도 알아야 합니다.
또한 이러한 사진 편집 소프트웨어 중 하나를 사용하여 사진 앨범 갤러리에 첨부될 사진을 편집할 수 있습니다.
플러그인 없이 WordPress에서 사진 앨범 갤러리를 만드는 단계
목적을 달성하는 데 필요한 모든 기능은 WordPress 내장 기능을 사용하여 수행할 수 있습니다. 각 월간 앨범을 자체 단일 페이지가 있는 게시물로 간주합니다. 앨범 안의 각 이미지를 단일 페이지가 있는 첨부 파일로 간주하십시오.
앨범에는 썸네일이 필요하며 이 기능은 WordPress에 내장되어 있습니다. 웹 사이트가 사진 작가의 웹 사이트인 경우 앨범으로 기본 게시물을 전환할 수 있습니다. 그렇지 않으면 사용자 정의 게시물 유형을 생성해야 합니다.
사이트별 플러그인(Readymade 아님) 및 사용자 정의 게시물 유형 생성
테마에 종속되지 않는 사이트별 플러그인을 만들어야 합니다. 사용자 정의 게시물 유형 생성, 단축 코드 추가, 썸네일 표시 등에 유용합니다. 사이트별 플러그인을 생성하려면 FTP를 사용하여 플러그인 디렉토리로 이동해야 합니다.
wp-content/plugins/ 아래에 새 폴더를 만들고 폴더 이름을 만들고자 하는 플러그인과 같은 이름으로 지정합니다. 폴더 내부로 이동하여 폴더와 동일한 이름의 php 파일을 만듭니다. 파일 안에 다음 코드를 붙여넣습니다.
/* 플러그인 이름: website.com용 사이트 플러그인 설명: website.com에 대한 사이트별 코드 변경 사항 */ /* 이 줄 아래에 함수 추가 시작 */ /* 이 줄 아래에 함수 추가 중지 */
파일을 저장하고 종료합니다. 위에서 언급한 코드는 의미가 없으며, 커스텀 포스트 타입이 생성되면 교체됩니다.
WordPress 사용자 정의 게시물 유형 코드 생성기에서 사용자 정의 게시물 유형에 대한 코드를 생성합니다.
추가 이미지 크기 및 추가 필드 표시–
Admin Dashboard에서 Appearance로 이동한 다음 Editor로 이동합니다. 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['사진작가 이름'] = 배열(
'레이블' = '사진가 이름',
'입력' = '텍스트',
'값' = get_post_meta( $post-ID, 'be_photographer_name', true ),
'helps' = '제공된 경우 사진 크레딧이 표시됩니다.',
);
$form_fields['be-photographer-url'] = 배열(
'label' = '사진사 URL',
'입력' = '텍스트',
'값' = 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['사진작가 이름'] ) )
update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );
if( isset( $attachment['be-photoer-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 == '게시' ) {
$attachments = get_posts( 배열(
'post_type' = '첨부파일',
'posts_per_page' =-1,
'post_parent' =$post-ID,
'제외' = get_post_thumbnail_id()
) );
if ( $ 첨부 파일 ) {
foreach( $attachments as $attachment ) {
$class = "첨부 후 MIME-" . 살균제제($attachment-post_mime_type);
$title = wp_get_attachment_link( $attachment-ID, '앨범 그리드', true );
echo '<li class="' . $class . ' 앨범 그리드">' . $제목 . '</li>';
}
}
}
표지 이미지가 그리드에 표시되도록 테마의 기본 CSS 파일에 다음 코드를 배치합니다.
.album-grid{폭: 225px; 높이: 150px; 왼쪽으로 뜨다; 목록 스타일: 없음; 목록 스타일 유형: 없음; 여백: 0 18px 30px 0px;}
각 이미지의 템플릿 페이지
파일을 만들고 이름을 single-attachments.php로 지정합니다. 테마의 미리 빌드된 single.php에서 모든 코드를 복사합니다. 모양 메뉴의 편집기에서 찾을 수 있습니다. 그런 다음 single-attachments.php에서 루프 코드를 찾아 해당 섹션을 다음으로 바꿉니다.
if ( have_posts() ) : 동안 ( have_posts() ) : the_post();
$photoer = get_post_meta($post-ID, 'be_photographer_name', true);
$photoerurl = 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, "전체");
<p class="attachment"><a>id); " 제목 = the_title(); " rel="첨부"<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>
그 동안;
엔디프;