WP.v3.3.2

Csinos, okosan összeállított oldalnavigátor.Előszó:
Sokféle oldalnavigáció létezik, de ilyen mint amit nem rég találtam, bizony kevés…

Működése (Google Chrome, Mozilla F. böngészőn tesztelve):
A dizájn a lap jobboldalán a lapszél közepére kerül (szinte észrevétlenül). Könnyen kezelhető; az első a Home (ugrik a kezdőlapra), a második a Top (ugrik a lap tetejére), a harmadik a Middle (ugrik a lap közepére – visszafelé is), a negyedik a Bottom (ugrik a lap aljára). Hosszú oldalakon való navigáláshoz szinte elengedhetetlen alkalmazás!
Igaz, ahhoz, hogy WP. szeresse és a leírás szerint működjön, egy icipici kiegészítést igényel, de ez nem hiányosság, inkább csak szükségszerűség. A WP. sokszor „küszködik” a jQuery függvény okozta hiányosság, pontosabban az újszerűség adta módosítások miatt… De az ajax.googleapis script ezen mos is átsegíti, íme a kód, melyet a kódtömbben lévő

<script type='text/javascript'>

fölé kell beszúrni.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

A wp-content/themes/twentyeleven/header.php fájlban kell elhelyezni az alábbi kódtömböt (természetesen más sablonban is oda).
Javaslatom: a kódtömböt a megnyitott fájl közepe táján (kb. 71. sor) a wp_head(); „utasítást” adó függvény alá legyen behelyezve.

    $uploads_dir = wp_upload_dir();
    $upload_url = $uploads_dir['baseurl'];

    $img_page_home_url = $upload_url . '/page_home.png';
    $img_page_up_url = $upload_url . '/page_up.png';
    $img_page_middle_url = $upload_url . '/page_middle.png';
    $img_page_down_url = $upload_url . '/page_down.png';
    $page_home_url = site_url() . '/';

    $wcs_nav_speed = '500'; // lower #'s are faster (100 - 1000)
    $style_bkg = 'background:#F0F0F0;';
    $style_border = 'border:1px solid #E0E0E0;';
    $style_rounded = '-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;';
    $style_shadow = '-moz-box-shadow:1px 1px 1px #297385; -webkit-box-shadow:1px 1px 1px #297385; box-shadow:1px 1px 1px #297385;';

    echo "
        <div id='wcs_page_navigator' style='position:fixed; z-index=999; right:5px; $style_bkg $style_border padding:2px; $style_rounded $style_shadow'>
            <a href='$page_home_url' title='Home'><img src='$img_page_home_url' width='16' height='16' style='padding-bottom:2px;' /></a><br/>
            <div id='wcs_jquery_page_top' title='Top' style='margin:0px; padding-bottom:2px; cursor:pointer; cursor:hand;'><img src='$img_page_up_url' width='16' height='16' /></div>
            <div id='wcs_jquery_page_middle' title='Middle' style='margin:0px; padding-bottom:2px; cursor:pointer; cursor:hand;'><img src='$img_page_middle_url' width='16' height='16' /></div>
            <div id='wcs_jquery_page_bottom' title='Bottom' style='margin:0px; cursor:pointer; cursor:hand;'><img src='$img_page_down_url' width='16' height='16' /></div>
        </div>
ide kell beszúrni az ajax.googleapis scriptet.
        <script type='text/javascript'>
            // position the page navigator control
            var wdwHeight;
            wdwHeight = window.innerHeight;
            if (document.documentElement && document.documentElement.clientHeight) {wdwHeight = document.documentElement.clientHeight;}
            var wdwVcenter = ((wdwHeight - 76) / 2) + 'px';
            document.getElementById('wcs_page_navigator').style.bottom = wdwVcenter;

            // process navigator item clicks
            jQuery(document).ready(function()
            {
                jQuery('#wcs_jquery_page_top').click(function()
                {
                    jQuery('html, body').animate({scrollTop:0}, $wcs_nav_speed);
                        return false;
                });

                jQuery('#wcs_jquery_page_middle').click(function()
                {
                    jQuery('html, body').animate({scrollTop: (jQuery(document).height() - jQuery(window).height())/2}, $wcs_nav_speed);
                        return false;
                });

                jQuery('#wcs_jquery_page_bottom').click(function()
                {
                    jQuery('html, body').animate({scrollTop: jQuery(document).height()}, $wcs_nav_speed);
                        return false;
                });
            });
        </script>
    ";

    /**********************************************************************
     Copyright © 2011 Gizmo Digital Fusion (http://wpCodeSnippets.info)
     you can redistribute and/or modify this code under the terms of the
     GNU GPL v2: http://www.gnu.org/licenses/gpl-2.0.html
    **********************************************************************/

Megjegyzés: természetesen be lehet tenni az admin felületre is, hiszen ott sem hátrányos a sok cím, oldalak, bejegyzések közti kényelmes „sétálgatás”…
Itt a wp-admin/admin-footer.php fájl elejére, közvetlen a <?php kód alá javaslom a kódtömböt helyezni.

Forrása itt: Presenting the WCS Page Navigator

Képi infó: szerintem igazán csinos…

Kellemes időtöltést!

Oldalak: 1 2 3 4 5 6

---