Individuelle Bildanhangseiten

Anleitung im Folgenden, hier ein Beispiel (Bild anklicken):

Systemweiter Standard: „Anhang-Seite“

Es gibt einige Möglichkeit, die Voreinstellung für Einzelbilder auf „Anhangseite“ zu setzen. Allerdings funktioniert das nicht immer:

• In /wp-admin/options.php (mehr Infos: https://borlabs.io/wordpress-the-hidden-settings-in-the-admin-panel/)
• unter image_default_link_type
• entweder „post“ oder die Datei mit „file“ wählen, „custom“ ermöglicht angeblich eine benutzerdefinierte URL
• Wenn die Justified Gallery Plugin benutzt wird, steht hier auch schon mal „justified„.
• Die Standardgröße kann unter image_default_size auf „large“, „medium“, „full“ und „thumbnail“ gesetzt werden.

Wenn das nicht funktioniert oder nicht global, sondern nur für das jeweilige Theme eingerichtet werden soll, dann Folgendes in die functions.php des Themes eintragen (oder als Code Snippet anlegen) und die Options wie gewünscht anpassen:

add_action('after_setup_theme','default_attachment_display_settings');
function default_attachment_display_settings () {
update_option('image_default_align','left');
update_option('image_default_link_type','none');
update_option('image_default_size','large');
}

Diese Einstellungen dienen der „Arbeitserleichterung“ beim Einfügen von einzelnen Bildern. Funktioniert nichts davon, muss weiterhin bei jedem Bild Größe und Ausgabe jeweils angeklickt / eingestellt werden.

Bildanhangseite individuell gestalten

Einfach nur auf die Mediendatei zu verlinken, ist wenig schön – darum soll es ja eine „Anhangseite“ geben. Diese Attachment-Seiten sind aber meistens eher häßlich, darum  hier eine Vorgehensweise zur individuellen Gestaltung.

1. image.php anlegen

• Im Themeordner (wp-content/themes/meintheme/…) nach einer image.php suchen.
• Gibt es keine, dann eines der bestehenden .php Templates dort kopieren (bspw. single.php) und in „image.php“ umbenennen.
• Die image.php bekommt folgenden Inhalt (ACHTUNG – Leerschritte bei [ … template … ] entfernen – die mussten hier rein, da WordPress sonst versuchen würde, diesen Shortcode hier im Artikel auszuführen):
  <?php
/* Template für die Anzeige einzelner Bild-Anhangsseiten (Attachment Pages) */
echo do_shortcode('[ template_image_php ]');
?>
• Speichern, schliessen.

2. CSS vorbereiten

• Design > Anpassen > Zusätzliches CSS:
  /* =========================== */
/* für template_image_php */
.imgphp{
height: 420px !important;
width: auto !important;
}
/* =========================== */

3. Code-Snippet anlegen, Titel [ template_image_php ]

Inhalt ist nur ein Beispiel, kann individuell angepasst werden:

function shortcode_template_image_php() {

// Im Theme eine image.php anlegen, dann hier das Script:

get_header(); ?>

<!-- + CSS imgphp via Customizer -->

<main id="primary" class="site-main">
<div class="container">

<?php while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<!-- 1. Titel des Bildes -->
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>

<!-- 2. Das Bild -->
<div class="attachment-image">
<?php
// $custom = [ 'class' => 'imgphp', 'alt' => 'alt text', 'title' => 'my title' ];
$custom = [ 'class' => 'imgphp'];
// echo wp_get_attachment_image( get_the_ID(), 'medium', false, $custom );
echo wp_get_attachment_image( get_the_ID(), 'medium', false, $custom );
?>
</div>

<!-- 3. Beschreibung & Metadaten -->
<div class="entry-content">
<?php

// Beschriftung
echo '<div class="entry-caption">---------------------</div>';
if ( has_excerpt() ) {

$imgbeschriftung = get_the_excerpt();

echo '<div class="entry-caption">' . $imgbeschreibung . '</div>';
echo '<div class="entry-caption">' . mb_substr($imgbeschreibung, 0, 12) . '</div>';
}

// Beschreibung
echo '<div class="entry-caption">---------------------</div>';
the_content();

?>
</div>

<!-- 4. Navigation (Zurück zum zugehörigen Beitrag) -->
<footer class="entry-footer">
<?php if ( $post->post_parent ) : ?>
<p class="parent-post-link">
<a href="<?php echo esc_url( get_permalink( $post->post_parent ) ); ?>" rel="gallery">
&larr; Zurück zum Beitrag: <?php echo get_the_title( $post->post_parent ); ?>
</a>
</p>
<?php endif; ?>
</footer>

</article>

<?php endwhile; ?>

</div>
</main>

<?php

// get_sidebar();
get_footer();

}
add_shortcode('template_image_php', 'shortcode_template_image_php');