Drupal - uživatelská příručka

Osobní zkušenosti s bezplatným systémem pro správu webového obsahu Drupal šířeným pod GPL licencí.

Úvod

Drupal je univerzální systém (CMF – Content Management Framework) pro správu webového obsahu bez konkrétní oblasti zaměření. Jedná se o nástroj umožňující vytvářet vlastní datovou strukturu. Drupal nabízí možnost úplného oddělení obsahové části od vzhledu, což umožňuje jednoduchou změnu výsledného vzhledu.

Drupal si můžete ihned vyzkoušet:

Drupal není jen obyčený CMS – Content Management System. Vzhledem ke své univerzálnosti je vhodný zejména pro zakázkové řešení přesně na míru dle požadavků zákazníka např.:

Proč Drupal

Drupal 8

Novinky:

Tipy:

Patch:

CSS

Budoucnost:

Historie:

Příprava

Předpokladem instalace je funkční lokální server, nebo webhosting (en) s podporou PHP a MySQL (PostgresSQL).

MySQL databáze

  1. Pomocí phpMyAdmin (případně pomocí rychlejší aplikace Adminer – správa databáze pomocí jednoho PHP souboru) nebo jiným způsobem, vytvořte databázi s názvem např. drupal s výchozím porovnáním utf8_general_ci. Při přihlašování k phpMyAdminu zvolte Language: Česky – Czech (utf-8).
  2. Pro bezpečnější přístup k databázi (u webhostingu máte většinou pouze jednoho uživatele databáze a další vytvářet nemůžete):
    • vytvořte uživatele např. user a přidělte mu oprávnění uvedená v souboru INSTALL.mysql.txt uloženém v aktuální verzi Drupalu, ale pouze k databázi drupal tj. oprávnění:
      • GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER

 

Instalace

Virtualizace

Nejen pro vývojáře webu je vhodné použít virtuální obraz Quickstart pro Virtualbox obsahující:

Rychlá instalace

K rychlé instalaci je možné využít instalační profil nebo distribuci, který provede prvotní nastavení za Vás.

Distribuce – většinou obsahuje vybrané moduly, ukázkový obsah, téma vzhledu a prvotní konfiguraci.

  1. Stáhněte si požadovanou distribuci:
    • Localized Drupal Distribution
      • nevýhody verze 7.x-1.0-rc5:
        • moduly Localization updateLocalization client jsou uloženy v profilu
        • je třeba nastavit počáteční den v týdnu
        • u angličtiny je třeba doplnit prefix en, u češtiny je třeba prefix cs smazat
        • atd.
    • Web Experience Toolkit – znovupoužitelné komponenty, přístupnost (WCAG 2.0 AA a WAI-ARIA)
    • Spark
    • Commerce Kickstart
      • Compass: Commerce Dashboard & Analytics
    • Open Enterprise
    • Julio
    • ELMS
    • Lightning atd.
  2. Postupujte dle pokynů.

Instalační profil:

  1. Stáhněte aktuální verzi Drupalu. Archiv rozbalte a obsah zkopírujte do adresáře webhostingu (případně vlastního serveru).
  2. Rozbalte vlastní nebo jiný instalační profil do adresáře /profiles/. Pokud to instalační profil vyžaduje, nakopírujte na web do příslušných adresářu požadované moduly, témata, lokalizace atd.
  3. V prvním kroku instalace zvolte požadovaný instalační profil.
  4. Komerční instalační profily včetně tématu vzhledu jsou k dispozici např. na Premium Drupal Themes.

Vlastní instalační profil je možné si vytvořit ručně nebo např. pomocí modulu Profiler Builderenlightened

Standardní instalace

  1. Stáhněte aktuální verzi Drupalu. Archiv rozbalte a obsah zkopírujte do adresáře webhostingu (případně vlastního serveru).
  2. Pro českou lokalizace Drupalu je potřeba český překlad Czech translation.
  3. Do adresního řádku webového prohlížeče napište adresu webhostingu (případně vlastního serveru).
  4. Zvolte jazyk instalace.
  5. Zadejte hodnoty pro přístup k databázi (v sekci Pokročilé volby je možné pro větší přehlednost v databázi (někteří poskytovatelé webhostingu nabízejí pouze jedinou databázi) zadat předponu tabulek např. "dr_").
    • U souboru sites/default/settings.php zkontrolujte, zda je pro všechny nastaveno oprávnění pouze pro čtení.
  6. Vyplňte požadované informace:
    • Informace o webu
    • Účet webové údržby
    • Nastavení serveru
  7. Zobrazte úvodní stránku Vašeho webu (odkaz Navštivte svou novou stránku).

enlightened Z bezpečnostních důvodů můžete u všech souborů (kořen webu, modules, sites, themes atd.), které mají celý název psán velkými písmeny zakázat pomocí oprávnění k souboru jejich zobrazení přes webový prohlížeč.

Instalace pomocí Drush

Přidáním skriptu Install Drupal from command line using Drush do souboru .bashrc (linux) je možné instalaci Drupalu usnadnit.

Instalace "jedním kliknutím"

Full LAMP & Drupal + Drush installation for Windows, Mac OSX and Linux :)

SimpleScripts

Nastavení

Drupal 8

Nastavení:

Drupal 7

  1. V admin/config/system/site-information (Konfigurace, Informace o webu) zadejte základní údaje:
    • Site Details
      • Název
      • Slogan
      • E-mailová adresa
    • Titulní stránka
    • Error Pages
  2. Pro změnu výchozí úvodní stránky webu je nutné Přidat obsah např. Článek (obsah informativního charakteru jako je např. novinka nebo aktualita) nebo Stránku (statická stránka obsahující základní informace) a zobrazit ji na úvodní stránce.
  3. Dokud není web alespoň částečně naplněn je vhodné v admin/config/development/maintenance (Nastavení, Vývoj, Režim údržby) zaškrtnout volbu Přepnout web do režimu údržby (offline).

Systém souborů

Metoda stahování

Veřejně (veřejný přístup)

Adresa odkazu u souborů ukazuje přímo na místo, kde jsou soubory na serveru umístěny.

Neveřejně (neveřejný přístup)

Umístění souborů na serveru není možné zjistit přímo z adresy odkazu, protože do adres odkazů na soubor vkládá Drupal automaticky proměnnou system.

Výhody:

  • umožňuje kontrolovat přístup ke stahovaným souborům (např. je možné zjišťovat počet stažení příloh)

Při umístění souborů mimo veřejný prostor webu je většinou nutné požádat poskytovatele webhostingu o posunutí Open_basedir restrikce.

Nastavení

  1. Přejděte do admin/config/media/file-system (Konfigurace, Systém souborů) a zvolte výchozí způsob stahování.
  2. Nastavte cestu k souborovému systému a dočasnému adresáři:
    1. Veřejná metoda stahování (veřejný přístup)
      1. Jednoduchý web (výchozí nastavení):
        • Cesta k veřejnému souborovému systému: sites/default/files
        • Cesta k neveřejnému souborovému systému: sites/default/files/private
        • Dočasný adresář: /tmp nebo sites/default/files/private/tmp
      2. Multisite web:
        • Cesta k veřejnému souborovému systému: sites/adresa.webu/files
        • Cesta k neveřejnému souborovému systému: sites/adresa.webu/files/private
        • Dočasný adresář: /tmp nebo sites/adresa.webu/files/private/tmp
    2. Neveřejná metoda stahování (neveřejný přístup):
      1. Jednoduchý web:
        1. Adresáře files/privatea /tmp jsou umístěny na veřejném místě webhostingu, ale znepřístupněny nastavení souboru .htaccess
          • Cesta k neveřejnému souborovému systému: sites/default/files/private
            • do souboru files/private/.htaccess doplňte
              Deny from all

              dle nastavení serveru je někdy nutné zakomentovat

              #Options None
              #Options +FollowSymLinks
              
            • pokud v neveřejném systému souborů chcete povolit přístup do nějakého adresáře např. files/private/files/languages/, vložte do něj soubor .htaccess obsahující
              Order Deny,Allow
          • Dočasný adresář: /tmp nebo sites/default/files/private/tmp
        2. Adresáře private/filestmp jsou umístěny na neveřejném místě webhostingu
          • Cesta k neveřejnému souborovému systému: dle umístění na serveru
          • Dočasný adresář: dle umístění na serveru
      2. Multisite web:
        1. Adresáře files/private a tmp jsou umístěny na veřejném místě webhostingu, ale znepřístupněny nastavení souboru .htaccess
          • Cesta k neveřejnému souborovému systému: sites/adrese.webu/files/private/
            • do souboru files/private/.htaccess doplňte
              Deny from all
            • pokud v neveřejném systému souborů chcete povolit přístup do nějakého adresáře např. files/private/languages/, vložte do něj soubor .htaccess obsahující
              Order Deny,Allow
          • Dočasný adresář: /tmp nebo sites/adresa.webu/private/tmp
        2. Adresáře files/private a tmp jsou umístěny na neveřejném místě webhostingu
          • Cesta k souborovému systému: dle umístění na serveru
          • Dočasný adresář: dle umístění na serveru

Úpravy 

Pokdu jste již na web vložili nějaké soubory (přílohy, obrázky atd.), metodu stahování již neměňte!

Veřejně (veřejný přístup)

Pokud potřebujete změnit umístění adresáře files je třeba upravit i cesty v databázových tabulkách files, node_revisions, usersvariable případně využijte modul Site Directory Migrate.

 

Datum a čas

  1. V admin/config/regional/date-time/locale/cs/edit (Konfigurace, Datum a čas, Lokalizovat, Čeština) zvolte formáty "s tečkou" za dnem nebo nastavte vlastní formáty např.:
    • Dlouhý: Úterý, 15. Únor 2011 – 23:43
      • l, d. F Y – H:i (vlastní formát)
    • Střední: 15. Únor 2011 – 23:43
      • d. F Y – H:i (vlastní formát)
    • Krátký: 15. 02. 2011 – 23:43
      • d. m. Y – H:i (vlastní formát)

Pozor!

  • Rozdělovník "–" (dlouhá pomlčka) není vhodná, protože v některých případech "dělá problémy".
  • Není možné používat pevnou mezeru :(

Lokalizace

  1. V admin/modules (Moduly) povolte modul Locale.
  2. V admin/config/regional/language (Konfigurace, Jazyky) zvolte výchozí jazyk.
    • u výchozího jazyka je vhodné "Kód jazyka v prefixu cesty" vynechat enlightened
  3. admin/config/regional/language/configure (Nastavení, Regionální a jazyková nastavení, Jazyky, Detekce a výběr) je vhodné zapnout URL detekci.
  4. V admin/config/regional/translate/import (Konfigurace, Překlad rozhraní, Import) je možné importovat .po soubory překladů.
  5. V admin/config/regional/translate/translate (Konfigurace, Překlad rozhraní, Přeložit) je možné nepřeložené výrazy vyhledat a přeložit.

Automatickou kontrolu a import překladů usnadňuje modul Localization updateenlightened

Nabízí se dva různé způsoby překladu vícejazyčného obsahu:

  1. Původní způsob po celých uzlech viz modul Content translation.
  2. Nový způsob po samostatnch entitách viz modul Entity translationyes

Odkazy

Poznámka:
Příloha 6.x obsahuje oficiální překlady jádra sloučené do jediného souboru.
Příloha 7.x obsahuje neoficiální překlady.

PřílohaVelikost
cs-6.x-1.8-2008-Apr-27.zip195.78 KB
cs-drupal-7.x-2014.po_.zip436.8 KB

Vícejazyčný web

Drupal 8
  • ostraining.com/blog/drupal/d8-multi-lingual
  • drupal.org/project/multilingual_demo
    • drupal8multilingual.org/workshop
  • PHP 5.4.5+
    • např. .htaccess
      • AddHandler application/x-httpd-php54 .php
  • povolit moduly
    • Content Translation
  • přidat požadované jazyky
  • v admin/config/regional/content-language u požadovaných typů obsahu
    • v sekci Custom language settings povolte
      • Custom menu link
      • Custom block
      • Obsah
      • Termín taxonomie
      • (Comment)
      • (Shorcut link)
      • (User)
    • u požadovaných položek
      • povolte možnost překladu (Translatable)
      • volitelně povolte Show language selector on create and edit pages
  • obsah bloků není možné ve verzi Drupal 8.0.2 překládat => vytvořit pro každý jazyk samostatný blok
  • Views je možné překládat v Nastavení -> Configuration translation -> View
  • Drupal 8.0.0-beta6+134-dev doplnit o patch
    • drupal.org/node/2408439#comment-9566121 (podpora více jazyků)
    • drupal.org/node/2389735#comment-9465731 (podpora subtémat)
    • spustit update.php a vymazat cache

  • admin/config/regional/language/detection
    • URL
      • Path | Domain
  • admin/config/regional/language/edit/en
    • Enable interface translation to English – umožňuje změnit výchozí angličtinu (např. Log out na Sign out)
  • admin/structure/block
    • Language switcher
  • admin/config/regional/translate
    • Export | Import
  • admin/people/permissions

Cron

Některé moduly vyžadují službu cron. Zvolte si proto jednu z následujících možností:

Vestavěný Cron

Je spouštěn na základě návštěv uživatelů webu. V admin/config/system/cron (Konfigurace, Cron) je možné nastavit pravidelnost opakování.

Vestavěný cron je vhodné "vypnout" (zrychlí se tak první načtení stránky) a nastavit cron jiným způsobem (webhosting, server atd.). enlightened

Další rozšíření:

  • Ultimate Cron – umožňuje např. nastavit rozdílné časy kontroly aktualizace a odesílání newsletteru enlightened
  • Elysia Cron

Webhosting

Většina poskytovatelů nabízí zapnutí služby cron v administraci webhostingu. Po nastavení této služby vypněte spouštění vestavěného cronu v konfiguraci Drupalu.

Poormanscron

Použijte modul Drupalu s názvem Poormanscron.

WebCron

Zaregistrujte se na stránkách www.webcron.org a vytvořte si novou úlohu pro Váš web.

Server

Spouštění každých 30 minut

Do souboru /etc/crontab vložte (YOURKEY je možné zjistit v admin/reports/status (Logy, Hlášení stavu)

0,30 * * * * root /usr/bin/wget -O - -q http://example.com/cron.php?cron_key=YOURKEY

Spouštění každou hodinu

Do souboru /etc/crontab vložte

0 * * * * root /usr/bin/wget -O - -q http://example.com/cron.php?cron_key=YOURKEY

Jiný způsob:

  1. Pro spouštění skriptu cron.php jednou za hodinu vytvořte v /etc/cron.hourly soubor s názvem např. script a oprávněním:
    Oprávnění souboru script
      Čtení Zápis Spouštění
    Vlastník Ano Ano Ano
    Skupina Ano Ne Ano
    Ostatni Ano Ne Ano
  2. Do souboru vložte níže uvedené řádky a upravte adresu Vašeho webu:
    #!/bin/sh
    /usr/bin/wget -O - -q http://example.com/cron.php?cron_key=YOURKEY

    Pokud máte přístup k serveru omezen pouze na některé IP adresy, je vhodné příkazu wget nařídit použití lokálního rozhraní:

    #!/bin/sh
    /usr/bin/wget -O - -q --bind-address=127.0.0.1
     http://example.com/cron.php?cron_key=YOURKEY

PHP

Jednoduché řešení

  1. Pro spouštění cronu pomocí PHP vytvořte soubor např. cron_custom.php s oprávněním:
    Oprávnění souboru cron_custom.php
      Čtení Zápis Spouštění
    Vlastník Ano Ano Ano
    Skupina Ne Ne Ne
    Ostatni Ne Ne Ne
  2. Do souboru vložte níže uvedené řádky:
  3. <?php
      require('http://example.com/cron.php?cron_key=YOURKEY');
    ?>

    nebo (záleží na webhostingu)

    <?php
      file_get_contents('http://example.com/cron.php?cron_key=YOURKEY');
    ?>

Řešení bez omezení doby běhu skriptu (max_execution_time)

Bližší info viz Drupal 7: Running cron from the command line.

  1. V adresáři sites/ vytvořte dva soubory:
    • localcron.php
    • #!/usr/bin/env /usr/php53/bin/php
      <?php
      // Checks that the arguments are supplied, if not display help information.
      if (in_array($argv, array('--help')) || $argc != 5) {
      ?>
      
      <?php
      } else {
        // Loop through arguments and extract the cron key and drupal root path.
        for ($i = 1; $i < $argc; $i++) {
          switch ($argv[$i]) {
            case '--key':
              $i++;
              $key = $argv[$i];
              break;
            case '--root':
              $i++;
              $path = $argv[$i];
              break;
          }
        }
       
        chdir($path);
        // Sets script name
        $_SERVER['SCRIPT_NAME'] = $argv[0];
       
        // Values as copied from drupal.sh
        $_SERVER['HTTP_HOST'] = 'default';
        $_SERVER['REMOTE_ADDR'] = '127.0.0.1';
        $_SERVER['SERVER_SOFTWARE'] = NULL;
        $_SERVER['REQUEST_METHOD'] = 'GET';
        $_SERVER['QUERY_STRING'] = '';
        $_SERVER['HTTP_USER_AGENT'] = 'console';
       
        // Set cron key get variable to use below code with as
        // little modification as possible.
        $_GET['cron_key'] = $key;
        define('DRUPAL_ROOT', $path);
       
        // Code below is almost verbatim from cron.php, just the messages for
        // watchdog have been changed to indicate that the problem originated from
        // this script.
        include_once DRUPAL_ROOT . '/includes/bootstrap.inc';
        drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
       
        if (!isset($_GET['cron_key']) || variable_get('cron_key', 'drupal') != $_GET['cron_key']) {
          watchdog('cron', "Cron could not run via $argv[0] because an invalid key was used.", array(), WATCHDOG_NOTICE);
          drupal_access_denied();
        } elseif (variable_get('maintenance_mode', 0)) {
          watchdog('cron', "Cron could not run via $argv[0] because the site is in maintenance mode.", array(), WATCHDOG_NOTICE);
          drupal_access_denied();
        } else {
          drupal_cron_run();
        }
      }
      
    • localcrontab.php (upravte zvýrazněné části: umístění souboru, klíč a umístění webu)
    • <?php
      shell_exec("/usr/php53/bin/php /data/web/hosting.com/sub/website.com/sites/localcron.php --key IFEVzAgi8f93LzbHIH8Tz_teLnU7qF456OZRabpxAMg --root '/data/web/hosting.com/sub/website.com/' ");
  2. Nastavte cron na pravidelné spouštění souboru localcrontab.php

Windows

Configuring cron jobs on Windows

Toolkit pro práci s obrázky

V admin/config/media/image-toolkit (Konfigurace, Toolkit pro práci s obrázky) nastavte kvalitu JPEG obrázků na 90 %.

Taxonomie

Obecně se kategorizace obsahu nazývá Taxonomie:

  • obecný pojem pro kategorie, štítky a případně další entity
  • účelem je třídění obsahu za účelem zlepšení použitelnosti webu (rychlejší navigace než při procházení chronologicky seřazeného obsahu dle datumu vydání)
  • kategorie a štítky se navzájem doplňují
  • při představě, že web je kniha, mohou být chápány kategorie jako kapitoly v obsahu knihy a štítky jako indexy v rejstříku

Správné navržení struktury webu je velmi obtížné a většinou vzniká postupně.

Kategorie

  • primární rozdělení obsahu na logické celky
  • základní struktura, volitelně i hierarchická, by měla být navrženy dopředu (dle plánovaného obsahu)
  • mělo by se jednat o obecné téma pro danou oblast (kategorie by se neměli „překrývat“)
  • obsah by měl být zařazen vždy pouze do jedné kategorie (v případě „překryvu“ kategorií raději zvolte obecnější pojem)
  • pokud máte se vám stává, že máte potřebu obsah zařadit do více kategorií, zamyslete se, zda by nebylo vhodnější změnit strukturu kategorií, případě udělat z některých kategorií štítky
  • účelem kategorií je seskupení obsahu (měli by návštěvníkovi pomoci identifikovat, čim se web zabývá)
  • kategorie bývá zpravidla povinná položka
  • měně kategorií je někdy více, neboť v každé kategorii by měl přibývat nový obsah…
  • kategorie si můžeme představit např. jako jednotlivé „kapitoly v obsahu knihy“

Štítky (tag)

  • sekundární třídění obsahu, které s kategoriemi nijak nesouvisí
  • vznikají postupně dle aktuálních témat
  • používají se k propojení tématických obsahů (spojují různé obsahy, které spolu v základním dělení dle kategorií nemusí nijak souviset, ale mají společné téma)
  • popisují specifické detaily obsahu
  • nemohou mít hierarchickou strukturu
  • jsou volitelné
  • zlepšují použitelnost webu
  • z často používaného štítku se může stát podkategorie, ale jen v tom případě, že je kategorie dostatečně obecná
  • pomáhají návštěvníkům snadno najít starší tématické články
  • obecně je doporučeno max. 10 štítků u jednoho článku
  • měly by co nejvíce vystihovat obsah článku
  • štítky si můžeme představit např. jako „indexy v rejstříku knihy“, které tvoří známé výrazy propojující tématický obsah

Příklady kategorizace obsahu

Filmové novinky:

  • Kategorie: Akční, Komedie, Dobrodružné, Dokumentární, Historické, Kriminální, Pohádky, Romantické, Sci-fi, Taneční, Válečné, Westerny, Životopisné
  • Štítky: „jména herců“

Zpravodajský web:

  • Kategorie: Sport, Kultura, Cestování, Zdraví, Ekonomika
  • Štítky: Plavání, Muzeum, Praha, Divadlo, Film

Osobní blog:

  • Kategorie: Jídlo, Hudba, Cestování, Knihy
  • Štítky: Pizza, Těstoviny, Kuřecí maso

Sociální média:

  • Kategorie: Návody, Novinky, Případové studie, Nástroje
  • Štítky: Facebook, Google+, Twitter, Instagram

Inzeráty:

  • Kategorie: Nákup, Prodej
  • Štítky: Auto, Moto, Práce, Seznamka, Stavba, Nábytek

Další možnosti kategorizace obsahu

  • vlastní typy obsahu (produkty, kurzy, zaměstnanci, dokumenty)
  • relace mezi všemi výše jmenovanými
  • formáty příspěvků

Doporučení:

  • Nepoužívejte názvy kategorií a štítků v URL adresách jednotlivých článků (mujweb.cz/kategorie/2016/clanek)!
  • Web by měl být funkční i při případné změně struktury webu.
  • Nevytvářejte web pro vyhledávače a roboty, ale pro lidi!
  • Web považujte za knihu, která se neustále vyvíjí.

Vstupní formáty

V admin/config/content/formats (Konfigurace, Formáty textu) určuje první řádek výchozí filtr:

  1. Filtered HTML
    • tento vstupní formát odstraňuje nepovolené (X)HTML značky a všechny atributy style
    • v nastavení filtru Limit povolených HTML značek můžete upravit Povolené HTML značky:
      <a> <em> <strong> <cite> <blockquote> <quote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <div> <span> <pre> <address> <h2> <h3> <h4> <h5> <h6> <hr> <del> <ins> <sub> <sup>
      • (Přidat rel="nofollow" ke všem odkazům) – zaškrtnout v případě, že povolíte anonymního uživatele
      • volitelně
      • <img>
    • Role: přihlášený uživatel, webmaster, administrator
  2. Full HTML povolte uživatelské role s oprávněním plné editace HTML obsahu (např. vytváření a úprava tabulek, flash animace atd.)
    • Role: webmaster, administrator
  3. Plain text
    • Role: všechny

Další vstupní formáty je možné vytvořit pomocí modulů:

  • PHP filter
  • WYSIWYG Filter – jednoduchá installace, nevyžaduje knihovny třetích stran
  • HTML Purifier – populární, mocný, ale může být pomalý
  • htmLawed – méně populární
  • Htmltidy – automatické opravy chybějících tagů (zabraňuje narušení struktury webu yes), automatické zalamování řádků po nastaveném počtu znaků, volitelné zobrazení informací o validaci

Pokud používáte modul CKEditor (FCKeditor) je doporučeno pro lepší kontrolu nad konci řádků vypnout u všech vstupních formátů, kde se bude CKEditor používat filtr Převést odřádkování do HTML (tj. <br> a <p>)enlightened

Vzhled

Drupal 8

Vzhled:

  • začátečníci
    • Zircon
    • Integrity
    • Paxton
    • Danland
    • Business
    • Professional Theme (Drupal 7)
    • Simple Corporate (Drupal 7)
    • JournalCrunch (Drupal 7)
    • Corporate Clean (Drupal 7)
    • Corked Screwer (Drupal 7)
    • FontFolio
  • pokročilí
    • Zen (Drupal 7)
    • Bootstrap
    • Omega
    • AdaptiveTheme
    • ZURB Foundation
    • Fusion (Drupal 7)

Favicona:

  • pixelite.co.nz/article/adding-apple-android-favicons-drupal
    • loopduplicate.com/content/adding-icons-to-drupal-themes

Drupal 7

Základní (base) téma vzhledu se stará o běžné úkoly jako je např. rozložní stránky, normalizaci (reset) CSS atd.

  1. V admin/appearance (Vzhled) je možné určit výchozí a dostupná témata.
  2. Více témat vzhledu je možné získat na http://drupal.org/project/Themes (většinu z nich si můžete prohlédnou na Theme Garden).
    1. Témata vzhledu umísťujte do adresáře sites/all/themes/. Toto umístění je vhodnější pro případný upgrade systému na nvou verzi. Navíc zde uvístěná témata vzhledu jsou společná pro všechny subdomény (multisite web).
  3. Výchozí nastavení témat je možné upravit v admin/appearance/settings (Vzhled, Nastavení).

Tipy:

  • weebpal.com/drupal-8-themes
  • TemplateMonster.com - komerční témata vzhledu (Drupal, Wordpress, Joomla, PhpBB atd.)
  • Lavishbootstrap.com - generátor barevného schéma na základě definovaného obrázku
  • Boottheme.com – rychlé vytvoření webové stránky (Bootstrap, Less, HTML5, CSS3, JavaScript)
  • drupalizing.com
Porovnání některých základních témat vzhledu vhodných pro vytváření vlastních subtémat
Základní témata vzhledu Přístupnost Strukturovaná data Resposive Layout Respond.js nebo
mediaqueries.js (IE8-)
HTML5 Sass, Less, Compass Grid Normalize (sjednocení vzhledu prvků) IE conditional

Detekce schopností prohlížeče
(IE8-)

Omega     Ano Ano mediaqueries.js Ano Ano Ano Ano modul Conditional Stylesheets HTML5 Shiv
AdaptiveTheme WCAG 2.0 level AA RDFa Ano Ano respond.js Ano Ano       Modernizr
Zen     Ano Ano respond.js Ano Ano Ano Ano Ano HTML5 Shiv / Modernizr
Boilerplate     Ano   Ano Ano       Modernizr
Arctica     Ano   Ano          
Mothership     Ano   Ano          
Basic     Ano              
Square Grid theme     Ano   Ano          
Bootstrap     Ano       Ano      
TB Nucleus (TB Simply, TB Neris, TB Hadelis, TB Mollise, TB Palicico, TB Events, TB Sirate, TB Methys, TB Rave, TB Blog, TB Purity)                    
Foundation     Ano       Ano      
FontFolio     Ano              
Professional Theme     Ano              
Premium Responsive     Ano              
Responsive Business     Ano              
Responsive Blog     Ano              
Skeleton     Ano              
Concept (komerční)     Ano              
SooperThemes (komerční)     Ano              
LayoutStudio
(rychlá změna rozvržení)
                   

Omega:

  • optimalizováno pro výkon
  • možnost vypnutí/zapnutí CSS u modulů
  • Drush atd.
  • Výhody:
    • horizontální sekce přes celou šířku okna prohlížeče smiley
    • možnost nastavení stejné výšky některých elementů
  • Nevýhody:
    • není možné definovat fixní šířku sidebar (pro tuto funkčnost je nutná vlastní úprava CSS)
    • fixní gutter (vnitřní okraj) 10px (je možné ovlivnit pomocí vlastních CSS)
    • nestandardnímu způsobu zápisu .info souboru nemusí rozumnět všechny moduly no
    • ve výchozím stavu nemá content first, ale je možné si jej "dokonfigurovat" a "nastylovat"
    • ve výchozím stavu nemění rozložení – změnu rozložení je ale možné definovat pomocí kombinace modulů Delta+Context (může být navíc alternativa místo Panels)
    • ve výchozím stavu, obrázky nemění svoji velikost – je třeba použít např. modul Responsive images and styles

AdaptiveTheme:

  • SEO optimalizace
  • vlastní CSS vstup (pro jednoduché úpravy není nutné vytvářet subtéma)
  • fonty, mobile friendly meta tags, atd.
  • Výhody:
    • WCAG 2.0 level AA
    • je možné definovat fixní šířku sidebar stejnou ve všech "šířkách" layoutu smiley
    • content first
    • malá chybovost v IE8- (advanced IE support)
    • obrázky přizpůsobují svoji velikost
  • Neýhody:
    • nemá horizontální sekce přes celou šířku okna prohlížeče

Zen:

  • výborná dokumentace ve zdrojovém kódu
  • Výhody:
    • content first
    • obrázky přizpůsobují svoji velikost
    • touch icon
    • IE7 podpora pomocí "Chrome install"
  • Neýhody:
    • nemá horizontální sekce přes celou šířku okna prohlížeče

Boilerplate:

Arctica (dokumentace):

  • rozšíření Tundra

Mothership:

  • generuje velmi "odlehčený" a sémantický kód yes

SooperThemes:

  • Lumi (komerční)
  • Responder (komerční)
  • TouchPro (komerční)
  • atd.

Tipy na zajímavá témata:

  • Business
  • Best Responsive
  • Corporate Clean
  • FontFolio
  • ZURB Foundation

Moduly:

  • LESS CSS Preprocessor
  • SASS / SCSS
  • Sassy – automatická kompilace SASS/SCSS souborů na Drupal webu (obsahuje podporu také pro Compass, Bootstrap a Foundation)

Definice Media Queries:

  • Responder (Drupal modul)

Bloky

Drupal 8

V nastavení viditelnosti bloku platí logický součin (všechny zvolené podmínky musí platit současně).

Drupal 7

Bloky sdružují obsah, který lze na stránce volně přemisťovat:

  • v admin/structure/block (Struktura, Bloky) je možné upravovat rozmístění a nastavení jednotlivých bloků
  • pokud si omylem vypnete blok pro přihlášení je možné se přihlásit zadáním adresy:

Tipy:

  • pro statistiky stránek, reklamu atd. je vhodné vytvořit samostatné bloky (nevkládejte je přímo do používaného tématu vzhledu)
  • import externího souboru:
    • <?php print file_get_contents("./sites/​folder/file.html"); ?>

Obsah

Node (uzel, jednotka) je obecný objekt reprezentující libovolný obsah. Každý node má jedinečné číslo (nid), verzi (vid), metadata, název (title) a obsah (většinou body).

Výchozí hodnoty pro jednotlivé typy obsahu

V admin/structure/types (Struktura, Typy obsahu) je možné nastavit výchozí hodnoty pro jednotlivé typy obsahu:

  • popisek pro pole nadpis
  • zobrazovaní na titulní straně
  • vytvářet novou revizi enlightened
  • nastavení komentářů
    • (NE)zobrazovat formulář pro odpověď na stránce s komentáři
  • nastavení výchozí pozice menu při zadávání nového obsahu

Pro duplikaci (vytvoření podobného) typu obsahu a jeho nastavení je možné využít modul Node clone.

Titulní strana

V admin/config/system/site-information (Konfigurace, Informace o webu) je možné upravit:

  • počet příspěvků na úvodní stránce
  • výchozí titulní stranu
  • chybové stránky
    • 403: node
    • 404: node

Informace o revizi

Při vytváření obsahu můžete pomocí revizí vytvářet různé verze (ukládat historii) stejného obsahu a sledovat rozdíly mezi jednotlivými verzemi. Revize doporučuji zapnout u všech ručně vytvářených typů obsahů. enlightened

Užitečným pomocníkem pro revize je modul Diff.

 

Uživatelé

  1. V admin/people (Uživatelé):
    • upravte nastavení vlastního účtu (1. vytvořený účet nemá žádná omezení):
    • obrázek uživatele
    • časová zóna
      • můžete vytvořit účet pro webmastra (1. vytvořený účet bez omezení používat jen pokud je to nutné)
      • v případě potřeby přidejte další uživatele
  2. V admin/people/permissions/roles (Uživatelé, Role) můžete upravovat uživatelské role, např. vytvořit roli webmaster.
  3. V admin/people/permissions (Uživatelé, Oprávnění) je možné upravovat oprávnění uživatelských rolí.

Uživatelské nastavení

V admin/config/people/accounts (Konfigurace, Nastavení účtu) je možné nastavit způsob registrace, podpisy, podporu obrázků uživatelů a upozorňovací e-maily:

  • Registrace a rušení:
    • Pouze administrátoři
  • můžete povolit podpisy
  • podpora obrázků uživatelů:
    • adresář pro obrázky: user/picture
    • můžete upravit texty e-mailů

Zobrazení autora

V admin/structure/types (Struktura, Typy obsahu) je možné zvolit u kterého typu obsahu se bude zobrazovat autor (případně i jeho obrázek). Viz sekce Nastavení zobrazení.

 

Čistá URL

Viz nastavení modulu Path.

Menu

Viz nastavení modulu Menu.

Cookie

Pokud v souboru /sites/default/settings.php odkomentujete níže uvedenou proměnnou, může být uživatel přihlášen při přechodu mezi všemi doménami multisite webu.

$cookie_domain = 'example.com';

 

Bezpečnost

U produkčních stránek je doporučeno chybová hlášení zaznamenávat pouze do logů a nezobrazovat je:

  • admin/config/development/logging (Nastevení, Vývoj, Logování a chyby) nastavte Chybové zprávy k zobrazení na Žádné.

V případě, že potřebujete sledovat veškeré odesílané e-maily, nainstalujte si modul Maillog / Mail Developer.

Výkon

V admin/config/development/performance (Konfigurace, Výkon) je možné nastavit:

  • cache stránek pro anonymní uživatele
    • při zapnutí se nepřihlášeným uživatelům mohou zobrazovat neaktuální informace (např. u modulů CoundownEvent) –  řešení nabízí např. modul CacheExclude
    • při úpravách tématu vzhledu je vhodné cache stránek dočasně vypnout
    • nepovolujte pokud http hlavičky vracejí údaj Transfer-Encoding: gzip (deflate) – v tomto případě provádí komprimaci již server
  • optimalizaci přenosu dat (pouze pokud máte nastaven systém souborů na veřejný)

Výkon Drupalu je možné zvýšit moduly:

  • Boost - pouze pro nepřihlášené uživatele
  • APC – Alternative PHP Cache enlightened
  • Ad memcache (memcached.org) – pro nepřihlášené i přihlášené uživatele enlightened
  • Memcache API and Integration
  • Cache Router
  • Path Cache
  • HTTP Cache (Reverse proxy)
  • AuthCache (Caching logged in Users)
  • Advanced cache

Výkon web serveru je možné zvýšit:

  • Varnish (varnish-cache.org) – akcelerátor webu enlightened
  • použitím PHP op-code cache / accelerators (XCache, APC, eAccelerator, Alternative PHP Cache, Zend Optimizer, ionCube PHP Accelerator, Turck MMCache, Nusphere PhpExpress atd.)
  • konfigurací dedikovaného web serveru pro statické stránky
  • instalací PHP memcache (debian memcached)
  • replikací MySQL databází pro čtení (více slave strojů), pro čtecí servery pak použijte load-balencery
  • mod-pagespeed

Další informace:


Obecná doporučení:

Mezipaměť (cache) CMS:

  • stránky
  • bloky
  • CSS
  • javascript

Databáze:

  • optimalizovat tabulky

Cron:

  • vypnout vnitřní automaticky cron a nastavit externí (nespouště cron úlohy s každým zobrazením stránky)

Server:

  • zajistit dostatečný výkon serveru (webhosting)

Kontrola (včetně doporučení ke zvýšení výkonu):

  • webpagetest.org
  • websiteoptimization.com/services/analyze/

Doporučení:

  • redukovat počet a odstranit nepoužívané moduly (pluginy), bloky (widgety), témata
  • komprimace obrázků (do 100 kB)
  • sloučit a komprimovat externí soubory stejného typu (CSS, javascript)
  • využívat možnosti CSS, včetně posunu pozadí
  • "odlehčit" grafiku

Vlastní vzhled

Drupal 8

Odvozené téma:

base theme: false
base theme: stable
base theme: classy

Externí odkazy v libraries.yml:

example:
  css:
    theme:
      # External URL.
      'http://example.com/test.css':
        type: external
      # Absolute path.
      /tmp/test.css: {}
      # Protocol free.
      //cdn.com/test.css: {}
      # Stream wrapper URI.
      'public://test.css': {}
      'example://test2.css': {}

Tipy:

Drupal 7

Při vytváření vlastního vzhledu je vhodné vycházet z některého ze základních témat vzhledu, které jsou uloženy v adresáři themes a z příručky Theme Guide (en). Pro výuku jsou také vhodná témata Zen (nejepší dokumentace) a Basic (jednoduché).

  1. V sites/all/themes vytvořte adresář vlastního vzhledu např. my_own_theme.
    • název adresáře (tématu) nesmí kolidovat s názvy modulů a nesmí začínat číslem
  2. V adresáři vlastního vzhledu vytvořte vhodnou adresářovou strukturu např.:
    • color
    • design
    • fonts
    • scripts
    • translations
  3. Adresář vlastního vzhledu může obsahovat soubory:
    • my_own_theme.info (vyžadovaný)
      • od Drupalu 7 není pomlčka (-) v názvu .info souboru akceptována (téma není přístupné v administraci) 
    • styles.css - použije se pro všechna média
    • logo.png
    • screenshot.png – náhled vzhledu
    • page.tpl.php
    • box.tpl.php – obal komentářů
    • comment.tpl.php
    • template.php
    • maintenance-page.tpl.php
    • fckstyles.xml – úprava výchozího nastavení stylů (elementů a atributů) modulu fckeditor
    • node.tpl.php – výchozí zobrazení všech typů obsahů
    • node-xxx.tpl.php – upřesnění zobrazení konkrétního typu obsahu (book, image, page, story, blog atd.)
    • comment-xxx.tpl.php – upřesnění zobrazení komentáře u konkrétního typu obsahu (book, image, page, story, blog atd.)
    • block-xxx.tpl.php – upřesnění zobrazení bloku (region, module atd.)
    • page-xxx.tpl.php – upřesnění zobrazení stránky (front, node, node-edit atd.)
    • block.tpl.php – zobrazení bloků
    • ...

 

.info

Konfigurační soubor .info (en) obsahuje základní informace a je vyžadován u každého tématu vzhledu. Název souboru musí být shodný s názvem adresáře.

Soubor musí obsahovat klíče:

name = Moje vlastní téma vzhledu
core = 6.x

Příklad:

name = Moje vlastní téma vzhledu
description = Popis tématu<br /><a href="http://tomas.dankovi.info/">Tomáš Daněk</a>
core = 6.x
engine = phptemplate
stylesheets[all][] = styles/all.css
stylesheets[screen, projection][] = styles/layout.css
stylesheets[screen, projection][] = styles/decoration.css
stylesheets[screen, projection][] = styles/modules.css
stylesheets[screen, projection][] = styles/fckeditor.css
stylesheets[print][] = styles/print.css

Další regiony viz regions.


Empty square brackets between the "[media]" and "= styleName.css" are always empty and denote that each stylesheet is appended to an array, as in php. Viz Adding style sheets.

html.tpl.php

Soubor modules/system/html.tpl.php obsahuje základní HTML strukturu stránky.

page.tpl.php

Soubor modules/system/page.tpl.php obsahuje šablonu stránky.

Promměnné souboru page.tp.php
Drupal 5 Drupal 6 Poznámky
Globální proměnné
  $base_path Adresa instalace Drupalu (vetšinou /)
  $css Pole CSS souborů aktuální stránky
  $directory Adresář aktuálního tématu vzhledu
  $is_front TRUE pokud je aktuální stránka úvodní stránkou (používá se společně s $mission)
  $logged_in TRUE pokud je uživatel přihlášen
  $is_admin TRUE pokud má uživatel oprávnění přístupu k administrační stránce
Metadata stránky
$language $language->language Textová reprezentace jazyka (en, cs...)
$language->dir Směr textu (ltr, rtl)
  $head_title Modifikovaná verze názvu stránky pro použití v elementu <title>
  $head Metadata, klíčová slova atd.
  $styles Připojení všech CSS stylů stránky (moduly, téma vzhledu atd.)
  $scripts Načtení JavaScript souborů a nastavení stránky

$body_classes Aktuální CSS třídy stránky: front / not-front,  logged-in / not-logged-in, page-... (node, admin, user...), node-type-... (page, story...), two-sidebars / one-sidebar sidebar-left / one-sidebar sidebar-right / no-sidebars
Identita stránky
$base_path $front_page Adresa úvodní stránky
  $logo Cesta k logu webu
  $site_name Název webu (zobrazení je možné povolit / zakázat v nastavení tématu vzhledu)
  $site_slogan Slogan webu (zobrazení je možné povolit / zakázat v nastavení tématu vzhledu)
  $mission Poslání webu (zobrazení je možné povolit / zakázat v nastavení tématu vzhledu)
Navigace
  $search_box Vyhledávací formulář (zobrazení je možné povolit / zakázat v nastavení tématu vzhledu)
  $primary_links Primární odkazy navigace (pokud jsou nastaveny)
  $secondary_links Sekundární odkazy navigace (pokud jsou nastaveny)
$sidebar_left $left Levý postranní pruh
$sidebar_right $right Pravý postranní pruh
Obsah stránky
  $header Identifikace bloku hlavičky
  $breadcrumb "Drobečková" navigace aktuální stránky
  $tabs Záložky s možnostmi aktuální stránky (např. Zobrazit, Upravit...)
  $tabs2  
  $title Název aktuální stránky

$show_messages  
  $messages Stav a chybová hlášení (zvýrazněte pomocí CSS)
  $help Dynamický text nápovědy (většinou pro stránky administrace)
  $content Hlavní obsah aktuální stránky
  $feed_icons Řetězec všech ikonek aktuální stránky (např. Syndikovaný obsah RSS)
Patička
  $footer_message Zápatí webu definované v administraci stránek (Informace o webu)

$footer Oblast zápatí webu
Uzavírací data
  $closure Závěrečná uzavírací značka pro všechny moduly, které mění stránku (uvádějte až za veškerým dynamickým obsahem)

Poznámka:
Pomocí snippetů můžete např. zobrazit uvítání uživatele, nebo upozornit na to, že uživatel ještě není registrován. 

template.php

Šablona template.php (en) umožňuje předefinovat výchozí a vytvářet vlastních funkce.

Odpovídající funkce je možné vyhledat na stránkce Default theme implementations (en).

Odstranění názvu a drobečkové navigace z úvodní stránky

Výraz "template" nahraďte za název tématu.

<?php
function template_preprocess_page(&$variables) {
  //If front page remove title and breadcrumb
  if (drupal_is_front_page()) {
    $variables['breadcrumb'] = '';
    $variables['title'] = '';
  }
}
?>

Potlačení CSS souborů definovaných jádrem a moduly

Téma vzheldu může nahradit CSS soubory definované jádrem a moduly přidáním stylopisu stejného jména a použitím funkce drupal_add_css(). Toto umožňuje tématům potlačit veškeré CSS soubory pokud je to nutné.

Například pokud chcete styl modules/system/system-menus.css definovaný jádrem nahradit (potlačit pro určitá média) vlastním:

  1. V používaném tématu vzhledu vytvořte např. v adresáři styles soubor system-menus.css s požadovanými styly.
  2. V používaném tématu vzhledu vytvořte (upravte) souboru template.php, do kterého vložte:
    <?php
      drupal_add_css(path_to_theme() .'/styles/system-menus.css', 'theme', 'screen, projection', TRUE);
    ?>
    

Výše uvedený příklad se načte pouze pro dané téma, tj. nenačte se pro případná podtémata. Pokud potřebujete používat přepis stylu i v podtématech přidejte jej přímo do .info souboru.

Odstranění zvolených meta tagů

/*​*
* Used to remove certain elements from the $head output within html.tpl.php
*
* @see http://api.drupal.org/api/drupal/modules--system--system.api.php/functio...
* @param array $head_elements
*/
function YOUR_THEME_NAME_html_head_alter(&$head_elements) {
    $remove = array(
        'system_meta_generator',
        'metatag_canonical',
        'metatag_shortlink'
   );
    foreach ($remove as $key) {
        if (isset($head_elements[$key])) {
            unset($head_elements[$key]);
        }
    }
    // Use this loop to find out which keys are available.
    /* -- Delete this line to execute this loop
    echo '<pre>';
    foreach ($head_elements as $key => $element) {
        echo $key ."\n";
    }
    echo '</pre>';
    // */
}

$body_classes

Pro přidání aktuální uživatelské role a cesty (verze A) do pole $body_classes stačí do souboru template.php v používaném tématu vzhledu vložit níže uvedený snippet a změňte MYTHEMENAME na aktuální název tématu vzhledu:

Drupal 7

Verze A

/**
* Add current user's role and path to $body_classes shown in <body>
*/
function MYTHEMENAME_preprocess_html(&$vars) {
  //$body_classes = array($vars['classes_array']); // normal theme
  $body_classes = array($vars['attributes_array']['class']); // omega theme
  if ($vars['user']) {
    foreach($vars['user']->roles as $key => $role) {
      $role_class = 'role-' . str_replace(' ', '-', $role);
      //$vars['classes_array'][] = $role_class; // normal theme
      $vars['attributes_array']['class'][] = $role_class; // omega theme
    }
  }
 
  $path = drupal_get_path_alias($_GET['q']);
  $aliases = explode('/', $path);
  foreach($aliases as $alias) {
    //$vars['classes_array'][] = drupal_clean_css_identifier($alias); // normal theme
    $vars['attributes_array']['class'][] = drupal_clean_css_identifier($alias); // omega theme
  }
}

Verze B

/**
* Add current user's role to $body_classes shown in <body>
*/
function MYTHEMENAME_preprocess_page(&$vars) {
  if ($vars['user']) {
    foreach($vars['user']->roles as $key => $role){
      $vars['class'][] = 'role-' . drupal_html_class($role);
    }
  }
}

Drupal 6

/**
* Add current user's role to $body_classes shown in <body>
*/
function MYTHEMENAME_preprocess_page(&$vars, $hook) {
  $body_classes = array($vars['body_classes']);
   if ($vars['user']) {
    foreach($vars['user']->roles as $key => $role){
      $role_class = 'role-' . str_replace(' ', '-', $role);
      $body_classes[] = $role_class;
    }
  }
  $vars['body_classes'] = implode(' ', $body_classes); // Concatenate with spaces
}

Funkce vzhledu

Všechny funkce začínající slovem template_ nebo theme_ (např. theme_username) vytvářejí HTML výstup a je možné je upravit pomocí souboru template.php.

Obecný posutp

  1. Najděte požadovanou funkci (přímo v Drupalu nebo na api.drupal.org).
  2. Zkopírujte funci do template.php, přejmenujte její název např. z theme_... nebo template_... nejlépe na název používaného tématu MYTHEMENAME_..., což je zhlediska výkonu nejlepší a upravte dle libosti.
  3. Pro zjištění hodnot pole je vhodné do funkce vložit např. funkci var_dump() nebo kpr() s požadovaným polem
    • var_dump($variables);
      
      kpr($variables);
      
  4. Po úpravách template.php je důležité obnovit cache tématu vzhledu!
    • Přejděte na stránku s tématy vzhledu a aktuální stav uložte.

Příklady

Drupal 7

Přesměrování uživatele na stránku Dashboard ihned po přihlášení:

  • /**
    * Redirect user to a specific page after they login
    */
    function MYTHEMENAME_user_login(&$edit, $account) {
      $edit['redirect'] = 'admin/dashboard';
    }
  • nebo ještě lépe
  • /**
    * Redirect user to a specific page after they login if they belong to a certain role
    */
    function MYTHEMENAME_user_login(&$edit, $account) {
      if (!isset($_POST['form_id']) || $_POST['form_id'] != 'user_pass_reset' || variable_get('login_destination_immediate_redirect', FALSE)) {
        if(in_array('administrator',$account->roles)) {
          drupal_goto('admin/dashboard');
        }
        else {
          drupal_goto('user/'.$account->uid);
        }
      }
    }

Přepis výstupu polí

function MYTHEMENAME_preprocess_field(&$variables, $hook) {
  //kpr($variables);

  // For field type "boolean"
  if ($element['#field_type'] == 'list_boolean') {
    // Add CSS class and change in Value
    if ($variables['element']['#items'][0]['value'] == 1) {
      $variables['classes_array'][] = 'true';
      $variables['items'][0]['#markup'] = t('Yes');
    }
    else {
      $variables['classes_array'][] = 'false';   
      $variables['items'][0]['#markup'] = t('No');
    }
  }   

  // For all field except specific type and name
  if($variables['element']['#field_type'] !== 'text_with_summary' &&
     $variables['element']['#field_type'] !== 'text_long' &&
     $variables['element']['#field_name'] !== 'field_price' {
    // For each item
    foreach ($variables['items'] as $delta => $item) {
      if (!empty($variables['items'][$delta]['#markup'])) {
          // Add tag <strong>
          $variables['items'][$delta]['#markup'] = '<strong>'. $variables['items'][$delta]['#markup'] .'</strong>';
      }
    }
  }
}

Náhrada nulové ceny za slovo zdarma ve výpisu Views:

/**
* Replace price 0 to free
*/
function MYTHEMENAME_preprocess_views_view_fields(&$variables) {
  //kpr($variables);
  if($variables['fields']['field_price']->content == 0) {
    $variables['fields']['field_price']->content = t('free');
  } 
}

Úprava řetězce "Submitted by [name] on [date]":

<?php
function MYTHEMENAME_preprocess_node(&$variables) {
  $variables['submitted'] = t('Submitted by !username on !datetime', array('!username' => $variables['name'], '!datetime' => $variables['date']));

  // only username
  //$variables['submitted'] = t('Submitted by !username', array('!username' => $variables['name']));

  // only date
  //$variables['submitted'] = t('Submitted on !datetime', array('!datetime' => $variables['date']));

  // Drupal date formats (long, medium, short)
  //$variables['date'] = format_date($variables['node']->created, 'short');

  // Custom format types
  //$variables['date'] = format_date($variables['node']->created, 'custom', 'F j, Y');

  // Date Created -> Changed
  //$variables['date'] = format_date($node->changed);

  // Date Created -> Changed + custom username and date
  /*$variables['date'] = format_date($node->changed);
  if (variable_get('node_submitted_' . $node->type, TRUE)) {
    $variables['display_submitted'] = TRUE;
    $variables['submitted'] = t('Edited by !username on !datetime', array('!username' => $variables['name'], '!datetime' => $variables['date']));
    $variables['user_picture'] = theme_get_setting('toggle_node_user_picture') ? theme('user_picture', array('account' => $node)) : '';
  } else {
    $variables['display_submitted'] = FALSE;
    $variables['submitted'] = '';
     $variables['user_picture'] = '';
  }*/
}
?>

Úprava délky uživatelského jména:

  1. Funkce, která mimo jiné ořezává délku uživatelského jména se jmenuje template_preprocess_username.
  2. Tuto funkci je vhodé doplnit ještě o možnost zobrazení úplného jména pomocí modulu RealName a nově vytvořeného pole field_fullname.
  3. Výsledná funkce může vypadat třeba takto
    • /**​
       * Implements hook_preprocess_username().
      */
      function MYTHEMENAME_preprocess_username(&$variables) {
        $account = $variables['account'];
      
        $variables['extra'] = '';
        if (empty($account->uid)) {
          $variables['uid'] = 0;
          if (theme_get_setting('toggle_comment_user_verification')) {
            $variables['extra'] = ' (' . t('not verified') . ')';
          }
        }
        else {
          $variables['uid'] = (int) $account->uid;
          $user = user_load($account->uid);
          if (isset($user->field_fullname['und'][0]['value'])) {
            $name = $variables['name_raw'] = $user->field_fullname ['und'][0]['safe_value'];
          } 
          else {
            // Set the name to a formatted name that is safe for printing and
            // that won't break tables by being too long. Keep an unshortened,
            // unsanitized version, in case other preprocess functions want to implement
            // their own shortening logic or add markup. If they do so, they must ensure
            // that $variables['name'] is safe for printing.
            $name = $variables['name_raw'] = format_username($account);
          }
        }
      
        if (drupal_strlen($name) > 20) {
          //$name = drupal_substr($name, 0, 15) . '...';
        }
        $variables['name'] = check_plain($name);
        $variables['profile_access'] = user_access('access user profiles');
        $variables['link_attributes'] = array();
        // Populate link path and attributes if appropriate.
        if ($variables['uid'] && $variables['profile_access']) {
          // We are linking to a local user.
          $variables['link_attributes'] = array('title' => t('View user profile.'));
          $variables['link_path'] = 'user/' . $variables['uid'];
        }
        elseif (!empty($account->homepage)) {
          // Like the 'class' attribute, the 'rel' attribute can hold a
          // space-separated set of values, so initialize it as an array to make it
          // easier for other preprocess functions to append to it.
          $variables['link_attributes'] = array('rel' => array('nofollow'));
          $variables['link_path'] = $account->homepage;
          $variables['homepage'] = $account->homepage;
        }
        // We do not want the l() function to check_plain() a second time.
        $variables['link_options']['html'] = TRUE;
        // Set a default class.
        $variables['attributes_array'] = array('class' => array('username'));
      }
Drupal 6
  1. Funkce, která mimo jiné ořezává délku uživatelského jména je v souboru includes/thhme.inc a jmenuje se theme_username.
  2. Funkci zkopírujte do template.php, přejmenujte její název z theme_username na název vašeho tématu MYTHEMENAME_username a upravte požadovanou část jejího kódu:
    function theme_username($object) {
      if ($object->uid && $object->name) {
        // Shorten the name when it is too long or it will break many tables.
        if (drupal_strlen($object->name) > 20) {
          $name = drupal_substr($object->name, 0, 15) .'...';
        }
    ...

    např. na:

    function MYTHEMENAME_username($object) {
      if ($object->uid && $object->name) {
        // Shorten the name when it is too long or it will break many tables.
        if (drupal_strlen($object->name) > 30) {
          $name = drupal_substr($object->name, 0, 25) .'...';
        }
    ...
    

    Místo phptemplate je z hlediska výkonu vhodnější psát název tématu. 

  3. Přejděte na stránku s tématy vzhledu a aktální stav uložte.

 

Navigace

Pro přidání CSS atributů k menu odkazům použijte modul Menu Attributes.

Pokud potřebujete přidat třídy položkám LI použijte funkci theme_menu_link.

  • function YOURTHEME_menu_link__main_menu($variables){
    } 

Pokud potřebujete přidat třídy seznamu UL použijte funkci theme_menu_tree.

Příklady

Doplnění CSS do navigace:

  • /**
    * Overrides theme_menu_tree().
    * Add bootstrap 'navbar-nav' class to Top Navigation menu
    */
    function YOURTHEME_menu_tree__menu_top_navigation(&$variables) {
      return '<ul class="menu nav navbar-nav">' . $variables['tree'] . '</ul>';
    }

Vlastní funkce

Získání argumentů z URL:

$url = arg();
print_r($url);
//print $url[0] .'|'. $url[1];

Získání query parametrů z URL:

$query = drupal_get_query_parameters();
//print_r $query;
print $query['page'];

Doplnění počtu položek menu:

/**
* Process variables for menu-block-wrapper.tpl.php.
*
* @see menu-block-wrapper.tpl.php
*/
function THEMENAME_preprocess_menu_block_wrapper(&$variables) {
  //$variables['classes_array'][] = 'menu-block-' . $variables['delta'];
  $variables['classes_array'][] = 'menu-level-count-'. count(element_children($variables['content']));
}

Připojení CSS pro Internet Explorer:

/**
 * Generates IE CSS links for LTR and RTL languages.
 */
function phptemplate_get_ie_styles() {
  global $language;
  $iecss = "\n";
  $iecss .= '<!--[if (lte IE 7)&(gte IE 5)]>'."\n  ";
  $iecss .= '<link type="text/css" rel="stylesheet" media="screen,
   projection" href="'. base_path() . path_to_theme()
   .'/styles/ie-7.css" />'."\n  ";
  if (defined('LANGUAGE_RTL') && $language->direction ==
   LANGUAGE_RTL) {
    $iecss .= '<link type="text/css" rel="stylesheet" media="screen,
     projection" href="'. base_path() . path_to_theme()
     .'/styles/ie-7-rtl.css" />'."\n  ";
  }
  $iecss .= '<![if lt IE 7]>'."\n    ";
  $iecss .= '<link type="text/css" rel="stylesheet" media="screen, 
   projection" href="'. base_path() . path_to_theme()
   .'/styles/ie-6.css" />'."\n    ";
  if (defined('LANGUAGE_RTL') && $language->direction ==
   LANGUAGE_RTL) {
    $iecss .= '<link type="text/css" rel="stylesheet" media="screen,
     projection" href="'. base_path() . path_to_theme()
      .'/styles/ie-6-rtl.css" />'."\n    ";
  }
  $iecss .= '<![if lt IE 6]>'."\n      ";
  $iecss .= '<link type="text/css" rel="stylesheet" media="screen,
   projection" href="'. base_path() . path_to_theme()
    .'/styles/ie-5.5.css" />'."\n      ";
  if (defined('LANGUAGE_RTL') && $language->direction ==
   LANGUAGE_RTL) {
    $iecss .= '<link type="text/css" rel="stylesheet" media="screen,
     projection" href="'. base_path() . path_to_theme()
     .'/styles/ie-5.5-rtl.css" />'."\n      ";
  }
  $iecss .= '<![if lt IE 5.5]>'."\n        ";
  $iecss .= '<link type="text/css" rel="stylesheet" media="screen, 
   projection" href="'. base_path() . path_to_theme()
   .'/styles/ie-5.css" />'."\n      ";
  if (defined('LANGUAGE_RTL') && $language->direction ==
   LANGUAGE_RTL) {
    $iecss .= "  ".'<link type="text/css" rel="stylesheet"
     media="screen, projection" href="'. base_path() .
      path_to_theme() .'/styles/ie-5-rtl.css" />'."\n      ";
  }
  $iecss .= '<![endif]>'."\n    ";
  $iecss .= '<![endif]>'."\n  ";
  $iecss .= '<![endif]>'."\n";
  $iecss .= '<![endif]-->'."\n";
  return $iecss;
}

 

Úprava formulářů

V používaném tématu vzhledu vytvořte (upravte) soubor template.php, do kterého vložte požadovanou funkci nalezenou přímo v Drupalu nebo na api.drupal.org:

  • /**
    * Implements HOOK_form_alter()
    */
    function MYTHEMENAME_form_alter(&$form, &$form_state, $form_id) {
      //kpr($form); // require Devel modul
      //dpm($form_id); // require Devel modul
      //drupal_set_message($form_id);  // print form ID to messages
      //drupal_set_message(print_r($form, TRUE));  // print array to messages
      //var_dump($form);
    
      //echo $form_id .", ";
    }
  • nebo ještě lépe
  • /**
    * Implements HOOK_form_FORM_ID_alter()
    */
    function MYTHEMENAME_form_search_block_form_alter(&$form, &$form_state, $form_id) {
      //kpr($form); // require Devel modul
      //var_dump($form);
    
      //kpr(); // require Devel modul
    }

Např. modifikace atributů a textu tlačítek:

/**
* Implements HOOK_form_alter()
*/
function MYMODUELNAME_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'user_register') {
   // change submit button
    $form['submit']['#value'] = t('Complete the registration');
  }
}
/**
* Implements HOOK_form_alter()
*/
function MYTHEMENAME_form_alter(&$form, &$form_state, $form_id) {
  //var_dump($form);

  // submit input
  if(isset($form['product_id']) && $form_id == 'commerce_cart_add_to_cart_form_' . $form['product_id']['#value']) {
    $form['submit']['#attributes']['title'] = t('Add to Wishlist');
  }
// 1. step of checkout
  if($form_id == 'views_form_commerce_cart_form_default') {
    $form['actions']['continue_shopping']['#value'] = t('Continue');
    $form['actions']['submit']['#value'] = t('Update demand');
    $form['actions']['checkout']['#value'] = t('Send demand');
  }
// 2. step of checkout
  if($form_id == 'commerce_checkout_form_checkout') {
    $form['buttons']['continue']['#value'] = t('Send demand');
  }
}

Příklad úpravy exposed filtru (#process):

/**
* Custom process function
**/
function MYFUNCTION_process($element, $form_state, $form) {
  //print('<pre>'.print_r($form,1).'</pre>');
  //kpr($element);
  //kpr($form_state);

  // First element "CUSTOM_TEXT"
  $element['CUSTOM_TEXT'] =  array(
    '#markup' => "<div class='my-class'>CUSTOM TEXT</div>",
);

  // Second element "MY_LINK"
  $element['MY_LINK'] =  array(
    '#type' => 'link',
    '#prefix' => '<div class="MYCLASS">',
    '#title' => '<span>'. t('TITLE') .'</span>',
    '#suffix' => '</div>',
    '#href' => 'MYURL',
    '#id' => 'prev',
    '#ajax' => array(
      'wrapper' => 'level-form',
      'method' => 'html',
),
    '#options' => array(
      'html' => true,
      'fragment' => 'MY-ANCHOR',
      'attributes' => array(
        'title' => t('HOVER TITLE'),
  ),
      'query' => array(
        'year' => 2013,
        'month' => 9,
  )
),
    '#weight' => -10,
);
  return $element;
}
function HOOK_form_alter(&$form, &$form_state, $form_id) {
  $form['date']['value']['#process'][] = 'MYFUNCTION_process';
  //kpr($form); 
}

...

Date

 Odstranění (úprava) popisu "celý den" u pole datum modulu Date:

/**
* Theme the way an 'all day' label will look.
*/
function phptemplate_date_all_day_label() {
  return '';
}

 Místo phptemplate je z hlediska výkonu vhodnější psát název tématu. 

comment.tpl.php

Soubor comment.tpl.php obsahuje šablonu komentáře

Příklad:

<div class="comment2<?php print ($comment->new) ? ' comment-new' : ''; print ' '. $status; print ' '. $zebra; ?>">
  <div class="clear-block">
  <?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted; ?></span>
  <?php endif; ?>
  <?php if ($comment->new) : ?>
    <span class="new"><?php print drupal_ucfirst($new) ?></span>
  <?php endif; ?>
  <?php print $picture ?>

    <h3><?php print $title ?></h3>
    <div class="content">
      <?php print $content ?>
      <?php
        if ($signature):
        // You can use the following to prevent double-display of signatures on old posts (converting Drupal 5 to Drupal 6)
        // if ($signature && $comment->cid > 3443): // The highest comment ID before upgrading to Drupal 6
      ?>

        <div class="user-signature clear-block">
          <div>—</div>
          <?php print $signature ?>

        </div>
      <?php endif; ?>

    </div>
  </div>
  <?php if ($links): ?>

    <div class="links"><?php print $links ?></div>
  <?php endif; ?>

</div>

 

maintenance-page.tpl.php

Vlastní vzhled webu v offline režimu.

  1. V adresáři vlastního vzhledu vytvořte soubor maintenance-page.tpl.php např. zkopírováním souboru page.tpl.php.
  2. V sites/default/settings.php odkomentujte (i záčátek a konec pole) a definujte téma pro offline režim např.:
    $conf = array(
      'maintenance_theme' => 'my-owns-theme'
    );

 

Úprava vzhledu modulu pomocí šablony .tpl.php

Bližší informace o šablonách naleznete v Template Suggestions.

Příklad upravy úvodní stránky:

  • Drupal 7
    • page.tpl.php (základní šablona je vyžadována vždy )
    • page--front.tpl.php 
  • Drupal 6
    • page.tpl.php (základní šablona je vyžadována vždy )
    • page-front.tpl.php 

Příklad změny vzhledu uživatelského profilu:

  1. Z adresáře modules/user/ zkopírujte do svého tématu vzhledu soubor user-profile.tpl.php.
  2. A admin/settings/performance (Administrace, Nastavení webu, Výkon) vyčistěte Cache.
  3. Upravte zkopírovaný soubor user-profile.tpl.php dle potřeb.

 

Odvozený vzhled

Odovzený vzhled (sub téma) staví na základním tématu vzhledu, čímž vývojářům a designerům šetří mnoho práce.

Dokumentace: Creating a sub-theme

  1. Pro odvozené téma vzhledu vytvořte nový vlastní adresář např. sites/all/theme/my_subtheme (odvozený vzhled může být umístěn "kdekoli" v Drupal struktuře).
  2. Při vytváření odvozeného vzhledu postupujte stejně jako při vytváření vlastního vzhledu (do adresáře s odvozeným vzhledem umisťujte soubory a adresáře), přičemž práci si ulehčíte tím, že budete vkládat pouze odlišné soubory od "základního" vzhledu.
  3. Odvozený vzhled musí obsahovat alespoň soubor s příponou .info např. my-subtheme.info.
  4. Odovzený vzhled sdílí CSS, JavaScript, šablony (*.tpl.php), template.php, náhled.
  5. Odvozený vzhled nesdílí theme-settings.php, logo, favicon, color (modul integraci) a některá nastavení z .info souboru (regions, core version, color info).

Příklad:

name = Odvozené téma vzhledu
description = Popis odvozeného tématu
core = 6.x
engine = phptemplate
base theme = nazev-zakladniho-tematu
stylesheets[screen, projection][] = styles/my-derived-styles.css
scripts[] = my-derived-scripts.js

Název odvozeného tématu je uložen v proměnné $theme_key(hodí se např. při úpravách cest k obrázkům nebo pro třídy CSS):

<?php
  global $theme_key;
  print $theme_key;
?>

 

Drupal CSS standardy

Dokumentace:

CSS formátování

/**
 * @file
 * Short description describing the file.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 */

/* @group Section comment block
----------------------------------------------------------------------------- */

html,
body {
  min-height: 100%
}


/* @end Section comment block */

/**
 * Short description using Doxygen-style comment format.
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 */
body {
  /* This line is indented with 2 spaces, 2 spaces x 1 level of indentation. */
  text-align: left;
}

/* The example's item styling. */
body,
div,
.selector-3[type="text"] {
  /* Override the default margins. */
  margin: 0;
  padding: 0;
  color: #333;
  background: #fff;
  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
  font-family: Times, "Times New Roman", sans-serif;
}

.selector-1,
.selector-2 {
  padding: 10px;
}

  • výchozí standard kódování pro CSS soubory je UTF-8
    • vzhledem k tomu, že při agragaci dochází ke slučování více CSS souborů do jednoho, nesmí CSS soubory obsahovat žádné @charset prohlášení
  • každý soubor by měl začínat komentářem, který by měl soubor popisovat (max. 80 znaků na řádek)
    • pro komentáře je používána Doxygen konvence
  • u dlouhých soubrů vytvářejte pomocí komentářů "oddíly"
  • všechny textové soubory by měly končit prázným řádkem (umožňuje snadnější čtení pro GIT).
  • všechny textové soubory by měly mít Unixové formátování konců řádků (nový řádek \nnebo LF)
    • nastavte si editor tak, aby vám zobrazoval "neviditelné" formátovací znaky
    • Drupal 8 obsahuje v kořenovém adresáři soubor EditorConfig, který pomáhá udržovat tyto konvence mezer
  • selektor se umisťuje hned za komentář (bez prázdného oddělovacího řádku)
  • u více selektorů oddělených čárkou pište každý selektor na nový řádek
  • každou vlastnost piště na samostatný řádek
  • před dvojtečkou a čárkou se mezera nedělá, ovšem za ní ano
  • závorky obklopují svůj obsah přímo bez vložené mezery
  • za každou vlastností pište středník
  • barvy v hexadecimálním tvaru pište malými písmeny a pokud možno ve zkráceném tvaru #ccc (pozor, IE8 nepodporuje všechny barevné syntaxe)
  • víceslovné názvů fontů a hodnoty atributů v selektorech uzavírejte do uvozovek
  • u nulových hodnot nepište jednotky
  • každé pravidlo oddělte prázdným řádkem
  • konce řádků nesmí obsahovat žádné mezery nebo tabulátory

Podpora jazyků s tokem textu Right-To-Left (RTL)

Kaskádové styly je možné vytvářet v párech. Ve stejném adresáři může být např. soubor example.css s výchozím určením pro tok textu zleva doprava (LTR) a example-rtl.css určený pro tok textu zprava doleva (RTL) např. pro Arabštinu, Hebrejštinu atd.

Soubor example-rtl.css může potlačit určené deklarace souboru example.css. Odlišnosti v toku textu označeny /* LTR */ komentářem v originálním souboru example.css, aby bylo jasné které deklarace je nutné modifikovat v souboru example-rtl.css (pro přehlednost při pozdějších úpravách).

Soubor example-rtl.css je uplatněn pouze v případě použití jazyka (zobrazení stránek) s tokem textu zprava doleva a potlačuje tak určené deklarace souboru example.css.

Left-To-Right (LTR) vlastnosti by měly být označeny níže uvedeným komentářem v souboru example.css:

/**
 * @file
 * Left-To-Right (LTR) CSS file example.
 */
.example-rule {
  float: left; /* LTR */
  margin-right: 1.5em; /* LTR */
  padding: 0 0.25em;
}

Při použití RTL jazyka bude načten i příslušný soubor example-rtl.css:

/**
 * @file
 * Right-To-Left (RTL) CSS file example.
 */
.example-rule {
  float: right;
  margin-left: 1.5em;
  margin-right: 0;
}

Pořadí deklarací

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  /* Box Model */
  display: inline-block;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 10px solid #333;
  /* Other */
  background: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.1em;
}

Deklarace pište v pořadí od důležitých k méně důležitým:

  1. pozicování: position, float, clear, top, right, bottom, left, direction a z-index
  2. box model: [(max|min)-]height, [(max|min)-]width, margin, padding, border, margin-top atd. včetně box-sizing
  3. další vlastnosti: písmo, text atd.

Výjimky a mírné odchylky

.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }

Mnoho jednoduchých deklarací je možné psát "jednořádkovým" formátem s mezerou za otevírací a před uzavírací závorkou.

.selector {
  background-image:
    linear-gradient(#fff, #ccc),
    linear-gradient(#f3c, #4ec);
  box-shadow:
    1px 1px 1px #000,
    2px 2px 1px 1px #ccc inset;
}

Dlouhé hodnoty oddělené čárkou (přechody, stíny atd.) je možné pro zvýšení čitelnosti psát na více řádků.

Příklad

/**
 * @file
 * Example of CSS coding standards for Drupal.
 */

/* ==========================================================================
   Grid layout
   ======================================================================= */

/**
 * Column layout with horizontal scroll.
 *
 * This creates a single row of full-height, non-wrapping columns that can be
 * browsed horizontally within their parent.
 *
 * Example HTML:
 *
 * <div class="grid">
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 *   <div class="cell cell-3"></div>
 * </div>
 */

/**
 * Grid container
 *
 * Must only contain `.cell` children.
 */
.grid {
  height: 100%;
  /* Remove inter-cell whitespace */
  font-size: 0;
  /* Prevent inline-block cells wrapping */
  white-space: nowrap;
}

/**
 * Grid cells
 *
 * No explicit width by default. Extend with `.cell-n` classes.
 */
.cell {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
  /* Set the inter-cell spacing */
  padding: 0 10px;
  border: 2px solid #333;
  vertical-align: top;
  /* Reset white-space */
  white-space: normal;
  /* Reset font-size */
  font-size: 16px;
}

/* Cell states */
.cell.is-animating {
  background-color: #fffdec;
}

/* Cell dimensions */
.cell-1 { width: 10%; }
.cell-2 { width: 20%; }
.cell-3 { width: 30%; }
.cell-4 { width: 40%; }
.cell-5 { width: 50%; }

/* Cell modifiers */
.cell--detail,
.cell--important {
  border-width: 4px;
}

Seskupování CSS pravidel

Drupal 8 vychází ze SMACSS kategorizace CSS pravidel.

  1. CSS_BASE – základní styl HTML elementů
  2. CSS_LAYOUT – základní uspořádání webové stránky
  3. CSS_MODULE – opakovaně použitelné komponenty návrhu (Netýká se Drupal modulů)
  4. CSS_STATE – styly závislé na JavaScriptu
  5. CSS_THEME – volitelný vzhled prvky návrhu (Netýká se Drupal témat)

Každá kategorie sad pravidel by měla být v samostatném CSS souboru.

Drupal 8 může mít jen 2 agregované CSS soubory (dříve jich bylo minimálně 6):

  • agregace pro každou stránku (AGGREGATE_EVERY_PAGE)
  • podmíněná agragace (AGGREGATE_CONDITIONAL)

Doporučení

  • každý z vícenásobných CSS selektorů psát na samostatný řádek 
  • barevné nastavení vzhledu (barvy textů, pozadí, rámečků, stínů, obrázky na pozadí) psát do samostatného souboru např. color.css
  • výchozí formátování HTML prvků psát do samostatného souboru např. html.css

 

node.tpl.php

template.php

/**
* Preproccess for Page
*/
function mytheme_process_page(&$variables) {
  // Node type Article title
  if (!empty($variables['node']) && $variables['node']->type == 'article') {
    //kpr($variables['node']);
    $long_title = $variables['node']->field_long_title[LANGUAGE_NONE][0]['safe_value'];
    $variables['title'] = $long_title;
  }
}

function mytheme_preprocess_node(&$variables, $hook) {
  // Node type Article
  if ($variables['node']->type == 'article') {
    //kpr($variables);

    // Getting taxonomy term (only one)
    $tid = $variables['field_categories'][LANGUAGE_NONE][0]['tid'];
    $term = taxonomy_term_load($tid); // load term object
    $term_uri = taxonomy_term_uri($term); // get array with path
    $term_title = taxonomy_term_title($term);
    $term_path = $term_uri['path'];
    $article_link = l($term_title,$term_path);

    // Change date format
    $article_date = date("F d. Y", $variables['created']);

    // Block (#1)
    $block = module_invoke('block','block_view','1');
    $block_whole = block_load('block','1'); // not really the whole block until render

    // Views block ("test")
    $views_block = module_invoke('views','block_view','test_view-block');

    // Creating custom variables for node.tpl.php
    $variables['article_link'] = $article_link;
    $variables['article_date'] = $article_date;
    $variables['block'] = $block;
    $variables['block_whole'] = $block_whole;
    $variables['views_block'] = $views_block;
  }
}

node--article.tpl.php

<div><?php print $article_link ." | ". $article_date; ?></div>
<?php
  print render($block['content']);
  print drupal_render(_block_get_renderable_array(_block_render_blocks(array($block_whole))));
  print render($views_block);
?>
<?php
  // Hide the comments and links
  //hide($content['comments']);
  //hide($content['links']);
  // Render comments and links
  print render($content['links']);
  print render($content['comments']);
?>

jQuery

Výhody použití Behaviors v Drupalu:

Příklad obecného jQuery:

$(document).ready(function () {
  // Do some fancy stuff.
});

Příklady použítí jQuery v Drupal 7:

A)

(function ($) {
  // To understand behaviors, see https://drupal.org/node/756722#behaviors
  Drupal.behaviors.my_custom_behavior = {
    attach: function(context, settings) {
      // Place your code here.
    }
  };
})(jQuery);

B)

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// – https://drupal.org/node/1446420
// – http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function($, Drupal, window, document, undefined) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $('input.myCustomBehavior', context).once('myCustomBehavior', function () {
        // Apply the myCustomBehaviour effect to the elements only once.
      });
    }
  };
})(jQuery, Drupal, this, this.document);

Příklad předání proměnné z PHP do JavaSkriptu:

Dokumentace:

Dočasné zobrazení vlastního textu ve vyhledávacím poli

Příklad použití jQuery – zobrazující se text Text... ve vyhledávacím poli:

  1. V tématu vzhledu vytvořte adresář scripts/obsahující soubory jquery.autofill.jsjavascript.js (z přiložených souborů odstraňte příponu .txt).
  2. Do .info souboru tématu vzhledu přidejte řádky:
    scripts[] = scripts/javascript.js
    scripts[] = scripts/jquery.autofill.js
  3. Zobrazte blok Search a vyzkoušejte výsledek.
PřílohaVelikost
jquery.autofill.js.txt1.97 KB
javascript.js.txt157 bajtů

Uživatelská přívětivost vlastního vyhledávacího bloku

Příklad použití jQuery – při přejetí myší zůstane blok chvíli zobrazen, při kliku na záhlaví zůstane zobrazen trvale, při opětovném kliku se skryje:

  1. V tématu vzhledu vytvořte adresář js/ obsahující soubor search_exposed_block.js (z přiloženéo souboru odstraňte příponu .txt).
  2. Do .info souboru tématu vzhledu přidejte řádky:
    scripts[] = js/javascript.js
    scripts[] = js/jquery.autofill.js
    • u tématu Omega je zápis odlišný:
      libraries[search_exposed_block][name] = Toggle search exposed block
      libraries[search_exposed_block][description] = Toggle search exposed block
      libraries[search_exposed_block][js][0][file] = search_exposed_block.js
      libraries[search_exposed_block][js][0][options][weight] = -20

 

