WordPress 갤러리 html 레이아웃 맞춤

programing

WordPress 갤러리 html 레이아웃 맞춤

newsource 2023. 2. 11. 09:26

WordPress 갤러리 html 레이아웃 맞춤

기본 미디어 업로더를 사용하여 WordPress에서 이미지 갤러리를 만들 때 WordPress는 이미지를 HTML 마크업으로 묶습니다.

원하는 마크업을 출력하고 갤러리 레이아웃 작성 방법을 변경할 수 있도록 생성되기 전에 이 문서를 덮어쓰려면 어떻게 해야 합니까?

현재 WordPress는 다음과 같은 코드를 생성합니다.

<div id="container">
   <div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
   <div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
   <div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
   <div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>

갤러리 쇼트 코드 함수를 덮어쓰는 대신 해당 함수에 포함된 post_gallery 필터를 사용하는 것이 좋습니다.

함수에 추가합니다.php

add_filter('post_gallery','customFormatGallery',10,2);

function customFormatGallery($string,$attr){

    $output = "<div id=\"container\">";
    $posts = get_posts(array('include' => $attr['ids'],'post_type' => 'attachment'));

    foreach($posts as $imagePost){
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'small')[0]."'>";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'medium')[0]."' data-media=\"(min-width: 400px)\">";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'large')[0]."' data-media=\"(min-width: 950px)\">";
        $output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'extralarge')[0]."' data-media=\"(min-width: 1200px)\">";
    }

    $output .= "</div>";

    return $output;
}

이것은, https://codex.wordpress.org/Function_Reference/add_image_size 를 사용해 필요한 사이즈에 맞추어 이미지 사이즈를 설정했을 경우를 상정하고 있습니다.

이 필터 바로 아래의 Answer에 언급된 필터를 놓쳤습니다.기능 전체를 복사하는 것이 아니라 이 필터를 사용하는 것을 고려해야 합니다.

템플릿의 기능에 이 코드를 추가합니다.php 및 HTML Inside 함수를 변경합니다.이 기능은 WP35의 기본 갤러리 쇼트코드 기능을 복사한 것입니다.Codex에 따르면 각 쇼트코드는 하나의 기능만 할당할 수 있으며, 그 때문에 WordPress 기본 기능보다 기능이 우선됩니다.

add_shortcode('gallery', 'my_gallery_shortcode');    
function my_gallery_shortcode($attr) {
    $post = get_post();

static $instance = 0;
$instance++;

if ( ! empty( $attr['ids'] ) ) {
    // 'ids' is explicitly ordered, unless you specify otherwise.
    if ( empty( $attr['orderby'] ) )
        $attr['orderby'] = 'post__in';
    $attr['include'] = $attr['ids'];
}

// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
    return $output;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = 'dt';

$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
    $gallery_style = "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
        }
        #{$selector} .gallery-item {
            float: {$float};
            margin-top: 10px;
            text-align: center;
            width: {$itemwidth}%;
        }
        #{$selector} img {
            border: 2px solid #cfcfcf;
        }
        #{$selector} .gallery-caption {
            margin-left: 0;
        }
    </style>
    <!-- see gallery_shortcode() in wp-includes/media.php -->";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

$i = 0;
foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
        <{$icontag} class='gallery-icon'>
            $link
        </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
        $output .= "
            <{$captiontag} class='wp-caption-text gallery-caption'>
            " . wptexturize($attachment->post_excerpt) . "
            </{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}

@DaveF의 답변을 바탕으로 갤러리 순서를 유지하고 WP Editor에서 선택하면 랜덤화하는 갤러리 기능이 있습니다.

add_filter('post_gallery','customFormatGallery',10,2);

function customFormatGallery($string,$attr){

    $posts_order_string = $attr['ids'];
    $posts_order = explode(',', $posts_order_string);

    $output = "<div class=\"gallery-container\">";
    $posts = get_posts(array(
          'include' => $posts_order,
          'post_type' => 'attachment', 
          'orderby' => 'post__in'
    ));

    if($attr['orderby'] == 'rand') {
        shuffle($posts); 
    } 

    foreach($posts as $imagePost){
        $output .= '<img src="' . wp_get_attachment_image_src($imagePost->ID, 'full')[0] . '" alt="" />';
    }

    $output .= "</div>";

    return $output;
}

