زمینه دلخواه oEmbed افزونه Advnaced Custom Field

زمینه دلخواه oEmbed از قابلیت خود oEmbed وردپرس استفاده میکند، با استفاده از این ویژگی در واقع ما ما قادر به نمایش محتوای یک سایت دیگر در سایت هستیم. اکثر رسانه های اجتماعی از این قابلیت استفاده می کنند. با توجه به تصاویر پیوست شده درک این موضوع سخت نخواهد بود.

قبل از ادامه این مبحث پیشنهاد می کنیم حتما مقاله آشنایی با افزونه Advanced Custom Fields را مطالعه کنید. استفاده از این آموزش نیازمند آشنایی با افزونه ACF است.

تنظیمات این زمینه شامل عرض و ارتفاع زمینه می باشد. زمینه دلخواه oEmbed با مقدار HTML تولید شده توسط تابع wp_oembed_get() را بازگشت می دهد.

<div class="embed-container">
    <?php the_field('oembed'); ?>
</div>

مثال زیر نحوه اضافه کردن ویژگی های اضافه به iframe src و HTML را نشان می دهد.

<?php

// Load value.
$iframe = get_field('oembed');

// Use preg_match to find iframe src.
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];

// Add extra parameters to src and replcae HTML.
$params = array(
    'controls'  => 0,
    'hd'        => 1,
    'autohide'  => 1
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);

// Add extra attributes to iframe HTML.
$attributes = 'frameborder="0"';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

// Display customized HTML.
echo $iframe;
?>

خوشبختانه مشکل واکنشگرایی این زمینه نیز حل شده که با کمک سایت embedresponsively این کار قابل انجام است. برای سفارشی سازی بیشتر پیشنهاد می کنیم از نمونه های ای سایت کمک بگیرید.

<div class="embed-container">
    <?php the_field('oembed'); ?>
</div>
<style>
    .embed-container { 
        position: relative; 
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    } 

    .embed-container iframe,
    .embed-container object,
    .embed-container embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>