PřílohaVelikost
search_exposed_block.js.txt1.59 KB

API

Díky aplikačnímu rozhraní API (Application Programming Interface) nemusíte zasahovat do zdrojového kódu Drupalu a tudíž nebudete mít problémy při pozdější aktualizaci. API se hodí zejména při úpravách vzhledu a vývoji vlastních modulů.

drupal_get_breadcrumb

Popis

Získá odkazy drobečkové navigace pro aktuální stránku.

Definice

drupal_get_breadcrumb()

includes/common.inc, line 95

Výstup

Řetězec obsahující odkazy drobečkové navigace.

Příklad

Vlastní úprava drobečkové navigace:

<?php
  // if ($breadcrumb) print $breadcrumb;
  if ($breadcrumb) {
    $subtheme_start_page = "<a href=\"/views/news\"
      title=\"Úvodní stránka novinek\">Novinky</a>";
    $crumbs = drupal_get_breadcrumb();
    $home_page = array_shift($crumbs);
    array_unshift($crumbs, $home_page, $subtheme_start_page);
    print theme_breadcrumb($crumbs);
  }
?>

l

Popis

Formátuje vnitřní odkaz.

Funkce l správně manipuluje s odkazy, které mohou mít vytvořené aliasy a umožňuje upravovat jejich vlastnosti. Všechny vnitřní odkazy výstupů modulů by měly být generovány touto funkcí.

