Anpassen der oEmbed Ausgabe

Viele nutzen die oEmbed Unterstützung von WordPress um Twitter-Nachrichten oder Youtube-Video auf ihre Seite einzubetten.

Die Liste der unterstützen Dienste ist aber noch viel länger und auch noch nicht unterstütze Dienste können (wenn diese oEmbed Unterstützen) einfach eingebunden werden.

Was viele hingegen nicht wissen, ist das WordPress selbst auch ein oEmbed Provider ist und daher auch Beiträge von anderen WordPress Installationen eingebunden werden können (so lange diese den Dienst nicht deaktiviert haben).

Wenn ich beispielsweise einen der Beiträge aus meinem Blog im Visuellen Editor via oEmbed einfüge, sieht das so aus.

 

Wie ein Beitrag in der Embeded Ausgabe aussieht, kann man testen in dem einfach ein ?embed=true an die URL angehängt wird. Wenn ich meinen Vortrag über Sessionvideos mit der URL https://staude.net/vortraege/sessionvideos/?embed=true aurufe, erhalte ich diese Ausgabe.

Embed preview

Bei Betrachtung der einbettbaren Ausgabe können wir 5 Bereiche identifizieren.

  1. Das Beitragsbild
  2. Der Titel des Beitrag
  3. Der Auszugstext (oder ein Teil des eigentlichen Beitrags)
  4. Site Icon und Name der Seite
  5. Meta-Angaben (Kommentare und Beitrag Teilen)

Wobei 1 und 2 auch vertauscht sein können, Abhängig von den Dimensionen des Beitragsbildes.

Anpassen der Inhalte per Filter

1. Das Bild

Es wird ein Beitragsbild verwendet. Wenn kein Beitragsbild dem Beitrag zugeordnet ist, werden die Filter nicht aufgerufen. In dem Fall bleibt nur ein Bild über den Content-Filter mit auszuliefern oder wie unten beschrieben ein eigenes Template für das einbinden zu erstellen.

$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );

über den Filter ‚embed_thumbail_image_size‘ kann die Größe des Bildes beeinflusst werden. Der Vorgabewert ist ‚full‘, so das WordPress die Originalgröße des Bildes verwendet

$shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';
$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );

Anschließend wird anhand seines Seitenverhältnisses festgelegt ob das Bild als Rechteck über dem Titel ausgegeben wird, oder als Quadrat neben dem Text. Das kann über den Filter ‚embed_thumbnail_image_shape‘ verändert werden.
Das Bild als Thumbnail neben dem Text auszugeben, wäre mit diesem Code möglich.

add_filter ( 'embed_thumbail_image_size', 'staude_embed_thumbail_image_size');
function staude_embed_thumbail_image_size( $size ) {
  return "thumbnail";
}

add_filter ( 'embed_thumbnail_image_shape', 'staude_embed_thumbnail_image_shape');
function staude_embed_thumbnail_image_shape( $shape ) {
  return "square";
}

Bild aendern

2. Der Titel des Beitrags

Der Titel des Beitrags wird über die the_title Funktion geholt. Das heisst, wir können über den Filter the_title den Inhalt manipulieren, müssen aber Sicherstellen das wir in der eingebetteten Ausgabe sind, ansonsten würden wir den Titel auch die „normale“ Ausgabe auf der Webseite verändern.

Wenn ich als Beispiel vor dem Titel noch meinen Namen stellen wollte, wäre der Code.

add_filter ( 'the_title', 'staude_embed_title' );
function staude_embed_title( $title ) {
  if ( is_embed() ) {
    $title = "Staude: " . $title;
  }
  return $title;
}

 

Das is_embed fragt ab, ob der Aufruf für die eigebettete Darstellung stattfindet oder nicht.
Embed titel

3. Der Text ( Auszug oder  ein Teil des Contents)

Der Auszug wird durch die Funktion the_excerpt_embed geholt und ist über einen gleichnamigen Filter manipulierbar.

add_filter ( 'the_excerpt_embed', 'staude_the_excerpt_embed' );
function staude_the_excerpt_embed( $output ) {
  $output.= " Um diesen Text wird der Auszug ergänzt";
  return $output;
}

Embed auszug
Zwischen dem Div-Container der den Auszug enthält und dem Fußbereich mit dem Seitentitel und den Metainformationen wird noch eine Action embed_content aufgerufen, über die dort noch Inhalt ausgegeben werden kann.

add_action( 'embed_content', 'staude_embed_content' );
function staude_embed_content() {
  echo "Weiterer Inhalt zwischen Auszug und Fußbereich.";
}

Embed content

4. Site Icon und Titel der Seite

Das SiteIcon und der Titel der Seite werden über den Customizer eingepflegt.

Das WordPress W ist das default Icon, wenn kein Icon zugeordnet wurde. Wähle ich mein fs-logo als Icon aus und ändere den Titel

wird das auch in der embeded Ansicht verwendet.

Möchte man für eingebettete Beiträge nicht den Titel und das Icon der Webseite verwenden, so kann das über einen Filter-Hook verändert werden. WordPress nutzt die Funktion the_embed_site_title() um das HTML mit Logo und Tiel auszugeben. Diese wiederum ruf einen Filter embed_site_title_html auf über den ich mein eigenes HTML zurückgeben kann.

add_filter ( 'embed_site_title_html', 'staude_embed_site_title_html');
function staude_embed_site_title_html( $html ) {
  return "<img src='/wp-content/uploads/2015/09/fs_logo-entw_150917-02.gif'>";
}

Mit diesem Code in der functions.php meines (Child-)Themes überschreibe ich den HTML Code mit der img Anweisung, so das statt Icon und Titel mein Logo ausgegeben wird.

5. Meta-Angaben

Für die Meta-Angaben ruft das embed-Template die Action embed_content_meta auf, und die auf diese Aktion registrierten Funktionen schreiben ihren Inhalt raus. Von Haus aus sind das in WordPress

add_action( 'embed_content_meta', 'print_embed_comments_button' );
add_action( 'embed_content_meta', 'print_embed_sharing_button' );

Vorhandene, per add_action registrierte Funktionen können mit der Funktion remove_action wieder deregistriert werden. Ebenso kann mit add_action auf den genannten Hook eine eigene Ausgabe registriert werden.
Folgender Code entfernt die beiden Standard-Elemente und fügt einen eigenen Text hinzu.

remove_action( 'embed_content_meta', 'print_embed_comments_button' );
remove_action( 'embed_content_meta', 'print_embed_sharing_button' );
add_action( 'embed_content_meta', 'staude_print_embed_button' );
function staude_print_embed_button() {
  echo "MetaInfos";
}

Natürlich kann auch per CSS auf die Element Einfluß genommen werden. Eine Übersicht im FireFox zeigt uns diese Klassen

Erstellen eigener Templates

Die verwendeten Templatedateien bringt der WordPress-Core mit und sie liegen in dem  Verzeichnis /wp-includes/theme-compat/

Embed template files

Vor WordPress Version 4.5 gab es nur eine Datei embed-template.php dafür. Seit Version 4.5 sind es 5 Dateien. Diese 5 Dateien kopiert man sich in sein Theme (besser in sein ChildTheme).

Die Datei header-embed.php gibt analog zu der header.php den HTML Kopf aus. Meta Angaben können über die Action ‚embed_head‘ hinzugefügt werden.

Dementsprechend ist die Datei footer-embed.php für den HTML Footer zuständig. Dort kann über die Action ‚embed_footer‘ Inhalt hinzugefügt werden.

Die Datei ‚embed.php‘ wird aufgerufen, wenn erkannt wurde das Embedded-Content ausgeliefert werden soll. Dort wird überprüft ob es den Content gibt. Wenn der angeforderte Inhalt existiert wird das Template ‚embed-contet.php‘ geladen, anderenfalls das Template ‚embed-404.php‘.

Das Template ‚embed-content.php‘ ist daher die Datei, die kopiert und angepasst werden muss die einzubettende Ausgabe vollkommen eigen zu gestalten. Das Template ist recht übersichtlich und die verwendeten Hooks wurde oben schon genannt.

<?php 
/**
 * Contains the post embed content template part
 *
 * When a post is embedded in an iframe, this file is used to create the content template part
 * output if the active theme does not include an embed-content.php template.
 *
 * @package WordPress
 * @subpackage Theme_Compat
 * @since 4.5.0
 */
?>
<div <?php post_class( 'wp-embed' ); ?>>
<?php
$thumbnail_id = 0;

if ( has_post_thumbnail() ) {
  $thumbnail_id = get_post_thumbnail_id();
}

if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
  $thumbnail_id = get_the_ID();
}

if ( $thumbnail_id ) {
  $aspect_ratio = 1;
  $measurements = array( 1, 1 );
  $image_size = 'full'; // Fallback.

  $meta = wp_get_attachment_metadata( $thumbnail_id );
  if ( ! empty( $meta['sizes'] ) ) {
    foreach ( $meta['sizes'] as $size => $data ) {
      if ( $data['width'] / $data['height'] > $aspect_ratio ) {
        $aspect_ratio = $data['width'] / $data['height'];
        $measurements = array( $data['width'], $data['height'] );
        $image_size = $size;
      }
    }
  }

/**
 * Filters the thumbnail image size for use in the embed template.
 *
 * @since 4.4.0
 * @since 4.5.0 Added `$thumbnail_id` parameter.
 *
 * @param string $image_size Thumbnail image size.
 * @param int $thumbnail_id Attachment ID.
 */
  $image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );

  $shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';

/**
 * Filters the thumbnail shape for use in the embed template.
 *
 * Rectangular images are shown above the title while square images
 * are shown next to the content.
 *
 * @since 4.4.0
 * @since 4.5.0 Added `$thumbnail_id` parameter.
 *
 * @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
 * @param int $thumbnail_id Attachment ID.
 */
  $shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );
}

if ( $thumbnail_id && 'rectangular' === $shape ) : ?>
<div class="wp-embed-featured-image rectangular">
  <a href="<?php the_permalink(); ?>" target="_top">
    <?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
  </a>
</div>
<?php endif; ?>

<p class="wp-embed-heading">
<a href="<?php the_permalink(); ?>" target="_top">
<?php the_title(); ?>
</a>
</p>
<?php if ( $thumbnail_id && 'square' === $shape ) : ?>
<div class="wp-embed-featured-image square">
<a href="<?php the_permalink(); ?>" target="_top">
<?php echo wp_get_attachment_image( $thumbnail_id, $image_size ); ?>
</a>
</div>
<?php endif; ?>

<div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

<?php
/**
* Prints additional content after the embed excerpt.
*
* @since 4.4.0
*/
do_action( 'embed_content' );
?>

<div class="wp-embed-footer">
  <?php the_embed_site_title() ?>

    <div class="wp-embed-meta">
<?php
/**
* Prints additional meta content in the embed template.
*
* @since 4.4.0
*/
do_action( 'embed_content_meta');
?>
    </div>
  </div>
</div>
<?php
0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.