A WordPress oEmbed dobozának testreszabása előnézeti képe

A WordPress oEmbed dobozának testreszabása

| Olvasási idő: 1 perc

Biztosan találkoztál már a WordPress által is támogatott beágyazási formátummal, az oEmbed-del - és azt is észrevehetted, hogy a WordPress-en a testreszabhatósága... hagy kívánnivalót maga után. Ebben a bejegyzésben azt vesszük át, hogy hogyan tudjuk testreszabni a rendszer ezen részét. 

Kezdjük a szokásossal, vagyis hozzunk létre egy fájlt (mondjuk customize-oembed.php néven) az mu-plugins mappában, az alábbi tartalommal: 

php
<?php
/*
Plugin Name: Customize WP oEmbed
Plugin URI: https://www.webmenedzser.hu
Description: Customize WordPress oEmbed formatting
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPL2
*/

function oembed_custom_style() {
    wp_register_style( 'custom_css_wp_oembed', WP_CONTENT_URL . '/mu-plugins/oembed-styles.css', false, '1.0.0'  );
    wp_enqueue_style('custom_css_wp_oembed' );
}
add_action( 'embed_head', 'oembed_custom_style' );

function oembed_custom_author() {
    $output = '<div class="wp-embed-author">';
        $output .= '<div class="wp-embed-author-image">';
            $output .= get_avatar( get_the_author_meta( 'ID' ), 40 );
        $output .= '</div>';

        $output .= '<div class="wp-embed-author-info">';
            $output .= '<p>' . get_the_author_meta('display_name') . '<br/><small>' . get_the_author_meta('description') . '</small>';
        $output .= '</div>';
    $output .= '</div>';

    echo $output;
}
add_action( 'embed_content', 'oembed_custom_author' );

function oembed_custom_footer() {
    $output = '<div class="wp-embed-footer">';
    $output .= '<small>' . __('Forrás: ') . '</small>';
    $output .= '<p><strong><a target="_blank" href="' . get_bloginfo( 'url' ) . '">';
    $output .= get_bloginfo( 'name' );
    $output .= '</a></strong></p>';
    $output .= '<p><small>' . get_bloginfo( 'description' ) . '</small></p>';
    $output .= '</div>';

    echo $output;
}
add_filter('embed_site_title_html', 'oembed_custom_footer');

Összefoglalva a fentieket: az első function behúzza az egyedi formázásunkat (az mu-plugins mappából az oembed-styles.css fájlt), a másik kettő pedig testreszabja az adott részek kimenetét. Az egyedi CSS-ünk pedig a következő: 

css
body.wp-embed-responsive {
    padding: 3em 1em;
}

.wp-embed {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    border: 0;
}

.wp-embed-author {
    margin-top: 1em;
    margin-bottom: 1em;
}

p.wp-embed-heading {
    font-size: 29px;
}

.wp-embed-author .wp-embed-author-image {
    float: left;
    margin: 0 1em 0 0;
}

.wp-embed-author .avatar {
    border-radius: 50%;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.wp-embed .wp-embed-footer {
    margin-top: 0;
}

Az alábbi képen pedig találtok egy összehasonlítást: bal oldalt az "utána", jobb oldalt pedig az "előtte" állapotot látjátok: 

Wordpress Oembed Snippet Customization

Ezzel is megvagyunk, juhé - egy újabb plugin telepítését spóroltuk meg.