Definice

l($text, $path, $options = array())

includes/common.inc, řádek 1534


Níže jsou uvedena data pro Drupal 5!

Parametry

$text – text, který bude uzavřen v odkazu

Veškerý text, který může člověk přečíst a má být zobrazen na stránce by měl být zobrazován funkcí t().

$path – cesta odkazu

Může být externí nebo interní:

  • při zadání úplné cesty bude považována za externí

  • při zadání pouze cesty např. "admin/content/node" bude považována za interní

    • v tomto případě musí být systémovou cestou, aby mohl být generován případný alias pomocí funkce url()

$attributes – asociativní pole HTML atributů aplikovaných u elementu odkazu

fragment – vytváří za odkazem "#kotvu" na ID v html zdroji

$query – řetězec přidaný k odkazu za otazníkem (& parametr)

$fragment – identifikátor přidaný k odkazu (# kotva)

$absolute – vynutit absolutní odkaz začínající http:

Užitečné pro odkazy, které budou zobrazovány mimo web, jako například RSS kanály.

$html – podporovat HTML elementy

Hodnota TRUE je např. nutná pro správné zobrazení HTML tagů např. obrázků, jinak se místo obrázku zobrazí v odkazu prostý text (případně HTML entity).

Příklad

<?php
  l(t('Home'), '<front>', array('title' => $site_name, 'class' =>
   'link', 'id' => 'home'), NULL, NULL, FALSE, FALSE);

  l('<span>' . t('My Node') . '</span>', 'node/1', array('html' => TRUE, 'fragment' => 'my-anchor', 'attributes' => array('title' => t('Hover Desciption'))));
?>

Výstup

HTML řetězec obsahující odkaz na určenou cestu.

module_exists

Popis

Zjišťuje existenci modulu.

Definice

module_exists($module)

Parametr

$module – název modulu

Příklad

<?php if(module_exists('themer')) print ' '. themer_body_class(); ?>

Výstup

Logická hodnota TRUE, pokud je modul nainstalován a povolen.

t

Popis

Překládá řetězce do jazyka stránky nebo určeného jazyka.

Veškerý text, který může člověk přečíst a má být zobrazen na stránce by měl být zobrazován touto funkcí.

Definice

t($string, $args = array(), $langcode = NULL)

includes/common.inc, řádek 734

Parametry

$string – řetězec obsahující anglický text k přeložení.

$args – asociativní pole náhrad vytvořených po překladu. Všechny výskyty každého klíče v tomto poli jsou nahrazeny odpovídající hodnotou.

Klíče se speciálním významem:

  • !variable – vloženo tak jak je
  • @variable – převede čístý text do HTML (funkce check_plain)
  • %variable – převede text do HTML a přidá formátovací element (funkce check_plain + theme_placeholder)

$langcode  – volitelný kód jazyka překladu odlišný od jazyka stránky

Výstup

Přeložený řetězec.

theme

Popis

Vrací nastylovaný výstup.

Příklad

<?php
  print theme('username', $node);
?>

theme_breadcrumb

Popis

Vrací nastylovanou drobečkovou navigaci.

Definice

theme_breadcrumb($breadcrumb)

includes/theme.inc, line 1226

Parametr

$breadcrumb – pole obsahující odkazy drobečkové navigace

Výstup

Řetězec obsahující drobečkovou navigaci.

Příklad

Vlastní úprava drobečkové navigace:

<?php
  // if ($breadcrumb) print $breadcrumb;
  if ($breadcrumb) {
    $subtheme_start_page = "<a href=\"/views/news\"
      title=\"Úvodní stránka novinek\">Novinky</a>";
    $crumbs = drupal_get_breadcrumb();
    $home_page = array_shift($crumbs);
    array_unshift($crumbs, $home_page, $subtheme_start_page);
    print theme_breadcrumb($crumbs);
  }
?>

 

theme_get_setting

Popis

Funkce získá nastavení z aktuálního tématu, která byla zadána v administraci webu.

Definice

theme_get_setting($setting_name, $refresh = FALSE))

