Dodaj wyróżniony obraz w pojedynczych postach

Twój wyróżniony obraz w archiwum (Miniatura posta) zostanie pobrany z wyróżnionego obrazu niezależnie od tego, jak dodasz go na ekranie Edytuj post.

Obraz wyświetlany przed lub po tytule wpisu pojedynczego wpisu jest pobierany z pierwszego obrazu, który wstawiasz do posta, chyba że go usuniesz.

Możesz usunąć lub zmodyfikować kod, który wyświetla obraz przed lub po tytułach pojedynczego wpisu, korzystając z jednego z fragmentów kodu na tej stronie.

Jeśli dodasz obraz jako polecany obraz, będzie on wyświetlany w Twoich archiwach jako miniatura posta, a nie jako polecany obraz po tytule pojedynczego posta.

Jeśli nie dodasz wyróżnionego obrazu, pierwszy obraz w Twoim poście będzie wyświetlany przed lub po tytułach pojedynczego wpisu, a także na stronach archiwum.

W tym poście przedstawię Ci kilka linijek kodu PHP, który możesz po prostu wkleić na końcu pliku z motywami potomnymi functions.php.

Kod umożliwi Ci wyświetlenie obrazu Twojego posta przed lub po tytule w pojedynczych postach.

Dan zadał ostatnio to pytanie:

Przeszukiwałem mój mózg, szukając, używając innego kodu znalezionego na tym forum i zaowocowało to utworzeniem nowego posta.

Używając Minimum Pro, chciałbym po prostu wyświetlić wyróżniony obraz posta na stronie „pojedynczego posta”. Najlepiej nad treścią tekstu. Znalazłem kod na tym forum i umieściłem go w functions.php. Wyświetla polecany obraz, ale jednocześnie usuwa zawartość tekstową. Więc oczywiście robię coś złego.

Uwaga: Użyj ostatniego fragmentu kodu PHP w tym poście, jeśli używasz starego znacznika XHTML, a nie HTML 5, ponieważ zaczepy uległy zmianie.

Wyświetl polecany obraz po tytule

Ten kod wyświetla obraz po tytule pojedynczego posta.

 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 ); }

Wyświetl polecany obraz przed tytułem

Ten kod wyświetla obraz przed tytułem pojedynczego posta.

 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 ); }

Wyświetlaj wyróżniony obraz na stronach statycznych

Jeśli chcesz, aby to działało również dla statycznych pojedynczych stron, po prostu dodaj stronę do kodu w następujący sposób:

 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 ); }

Wyświetlaj wyróżniony obraz na statycznych stronach i pojedynczych postach

Jeśli chcesz, aby to działało również dla statycznych stron i postów, po prostu dodaj stronę do kodu w ten sposób:

 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 ); }

Pozycję wyświetlaną przez wyróżniony obraz można określić za pomocą trzeciego parametru priorytetu pozycjonowania.

W powyższym kodzie to po prostu kwestia zmiany trzeciego parametru z 5 na 15.

Zmień rozmiar obrazu

Oto przykład użycia dużego rozmiaru zgodnie z ustawieniami multimediów.

 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 ); }

Możesz także użyć dowolnego z innych domyślnych rozmiarów skonfigurowanych w Ustawienia > Media.

• Miniaturka
• średni
• wielki
• pełny

Możesz także użyć dowolnych rozmiarów niestandardowych dodanych w pliku funkcji.

Przykład:

teczka

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

Używanie starych hooków pętli XHTML

Jeśli nadal używasz XHTML i nie przekonwertowałeś jeszcze do HTML 5, będziesz musiał użyć starych Loop Hooks:

 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 ); }

Dodawanie spacji między tytułem a obrazem

Oto przykładowy kod CSS, który możesz dodać na końcu pliku style.css motywów podrzędnych przed kodem zapytań o media, który dodaje margines między wyróżnionym obrazem a tytułem wpisu w pojedynczych postach.

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

Użyj tego przykładu dla stron:

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

Wyrównaj wyróżniony obraz (po obrazie) w prawo

Możesz także wyrównać obrazy postów do prawej strony.

Po prostu dodaj ten kod CSS przed zapytaniami o media pod koniec pliku style.css motywów podrzędnych:

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

Powyższy kod spowoduje wyrównanie obrazu, który dodasz jako polecany obraz we wszystkich pojedynczych postach po prawej stronie treści, tak aby jego tekst był zawinięty w następujący sposób:

Możesz również dodać klasę alignright do kodu PHP zamiast używać CSS.

 'class' => 'alignright'

Po prostu zamień post-image w kodzie PHP na alignright, a tekst zawinie się wokół obrazu po prawej stronie treści.

Wyrównaj wyróżniony obraz (post-obraz) do lewej

Możesz także wyrównać polecane obrazy pojedynczych postów do lewej strony.

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

A oto wynik:

Możesz również dodać klasę alignleft do kodu PHP zamiast używać CSS.

 'class' => 'alignleft'

Po prostu zamień post-image w kodzie PHP na alignleft, a tekst zawinie się wokół obrazu po lewej stronie treści.

Usuń link a href z polecanego obrazu

Członek zapytał mnie, jak usunąć link z kodu, więc oto jest:

Po prostu zastąp tę część kodu:

 $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 );

Z tym:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

powiązane posty

• 2 sposoby korzystania z różnych polecanych obrazów dla pojedynczych postów i stron archiwum
• Tytuł wpisu nad polecanym obrazem w pojedynczych postach
• Pole wyboru, aby dodać lub usunąć wyróżniony obraz w poszczególnych postach lub stronach
• Połącz wyróżniony obraz z niestandardowym adresem URL
• Dostosuj wyświetlanie polecanych obrazów w pojedynczych postach
• Dodaj wyróżniony obraz przed treścią w dowolnym motywie
• Ustaw polecany obraz zastępczy dla każdej kategorii