Jak vložit vlastní kód do článku?

30.11.2018 00:00 254 zhlédnutí
Autor článku
Cony
Článek uživatele

V pravidelných intervalech se na diskusním fóru objevuje dotaz, jak vložit HTML / PHP / Javaskript kód do článku nebo modulu. Existuje mnoho způsobů, jeden z nejjednodušších a nejjistějších nabízí Joomla již v základu.

Proč vkládat vlastní kód?

Důvodů může být mnoho, obvykle je potřeba vložit kód např. nějaké analytické nebo remarketingové služby, kód nějakého widgetu, který načítá obsah z externího serveru (rezervační formulář, poptávkový formulář apod.) nebo cokoliv jiného.

Obecně bych rozdělil takové kódy na vizuelní, které mají na stránkách něco zobrazit a nevizuelní, tj. takové, které návštěvník stránek nevidí.

Proč nevkládat kód přímo do článku?

Ano, WYSIWYG editor lze přepnout do režimu editace HTML kódu, a vložit kód přímo zde. Nevýhod je několik:

  1. Editor musí být správně nastaven tak, aby vkládání kódů povolil a to nejen v okamžiku vkládání kódu, ale i při jakékoliv následné editaci. To může způsobit problémy, pokud bude editovat článek správce s nižšími oprávněními.
  2. V editačním režimu vložený kód, pokud je nevizuelní, není vidět, můžete na něj snadno zapomenout a omylem ho smazat.
  3. V editačním okně se kód spouští, tj. jedná-li se např. o nějaký kód zobrazující automaticky popup okno, okno se Vám spustí v editoru.
  4. Nelze vkládat PHP kód

Jak tedy vložit vlastní kód?

Jednou z možností je využití nějakého externího pluginu, nebo modulu. V základu ale Joomla již obsahuje vše, co je k tomuto potřeba, a ani není nutno upravovat soubory pomocí FTP. Použijeme k tomu modul „Vlastní obsah“ (mod_custom) a pro případné vložení do článku plugin „Nahrávání modulů“. Použijeme také techniku nazvanou „Přepis výstupu“, tj. úpravu výstupu, v tomto případě modulu „Vlastní obsah“ tak, jak potřebujeme.

Vytvoření přepsání

V prvním kroku je potřeba vytvořit přepsání. Uděláme to přímo v administraci ve správci šablon. Přepněte se v bočním menu do seznamu šablon, nalezněte tu svoji a klikněte na „Podrobnosti a soubory“. V editačním okně se přepněte na záložku „Vytvořit přepsání“ a ze seznamu modulů zvolte mod_custom. Gratuluji, právě jste vytvořili přepsání :)

sablona vyber e7c6d sablona zalozka b329e sablona prepis 47a96

Úprava výstupu

Přepněte se zpět na první záložku „Editor“, a v levém stromu složek zvolte složku html, podsložku mod_custom a soubor default.php. Pokud Vaše šablona již přepsání default.php obsahovala, bude vytvořen soubor default-yyyymmdd-hhnnss.php s doplněným aktuálním časem, zvolte tedy ten.

V prvním kroku je třeba soubor přejmenovat. Pokud by jste ponechali default.php, výstup by se použil pro všechny standardní moduly mod_custom, kód by se tedy spouštěl v kterémkoliv modulu na stránkách. Soubor přejmenujete jednoduše kliknutím na tlačítko „Přejmenovat soubor“, zadáte nové jméno, např. mujkod a uložíte.

sablona modul f2c17 modul prejmenovat 3ad3c modul prejmenovani bdc15

Pak již jen do editoru vložte jakýkoliv vlastní kód. Může se jednat o HTML kód, PHP kód, CSS, Javaskipt, cokoliv budete potřebovat. Jen dbejte na správnou syntaxi, aby kód neobsahoval chyby. Já jsem na ukázku zvolil demo modal okna z dokumentace k Bootsrap 2. Nakonec soubor uložte tlačítkem „Uložit a zavřít“ a ukončete úpravy šablony.

modul kod 45f17

Vložení kódu do modulu

Ve správci modulů založte nový modul typu „Vlastní obsah“. Nazvěte si jej dle libosti, umístěte na pozici kterou potřebujete, případně nastavte další parametry. Nakonec je nutné na záložce „Pokročilý“ nastavit tzv. „Rozvržení modulu“. Z rozbalovacího seznamu jednoduše zvolte název souboru, tak jak jste si jej pojmenovali v editaci šablony.