includes/theme.inc, řádek 900

Parametry

$setting_name  – název nastavení, které má být získáno.

$refresh - zda obnovit nastavení cache.

Výstup

Hodnota požadovaného nastavení, NULL jestliže nastavení neexistuje.

Příklad

Zobrazení poslání webu jako meta informace v hlavičce stránky:

<?php
  $my_description = theme_get_setting('mission', false);
  if ($my_description) {
    print '<meta name="description" content="'. $my_description
     .'" />';
  }
?>

 

Snippety

Snippet je malý znovupoužitelný kus programového kódu, který může např.:

Přístup k databázi

Příklad zobrazení požadovaných údajů přímo z databáze:

<?php
  $sql = "SELECT title FROM node ORDER BY node.vid DESC LIMIT 10";
  $result = db_query($sql);
  while ($node = db_fetch_object($result)) {
    $output .= $node->title ." ";
  }
  return $output;
?>

Pro zobrazení je možné využít např. vestavěný PHP filtr obsahu nebo bloku.

Drupal 5

Snippety pro Drupal 5:

Navigace v galerii obrázků

Popis

Doplnění textové navigace do galerie obrázků modulu Image.

Jako základ bylo použito řešení Add a << first < previous next > last >> Pager to Image Nodes Within a Gallery doplněné o lokalizaci.

