img_caption_shortcode( array $ayarları, string $resmin_HTMLi= null )

Açıklaması:

“Caption” kısa kodunun şablon dosyaları içinde kullanılabilmesini sağlar.

Parametreleri:

$ayarları

(array – Zorunludur. ) “Caption” kısa kodunun ayarlarını yapan parametredir. Bu parametre aşağıdaki argümanları ve değerlerini içeren bir dizidir:

“id”

“Caption” kısa kodunun ürettiği HTML elemanına (figure) ait id değeridir. Bu id değerini kullanarak, o elemana özel CSS uygulayabilirsiniz. Varsayılan değeri yoktur.

“caption_id”

“Caption” kısa kodunun alt yazı için ürettiği HTML elemanına (figcaption) ait id değeridir. Bu id değerini kullanarak, o elemana özel CSS uygulayabilirsiniz. Varsayılan değeri yoktur.

“align”

“Caption” kısa kodunun alt yazı için ürettiği HTML elemanının sayfaya göre hizalanmasını sağlayan argümandır. Alabileceği değerler şunlardır:

• alignnone : Hizalama olmaz.
• aligncenter : Merkeze hizalar.
• alignright : Sağa hizalar.
• alignleft : Sola hizalar.

“width”

“Caption” kısa kodunun ürettiği HTML elemanın pixel cinsinden genişliğidir. En küçük değeri 1’dir. “Caption” kısa kodunda, width özelliği belirtilmezse, üretilmesi gereken HTML üretilmeyecektir (<figure> ve <figcaption>elemanları üretilmez). Varsayılan değeri yoktur.

“caption”

“Caption” kısa kodunun göstereceği resim ya da videonun alt yazısıdır.

“class”

“Caption” kısa kodunun ürettiği ana HTML elemanı için ekstra CSS sınıfıdır.

$resmin_HTMLi

Bu parametrenin değeri, alt yazılı olarak göstermek istediğimiz resim ya da video dosyasının HTML yapısı olmalıdır. Aşağıdaki örnek, bu parametrenin bir resim için aldığı değeri göstermektedir:

<img src="https://sitecenneti.com/wp-content/uploads/2019/06/balonlar.jpg" alt="Balonlar resmi" />

Döndürdüğü değer:

Alt yazılı olarak sunmak istediğimiz dosyanın HTML kodunu döndürür.

Örnek-1

Aşağıda verilen kod, şablon dosyalarımızda, URL değeri bilinen bir resim için, alt yazılı bir çıktı oluşturur.

<?php 
$resmin_HTMLi = "<img src='https://sitecenneti.com/wp-content/uploads/2019/06/balonla.jpg' />";
$ayarlari = array(
	"id" => "altyazi_id",
	"align" => "alignnone",
	"caption" => "Alt yazı metni burada yer alır.",
	"class" => "altyazi-sinifi",
	"width" => "400",
);

echo img_caption_shortcode($ayarlari, $resmin_HTMLi, );
?>

Yukarıdaki kodun, temamızda ürettiği HTML yapısı şu şekilde olacaktır:

<figure id="altyazi_id" aria-describedby="caption-altyazi-id" style="width: 399px" class="wp-caption alignnone altyazi-sinifi">
	<img src="http://localhost/benimsitem/wp-content/uploads/2019/06/balonlar-3-1.jpg" alt="Balonlar resmi">
	<figcaption id="caption-altyazi-id" class="wp-caption-text"><br>
		Alt yazı metni burada yer alır.<br>
	</figcaption>
</figure>

Yukarıdaki HTML yapısında, wp-caption ve wp-caption-text sınıfları her zaman üretilen sabit sınıflardır. Bu sınıfları kullanarak, bütün alt yazılı çıktılarımızda geçerli olacak bir CSS uygulamak isteyebiliriz.

Kaynak kodu:

Dizini: wp-includes/media.php

