Integrace s redakčním systémem WordPress

WordPress je velmi populární systém pro tzv. Content Management. Do systému WordPress lze FlexBookové JavaScript komponenty zaintegrovat jako do každé jiné webové stránky. Je potřeba do <HEAD>...</HEAD> sekce HTML vložit JQuery a FlexBook knihovny, a zajistit aplikaci CSS stylů.

...
<HEAD>
<!-- FlexBook JavaScripts -->
<script src="http://www.flexbook.cz/jq/jquery.js"></script>
<script src="http://www.flexbook.cz/flbv2.js"></script>

<!-- Integrator's custom CSS -->
<link rel="stylesheet" type="text/css" href="example.css" />
</HEAD>
...

Máte-li funkční JQuery (viz poznámky níže) a FlexBook JavaScript knihovny, tak již můžete vkládat FlexBookové komponenty přímo do příslušných stránek. Níže je uvedena ukázka z integrace FlexBook komponent v redakčním systému WordPress.

<h1>KALENDÁŘ AKCÍ</h1>

<div id="flb_kalendar_akci">&nbsp;</div>
<div id="flb_list_akci">&nbsp;</div>

<script>
jQuery(document).ready(function( $ ) {
  flbInit('http://www.flexbook.cz/ajax.php', 18, [
    {
      type: 'flbResourceCalendar',
      placeHolder: 'flb_kalendar_akci',
      language: 'cz',
      render: ['event'],
      renderText: ['none'],
      format: { datetime: 'd.m. H:i', time: 'H:i' },
      tag: ['kalendar-akci'],
      disableResourceReservation: 1,
    },
    {
      type: 'flbEventList',
      placeHolder: 'flb_list_akci',    
      language: 'cz',
      tag: ['kalendar-akci'],
    }
  ]);
});
</script>

Poznámky k interoperabilitě systémů WordPress, JQuery a FlexBook

Poznámka 1: FlexBook Javascript musí být v HEAD sekci až za WordPress JavaScriptem jinak hrozí kolize JQuery funkcí. Nejlepší je umístit FlexBook JavaScript úplně na konec <HEAD>...</HEAD> sekce.

Poznámka 2: V některých případech dochází ke konfliktu verzi jquery, pak je potřeba vypnout defaultní jquery wordpresu a nastavit jquery flexbooku. To se udělá následující úpravou příslušného header.php souboru. Pak již stačí pouze includnout klasický druhý js soubor flbv2.js.

if (!is_admin()) {
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("https://www.flexbook.cz/jq/jquery.js";), false); 
   wp_enqueue_script('jquery');
}

Poznámka 3: V případě, kdy ve wordpressu jsou instalovány komponenty vyžadující jquery < 3.x, je potřeba, aby byla nahrána knihovna jq-migrate, která zajišťuje zpětnou kompatibulitu. Kód do wordpressu pak vypadá takto:

if (!is_admin()) {
 wp_deregister_script('jquery-core');
 wp_register_script('jquery-core', 'https://www.flexbook.cz/jq/jquery.js';, true, '3.4.1');
 wp_enqueue_script('jquery-core');
 wp_deregister_script('jquery-migrate');
 wp_register_script('jquery-migrate', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.0/jquery-migrate.min.js';, true, '3.3.0');
 wp_enqueue_script('jquery-migrate');
}

PreviousPřizpůsobení komponenty flbProfile NextPodporované prohlížeče

Last updated 4 years ago

Was this helpful?

... <HEAD>  <script src="http://www.flexbook.cz/jq/jquery.js"></script> <script src="http://www.flexbook.cz/flbv2.js"></script>  <link rel="stylesheet" type="text/css" href="example.css" /> </HEAD> ...

<h1>KALENDÁŘ AKCÍ</h1> <div id="flb_kalendar_akci"> </div> <div id="flb_list_akci"> </div> <script> jQuery(document).ready(function( $ ) { flbInit('http://www.flexbook.cz/ajax.php', 18, [ { type: 'flbResourceCalendar', placeHolder: 'flb_kalendar_akci', language: 'cz', render: ['event'], renderText: ['none'], format: { datetime: 'd.m. H:i', time: 'H:i' }, tag: ['kalendar-akci'], disableResourceReservation: 1, }, { type: 'flbEventList', placeHolder: 'flb_list_akci', language: 'cz', tag: ['kalendar-akci'], } ]); }); </script>

if (!is_admin()) { wp_deregister_script('jquery-core'); wp_register_script('jquery-core', 'https://www.flexbook.cz/jq/jquery.js';, true, '3.4.1'); wp_enqueue_script('jquery-core'); wp_deregister_script('jquery-migrate'); wp_register_script('jquery-migrate', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.0/jquery-migrate.min.js';, true, '3.3.0'); wp_enqueue_script('jquery-migrate'); }