Postup

  1. Do suboru template.php používaného vzhledu přidejte funkci:
    /**
     * Image Gallery Pager
     */
    function custom_pager($current_nid, $class = NULL) {
      $tid = reset(array_keys(taxonomy_node_get_terms($current_nid)));
      $result = db_query(db_rewrite_sql('SELECT n.nid, n.title FROM {node} n INNER JOIN {term_node} tn ON n.nid = tn.nid WHERE tn.tid = %s AND n.status = 1 ORDER BY n.sticky DESC, n.created DESC, n.nid DESC'), $tid);
      while ($node = db_fetch_object($result)) {
        $nodes[++$i] = $node;
        if ($node->nid == $current_nid) $x = $i;
      }
      if($x > 1) {
        $output .= l(t('« first'), 'node/'. $nodes[1]->nid, array('title' => check_plain($nodes[1]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
        $output .= l(t('‹ previous'), 'node/'. $nodes[$x-1]->nid, array('title' => check_plain($nodes[$x-1]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
      }
      else {
        // not required
        // $output .= '<span class="">' . t(t('« first')) . ' </span>' . '<span class="">' . t('‹ previous') . ' </span>';
      }
      $output .= $x .' ('. $i .')';
      if($x < $i) {
        $output .= l(t('next ›'), 'node/'. $nodes[$x+1]->nid, array('title' => check_plain($nodes[$x+1]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
        $output .= l(t('last »'), 'node/'. $nodes[$i]->nid, array('title' => check_plain($nodes[$i]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
      }
      else {
        // not required
        // $output .= '<span class="">' . t(t('next ›')) . ' </span>' . '<span class="">' . t(t('last »')) . ' </span>';
      }
      return $output; 
    }
  2. Pokud v adresáři používaného vzhledu nemáte soubor node-image.tpl.php:
    • Zkopírujte např. soubor themes/garland/node.tpl.php do adresáře používaného vzhledu a přejmenujte jej na node-image.tpl.php.
  3. Do souboru node-image.tpl.php přidejte na vhodné místo (nejlépe před "obsah"):
    <!-- Image Gallery Pager -->
    <div class="pager">
      <?php if ($page != 0 && $terms) { print custom_pager($node->nid); } ?>
    </div>

 

Navigace v galerii obrázků s náhledy

Doplnění navigace s náhledy do galerie obrázků u modulu Image.

Jako základ bylo použito řešení Pager with thumbnails doplněné o lokalizaci, číslování a velikosti náhledů.

  1. Do suboru template.php používaného vzhledu přidejte funkci:
    /**
     * Image Gallery Pager with thumbnails
     */
    function custom_pager_thumbnails($current_nid, $class = NULL) {
      $tid = reset(array_keys(taxonomy_node_get_terms($current_nid)));
      $result = db_query(db_rewrite_sql('SELECT n.nid, n.title, f.filepath FROM {node} n INNER JOIN {term_node} tn INNER JOIN {files} f ON n.nid = tn.nid AND n.nid = f.nid WHERE tn.tid = %s AND n.status = 1 AND f.filename = \'%s\' ORDER BY n.sticky DESC, n.created DESC, n.nid DESC'), $tid, 'thumbnail');
      while ($node = db_fetch_object($result)) {
        $nodes[++$i] = $node;
        if ($node->nid == $current_nid) $x = $i;
        // image size
        $image_info = image_get_info($nodes[$i]->filepath);
        $image_width[$i] = $image_info['width'];
        $image_height[$i] = $image_info['height'];
      }
      if ($i < 6) {
        while (++$j <= $i) {
          $output .= l('<img src="' . check_url(url('system/files/' . $nodes[$j]->filepath)) . '" alt="'. check_plain($nodes[$j]->title) . '" width="'. $image_width[$j] .'" height="'. $image_height[$j] .'" />', 'node/'. $nodes[$j]->nid, array('title' => check_plain($nodes[$j]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
        }
      }
      else {
        switch ($x) {
          case 1:
            // first image
            $y = array($i-1, $i, 1, 2, 3);
            break;
          case 2:
            // second image
            $y = array($i, 1, 2, 3, 4);
            break;
          case $i-1:
            // penultimate image
            $y = array($x-2, $x-1, $x, $i, 1);
            break;
          case $i:
            // last image
            $y = array($x-2, $x-1, $x, 1, 2);
            break;
          default:
            $y = array($x-2, $x-1, $x, $x+1, $x+2);
        }
        foreach($y as $index => $z) {
          if ($index != 2) {
            $output .= l('<img src="' . check_url(url('system/files/' . $nodes[$z]->filepath)) . '" alt="'. check_plain($nodes[$z]->title) . '" width="'. $image_width[$z] .'" height="'. $image_height[$z] .'" />', 'node/'. $nodes[$z]->nid, array('title' => '('. ($z) .') '. check_plain($nodes[$z]->title), 'class' => $class), NULL, NULL, FALSE, TRUE);
          }
          else {
            $output .= '<span class="active" title="('. ($z) .') '. check_plain($nodes[$z]->title) .'"><img src="' . check_url(url('system/files/' . $nodes[$z]->filepath)) . '" alt="'. check_plain($nodes[$z]->title) . '" width="'. $image_width[$z] .'" height="'. $image_height[$z] .'" /></span>';
          }
        }
      }
      return $output;
    }
  2. Pokud v adresáři používaného vzhledu nemáte soubor node-image.tpl.php:
    • Zkopírujte např. soubor themes/garland/node.tpl.php do adresáře používaného vzhledu a přejmenujte jej na node-image.tpl.php.
  3. Do souboru node-image.tpl.php přidejte na vhodné místo (nejlépe před "obsah"):
    <!-- Image Gallery Pager with thumbnails -->
    <div class="pager">
      <?php if ($page != 0 && $terms) { print custom_pager_thumbnails($node->nid); } ?>
    </div>
  4. Do souboru s kaskádovými styly používaného vzhledu (style.css) můžete vložit např.:
    /* Theme snippet: Image Gallery Pager with thumbnails */
    #content .pager {
      margin-top: 3px;
      margin-bottom: 3px;
    }
    #content .pager img {
      margin-bottom: 3px;
      vertical-align: middle;
    }
    #content .pager .active img {
      border: 5px solid #f93;
      margin-bottom: 0;
    }

 

Testování

  1. Vytvořte si druhou doménu, databázi a uživatele pro testování.
  2. Nasměřujte testovací doménu na stejný webový server.
  3. Vytvořte testovací adresář např. /site/test.mujweb.cz s konfiguračním souborem.
  4. Přejděte na testovací adresu a dokončete instalaci.
  5. Nyní můžete instalovat nové moduly a testovat web bez zásahu do oficiální verze.

Moduly

Výchozí instalace Drupalu obsahuje pouze základní funkčnost, kterou však lze velmi snadno rozšířit pomocí externích modulů dle konkrétních potřeb webu.

Hledání a výběr modulů mohou usnadnit statistiky:

Srovnání možností podobných modulů:

Umístění modulů (knihoven a témat vzhledu):

Drupal 8

Moduly:

Vyloučení modulu z aktualizace

Automatické aktualizace viz Drush.

Komerční moduly:

Porovnání modulů

Více viz Comparison of Breadcrumb Customizing modules.

 

Vlastní modul

Drupal 8

Dokumentace:

  • drupal.org/developing/modules/8
    (befused.com/drupal/first-drupal8-module)

Nástroje:

  • PhpStorm
  • drupal.org/project/console

Tipy:

  • blinkreaction.com/blog/video-and-blog-tutorial-programmatically-creating-a-block-in-drupal-8 (PhpStorm)
  • webomelette.com/drupal-8 (2015)
  • sitepoint.com/series/how-to-build-a-drupal-8-module (2014)
  • drupalwoo.com/content/blog/my-first-drupal-8-module (2014)
  • getlevelten.com/blog/ian-whitcomb/drupal-8-module-development-part-1-getting-started (2013)
  • sitepoint.com/how-to-build-multi-step-forms-in-drupal-8

Drupal 7

Při vytváření modulů bývá velmi užitečným pomocníkem modul Devel.

Váhy základních fází průběhu zpracovávání v Drupalu (bližší informace viz např. funkce theme):

  1. MODULE_preprocess(&$variables, $hook) – "nejnižší" priorita
  2. MODULE_preprocess_HOOK(&$variables)
  3. THEME_preprocess(&$variables, $hook)
  4. THEME_preprocess_HOOK(&$variables)
  5. MODULE_process(&$variables, $hook)
  6. MODULE_process_HOOK(&$variables) – "nejvyšší" priorita

Vytvoření vlastního mini modulu

Minimální adresářová strura:

  • my_module/
    • my_module.info
    • my_module.module (seznam vhodných hooks)
    • (my_module.install – použije se pouze při prvním zapnutí modulu)

Uvědomte se rozdíly mezi pojmy:

  1. instalace modulu – aplikuje se pouze při prvním zapnutí modulu (např. vytovří tabulky v databázi)
  2. zapnutí modulu – umožňuje modul používat a upravovat jeho nastavení
  3. vypnutí modulu – zachová nastavené hodnoty
  4. odinstalace modulu – umožňuje např. odstranit tabulky v databázi

Hooks

Hooks (háčky) můžeme chápat např. jako speciálně pojmenované PHP funkce. U vyhledané funkce nahraďte slovo hook_...za název modulu např. my_module_... např.:

hook_install() => my_module_install()
hook_enable() => my_module_enable()
hook_disable() => my_module_disable()

Bloky

Pro vytvořeního vlastního modulu, který má zobrazovat nějaký blok(y) jsou třeba minimálně dva hooky:

hook_block_info() => my_module_info()
hook_block_view() => my_module_view()

Při tvorbě bloku pomocí modulu je vhodné projít si demonstrační kód viz block_example.module.

Pro jednoduché uložení a získání dat je možné využít databázovou tabulku variable a funkce variable_set()variable_get().

Globálné proměnné např. o uživateli je možné získat zápisem:

global $user;

Textové řetězce je nutné zapisovat do funkce t().

Formátování zdrojového kódu

  • funkce se zapisují malými písmeny
  • počátení { se píše za názvem funkce, ukončující } se píše smostatn na novém řádku
  • pro odsazení se používají 2 znaky

Možnosti připojení CSS a JavaScriptu

  • my_module.info
    • stylesheets[all][] = my_module.css
      stylesheets[screen][] = my_module_screen.css
      stylesheets[print][] = my_module_print.css
    • scripts[] = my_module.js
  • my_module.module
    • /**
      * Implementation of hook_init().
      */
      function my_module_init() {
        $path = drupal_get_path('module', 'my_module');
        drupal_add_css($path . '/my_module.css');
        drupal_add_js($path . '/my_module.js');
      }
    • nebo inline styl vkládaný přímo do hlavičky stránky (užitečné např. pro dynamické CSS)
    • /**
      * Implementation of hook_init().
      */
      function my_module_init() {
        drupal_add_css('body {background: #ccc;}', array('group' => CSS_THEME, 'type' => 'inline'));
      }
      

Tipy:

  • Přidání vlastních CSS tříd do bloků (případně moduly Skinr , Fusion Accelerator a Block Class)
  • /**
    * Implements hook_preprocess_block()
    */
    function <your-module-name>_preprocess_block(&$vars) {
      /* Set shortcut variables. Hooray for less typing! */
      $block_id = $vars['block']->module . '-' . $vars['block']->delta;
      $classes = &$vars['classes_array'];
      $title_classes = &$vars['title_attributes_array']['class'];
      $content_classes = &$vars['content_attributes_array']['class'];
    
      /* Add global classes to all blocks */
      $title_classes[] = 'block-title';
      $content_classes[] = 'block-content';
    
      /* Uncomment the line below to see variables you can use to target a field */
      #print $block_id . '<br/>';
    
      /* Add classes based on the block delta. */
      switch ($block_id) {
        /* System Navigation block */
        case 'system-navigation':
          $classes[] = 'block-rounded';
          $title_classes[] = 'block-fancy-title';
          $content_classes[] = 'block-fancy-content';
          break;
        /* Main Content block */
        case 'system-main':
         $classes[] = 'clearfix';
         break;
    
        // Adding the same classes to more blocks – Grouping cases togheter
        /* Main Menu block */
        case 'system-main-menu':
        /* User Login block */
        case 'user-login':
          $title_classes[] = 'element-invisible';
          break;
      }
    }
  • Zobrazení pouze prvního obrázku v úvodníku
  • /**
    * Implements HOOK_entity_view().
    * Limit Teaser to display only the first image of a multiple field.
    */
    function <your-module-name>_entity_view($entity, $type, $view_mode, $langcode) {
      if($entity->type == 'story' && $view_mode == 'teaser') {
        //kpr($entity);
        $entity->content['field_image']['#items'] = array_slice($entity->content['field_image']['#items'], 0, 1);
      }
    }
  • Nastavení výchozí vertikální záložky při editaci uzlu
  • /**
    * Implements hook_form_FORM_ID_alter().
    */
    function <your-module-name>_form_node_form_alter(&$form, $form_state) {
      // Set “Publishing options” vertical tab as default for node edit page.
      $form['additional_settings']['#default_tab'] = 'edit-options'; // Where 'edit-options' is fieldset ID.
    }
  • Presave status
  • function <your-module-name>_node_presave($node) {
      if (user_is_anonymous()) $node->status = FALSE; // means unpublished
    }
  • Přidání vlastního inline scriptu
  • $inline_script = "
      <!-- My JavaScript -->
      <script>
        // JS Content
      </script>
      <noscript>
        // No Script
      </noscript>
      <!-- End My JavaScript -->
    ";
    $element = array(
      '#type' => 'markup',
      '#markup' => $inline_script,
    );
    drupal_add_html_head($element, 'my-javasript');
  • One node redirect

Platforma

Udržování instalační "platformy" nebo "profilu" usnadňuje začátek při vytváření nového webu.

Drupal:

Základní nastavení:

Označení modulů:

Moduly

Instalace:

Administrace (managment):

Uživatelské rozhraní:

Zálohování:

Lokalizace (jazyky):

Vzhled:

Off-line:

Responsive webdesign:

Vztahy (relace):

Obsah:

Formulářové prvky:

Komentáře:

Obrázky:

Multimédia:

Efekty a animace:

Navigace:

Uživatelské účty:

Oprávnění:

Knihovny:

Logika:

Přístupnost:

Bezpečnost:

SEO

Strukturovaná data (doporučené formáty):

Zdrojový kód:

Marketing:

Obchodní podmínky:

Povinnosti:

Sociální média (Publishing Drupal 7 Content to Social Media: Part 1):

Import/Export:

Dávkové zpracování:

Automatizace:

Výkon:

Vývoj:

Synchronizace:

Monitoring:

Aplikace:

Témata vzhledu (šablony):

Administrační témata vzhledu:

Propagace a reklama:

Distribuce:

Migrace jiných systémů do Drupalu

Terminologie:

Drupal Wordpress Joomla/Mambo
Page (stránka) Static Content (statický obsah)
Story (článek) Post (příspěvek) Dynamic Content Item (dynamický obsah)
Vocabulary (slovník)
  • Taxonomy term (termín taxonomie)
    • Taxonomy term (termín taxonomie)
Category (kategorie)
  • Term (termín)
    • Term (termín)
Section (sekce|rubrika|oddíl)
  • Section Title (...)
    • Category (...)
Theme (téma vzhledu) Template
Module (modul) Plugin (zásuvný modul) Component
Block (blok) Widget Module
Input filter   Mambot/Plugin
Primary Links   Menu-Horizontal
Navigation   Menu-Vertical
administrační rozhraní (např. modul Administration Menu)   Back-end (...)
Clean URL (čisté URL)   SEF (Search Engine Friendly – ...)
Teaser (úvodník – může se lišit od prvního odstavce textu "Body")   Introtext (úvodní text)
Body (hlavní obsahová část)   Maintext (hlavní text)
Breadcrumb (drobečková navigace)   Pathway (cesta)
Forum discussion (diskusní fórum)
Editor (editor|redaktor)
Search (hledání)
Region (oblast)
Comment (komentář|poznámka)
Subject / Title (předmět|téma / název|nadpis)
Preview (náhled)
HTML tag (HTML tag)
View (zobrazit|vidět)
Edit (upravit)
Advertising / Banner (reklama/baner)
Log in / Log out (přihlásit / odhlásit)
Profile (profil)
Avatar (avatar)
Access control (řízení přístupu)
Log (záznam)
Cache (mezipaměť)
Site maintenance (údržba webu)
RSS feed (RSS zdroj)
Parent-Child (nadřízený-podřízený)
Snippet (úryvek|výstřižek|fragment)

 

Upgrade Drupalu na vyšší verzi

Upgrade Drupalu verze 5 na 6

Příprava

  1. Zkontrolujte, zda Váš webhosting splňuje minimální požadavky.
  2. Zjistěte si, zda jsou k dispozici všechny Vámi používané moduly v požadované verzi (nejsnadněji instalací modulu Upgrade status).
    • Mohou nastat tyto situace:
      1. používaný modul může být již součástí jádra nové verze Drupalu
        • např. modul Update status (před upgradem je nutné jej odinstalovat)
      2. používaný modul může být již součástí jiného modulu
      3. některé moduly zatím nejsou kompatibilní s novou verzí Drupalu
        • např. modul Upgrade status (před upgradem je nutné jej odinstalovat)
  3. Stáhněte si nové verze modulů, které chcete po upgradu nadále používat, případně si převeďte vlastní moduly do nové verze.
    • Podívejte se na stránky modulů, zda tam nejsou důležité informace pro upgrade, případně si přečtěte instrukce v textových souborech modulů:
      • Image 5.x-1.9
        • u této verze je nutné před upgradem na Drupal 6.9 s Image 6.x-1.0-alpha4 ručně spustit níže uvedené SQL příkazy:
          CREATE TABLE image (`nid` INTEGER UNSIGNED NOT NULL, 
          `fid` INTEGER UNSIGNED NOT NULL, `image_size` VARCHAR(32) NOT NULL, 
          PRIMARY KEY (`nid`, `image_size`), INDEX image_fid(`fid`)) 
          /*!40100 DEFAULT CHARACTER SET utf8 */;
          INSERT INTO image SELECT DISTINCT f.nid, f.fid, f.filename
          FROM files f INNER JOIN node n ON f.nid = n.nid
          WHERE n.type='image' AND f.filename IN ('_original', 'thumbnail', 'preview')
          DELETE FROM file_revisions
          WHERE EXISTS (SELECT * FROM image WHERE image.fid = file_revisions.fid)
        • po převodu na Drupal 6.9 s Image 6.x-1.0-alpha4 tímto způsobem funguje hromadný image import obrázků (zobrazuje se výběr galerie), ale není možné vytvářet typ obsahu Image
      • Image 5.x-2.0-alpha3
        • po převodu na Drupal 6.9 s Image 6.x-1.0-alpha4 nefunguje hromadný image import (není vidět výběr galerie), ani vytváření typu obsahu Image
      • Image 5.x-2.x-dev (2009-Jan-23)
        • po převodu na Drupal 6.9 s Image 6.x-1.0-alpha4 nefunguje hromadný image import (není vidět výběr galerie), ani vytváření typu obsahu Image
      • Custom filter 5.x-1.2
        • po převodu na Drupal 6.9 s Custom filter 6.x-1.x-dev nefungují stávající a není možné importovat nové filtry
        • doporučuji odinstalovat a po upgradu na verzi 6 naistalovat, pak vše funguje
  4. Stáhněte nebo si převeďte používané téma do nové verze.
  5. Stáhněte si novou verzi Drupalu a přečtěte si instrukce v souboru UPGRADE.txt.

Převod

Celý postup nejprve vyzkoušejte nejlépe na kopii webu!

  1. Přihlaste se jako administrátor (uživatel s ID=1). Pokud se jako uživatel s ID=1 přihlásit nemůžete, nezavírejte prohlížeč do ukončení upgradu!
  2. Zkontrolujte logy, hlášení stavu a dostupné aktualizace – web by měl být "aktuální".
  3. Přepněte web do off-line módu (např. z logu zjistěte zda není nějaký uživatel přihlášen – neprovádí úpravy).
  4. Zazálohujte si existující web (soubory i databázi).
    • Určitě se Vám vyplatí zálohu souborů rozbalit a zkontrolovat, zda je úplná (např. pomocí Krusaderu a nástroje Synchronizovat adresáře). Exportu databáze budete muset věřit :)
  5. V admin/settings/performance vypněte optimalizaci přenosu dat CSS a JavaScript
  6. Přepněte téma na Garland (Bluemarine).
  7. Vytiskněte si aktuální stav modulů! enlightened
  8. Vypněte moduly, které nejsou součástí jádra (neodinstalovávejte je, ani je nemažte jinak přijdete o jejich nastavení).
  9. Pokud je to možné, odinstalujte všechny moduly, které ještě nejsou k dispozici v nové verzi, které jsou již integrovány do jádra Drupalu nebo jiných modulů, nebo ty které již dále nechcete používat:
    • update status
  10. Na webu smažte všechny soubory (databázi nemažte) kromě:
    • adresáře files (neměňte jeho umístění)
  11. Na web nakopírujte:
    • novou verzi Drupalu
      • vytvořte kopii souboru /sites/default/default.settings.php jako soubor s názvem /sites/default/settings.php
    • pro českou lokalizace Drupalu rozbalte archiv Czech translation do adresáře webu
    • používané moduly v nové verzi
    • novou nebo převedenou verzi tématu vzhledu
    • (na localhostu je potřeba nahraným souborům nastavit správné vlastníky a oprávnění)
  12. Porovnejte aktuální soubory se zálohovanými a upravte potřebné sekce:
    • .htaccess
    • robts.txt
    • (favicon.ico)
    • sites/default/settings.php
  13. Spusťte update.php skript (adresa-vaseho-webu/update.php).
    • pokud skript není možné spustit:
      • upravte v souboru settings.php proměnnou: $update_free_access = FALSE;
      • na: $update_free_access = TRUE;
      • spusťte update.php
      • po spuštění skriptu vraťte proměnnou do původního stavu
  14. Zkontrolujte hlášení stavu, logy, nastavení a funkčnost jádra webu.
  15. Povolte požadované moduly a spusťte opět update.php skript.
  16. Zkontrolujte oprávnění uživatelů.
  17. Zvolte požadované téma vzhledu.
  18. V admin/settings/performance můžete zapnout optimalizaci přenosu dat CSS a JavaScript
  19. Pro kompletní import lokalizace je vhodné odstranit a znovu přidat zvolený jazyk např. Czech.
  20. Z bezpečnostních důvodů můžete u všech souborů (kořen webu, modules, sites, themes atd.), které mají celý název psán velkými písmeny zakázat pomocí oprávnění k souboru jejich zobrazení přes webový prohlížeč.
  21. Volitelná nastavení:
    • naimportujte češtinu Drupalu (viz příloha lokalizace) a používaných modulů
    • přeindexace vyhledávání
    • kontrola aliasů (dávkové vygenerování aliasů u obsahu, který ještě žádný alias nemá)
  22. Zkontrolujte hlášení stavu, logy, nastavení a funkčnost celého webu.
  23. Přepněte web do on-line módu.
  24. Jestliže na testovací kopii webu proběhlo vše úspěšně, můžete výsledek zkopírovat na "ostrý" web (případně celý postup opakovat na "ostrém" webu).

Pro migraci dat je možné použít i placené služby např.:

  • cms2cms.com – automatická migrace dat mezi CMS systémy

Úspěšné převody Drupalu 5 na 6

  1. "problém" s modulem Image viz výše: Drupal 5.15 -> 6.9, Image 1.9 -> 1.0-alpha4, Comment Mail 1.1 -> 1.0-beta1, Countdown 1.1 -> 1.0, FCKeditor 2.1 -> 1.3-rc7, Pathauto 2.3 -> 1.0, Poormanscron 1.1 -> 1.0, Taxonomy breadcrumb 1.4 -> 1.0, Token 1.11 -> 1.11, SWF tools 2.2 -> 1.3, Captcha 3.2 -> 1.0-rc2
  2. Drupal 5.16 -> 6.10, Comment Mail 1.1 -> 1.0-beta1, FCKeditor 2.1 -> 1.3-rc7, IMCE 1.2 -> 1.2, Pathauto 2.3 -> 1.1, Site map 1.2 -> 1.0, Taxonomy breadcrumb 1.4 -> 1.0, Token 1.11 -> 1.11, Captcha 3.2 -> 1.0-rc2

Prevent file not found errors
After you upgrade your site you should check your site for bad links, to prevent the file not found errors. The http error number for these pages is 404. You can use a simple tool to check the links on your site. You will see errors in you Drupal Administrator logs as well as your web server error logs. Perform the following commands through the administrator menu on your site:

  • Enable contributed image module
    Administer >> Site building >> Modules
  • Set permissions so images can be written for userid running link check.
    Administer >> User management >> Access control
  • Enable the menu module
    Administer >> Site building >> Modules
  • Disable the logout menu
    Administer >> Site building >> Menus

From a command line on a computer connected to the Internet run wget with the following options:

The cookie this command is referring to is the cookie downloaded from your browser when you last logged into your Drupal site as an admin.

wget -r --delete-after --cookies=off --header='Cookie: PHPSESSID=xxx' http://example.com

-r to recursively crawl the site. --delete-after, --cookies=off tells the crawler not to use a cookie. --header=’Cookie: PHPSESSID=XXXX’ tells the Drupal site that session information will be passed in the http header. This should be repeated 2 more times; once for a regular userid, and once for an anonymous userid. After the link check is done check your Drupal admin logs and your webserver error logs. Look in your browser preferences to see what cookies you have for your url.

 

Upgrade Drupalu verze 6 na 7

Postupujte nejlépe dle dokumetace Upgrading from Drupal 6 to 7:

  1. Upgrade process
  2. Drupal 6 contributed modules that are in Drupal 7 core
  3. Upgrading contributed modules and themes from Drupal 6 to Drupal 7

Pro migraci dat je možné použít i placené služby např.:

  • cms2cms.com – automatická migrace dat mezi CMS systémy

Kontrola

U webových stránek je vhodné pravidelně provádět alespoň níže uvedené kontroly:

Stav

  1. Zkontrolujte aktuálnost systému, modulů a témat vzhledu.
  2. V admin/reports/status (Logy, Hlášení stavu) zkontrolujte varování a chybová hlášení systému.
  3. admin/reports/dblog (Logy, Poslední zpávy v logu) zkontrolujte zaznamenané události dle závažnosti.
  4. Site Audit (modul)

Stránky a odkazy

  1. Zkontrolujte funkčnost odkazů:
    • Link checker (modul)
    • Total Validator (komerční aplikace)
    • validator.w3.org/checklink
  2. Nastavte chybové stránky:
    • Fast 404 (modul)
    • Specify 403 and 404 error pages (Dokumentace)
      • Search 404 (modul) | CustomError (modul) | V admin/config/system/site-information (Konfigurace, Systém, Informace o webu) nastavte vhodné chybové stránky "403" a "404" např. "node"
      • Redirect 403 to User Login (modul)
  3. Zkontrolujte, zda je možné vaše stránky vytisknout:
    • Printer, email and PDF versions | PrintFriendly (modul)
    • sitepoint.com/create-a-customized-print-stylesheet-in-minutes

SEO

  1. Schema.org (modul) – usnadněte vyhledávačům práci a zobrazujte lidem relevantní informace
  2. Pathauto (modul) – nastavte "pěkná URL"
  3. Metatag (modul) – doplňte obsah o metadata
  4. Global Redirect (modul) – minimalizujte duplicitní obsah
  5. XML sitemap (modul) – zpřístupněte vyhledávačům mapu stránek, ať mohou lidem nabídnout váš obsah
  6. Nastavte si indexaci webu dle potřeb:
    • api.drupal.org/api/drupal/robots.txt/7
  7. Nespoléhejte se jen na soubor robots.txt:
    • kb.site5.com/security/how-to-automatically-block-someone-using-a-php-script/
    • kb.site5.com/security/how-to-block-bots-that-dont-respect-your-robots-txt-file/
  8. SEO Checklist (modul)
  9. developers.google.com/webmasters/mobile-sites/mobile-seo – průvodce optimalizací pro mobilní vyhledávače

Testování

  1. Prověřte funkčnost webu na příslušných zařízeních (mobile, tablet, desktop) a prohlížečích:
    • support.google.com/adsense/answer/6196932 – kontrola optimalizace pro mobily
      • google.com/webmasters/tools/mobile-friendly enlightened
  2. Zkontrolujte si web nástroji Google Webmaster Tools + Bing Webmaster Tools (služba)
  3. Ověřte si správnost kódu a přístupnost obsahu:
    • Total Validator (komerční aplikace)
    • validator.w3.org/ – HTML
    • jigsaw.w3.org/css-validator/ – CSS
    • achecker.ca/checker/ – přístupnost
  4. Prověřte funkčnost webových formulárů, odeslání a příjem příslušných e-mailů.
  5. Prověřte uživatelské účty, role a příslušná oprávnění.
  6. Uživatelské testy:
    • userfeel.com (komerční)

Soubory a databáze

  1. .htaccess
    • nastavte přesměrování "s" nebo "bez" www
    • github.com/drupal/drupal/blob/7.x/.htaccess
    • 3cwebservices.com/drupal/how-redirect-all-traffic-https-your-drupal-site
  2. V admin/config/media/file-system (Konfigurace, Média, Systém souborů) zkrontrolujte nastavení souborového systému (veřejný, privátní, dočasný).
  3. Zkontrolujte zobrazování ikony webu favicon.ico (adresní řádek, karta, oblíbené, zástupce)
  4. pantheon.io/blog/profiling-mysql-queries-better-performance

Úklid

  1. Zakažte/odstraňte:
    • testovací obsah
    • zkušební uživatelské účty
    • vývojové moduly
    • pomocná vývojová nastavení např. v tématu vzhledu
  2. V admin/config/development/logging (Konfigurace, Vývoj, Logování a chyby) zakažte zobrazování chybových zpráv.

Bezpečnost

  1. admin/config/people/accounts (Konfigurace, Uživatelé, Nastavení účtu) povolte registraci/zřizování nových účtů "pouze administrátoři", nejedná-li se ovšem o web, kde je samostatná registrace uživatelů žádoucí.
  2. U všech souborů (kořen webu, modules, sites, themes atd.), které mají celý název psán velkými písmeny zakažte pomocí oprávnění k souboru jejich zobrazení přes webový prohlížeč.:
    • COPYRIGHT.txt
    • CHANGELOG.txt
    • INSTALL.txt
    • INSTALL.mysql.txt
    • INSTALL.pgsql.txt
    • INSTALL.sqlite.txt
    • LICENSE.txt
    • MAINTAINERS.txt
    • README.txt
    • UPGRADE.txt
    • sites/all/modules/README.txt
    • sites/all/themes/README.txt
  3. Pomocí oprávnění znepřístupněte:
    • install.php
  4. Zkontrolujte nastavené oprávění k souborům a adresářům:
    • drupal.org/node/244924
  5. Password policy (modul)
  6. QA Checklist (modul)
  7. Security Review (modul)
  8. Používáte-li SSL certifikát, zkontrolujte správnost jeho instalace:
  9. Další info viz drupal.org/security/secure-configuration

Výkon

  1. Používejte vhodné rozměry a kvalitu obrázků pro konkrétní cílová zařízení (mobil, tablet, desktop atd.):
    • Picture (modul) 
  2. Místo "externích" fontů používejte radějí "interní":
    • localfont.com
    • fontsquirrel.com/tools/webfont-generator
  3. V admin/config/system/cron (Konfigurace, Systém, Cron) vypněte vestavěný cron a nastavte spouštění cronu na serveru:
    • drupal.org/cron
    • Elysia Cron (modul)
  4. V admin/config/development/performance (Konfigurace, Vývoj, Výkon) povolte mezipaměť a komprimaci:
    • drupal.org/node/326504
  5. Zakažte všechny nepoužívané a nepotřebné moduly např.:
    • color, comment, dashboard, help, locale, search, shortcut, overlay, toolbar atd.
    • všechny "UI" moduly
    • "Update Manager" modul
  6. Používate-li Views:
    • pokud je to možné, povolte "Time-Based caching" (záložka Advanced)
    • místo "Full pager" používejte raději "Mini pager" nebo modul "LitePager"
    • Views content cache (modul)
  7. Advanced CSS/JS Aggregation (modul)
    • drupal.stackexchange.com/questions/107311/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content
  8. Minify (modul)
    • minifycode.com
  9. Boost (modul)
    • Cache Expiration (modul) – drupal.org/node/2158615
  10. Performance and Scalability Checklist (modul)
  11. CDN (modul) | CloudFlare (služba)
  12. Přidejte vhodné indexy u nejvíce datazovaných tabulek a polí:
    • (modul Devel , Display query log)
      • stackoverflow.com/questions/3002605/how-to-add-indexes-to-mysql-tables
  13. Zkontrolujte rychlost načítání stránek:
    • webpagetest.org
    • developers.google.com/speed/pagespeed/insights enlightened
    • tools.pingdom.com/fpt
    • gtmetrix.com
  14. Open Source Web Performance Dashboard
  15. mod-pagespeed (nastavení serveru)

Zálohování

  1. Povolte revize obshu:
    • Node Revision Restrict (modul)
    • Diff (modul)
    • drupal.org/node/320614
  2. Backup and Migrate (modul) – lokálně i vzdáleně
    • ověřte funkčnost záloh
  3. Vytvořte úplnou off-line zálohu obsah webu např. pomocí aplikace HTTrack Website Copier

Návštěvnost

  1. Google Analytics (modul)
    • z důvodu vyššího výkonu povolte "Locally cache tracking code file"
    • gachecker.com

Dokumentace

  1. Vytvořte:
    • přehled účtů a oprávnění
    • uživatelský manuál
    • kompletní dokumentaci projektu

FAQ

Vývoj

Drupal 8

Nastavení:

Vývojové prostředí:

Vývoj:

TWIG

Vývojová prostředí (editory) podporující TWIG:

Komentáře

{# Comment #}

Proměnné

Proměnné mohou mít atributy nebo prvky:

{{ foo.bar }}
{{ foo['bar'] }}

Jestliže atribut obsahuje speciální znaky (např. mínus) použijte funkci attribute():

{# equivalent to the non-working foo.data-foo #}
{{ attribute(foo, 'data-foo') }}

Více viz twig.sensiolabs.org/doc/templates.html

YML

Poznámky:

Firmy

Společnosti a jednotlivci zabývající se Drupalem:

SEO

Drupal 8

Online Training (EN)

Online kurzy: