Support » Plugins » CSS : Änderungen werden komisch übernommen

  • Gelöst timer7734

    (@timer7734)


    Ich mache gerade ein Shortcode Plugin, in dem ein Spoiler und darin eine Galerie erstellt wird. Dabei rufe ich einen Shortcode aus einem anderem Plugin für unter anderem Galerien auf.
    Dabei probiere ich erstmal alles, was ich mit CSS machen will, in Chrome aus (schreibe da den Quelltext um) und da funktioniert alles wunderbar. Das habe ich nun 1:1 bei meinem Plugin übernommen (da sind 100% keine Fehler, habe es mehrere Male überprüft) und trotzdem wird das ganz anders angezeigt. Warum?
    Beispiel:
    Im Browser display: none und danach wieder display: block ist alles ok. Wenn ich dann direkt in der .css File display: none bei der gleichen Stelle eintrage und dann im Browser das wieder auf display: block stelle, sind plötzlich alle Bilder auf einer Stelle.
    Braucht ihr dafür die Stellen? Ist nämlich sehr viel und ich will deswegen hier den Beitrag nicht zumüllen, wenn man das gar nicht braucht ^^

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Wahrscheinlich werden deine CSS-Regeln durch andere CSS-Regeln, die später geladen werden, überschrieben. Wie bindest du das Stylesheet denn ein?

    Thread-Starter timer7734

    (@timer7734)

    Hab ich eigentlich alles durchgeschaut, jedoch nichts gefunden, was in Widerspruch steht (ich habe bei Chrome unter untersuchen alles bei den geänderten DIVs durchgeschaut)
    Ich habe die .css so eingebunden:
    wp_enqueue_style('galery-spoiler', plugin_dir_url( __FILE__ ) . 'galery-spoiler.css' );

    Hast du eigentlich meine Antwort bzgl. wp_enqueue_scripts gelesen?
    https://de.wordpress.org/support/topic/wp_enqueue_style-css-wird-nicht-hinzugefuegt/#post-43134

    Thread-Starter timer7734

    (@timer7734)

    Oh sorry. Ne habe ich jetzt erst gesehen
    Kurze Frage deswegen:
    Welche Grund hat es, dass wp_enqueue_scripts unten bei add_action steht? Verstehe ich gerade nicht ganz

    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von timer7734.
    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von timer7734.

    add_action() heißt, dass du einer der vordefinierten Schnittstellen eine eigene Funktion hinzufügst. wp_enqueue_scripts ist eine solche Schnittstelle, in diesem Fall die Schnittstelle an der Stylesheets und JavaScript via wp_head() und wp_footer() eingebunden werden.

    Thread-Starter timer7734

    (@timer7734)

    Wenn ich das einfüge, wird die Stylesheet Datei nicht mehr geladen

    Dann stimmt an deinem Code etwas nicht.
    Füg deinen aktuellen Code doch mal hier ein, damit wir nochmal zusammen drüberschauen können.

    Thread-Starter timer7734

    (@timer7734)

    function gallery_spoiler($atts, $content) {
    //	wp_enqueue_style('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.css' );
    	wp_enqueue_script('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.js' );
    	$a = shortcode_atts( array(
    		'title'       => '',
    		'gallery_id' => '',
    		'margin' => false
    	), $atts );
    	$args = array(
    		'gallery_id' => $a['gallery_id'],
    		'margin'     => $a['margin']
    	);
    	ob_start();
    	?>
    		<html>
    			<div id="spoiler">
    				<div id="spoiler-title">
    					<plus id="spoiler-plus">+</plus>
    		</html>
    		<?php
    			echo $a['title'];
    		?>
    		<html>
    				</div>
    				<div id="spoiler-body">
    		</html>
    		<?php
    		echo tg_grid_gallery_func($args, null);
    		?>
    		<html>
    				</div>
    			</div>
    		</html>
    		<?php
    	return ob_get_clean();
    }
    add_shortcode( 'galspoiler', 'gallery_spoiler' );
    
    function gallery_spoiler_style() {
      wp_enqueue_style('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.css');
    }
    add_action('wp_enqueue_scripts', 'gallery_spoiler_style()');

    Brauchst du auch die CSS Datei?
    Und sorry für die Verwirrung wegen galery und gallery. Mir ist gerade aufgefallen, dass ich da wieder ein paar mal aus versehen galery geschrieben habe und das habe ich jetzt alles zu gallery geändert (natürlich auch die Dateinamen) ^^

    1. Lösch mal aus der Funktion gallery_spoiler() die Zeile wp_enqueue_script('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.js' );, das gehört nicht in den Shortcode rein. Das JavaScript soll ja nicht jedesmal eingebunden werden, wenn du einen Shortcode eingefügt hast (was du — zumindest theoretisch — dutzendmal auf einer Seite machen könntest).

    2. Füg die Zeile in der Funktion gallery_spoiler_style() ein (wobei ich dann auch den Funktionsnamen ändern würde).

    3. der zweite Parameter von add_action() ist ein Funktionsmane — ohne die Klammern!

    Das müsste also so aussehen:

    function gallery_spoiler_enqueues() {
      wp_enqueue_script('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.js' );
      wp_enqueue_style('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.css');
    }
    add_action('wp_enqueue_scripts', 'gallery_spoiler_enqueues');
    Thread-Starter timer7734

    (@timer7734)

    Nun wird das Stylesheet wieder geladen. Danke.
    Leider besteht immer noch das Problem, dass, wenn ich display: none wieder im Browser rauslösche, dies ganz anders angezeigt wird (obwohl nirgendswo anders an dieser Stelle display verwendet wird und somit eigentlich nicht in Konflikt stehen dürfte).
    Hier mal ein Link von der Seite, falls sich jemand selbst davon überzeugen will:
    http://palladio-steakandfish.de/galerie/

    Leider kann ich nicht hellsehen.
    Was soll den ausgeblendet werden?

    Dein JavaScript scheint auch noch nicht zu funktionieren, weil jQuery nicht mit eingebunden wird. Änder mal die Funktion in

    function gallery_spoiler_enqueues() {
      wp_enqueue_script('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.js', array( 'jquery' ) );
      wp_enqueue_style('gallery-spoiler', plugin_dir_url( __FILE__ ) . 'gallery-spoiler.css');
    }
    Thread-Starter timer7734

    (@timer7734)

    Hab ich übernommen
    Oh hab ich wohl oben vergessen zu schreiben. Spoiler-body ist mit display: none; ausgeblendet.

    Schau dir mal dieses Tutorial an:
    https://blog.kulturbanause.de/2011/11/elemente-mit-jquery-auf-und-zufahren-lassen-slide-toggle-und-parallel-das-icon-austauschen/

    und jetzt wünsche ich viel Erfolg, den Rest bekommst du sicher selber hin. 🙂

    Thread-Starter timer7734

    (@timer7734)

    Das habe ich nun reingemacht. Leider klappt sich das trotzdem nicht wieder auf

    function gallery_spoiler($atts, $content) {
    	$a = shortcode_atts( array(
    		'title'       => '',
    		'gallery_id' => '',
    		'margin' => false
    	), $atts );
    	$args = array(
    		'gallery_id' => $a['gallery_id'],
    		'margin'     => $a['margin']
    	);
    	ob_start();
    	?>
    		<html>
    			<dl>
    				<dt>
    		</html>
    		<?php
    			echo $a['title'];
    		?>
    		<html>
    					<a href="#" class="closed">Öffnen</a>
    				</dt>
    				<dd>
    		</html>
    		<?php
    		echo tg_grid_gallery_func($args, null);
    		?>
    		<html>
    				</dd>
    			</dl>
    		</html>
    		<?php
    	return ob_get_clean();
    }
    add_shortcode( 'galspoiler', 'gallery_spoiler' );
    dd {
    	display: none;
    }
    jQuery(function () {
    	$(document).ready(function(){
    		$("dt").click(function(){
    			$(this).next("dd").slideToggle("fast");
    			$(this).children("a").toggleClass("closed open");
    		});
    	});
    });
    • Diese Antwort wurde geändert vor 6 Jahren, 3 Monaten von timer7734.
    Thread-Starter timer7734

    (@timer7734)

    Da ich meinen alten Beitrag leider nicht bearbeiten kann, muss ich hier leider nun einen neuen schreiben und ich hoffe, dass das nicht als Push Beitrag wahrgenommen wird ^^
    Ich habe es nun geschafft, dass die jQuery Function richtig ausgeführt wird. Leider ist dann das gleiche Problem wie zuvor: Alle Bilder öffnen sich auf der selben Stelle. Woran liegt das?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Das Thema „CSS : Änderungen werden komisch übernommen“ ist für neue Antworten geschlossen.