如何让图库快捷代码输出一个单独的UL列表,而不是多个DL?

时间:2014-04-10 作者:Luca Reghellin

我需要内置的gallery短代码来输出UL而不是DL。我该怎么做?我知道我可以使用“post\\u gallery”过滤器,但这意味着几乎要复制媒体的gallery\\u快捷码功能。我想找到一个不那么“冗长”的解决方案。

非常感谢。

2 个回复
最合适的回答,由SO网友:Luca Reghellin 整理而成

好的,我重写了gallery shortcode函数,复制了原来的功能,删除/添加/更改了所需的内容,现在我将其与您共享。我添加/更改的主要内容有:

  • One single UL/LI list per gallery 而不是每个该死的项目的DL\'icontag\' now defaults to \'figure\', \'captiontag\' now defaults to \'p\'
  • new \'class\' attr 用于将自定义类添加到容器ULnew \'first-in-row\', \'last-in-row\', \'first-row\', \'last-row\' helper classes 对于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
为了完成gallery快捷代码“一章”,这里我将向您展示如何最终以编程方式更改默认和/或用户定义的属性。例如,我需要根据项目数更改大小属性:

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);
}
希望它能帮助其他人搜索更干净的图库标记。

SO网友:passatgt

您可以对库快捷码使用以下属性:

[gallery itemtag="ul" icontag="li" captiontag="li"]
问题是gallery快捷码将图像和标题包装在不同的元素中(这就是为什么默认解决方案使用dl dt dd),因此这将为图像生成一个li元素,为标题生成一个li元素。尽管如此,您仍然可以使用CSS设置样式,因为这两个元素都有唯一的类名。

结束

相关推荐

Dynamic Gallery

我正在建立一个单页网站,这意味着所有链接都需要动态调用帖子内容。我发现this tutorial 在StackOverflow的一些人的帮助下,我成功地创建了这样的页面。但当我需要在一个页面中创建一组动态库时,一个新的挑战出现了。所以这里需要做的是:有一个帖子标题列表,每个标题中都有图库。当我点击其中一个链接时,带有缩略图的帖子应该显示在它的正下方。我很好地做到了这一点,但当单击缩略图时,较大的版本应该会出现在旁边。我应用了相同的代码,但它根本不起作用!这是我目前掌握的代码:索引。php(图库部分)hav