Sablonkezelés

Sablon helye

A plugin számára, egy sablon minden esetben a mappa, amiben a sablonhoz tartozó fájlok vannak. A plugin alapértelmezett sablonjai a wp-content/plugins/download-from-files/templates/ mappában találhatóak, ahol egyenként külön mappákban vannak.

A WordPress-ben megszokott gyakorlat szerint ezek a sablonok felülírhatóak. Az aktuális (child) téma download-from-files mappájában, a sablon nevének megfelelő mappában kell lenniük a felülírt fájloknak.

Azaz, feltételezve, hogy a “default” témát kell a pluginnak használnia, amely beépített verziója a wp-content/plugins/download-from-files/templates/default mappában van, de rendelkezésre áll az aktuális (child) téma <my_theme>/download-from-files/default mappa is, akkor az utóbbit fogja használni.

Beépített sablonok


Alapértelmezett nézet

Alapértelmezett nézet

Kibővített nézet

Kibővített nézet

Tallózó nézet

Tallózó nézet

Fa struktúra

Fa struktúra

A beépített sablonok küzül a “Fa struktúra” eltérő, mert egy különálló javascript könyvtárat használ a megjelenítéshez. Éppen ezért más shortcode-al is hívható meg: [download-from-tree]

Egy letölthető fájl megjelenítéséhez a plugin, a kiválasztott sablonból a file.html sablonfájlt fogja használni.

Sablonok működése default|extended|browse

A plugin egy adat-tömböt ad át a sablonnak, azon belül is az index.html fájlnak feldolgozásra, amit az lényegében egyszerű szövegcsere elvén dolgoz fel.

A működés megértéséhez egy példa:
a shortcode: [download-from-files template="extended" class="my-class"]

Minta tömb:
A class értékét a shortcode-ból emeli át.

			array(	
				'token'   => 'ABCDEF',
				'empty'   => 0,
				'files'   => array( ... ),
				'folders' => array( ... ),
				'class'   => 'my-class'
			);
Sablon minta kód:
extended/index.html

		<div class="<!-- class -->" id="downloads_<!-- token -->">
			<!-- if empty -->
				<!-- files -->
			<!-- else empty -->
				Nincs megjeleníthető tartalom
			<!-- endif empty -->
			<!-- if folders -->
				<!-- folders -->
			<!-- endif folders -->
			<!-- this_is_unnecessary -->
		<div>

A példában:

  • Az “extended” sablon index.html fájlját nyitja meg feldolgozásra.
  • Az ABCDEF értéket a sablonban a <!-- token --> szöveg helyére fogja beírni.
  • Az my-class értéket a sablonban a <!-- class --> szöveg helyére fogja beírni.
  • Mivel az empty értéke 0 (vagy üres) megjelenik a “Nincs megjeleníthető tartalom” szöveg, de <!-- files --> blokk nem kerül bele a tartalomba.
  • Mivel a folders értéke nem üres (azaz vannak további mappák), ugyanabból a mappából betölti a folders.html sablonfájlt és átadja feldolgozásra a folders tömböt.
  • A <!-- this_is_unnecessary --> nem látható megjegyzésként marad a kódban.

CSS és JS

A plugin a sablonkezelés során vizsgálja, hogy a sablon könyvtárában létezik-e *.css és *.js fájl. Ha van, akkor betölti. Ha több is van, akkor mindegyiket betölti.

Mivel a letölthető dokumentumok egy oldalon belül többször is meghívhatóak, azt is vizsgálja, hogy az adott állományt nem töltötte-e be már korábban. Ha igen, akkor nem tölti be újra.

Itt fontos megjegyezni, hogy minden beillesztésnél automatikusan generálásra kerül egy egyedi token azonosító. Ez kifejezetten hasznos lehet az esetleges javascript eljárásokban az azonosításra.

Saját sablon létrehozása

Korlátozás nélkül hozhatsz létre saját sablont. Ehhez a használt (child) témád mappájában hoz létre download-from-files néven egy mappát, majd itt, további almappákban hozd létre a saját sablonod. Ne feledd! A plugin az index.html fájlt fogja elsőnek betölteni. Amennyiben a letölthető tartalom nem egy mappa, úgy a sablon könyvtárából a file.html fájlt fogja használni a plugin.

Érdemes a saját sablon létrehozásához valamelyik beépített sablont felhasználni, azt átmásolni, majd igény szerint szerkeszteni.

Használható releváns változók az index.html sablonban:

array(
    'template' => 'default',            // A használt sablon neve
    'folders' => array(),               // Az aktuális mappában lévő mappák 
    'files' => array(),                 // Az aktuális mappában lévő fájlok 
    'target' => 'demo/downloads',       // Megjelenítendő mappa WordPress-hez viszonyított elérési útja
    'empty_text' => 'Ez a mappa üres.', // Üres mappa szöveg
    'token' => 'WR5YYLEHCE',            // Egyedi azonosító
	'empty' => 0,                       // 0 ha üres a mappa és 1 ha van benne tartalom
	'count' => 0                        // Az aktuális mappában található elemek száma
);

Használható releváns változók az folders.html sablonban:

array(
    'name' => 'demo',                     // A mappa neve
	'title' => 'Demó',                    // A mappa cimkéje
	'filename' => 'demo',                 // A mappa neve
	'date' => '2020-12-31',               // A mappa létrehozása dátuma
	'icon' => 'http://<path>/folder.png', // A mappa ikonja
	'folders' => array(),                 // Az aktuális mappában lévő mappák 
    'files' => array(),                   // Az aktuális mappában lévő fájlok 
	'empty' => 0,                         // 0 ha üres a mappa és 1 ha van benne tartalom
	'count' => 0                          // Az aktuális mappában található elemek száma
);

Használható releváns változók az files.html sablonban:

array(
    'name' => 'teszt',                      // A fájl nevéből a név
	'title' => 'Minta dokumentum',          // A fájl cimkéje
	'alias' => 'teszt-docx',                // Alias a fájl nevéből
	'filename' => 'teszt.docx',             // A fájl neve
	'date' => '2020.12.31 13:59',           // A fájl létrehozása dátuma (WordPress formátumban)
	'icon' => 'http://<path>/doc.png',      // A fájl ikonja
	'ext' => 'docx',                        // A fájl típusa
	'size' => 13875,                        // A fájl mérete (byte)
	'size_text' => '13KB',                  // A fájl mérete olvashatóan
	'script' => '',                         // Ha a link rejtendő, akkor a letöltéshez szükséges script 
	'url' => '',                            // Egyszerű letöltés esetén a fájlra mutató link, egyébként '#'
	'download_title' => '<title> letöltése',// A letöltéshez kapcsolódó szöveg
	'download_text' => 'Letöltés'           // "Download" szöveg a nyelvi fájlból
);