Masonry + Wordpress = Hilfe!

  • Hallo,
    ich werd noch wahnsinnig. Habe jetzt zigTutorials ausprobiert und es klappt einfach nicht mit dem Masonry im WordPress. :sad:

    HEADER.php

    PHP
    <?php wp_head(); ?>
    <script>
    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 240
      });
    });
    </script>


    INDEX.PHP

    Code
    <div id="container">
       <div class="item">Lorem ipsum dolor sit amet</div>
       <div class="item">...</div>
    </div>


    STYLE.CSS

    Code
    #container { width: 800px;} 
    .item {   width: 220px;   margin: 10px;   float: left; }


    FUNCTIONS.php

    PHP
    <?php function mason_script() {
        wp_enqueue_script( 'jquery-masonry' );
    } add_action( 'wp_enqueue_scripts', 'mason_script' ); ?>

    So stehen die Beiträge immerhin schon mal nebeneinander, aber es floatet nicht in beide Richtungen, aber es verschachtelt sich nicht, irgendwie ruft er wohl das Masonry nicht richtig auf. Habt ihr eine Idee?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich hab die Breite im #container im CSS entfernt, jetzt schaut es so aus... es floatet so vor sich hin, aber so richtig funktioniert es nicht. Wie krieg ich es hin, dass die divs von unten hoch rutschen?

  • So habe erst mal googlen müssen was Masonry ist, schein ein jQuery PlugIn zu sein, habe ich recht? Ok, hätte ich auch anhand der functions.php sehen können.
    Leider hilft in diesem Fall ein Screenshot kaum weiter -> laut deinen Snippets sollte da kein Abstand sein, mhmm
    Was sagt den Firebug oder ein anderes Entwicklertool dazu?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!