수락된 답변 외에 다음과 같은 기본 갤러리 단축 코드를 먼저 삭제해야 합니다.

add_action( 'after_setup_theme', 'my_override_of_default_gallery' );

function my_override_of_default_gallery() {
    remove_shortcode( 'gallery' );
    add_shortcode('gallery', 'my_gallery_shortcode');  
}

//add_shortcode('gallery', 'my_gallery_shortcode'); 

function my_gallery_shortcode($attr) {
    $post = get_post();
    ...
}

찾고 있던 레이아웃을 얻기 위해 변경한 코드는 다음과 같습니다.

/******    REWRITE THE GALLERIE FUNCTION FROM WORDPRESS   **********/

add_shortcode('gallery', 'my_gallery_shortcode');  

function my_gallery_shortcode($attr) {
  $counter=0;
//var_dump("Rewrite the shortcode gallery");

    $post = get_post();

static $instance = 0;
$instance++;


if ( ! empty( $attr['ids'] ) ) {
    // 'ids' is explicitly ordered, unless you specify otherwise.
    if ( empty( $attr['orderby'] ) )
        $attr['orderby'] = 'post__in';
    $attr['include'] = $attr['ids'];
}



// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
    return $output;

// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
        unset( $attr['orderby'] );
}

extract(shortcode_atts(array(

/******    CHANGE TO FULL SIZE TO GET THE CORRECT INFORMATION **********/
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'Full size',
    'include'    => '',
    'exclude'    => ''    
), $attr));

/***********************************************************************/

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = 'dt';

$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";
$gallery_div ="<div pictures-content>";
$gallery_style ="";

$output = apply_filters( 'gallery_style', "\n\t\t" . $gallery_div );

$i = 0;
$count=0;
foreach ( $attachments as $id => $attachment ) {

$test = $attachments[$id];
$link=$test->guid;
    $nocsript="";
    if ($count==0){$nocsript ="<noscript><img src='$link'</noscript>";$sentence ="<div data-src='$link'></div>";}
    if ($count==1){$sentence ="<div data-src='$link' data-media='(min-width: 400px)'></div>";}
    if ($count==2){$sentence ="<div data-src='$link' data-media='(min-width: 800px)'></div>";}
    if ($count==3){$sentence ="<div data-src='$link' data-media='(min-width: 1000px)'></div>";}
    if($nocsript==""){ $output .= "$sentence";} else { $output .= $nocsript."$sentence";}
    $count++;
}
$output .= "</div>\n";
return $output;
}

언급URL : https://stackoverflow.com/questions/14585538/customise-the-wordpress-gallery-html-layout

'programing' 카테고리의 다른 글

WordPress 테마에서 wp_enqueue_style()을 사용하는 방법 (0)	2023.02.11
Angular 필터를 사용하여 데이터를 그룹화하려면 어떻게 해야 합니까? (0)	2023.02.11
Woocommerce의 특정 결제 게이트웨이에 대한 체크아웃 시 추가 필드 (0)	2023.02.07
CDN에서 WordPress로 스크립트를 큐잉하는 방법 (0)	2023.02.07
Python: 사전 목록을 json으로 변환 (0)	2023.02.07

현재글WordPress 갤러리 html 레이아웃 맞춤

각종 프로그래밍 정보를 다루는 블로그입니다.

mysql, python, json, javascript, MongoDB, vuejs2, Git, wordpress, C, asp.net, MariaDB, vuex, Java, reactjs, Oracle, angularJS, Spring-boot, php, Excel, jQuery,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

newsource

WordPress 갤러리 html 레이아웃 맞춤

WordPress 갤러리 html 레이아웃 맞춤

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

WordPress 갤러리 html 레이아웃 맞춤

WordPress 갤러리 html 레이아웃 맞춤

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바