function img_caption_shortcode( $attr, $content = null ) {
    // New-style shortcode with the caption inside the shortcode with the link and image tags.
    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content         = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    } elseif ( strpos( $attr['caption'], '<' ) !== false ) {
        $attr['caption'] = wp_kses( $attr['caption'], 'post' );
    }
 
    /**
     * Filters the default caption shortcode output.
     *
     * If the filtered output isn't empty, it will be used instead of generating
     * the default caption template.
     *
     * @since 2.6.0
     *
     * @see img_caption_shortcode()
     *
     * @param string $output  The caption output. Default empty.
     * @param array  $attr    Attributes of the caption shortcode.
     * @param string $content The image element, possibly wrapped in a hyperlink.
     */
    $output = apply_filters( 'img_caption_shortcode', '', $attr, $content );
    if ( $output != '' ) {
        return $output;
    }
 
    $atts = shortcode_atts(
        array(
            'id'         => '',
            'caption_id' => '',
            'align'      => 'alignnone',
            'width'      => '',
            'caption'    => '',
            'class'      => '',
        ),
        $attr,
        'caption'
    );
 
    $atts['width'] = (int) $atts['width'];
    if ( $atts['width'] < 1 || empty( $atts['caption'] ) ) {
        return $content;
    }
 
    $id = $caption_id = $describedby = '';
 
    if ( $atts['id'] ) {
        $atts['id'] = sanitize_html_class( $atts['id'] );
        $id         = 'id="' . esc_attr( $atts['id'] ) . '" ';
    }
 
    if ( $atts['caption_id'] ) {
        $atts['caption_id'] = sanitize_html_class( $atts['caption_id'] );
    } elseif ( $atts['id'] ) {
        $atts['caption_id'] = 'caption-' . str_replace( '_', '-', $atts['id'] );
    }
 
    if ( $atts['caption_id'] ) {
        $caption_id  = 'id="' . esc_attr( $atts['caption_id'] ) . '" ';
        $describedby = 'aria-describedby="' . esc_attr( $atts['caption_id'] ) . '" ';
    }
 
    $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
 
    $html5 = current_theme_supports( 'html5', 'caption' );
    // HTML5 captions never added the extra 10px to the image width
    $width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );
 
    /**
     * Filters the width of an image's caption.
     *
     * By default, the caption is 10 pixels greater than the width of the image,
     * to prevent post content from running up against a floated image.
     *
     * @since 3.7.0
     *
     * @see img_caption_shortcode()
     *
     * @param int    $width    Width of the caption in pixels. To remove this inline style,
     *                         return zero.
     * @param array  $atts     Attributes of the caption shortcode.
     * @param string $content  The image element, possibly wrapped in a hyperlink.
     */
    $caption_width = apply_filters( 'img_caption_shortcode_width', $width, $atts, $content );
 
    $style = '';
    if ( $caption_width ) {
        $style = 'style="width: ' . (int) $caption_width . 'px" ';
    }
 
    if ( $html5 ) {
        $html = sprintf(
            '<figure %s%s%sclass="%s">%s%s</figure>',
            $id,
            $describedby,
            $style,
            esc_attr( $class ),
            do_shortcode( $content ),
            sprintf(
                '<figcaption %sclass="wp-caption-text">%s</figcaption>',
                $caption_id,
                $atts['caption']
            )
        );
    } else {
        $html = sprintf(
            '<div %s%sclass="%s">%s%s</div>',
            $id,
            $style,
            esc_attr( $class ),
            str_replace( '<img ', '<img ' . $describedby, do_shortcode( $content ) ),
            sprintf(
                '<p %sclass="wp-caption-text">%s</p>',
                $caption_id,
                $atts['caption']
            )
        );
    }
 
    return $html;
}

Örnek kullanım:

Örnek-1

Aşağıdaki kodda, $resim_id ve $altyazi değerlerini değiştirerek, dilediğiniz resmi alt yazılı bir şekilde sunabilirsiniz.

<?php

$resim_id = 1827;
$altyazi = "Alt yazı metni burada yer alır.";
$id = "altyazi_id_".$resim_id;

$resmin_HTMLi = wp_get_attachment_image_src( $resim_id );
$resmin_HTMLi = "<img src='$resmin_HTMLi[0]' />";
$ayarlari = array(
	"id" => $id,
	"align" => "alignnone",
	"caption" => $altyazi,
	"class" => "altyazi-sinifi",
	"width" => "400",
);

echo img_caption_shortcode($ayarlari, $resmin_HTMLi);
?>