web-dev-qa-db-ja.com

ギャラリーショートコードに複数のDLではなく単一のULリストを出力させる方法

DLではなくULを出力するには、内蔵のギャラリーショートコードが必要です。どうすればいいの？私は 'post_gallery'フィルタを使用できることを知っています、しかしそれはメディアのgallery_shortcode関数をほとんど複製することを意味します。あまり冗長でない解決策を見つけたいのですが。

ありがとうございました

shortcodegallery
3
Luca Reghellin

それでは、オリジナルをコピーして必要なものを削除/追加/変更してギャラリーのショートコード機能を書き換えました。そして今それをあなたと共有します。私が追加/変更した主なものは以下のとおりです。

  • ギャラリーごとに単一のUL/LIリスト 各ダムドアイテムのDLの代わりに..
  • UL内の項目に別のタグを使用しても意味がないため、 'itemtag' attrを削除しました。
  • 'icontag'はデフォルトで 'figure'になり、 'captiontag'はデフォルトで 'p'になります
  • 新しい 'class' attr コンテナULにカスタムクラスを追加するための
  • 新しい 'first-in-row'、 'last-in-row'、 'first-row'、 'last-row'ヘルパークラス LI項目用（代わりにn番目の子のCSSセレクタを使用することを強く推奨します） ）

これがコードです：

//remove styles: I'll use mine
add_filter('use_default_gallery_style','__return_false');


//remove default shortcode
remove_shortcode('gallery');
//add new shortcode
add_shortcode('gallery', 'custom_gallery');

function custom_gallery($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'];
  }

  $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 ? $post->ID : 0,
    'icontag'    => 'figure',
    'captiontag' => 'p',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => '',
    'link'       => '',
    'class'      => ''//now you can add custom class to container UL 
  ), $attr, 'gallery'));

  $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() ) //removed, see original in media.php


  $itemtag = tag_escape('li');//new tag for item 
  $captiontag = tag_escape($captiontag);
  $icontag = tag_escape($icontag);

  //valid tags check removed, see original in media.php

  $columns = intval($columns);
  $selector = "gallery-{$instance}";

  $size_class = sanitize_html_class( $size );

  //new tag for container 
  $output = "<ul id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class} {$class}'>";

  $i = 0;
  $c = count($attachments);
  $o = (int)floor($c/$columns)*$columns;

  foreach ( $attachments as $id => $attachment ) {
    if(!empty($link) && 'file' === $link) $image_output = wp_get_attachment_link($id,$size,false,false);
    elseif(!empty($link) && 'none' === $link) $image_output = wp_get_attachment_image($id,$size,false);
    else $image_output = wp_get_attachment_link( $id, $size, true, false );
    $image_meta = wp_get_attachment_metadata($id);
    $orientation = '';
    if(isset($image_meta['height'], $image_meta['width'])) $orientation = ($image_meta['height'] > $image_meta['width']) ? 'portrait' : 'landscape';

    //setup custom aux classes to help style
    $m = ++$i % $columns;
    $item_pos_class = ($m == 1) ? 'first-in-row' : (($m == 0) ? 'last-in-row' : '');
    $row_class = ($i <= $columns) ? 'first-row' : (($i > $o) ? 'last-row' : '');

    //added: custom aux classes
    $output .= "<{$itemtag} class='gallery-item {$item_pos_class} {$row_class}'>";
    $output .= "<{$icontag} class='gallery-icon {$orientation}'>$image_output</{$icontag}>";
    if($captiontag && trim($attachment->post_excerpt)){
      $output .= "<{$captiontag} class='wp-caption-text gallery-caption'>" . wptexturize($attachment->post_excerpt) . "</{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
  }

  //changed BR>clear:both with a more conventional clearfix div
  $output .= "</ul>\n<div class='clearfix'></div>";

  return $output;
}//end custom gallery

そして、ギャラリーのショートコード「章」を完成させるために、ここではデフォルトでユーザー定義の属性をプログラム的に変更する方法を示します。たとえば、項目数に基づいてサイズattrを変更する必要があるとします。

add_filter('shortcode_atts_gallery','set_gallery_thumbs_size',10,3);

function set_gallery_thumbs_size($out, $pairs, $atts) {

  //in this case, if size was defined by the user, keep original and stop here
  if(isset($atts['size'])) return $out;

  //get number of images
  $c = count(explode(',',$atts['ids']));
  //set different sizes based on items count
  //new sizes were created with add_image_size() and image_size_names_choose filter (see wp docs)
  $atts['size'] = ($c > 2) ? 'thumb-3c' : ( ($c > 1) ? 'thumb-2c' : 'thumbnail');
  //merge original array with new one and return it
  return array_merge($out,$atts);
}

他の人がもっときれいなギャラリーのマークアップを探すのに役立つことを願っています。

3
Luca Reghellin

ギャラリーのショートコードには、以下の属性を使用できます。

[gallery itemtag="ul" icontag="li" captiontag="li"]

これの問題点は、ギャラリーのショートコードが画像とキャプションを異なる要素でラップすることです（そのため、デフォルトの解決策はdl-dt-ddを使用するためです）。それでもCSSを使用してスタイルを設定できます。両方の要素に一意のクラス名があるためです。

3
passatgt