Narzędzie Theme Customizer

Wprowadzenie

Theme Customizer jest wbudowanym w Framework EF4 narzędziem, które pozwala na zmianę stylów LESS powiązanych z wygladem szablonu bez potrzeby edycji plików szablonu.
Wszystkie zmiany możesz podejrzeć na stronie używając łatwego w użyciu panelu. Możesz również zapisać zmiany bezpośrednio w parametrach szablonu.

Narzędzie to pozwala zmienić wygląd szablonu szybko i łatwo.

Konfiguracja

Włączenie panelu

Najpier włącz panel Theme Customizer.
Znajdziesz go w zapleczu szablonu:

Extensions -> Template Manager -> [template_name]

Wejdź w zakładkę Advanced Features. Zobaczysz w niej parametry Theme Customizer:

Dostosowanie i podgląd zmian

Theme Customizer na froncie strony:

Zapisywanie ustawień

Po zalogowaniu do Theme Customizer zobaczysz dodatkowe przyciski zapisywania ustawień:

1. Save.

Po kliknięciu tego przycisku ustawienia zostaną zapisane w bieżącym szablonie (domyślne style zostaną nadpisane)

2. Save as file.

Po kliknięciu przycisku "Save as file", ustawienia Theme Customizer'a zostaną zapisane w pliku konfiguracyjnym a ustawienia bieżącego szablonu pozostaną niezmienione. W razie potrzeby możesz załadować ustawienia z pliku konfiguracyjnego, nadpiszą one domyśle style szablonu. Można to zrobić w zakładce "Settings Storage" w parametrach szablonu:

Dodanie nowego parametru

W naszym przykładzie dodamy parametr zmiany tła koloru stopki. Aby wyświetlić parametr w narzędziu Theme Customizer, musi on istnieć w parametrach szablonu.

Dodanie nowego parametru to parametrów szablonu

Zacznijmy od stworzenia nowego pramateru w szablonie.

Krok 1: Dodanie styl do pliku LESS

Najpierw musimy dodać styl który będzie odpowiadał za kolor tła stopki:

#jm-footer {
background: @JMfooterBackground;
}

@JMfooterBackground – to zmienna LESS zawierająca informację o wybranym kolorze.

Styl powinien byc zapisany w pliku layout.less ponieważ ten plik zawiera wszystkie style związane z układem szablonu.

Uwaga: Nazwa zmiennej LESS musi zaczynać się od liter JM.

Krok 2: Zdefiniowanie parametru

Włącz edycję pliku templateDetails.xml znajdującego się w katalogu:

/templates/[template_name]/

Wszystkie parametry wyświetlane w zakładce Color Modifications znajdują się w poniższej grupie:

<fields name="params">

    <fieldset name="jmcolormodifications" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">

    <!-- PARAMETERS -->

    </fieldset>

</fields>

Po pierwsze, zdefiniuj nową sekcję dla naszego parametru:

<field name="spacer_name" type="spacer" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER"/>

Następnie zdefiniuj sam parametr:

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" 

description="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC" />

Nazwa pola musi być taka sama jak nazwa zmiennej LESS. W naszym przykładzie to: JMfooterBackground.

Krok 3: Przechowanie nowego parametru

Włącz edycję pliku jm_template.phpznajdującego się w katalogu:

/templates/[template_name]/lib/

Dodaj poniższy kode:

$footerbackground = $this->params->get('JMfooterBackground', '#333333'); 

$bootstrap_vars['JMfooterBackground'] = $footerbackground;

$footerbackground - nazwa zmiennej PHP
JMfooterBackground - nazwa zmiennej LESS
#333333 - domyslna wartość zmiennej LESS

Przykład:

class JMTemplate extends JMFTemplate {

    public function postSetUp() {

        

        /*  put your code below other code within this class */

    

        $footerbackground = $this->params->get('JMfooterBackground', '#333333'); 

        $bootstrap_vars['JMfooterBackground'] = $footerbackground;

        

        /* make sure the following code is always the last one in this class */

        

        $this->params->set('jm_bootstrap_variables', $bootstrap_vars);

    

    }

}

Krok 4: Zdfiniowanie stałych językowych

Włącz edycję pliku en-GB.tpl_[template_name].ini znajdującego się w katalogu:

/templates/[template_name]/language/en-GB/

Zdefiniuj stałe językowe używane w naszym przykładzie:

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Footer"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choose the footer background color instead of the white color."

Teraz nowy parametr będzie widoczny w zakładce Color Modifications:

Dadanie nowego parametru do Theme Customizer

Jesteśmy teraz gotowi do dodania nowego parametru w Theme Customizer.

Krok 1: Zdefiniowanie nowego parametru

Włącz edycję pliku templateDetails.xml znajdującego się w katalogu:

/templates/[template_name]/

Wszystkie parametry wyświetlane w Theme Customizer znajdują się w grupie:

<fields name="themecustomiser">

    <fieldset name="th-basic-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">

        <!-- COLOR PARAMETERS -->

    </fieldset>

    <fieldset name="th-font-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FONT_SETTINGS_LABEL">

        <!-- FONT PARAMETERS -->

    </fieldset>

</fields>

Najpierw zdefiniuj sekcję dla nowego parametru:

<field type="jmacchelper" hidden="true" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER" name="Footer" />

Następnie zdefiniuj parametr:

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" />

Nazwa pola musi być taka sama jak nazwa zmiennej LESS, w naszym przykładzie to: JMfooterBackground.

Krok 2: Zdefinuj stałe językowe

Włącz edycję pliku en-GB.tpl_[template_name].ini znajdującego się w katalogu:

/templates/[template_name]/language/en-GB/

Zdefiniuj stałe językowe używane w naszym przykładzie:

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Footer"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choose the footer background color instead of the white color."

Uwaga: W naszym przykładzie stałe językowe są takie same dla parametrów szablonu i parametrów Theme Customizer, ale w razie potrzeby możesz zdefiniować różne.

Teraz nowy parametr jest widoczny w Theme Customizer: