it-swarm.com.de

Wie ändern Sie die HTML-Ausgabe eines Galerieelements (mithilfe des Galerie-Shortcodes)?

Ich bin ein bisschen durch dieses einfache Problem verloren, also dachte ich, ich würde kommen und die Profis fragen. Ich habe gerade von meinem Kunden erfahren, dass auf der Website-Galerie der Name und die Beschreibung in derselben Zeile stehen.

also zum Beispiel, wenn das Bild ABC heißt und die Beschreibung "123" lautet.

die Ausgabe ist "ABC-123" in einer Zeile.

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

Sie möchte den Namen in einer Zeile und die Beschreibung in einer anderen wie folgt:

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

123

das Problem ist, dass ich nicht einmal weiß, wonach ich suche, um den Code zu bearbeiten, um diese einfache Änderung vorzunehmen.

Geben Sie in die ID des Ausgabecodes einfach ein kurzes "br" -Tag oder ähnliches ein, aber ich weiß nicht, wo ich diese Änderung vornehmen soll. Als Workaround habe ich auf meinem lokalen Server weitergearbeitet und im Bildunterschriftenbereich der Galerie "ABC" eingefügt
123 "und es hat funktioniert. Der Name und die Beschreibung wurden auf 2 Zeilen gesetzt, aber es gibt VIELE Bilder in dieser Galerie und ich bin mir sicher, dass es etwas saubereres und eleganteres gibt als diese Problemumgehung lol.

irgendwelche Ideen, wo ich den Code bearbeiten kann? Ich benutze den neuesten Build von WP und alles, obwohl mein Theme benutzerdefiniert ist, aber es ist im Grunde genommen Standard und nichts verrücktes daran.

ich frage mich nur, wann Sie den Galerie-Code hinzufügen, zum Beispiel [gallery link = "file" orderby = "Rand"], auf welche Seite oder welchen Codeblock bezieht sich dieser Code?

Danke im Voraus

3
somdow

Nun, nur für den Fall, dass sich jemand das ansieht, habe ich das Problem durch manuelles Einfügen eines <br/>-Tags in den Beschriftungsbereich gelöst.

wenn der Bildinhalt beispielsweise diesen Beispieltext enthält, gibt "ABC-123" diesen aus

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

dann habe ich in der beschriftung so etwas wie diesen ABC<br/>123 eingetragen, der diesen ausgibt

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

123

Dies ist die einfache Galerie (mit Shortcode) in Wp, auf die ich mich bezog und nach der ich oben gefragt wurde http://deadsilencethemovie.com/?page_id=29 (nach dem br-Tag), aber auch dies ist nur ein Workaround, bis etwas mehr legitime für Wp. fällt (wenn es nicht bereits hat). Vielen Dank an alle.

0
somdow

Nehmen wir an, dass Ihr Thema KEINEN eigenen Galerie-Shortcode verwendet, und nehmen wir an, dass Sie hier den [Galerie] -Shortcode anstelle des Postformats "Galerie" verwenden. Was Sie suchen, ist die Funktion 'gallery_shortcode' innerhalb von wp-includes/media.php um die Zeile 750 (ab 3.3.1). Hier wird die HTML-Ausgabe Ihrer Galerieelemente fest codiert.

Natürlich können oder sollten wir keine der WordPress-Kerndateien bearbeiten oder ändern, daher müssen wir uns andere Möglichkeiten ansehen, um die eingebauten Funktionen mit unseren eigenen zu verknüpfen, zu filtern oder auf andere Weise zu verbessern um die gewünschten Informationen zu 'Titel' und 'Beschreibung' für jeden Anhang hinzuzufügen. Aufgrund der Codierung des Galerie-Shortcodes gibt es leider keinen praktischen Filter, mit dem Sie den Inhalt der einzelnen Galerieelemente erweitern können (daher ist es möglicherweise keine schlechte Idee, eine Erweiterungsanforderung und einen Patch einzureichen ... hmm ...). Stattdessen müssen wir also die gesamte Shortcode-Funktion im Großhandel ersetzen.

Das ist nicht so schwer, wie es sich anhört, denn wir können den eingebauten Code einfach kopieren und in unser eigenes Plugin einfügen und dann hinzufügen/ändern/verstümmeln, was immer wir wollen.

So würden Sie das machen. Um diesen Code zu nutzen, erstellen Sie einfach eine Datei mit dem Namen "WPSE45326_Gallery_Replacement.php" in Ihrem Ordner "plugins". Gehen Sie dann in Ihr Admin-Backend und aktivieren Sie das neue Plugin. Vergewissern Sie sich dann, dass die Bilder ein haben Beschreibung und Titel.

Hinweis: Versuchen Sie dies zunächst bei einer Vanilla WordPress-Installation. Wenn es dort funktioniert, aber nicht auf der Site Ihres Kunden, dann liegt es daran, dass das von Ihnen verwendete Thema seinen eigenen Code rollt. Das würde die Dinge komplizierter machen.

<?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