web-dev-qa-db-ja.com

どのようにしてGalleryアイテムのHTML出力を変更するのですか(galleryショートコードを使用)。

この単純な問題で少し迷ったので、私はidが来て賛成論者に尋ねると思った。私のクライアントから彼らのサイトのギャラリーでは名前と説明が同じ行にあると言われました。

たとえば、画像がABCと呼ばれ、説明が「123」の場合です。

出力は1行にすべて "ABC-123"です。

 --------
| Picture |
 --------
ABC-123

彼女は1行に名前を、そしてもう1行に説明を望んでいます。

 --------
| Picture |
 --------
ABC

123

問題は、この単純な変更を加えるためにコードを編集する方法に関して、私が探しているものが何であるかさえ知らないことです。

出力コードIDには、簡単な 'br'タグまたはそのようなものを入力するだけですが、この変更をどこで行うのかわからないのです。回避策として、私は自分のローカルサーバーに進み、ギャラリーの写真のキャプション領域に "ABC"と入力しました。
123 "そしてそれはうまくいった。それは名前と説明を2行にしたが、そのギャラリーにはたくさんの画像があり、この回避策よりもっときれいでエレガントなものがあるのは間違いない。

どこでコードを編集できるかについてのアイデアは?私のテーマはカスタムですが、基本的にデフォルトであり、それについて何もおかしくありませんが、最新ビルドのWPおよびすべてを使用しているimです。

例えば、[gallery link = "file" orderby = "Rand"]のように、ギャラリーコードを追加するときに不思議に思います。

高度なおかげで

3
somdow

念のため、誰もがこれを見ています、私は手動でキャプション領域に<br/>タグを挿入することによって問題を解決しました。

たとえば、画像のコンテンツにこのサンプルテキスト"ABC-123"が含まれている場合は、これが出力されます。

 --------
| Picture |
 --------
ABC-123

それからキャプションで私はこれを出力するABC<br/>123のような何かを入力しました

 --------
| Picture |
 --------
ABC

123

これは私が参照していたWP内の(ショートコード付き)シンプルなギャラリーで、上記で求められていました http://deadsilencethemovie.com/?page_id=29 (brタグの後ろ) Wpのためにもっと合法的なものが落ちるまでの回避策(それが既にない場合)。皆さんありがとう。

0
somdow

あなたのテーマがそれ自身のギャラリのショートコードを転がしていないと仮定しましょう、そしてあなたがここで 'ギャラリ'ポストフォーマットよりむしろ[ギャラリ]ショートコードを使用していると仮定しよう。探しているのはwp-includes/media.php内の750行目付近の 'gallery_shortcode'関数です(3.3.1以降)。それが、ギャラリーアイテムのHTML出力がハードコードされている場所です。

もちろん、WordPressのコアファイルを編集したり変更したりすることはできません。そのため、他の方法で独自の機能を使ってフック、フィルタ、その他の機能を強化する必要があります。各添付ファイルに必要な「タイトル」と「説明」の情報を追加します。残念ながら、ギャラリーのショートコードがコーディングされた方法では、各ギャラリーアイテムのコンテンツに追加できる便利なフィルタはありません(これは、機能強化のリクエストとパッチを送信するのは悪い考えではないと思います。 …)。それで、代わりに我々がしなければならないのは、ホールコード全体のショートコード関数を置き換えることです。

内蔵コードをコピーして自分のプラグインに貼り付けてから、必要なものを追加/変更/切断することができるので、それほど難しくありません。

これがあなたのやり方です。このコードを利用するには、pluginsフォルダ内に 'WPSE45326_Gallery_Replacement.php "というファイルを作成するだけです。次に、管理者バックエンドに移動して新しいプラグインをアクティブにする必要があります。説明とタイトル。

注意:まず、これをVanilla WordPressのインストールで試してください。クライアントのサイトではなく、そこで機能するのであれば、それはあなたが使用しているテーマが独自のコードを転用しているためです。それは事をもっと複雑にするでしょう。

<?php
/*
Plugin Name: WPSE-45326 Gallery Replacement example
Plugin URI: http://wordpress.stackexchange.com/questions/45326
Description: A plugin to demonstrate how to replace the default 'gallery' shortcode and add additional HTML tags for more customization.
Version: 1.0
Author: Tom Auger
Author URI: http://www.tomauger.com
License: GPL2
*/

class wpse_45326_Gallery_Replacement {
    function __construct(){
        // Hook on the plugins-loaded action since it's the first real action hook that's available to us.
        // However, if you're using a theme and want to replace that theme's `gallery` custom shortcode,
        // you may need to use another action. Search through your parent theme's files for 'gallery' and see
        // what hook it's using to define it's gallery shortcode, so you can make sure this code runs AFTER their code.
        add_action( "init", array( __CLASS__, "init" ) );
    }

    function init(){
        remove_shortcode( 'gallery' ); // Remove the default gallery shortcode implementation
        add_shortcode( 'gallery', array( __CLASS__, "gallery_shortcode" ) ); // And replace it with our own!
    }

    /**
    * The Gallery shortcode.
    *
    * This has been taken verbatim from wp-includes/media.php. There's a lot of good stuff in there.
    * All you want to do is add some more HTML to it, and since (for some reason) they didn't provide more
    * filters to be able to add, we have to replace the Gallery shortcode wholesale.
    *
    * @param array $attr Attributes of the shortcode.
    * @return string HTML content to display gallery.
    */
    function gallery_shortcode($attr) {
        global $post;

        static $instance = 0;
        $instance++;

        $output = apply_filters('post_gallery', '', $attr);
        if ( $output != '' )
            return $output;

        if ( isset( $attr['orderby'] ) ) {
            $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
            if ( !$attr['orderby'] )
                unset( $attr['orderby'] );
        }

        // NOTE: These are all the 'options' you can pass in through the shortcode definition, eg: [gallery itemtag='p']
        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'    => '',
            // Here's the new options stuff we added to the shortcode defaults
            'titletag'  => 'p',
            'descriptiontag' => 'p'
        ), $attr));

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

        if ( !empty($include) ) {
            $include = preg_replace( '/[^0-9,]+/', '', $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) ) {
            $exclude = preg_replace( '/[^0-9,]+/', '', $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);
        $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}>";

            // MODIFICATION: include the title and description HTML if we've supplied the relevant shortcode parameters (titletag, descriptiontag)
            if ( $captiontag ) {
                $output .= "
                    <{$captiontag} class='wp-caption-text gallery-caption'>";
                // The CAPTION, if there is one
                if ( trim( $attachment->post_excerpt ) ) {
                    $output .= "
                        " . wptexturize($attachment->post_excerpt);
                }

                // The TITLE, if we've not made the 'titletag' param blank
                if ( $titletag ){
                    $output .= "
                        <{$titletag} class=\"gallery-item-title\">" . $attachment->post_title . "</{$titletag}>";
                }

                // The DESCRIPTION, if we've not specified a blank 'descriptiontag'
                if ( $descriptiontag ){
                    $output .= "
                        <{$descriptiontag} class=\"gallery-item-description\">" . wptexturize( $attachment->post_content ) . "</{$descriptiontag}>";
                }

                $option .= "
                    </{$captiontag}>";
            }
            $output .= "</{$itemtag}>";
            if ( $columns > 0 && ++$i % $columns == 0 )
                $output .= '<br style="clear: both" />';
        }

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

        return $output;
    }
}

new wpse_45326_Gallery_Replacement();
7
Tom Auger