modul novy 1510d modul vytvoreni 7c7ce rozvrzeni modulu 498e8

Vše uložte, a podívejte se na své stránky, kód je tam kde má být :)

modul 1ecfe

Pokud vkládáte nevizuelní kód, může být na obtíž výchozí vykreslování modulů na pozici, kam jste modul umístili. Některé šablony např. kreslí kolem modulů rámečky, nebo je zdobí jiným způsobem.  Pokud je to tak, potřebujete změnit tzv. „Styl modulu“. Vraťte se do editace modulu, na záložku „Pokročilý“ a u pole Styl modulu zvolte z rozbalovacího seznamu možnost none. Tato možnost zajistí vykreslení čistě zadaného kódu, bez jakýchkoliv obalujících prvků. Případně si vyzkoušejte i další možnosti ze seznamu.

styl modulu 2dff6

Vložení modulu do článku

Pokud potřebujete vložit vlastní kód někam jinam, než na pozici pro moduly, Joomla má opět již v základu pro toto nástroj. Nejprve je nutné umístit modul na nějakou smyšlenou pozici, takovou, jakou použitá šablona neobsahuje. Vraťte se do editace modulu a ve výběru pozice zadejte název takové pozice, která není v seznamu. Já zvolil název mojepozice. Modul uložte, a v článku, kde chcete vlastní kód zobrazit zapište následující (popř. si dosaďte název své vlastní pozice). Článek uložte, a zkontrolujte výsledek.

 

modul vlastni pozice 02fdf editace clanku 4d85f kod v clanku ba71e

Informace o autorovi Cony

Líbil se vám článek?
(12 hlasů)
Bootstrap ve WYSIWYG editoru
Předchozí článek autora
26.11.2018 13:56 403 zhlédnutí
Bootstrap ve WYSIWYG editoru
Článek uživatele
Většina aktuálních Joomla šablon je založena na CSS knihovně Bootstrap, která nabízí mnoho...

Štítky: Návod

30.11.2018 00:00 255 zhlédnutí
Vývojářské tipy
Jak vložit vlastní kód do článku?
Jak vložit vlastní kód do článku?

V pravidelných intervalech se na diskusním fóru objevuje dotaz, jak vložit HTML / PHP / Javaskript...

26.11.2018 13:56 403 zhlédnutí
Vývojářské tipy
Bootstrap ve WYSIWYG editoru
Bootstrap ve WYSIWYG editoru

Většina aktuálních Joomla šablon je založena na CSS knihovně Bootstrap, která nabízí mnoho...

5 komentáře

Bong
napsal(a) Bong/30. lis 2018 13:15

Skvělé! Tato komplexní informace by mi včera na fóru ušetřila spoustu času vysvětlováním.

Odkaz Komentáře
Cony
napsal(a) Cony/30. lis 2018 14:04

Taky jsem se včera na fóru inspiroval :)

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/30. lis 2018 14:49

A vo tom to je. ;-) Díky.

Odkaz Komentáře
Petra - STAWEBNICE.com
napsal(a) Petra - STAWEBNICE.com/01. pro 2018 16:51

Je nějaký konkrétní důvod pro ten přepis? Dělám to obdobně, ale jednodušeji:
1. Vypnu si na chvíli editor pro uživatele (nebo v Globalu)
2. Vytvořím modul typu vlastní obsah (custom html) a do něj vložím ten iframe s mapou, script atd, který by editor normálně odstranil)
3. Modulu přiřadím custom pozici např. mapa a podle toho, kde všude to chci zobrazovat buď přiřadím konkrétnímu menu, více nebo všem.
4. Do článku vložím tag {loadposition nazevcustompozice} a uložím.
5. Zase zapnu editor.

Odkaz Komentáře
Cony
napsal(a) Cony/03. pro 2018 13:45

Důvod pro přepis je ten, že se nemusí vypínat ten editor a hlavně pamatovat na to, "že tam někde je nějaký kód a tak nesmím tenhle modul ukládat, jinak se mi ztratí." Druhý důvodu je ten, že takto lze přidat i PHP kód, což do editoru, bez dalšího pluginu prostě nejde.

Odkaz Komentáře

Nové články

Článek uživatele
Novinky
Trochu povyku pro nic na Active24
Článek uživatele
Vývojářské tipy
Univerzální oprava instalace Joomly
Článek uživatele
Komunita Joomlaportal.cz
Zúčastněte se průzkumu
Článek uživatele
Novinky
Wordpress

Související články