Wordpress

Modální okno při prvním vstupu na stránky

V projektu cimbal.eu byl požadavek na občasné zobrazování úvodní nabídky v modálním okně při prvním vstupu na stránky. Obsahem je obrázek třeba ve formátu jpg.
Okno se zobrazí při prvním spuštění stránek, pak už neobtěžuje. Zobrazí se znovu až po jedné hodině nečinnosti nebo po vymazání historie prohlížeče. Nabídka je stále také přístupná z položky menu „Aktuálně“.

K tomu bylo potřeba provést 3 kroky.

1. Rozšíření administrativní sekce o zadávání parametru (název obrázku)

Majitel stránek tak může dynamicky kdykoliv měnit (nezobrazovat) úvodní nabídku.

Rozšíření admin sekce
//toto stačí vložit do functions.php
function add_theme_menu_item()
{
add_menu_page("Panel nastavení", "Panel nastavení", "manage_options", "theme-panel", "theme_settings_page", null, 99);
}

add_action("admin_menu", "add_theme_menu_item");

function theme_settings_page()
{
    ?>
    <div class="wrap">
    <h1>Panel nastavení</h1>
    <form method="post" action="options.php">
        <?php
            settings_fields("section");
            do_settings_sections("theme-options");      
            submit_button(); 
        ?>          
    </form>
</div>
<?php
}

function display_modal_content_element()
{
?>
    <input type="text" name="modal_content_image" id="modal_content_image" value="<?php echo get_option('modal_content_image'); ?>" /> 
      &nbsp;&nbsp;na př. hansa_2018-1024x747.jpg,&nbsp;&nbsp;pro nezobrazovat zadejte "<b>none</b>"
  <?php
}

function display_theme_panel_fields()
{
add_settings_section("section", "Všechna nastavení", null, "theme-options");

add_settings_field("modal_content_image", "Obrázek modálního okna", "display_modal_content_element", "theme-options", "section");

  register_setting("section", "modal_content_image");
}

add_action("admin_init", "display_theme_panel_fields");


2. Definice modálního okna

Definice modálního okna
//toto vložte do header.php
<!-- Modal -->
<?php
  if (get_option('modal_content_image') != "none") {  
?>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Nabízíme</h4>
      </div>
      <div class="modal-body">
        <img align="middle" class="img-responsive" title="" src="wp-content/uploads/<?php echo get_option('modal_content_image');  ?>" alt="Hansa" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
      </div>
    </div>
  </div>
</div>
<?php
  }  
?>

3. Chování modálního okna

Chování modálního okna
//toto vložte do footer.php
<script type="text/javascript">

// A $( document ).ready() block.
$( document ).ready(function() {
  if (document.cookie.indexOf('visited=true') == -1){
    // load the overlay
    $('#myModal').modal({show:true});
    //var day = 1000*60*60*24;    
    var hour = 1000*60*60*1;
    var expires = new Date((new Date()).valueOf() + hour);
    document.cookie = "visited=true;expires=" + expires.toUTCString();
  }
});
</script>


Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *