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:
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.
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:
Ezzel is megvagyunk, juhé - egy újabb plugin telepítését spóroltuk meg.
