Slider (Javascript) in WP einbauen

Kategorie: WordPress-Tipps | Share: funkygog       

Durch ein Slider Script lassen sich wichtige Beiträge sehr elegant präsentieren. Es gibt hier zahlreiche Javascripte.

Am besten gefallen hat mir Easy Slider.
Dort gibt es verschiedene Möglichkeiten dieses jQuery Script zu nutzen. Die schönste Methode: Demo

Anleitung zum Einbau in WordPress:

  1. download v1.7 inkl. Javascript, CSS-Dateien u.a.
  2. Entpacken und die Dateien von dem js-Ordner in das eigene Theme kopieren (zumeist gibt es dort auch einen Ordner namens js oder javascript)
  3. Einbinden der Scripte in header.php

    <!-- jQuery: Slider -->
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.7.js"></script>

    vor dem <?php wp_head(); ?>
    </head>

    Anmerkungen hierzu siehe unten

  4. Das Script muss noch ergänzt werden um einen Funktionsaufruf. Dazu auf der Seite von Easy Slider die verschiedenen Demos anschauen. Und beim gewünschten den „Usage-Code“ kopieren.
    Beispiel::

    $(document).ready(function(){
    $("#slider").easySlider();
    });

    Diesen Code einbinden in ein Script-Aufruf:

    <script type="text/javascript">
    ...Usage Code...
    </script>

    und direkt unterhalb der Scripte in header.php einsetzen.

  5. Styling Angaben eintragen in der style.css
    oder daür eine eigene css-Datei erstellen um im header.php verknüpfen:

    <link rel="stylesheet" href="...Pfad zur css-Datei..." type="text/css">

    Beispiel Styling findet man bei Easy Slider
    oder hier anzeigen

  6. Die Grafiken (rechts und links Button) in den Theme Image Ordner einügen.
  7. Beitrag schreiben.
    Die Struktur ist sehr einfach gehalten.

    <div id="slider">
    <ul>
    <li>1.Bild, Text u.a...</li>
    <li>2.Bild, Text u.a...</li>
    <li>3.Bild, Text u.a...</li>
    </ul>
    </div>

Damit das alles schick aussieht sollten die Bilder alle das selbe Format haben. Im Standard wäre das 500×200 px.

zu 3.) Einbinden der Scripte.
WordPress enthält bereits das jquery-Script. Es ist somit eigentlich nicht notwendig dieses zusätzlich aufzurufen.
Statt

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>

kann das vorhandene aktiviert werden durch:

<?php wp_enqueue_script('jquery'); ?>

[mehr Infos]
Bei mir hat das aber leider noch nie funktioniert.

Alternativ kann man auch ein Tab-Menü verwenden. [Siehe Beitrag]

weitere Slide-Scripte:

Eine Übersicht von diversen Slider, Scroll und Accordion Plug-Ins gibt es beim Blogrammierer

Für reine Fotoserien:


3 Kommentare für » Slider (Javascript) in WP einbauen

  1. Christian Schenk

    Tatsächlich lässt sich die SmoothGallery für solche Zwecke nutzen, wie bspw. hier. Dazu wird der Bereich der Gallery breiter als die Bilder dimensioniert, so dass die Pfeile zum Durchschalten links und rechts nicht über den Bildern liegen; muss man natürlich nicht unbedingt so machen. In jedem Fall hat man die Möglichkeit die mitgelieferten Bilder für die Pfeile gegen eigene auszutauschen.

    Sollte es Fragen zu solchen Anpassungen geben, kann ich vielleicht weiter helfen.

    Übrigens: Danke für den Link!

  2. funkygog

    Hallo Christian,
    das Beispiel sieht klasse aus! Das werde ich mir mal genauer anschauen.

  3. Ein schöner Beitrag, habe mich mit dem Thema auch schon beschäftigt, macht den Blog mit Featured Beiträgen doch gleich viel schicker.
    Ein gelungenes Tutorial, sollte es mehr von der Sorte geben …

    Grüße aus der Hauptstadt V.



Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps