단일 게시물에 추천 이미지 추가

게시 됨: 2013-10-10

아카이브 추천 이미지(게시물 썸네일)는 게시물 편집 화면에 추가하는 방법에 관계없이 추천 이미지에서 가져옵니다.

단일 게시물 항목 제목 전후에 표시되는 이미지는 제거하지 않는 한 게시물에 삽입한 첫 번째 이미지에서 가져옵니다.

이 페이지의 코드 조각 중 하나를 사용하여 단일 게시물 항목 제목 앞이나 뒤에 이미지를 표시하는 코드를 제거하거나 수정할 수 있습니다.

이미지를 추천 이미지로 추가하면 단일 게시물 제목 뒤에 추천 이미지가 아니라 게시물 썸네일로 아카이브에 표시됩니다.

추천 이미지를 추가하지 않으면 게시물의 첫 번째 이미지가 단일 게시물 항목 제목 앞이나 뒤에 표시되고 아카이브 페이지에서도 표시됩니다.

이 포스트에서, 나는 당신이 당신의 자식 테마 functions.php 파일의 끝에 간단히 붙여넣을 수 있는 몇 줄의 PHP 코드를 제공할 것입니다.

코드를 사용하면 단일 게시물에서 제목 앞이나 뒤에 게시물 이미지를 표시할 수 있습니다.

단일 제목 앞에 이미지 게시

Dan은 최근에 이 질문을 했습니다.

이 포럼에서 찾은 다른 코드를 사용하여 검색하고 새 게시물을 작성하게 되었습니다.
Minimum Pro를 사용하여 "단일 게시물" 페이지에 게시물의 추천 이미지를 표시하고 싶습니다. 텍스트 콘텐츠 위에 있는 것이 좋습니다. 이 포럼에서 코드를 찾아 functions.php에 넣었습니다. 추천 이미지가 표시되지만 동시에 텍스트 콘텐츠가 지워집니다. 그래서 분명히 내가 뭔가 잘못하고 있습니다.

참고: 후크가 변경되었으므로 HTML 5가 아니라 이전 XHTML 마크업을 실행하는 경우 이 게시물의 마지막 PHP 코드 스니펫을 사용하세요.

제목 뒤에 추천 이미지 표시

이 코드는 단일 게시물 제목 뒤에 이미지를 표시합니다.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

제목 앞에 추천 이미지 표시

이 코드는 단일 게시물 제목 앞에 이미지를 표시합니다.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

정적 페이지에 추천 이미지 표시

이것이 정적 단일 페이지에서도 작동하도록 하려면 다음과 같이 코드에 페이지를 추가하기만 하면 됩니다.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

정적 페이지 및 단일 게시물에 추천 이미지 표시

이것이 정적 페이지와 게시물에서도 작동하도록 하려면 다음과 같이 코드에 페이지를 추가하기만 하면 됩니다.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

추천 이미지가 표시하는 위치는 위치 우선 순위에 대한 세 번째 매개변수를 사용하여 결정할 수 있습니다.

위의 코드에서 단순히 세 번째 매개변수를 5에서 15로 변경하는 문제입니다.

이미지 크기 변경

다음은 미디어 설정에 따라 큰 크기를 사용하는 예입니다.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

설정 > 미디어에 구성된 다른 기본 크기를 사용할 수도 있습니다.

썸네일
중간
크기가 큰
가득한

함수 파일에 추가한 사용자 정의 크기를 사용할 수도 있습니다.

예시:

포트폴리오

 add_image_size( 'portfolio', 540, 340, TRUE );

이전 XHTML 루프 후크 사용

아직 실행 중인 XHTML이 아직 HTML 5로 변환되지 않은 경우 이전 루프 후크를 사용해야 합니다.

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

제목과 이미지 사이에 공백 추가하기

다음은 단일 게시물에서 추천 이미지와 항목 제목 사이에 여백을 추가하는 미디어 쿼리 코드 앞에 자식 테마 style.css 파일 끝에 추가할 수 있는 몇 가지 샘플 CSS 코드입니다.

 .single .post-image { margin-bottom: 30px; }

페이지에 이 샘플을 사용하세요.

 .page .post-image { margin-bottom: 30px; }

추천 이미지(사후 이미지) 왼쪽 정렬

단일 게시물 추천 이미지를 왼쪽으로 정렬할 수도 있습니다.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

결과는 다음과 같습니다.

왼쪽으로 뜨다

CSS를 사용하는 대신 PHP 코드에 alignleft 클래스를 추가할 수도 있습니다.

 'class' => 'alignleft'

PHP 코드의 포스트 이미지를 alignleft로 바꾸면 텍스트가 콘텐츠 왼쪽에 있는 이미지를 둘러싸게 됩니다.

참고 : 이 CSS 코드는 Genesis 2.0 HTML 5 하위 테마에 적용되며 게시물 이미지/추천 이미지에 대해 다른 클래스를 사용하는 다른 테마에서는 작동하지 않을 수 있습니다.