20 Joomlasztuczek, które mogą CI się przydać

66
20 JOOMLASZTUCZEK, KTÓRE MOGĄ CI SIĘ PRZYDAĆ JAW OR, LIPIEC 2 016 - WOJC IECH KLOCEK

Transcript of 20 Joomlasztuczek, które mogą CI się przydać

20 JOOMLASZTU

CZEK,

KTÓRE MOGĄ CI SIĘ

PRZYD

J AW O R , L

I PI E

C 20 1 6 - W

O J CI E

C H KL O C E K

1.NARZĘDZIA

C Z Y L I WA R S Z T A T P

R A C Y

PRZYDATNE NARZĘDZIA• Edytor tekstu zintegrowany z powłoką systemową – np. Notepad++• Klient FTP z dodatkowymi opcjami – np. Filezilla• Parę przeglądarek internetowych – główna Mozilla• Wtyczki do Mozilli• Firebug• Colorzilla

Dodatkowo• Znajomość CSS, HTML• Znajomość PHP• Znajomość frameworka Joomla!

2.BIAŁA STR

ONA PO

AKTUALIZ

ACJI LUB

PRZENIESIEN

IU

N A J CZ Ę S T S Z E P

R Z Y C Z Y N Y

BIAŁY EKRAN – NAJCZĘSTSZE PRZYCZYNY• Błąd pliku .htaccess• Błąd plików core• Nieodświeżona pamięć cache• Błędne ścieżki do katalogów cache, tmp i logs• Błąd wpisów w bazie danych

BIAŁY EKRAN – DIAGNOZOWANIE PRZYCZYNYCo zrobić aby znaleźć problem?• W System->Konfiguracja globalna->Serwer włączyć Raportowanie

błędów na Maksimum

BIAŁY EKRAN – DIAGNOZOWANIE PRZYCZYNYCo zrobić aby znaleźć problem?• Jeśli nie działa pliku configuration.php dodać linijkę

public $error_reporting = 'development';• Lub w pliku index.php katalogu głównego dodać na jego początku

ini_set('display_errors', TRUE); error_reporting(E_ALL);• Lub utworzyć w katalogu głównym plik php.ini o zawartości

display_errors = Onerror_reporting = E_ALL & ~E_NOTICE & ~E_STRICT

BIAŁY EKRAN – WYNIKI RAPORTOWANIA BŁĘDÓW

BIAŁY EKRAN – NAPRAWA BAZY DANYCH• Wejdź w Rozszerzenia->Instalacje->Baza danych• Jeśli widzisz jakieś komunikaty ostrzegawcze naciśnij guzik Napraw

3.WŁASNY W

YGLĄD W

PANELU LOGOWANIA DO

ZAPLECZA

WŁASNY WYGLĄD W PANELU LOGOWANIAAby zastosować własne elementy należy wejść do katalogu szablonu

używanego na zapleczu

• Wyświetlane logo znajduje się w folderze images• Tło i inne elementy można zmienić w pliku template.css

znajdującym się w katalogu css szablonu zaplecza

Ważne:Jeśli nie znasz css rozmiar wgrywanego logo niech będzie taki sam, jak istniejącego

WŁASNY WYGLĄD W PANELU LOGOWANIAPrzykład dla szablonu ISIS• Logo znajduje się w folderze images• Tło znajdziecie w katalogu css, plik templates.css• Linijka 7034 – dodać deklaracjębackground-image: url("../images/jawor.png");

4.ZNIKAJĄCE KLASY C

SS

C Z Y L I SZ A B L O N Y F

R A M E W O R K O W E

ZNIKAJĄCE KLASY CSS Dlaczego tak się dzieje?• Szablon frameworkowy ma włączony tryb developerski• Szablon ma włączoną kompresję Gzip• Szablon ma włączoną kompresję js i css• Szablon ma włączoną kompresję LESS• W Joomla jest włączona kompresja stron

• Aby móc swobodnie zmieniać zapisy w klasach css należy kompresję wyłączyć.• Zmiany nanoszone bezpośrednio w plikach css mogą być przywracane do stanu

pierwotnego przez framework• Dodawane klasy wstawiać w zakładce Custom Code w polu do tego

przeznaczonym

5.EDYTO

R JCE A

SPRAWDZANIE PO

LSKIEJ

PISOWNI

C Z Y L I P I S Z Ą C N A L U Z I E – T H X D L A M I C H A Ł T R Z E P I Z U R

JCE – SPRAWDZANIE PISOWNIJak to włączyć?• Na zapleczu należy wejść w Komponenty->JCE Editor->Profiles• Następnie wybrać aktywny profil, np. Default• Po wczytaniu profilu przejść do zakładki Plugin Parameters• Na liście z lewej odnaleźć ikonę Spellchecker i zaznaczyć ją• Wrócić do góry strony i zaznaczyć parametr State na wartość On• Zapisać• Po wejściu w artykuł pojawi się ikona sprawdzania pisowni

6.NIESFO

RNE AKAPITY

O K I EŁ Z N A Ć U

K Ł A D WI E

L O K O L U M N O W Y

NIESFORNE AKAPITY W UKŁADZIE KOLUMNOWYMp { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

NIESFORNE ARTYKUŁY – EFEKT DZIAŁANIA HYPENS

7.ARTY

KUŁY - W

ERSJE

P A N I E W

O J TK U , K

I ED Y Ś T

A M MI A

Ł E M …

WERSJE ARTYKUŁÓW

WERSJE ARTYKUŁÓW

8.RÓŻNE W

ERSJE

SZABLO

NU

D L A PO Z Y C J I

M E N U

RÓŻNE WERSJE SZABLONUCo to daje?• Możliwość ostylowania każdego elementu strony w inny sposób• Przypisanie innego wyglądu dla danej pozycji menu

Jak to zrobić?• Wejdź na zapleczu w Rozszerzenia->Szablony• Wybierz używany na froncie szablon zaznaczając pole przy nim• Naciśnij przycisk Skopiuj• Wejdź w kopię szablonu i zmień elementy, które chcesz mieć inne

9.NADPIS

YWANIE

SZABLO

NEM

N A J LE P S Z A P

R A K T Y K A

NAPISYWANIE SZABLONEMCo daje?• Naniesione zmiany nie zostaną usunięte wraz z aktualizacją

rozszerzenia czy wersji Joomla!

Jak to zrobić?• Wejdź w Komponenty->Szablony• Przy używanym szablonie wybierz element zaznaczony strzałką• Działa zarówno z szablonami witryny, jak i z szablonami zaplecza

NAPISYWANIE SZABLONEM

NAPISYWANIE SZABLONEM

10.INSTALO

WANIE BEZ

PAKIETU IN

STALACYJNEGO

T A K TE Ż S

I Ę D

A

INSTALOWANIE BEZ PAKIETU INSTALACYJNEGOCo to daje?• Zainstalowanie rozszerzeń pobranych z wcześniej stworzonej strony• Zainstalowanie szablonów z wcześniej stworzonej strony

11.BRAK PO

LSKICH ZNAKÓW

W GOOGLE FONTS

GOOGLE FONTS BEZ POLSKICH ZNAKÓW

• Zlokalizuj gdzie deklarowane są Twoje czcionki (najczęściej plik index.php lub któryś z plików css używanego szablonu witryny)

• Najczęściej wygląda to tak@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300)';@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);• Przejdź do Google Fonts i znajdź używaną na witrynie czcionkę• Sprawdź czy czcionka posiada obsługę języka polskiego wpisując wyrazy

zawierające polskie znaki diakrytyczne

GOOGLE FONTS BEZ POLSKICH ZNAKÓW• Wybierz czcionkę naciskając element zaznaczony poniżej

• Wybierz interesujące Cię kroje czcionki – pamiętaj, że im będzie ich więcej, tym wolniej będzie wczytywała się strona

GOOGLE FONTS BEZ POLSKICH ZNAKÓW• Aby korzystać z polskich znaków diakrytycznych należy zaznaczyć

• Rezultatem jest wygenerowanie linku, który należy wstawić na stronę@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext)';

• Na skróty:Jeśli masz pewność, że czcionka obsługuje polskie znaki dodaj na końcu jej deklaracji zmienną &subset=latin,latin-ext

GOOGLE FONTS BEZ POLSKICH ZNAKÓWEfekt

12.LIN

KI KANONICZNE DLA

ZDUPLIKO

WANYCH TREŚCI

C Z Y L I GŁ U P E K G

O O G L E

ZDUPLIKOWANIA TREŚĆW przypadku używania w wielu miejscach list kategorii artykułów, itp. elementów mogą pojawić się duplikaty treści (ten sam element dostępny pod różnymi adresamiURL, co jest bardzo niemile widziane przez roboty indeksujące Google).Jak sobie poradzić?• Wejdź na stronę StyleWare i zarejestruj się bezpłatnie• Po rejestracji pobierz wtyczkę• Zainstaluj ją i opublikujJeśli wszystko poszło jak należy zamiast szukanych duplikatów treści dostępnych pod Adresstrony.com/index.php&view=article&article=23 oraz adresstrony.com/index.php/ tresc będzie widoczna tylko jedna wersjaCzy działa to prawidłowo można sprawdzić podglądając kod strony, w którym powinno pojawić się dla danego wpisu coś takiego:<link href=„http://adresstrony.com/index.php/tresc” rel=„canonical”” />

13.WŁASNA STR

ONA BŁĘDU

C Z Y L I PE Ł N Y C

U S T O M

WŁASNA STRONA BŁĘDU• Utwórz artykuł przypisując go do kategorii Uncategorised• Na liście artykułów, po prawej stronie, znajdziesz jego ID (zapisz je lub zapamiętaj)• Wpisz w pasku przeglądarki adresAdresstrony.com/index.php?option=com_content&view=article&id=yy&Itemid=xxGdzie xx to numer ID utworzonego wcześniej artykułu• Jeśli strona się wyświetli poprawnie, wszystko jest ok.• Teraz w używanym przez siebie szablonie zaplecza edytuj plik error.php lub utwórz go• Jedyne co powinien posiadać ów plik to

if (($this->error->getCode()) == '404') {header('Location: ' . JRoute::_("index.php?option=com_content&view=article&id=xx&Itemid=xx", false));Exit;}

14.ZMIANA FO

RMATU

WYŚWIETLANEJ D

ATY

C Z Y L I US A J E

S T BE E E

ZMIANA FORMATU WYŚWIETLANEJ DATY• Może się zdarzyć, że data w artykułach jest wyświetlana w formacie amerykańskim• Wejdź w katalog languages/pl-PL poprzez klienta FTP• Odszukaj plik nazywający się pl-PL.ini• Najlepiej pobierz go na dysk i otwórz• Znajdź wartość DATE_FORMAT – po niej występują kolejne wersje formatów datyDATE_FORMAT_LC="l, d, F Y„DATE_FORMAT_LC1="l, d, F Y„DATE_FORMAT_LC2="l, d, F Y H:i„DATE_FORMAT_LC3="d F Y„DATE_FORMAT_LC4="d-m-y„DATE_FORMAT_JS1="d-m-y";• Domyślnie używany jest DATE_FORMAT_LC, w „” możesz wkleić inny formatWięcej o formatach daty można znaleźć na stronie

15.PO

WER .HTACCESS

S Z Y B C I EJ ,

B E Z P I EC Z N I E

J , B A R D Z I E

J SE O

.HTACCESSBez www i z www

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]</IfModule>

.HTACCESSInna wersja PHP

AddHandler application/x-httpd-php54 .php

.HTACCESSBlokowanie skanerówRewriteCond %{HTTP_USER_AGENT} ^[Ww]eb[Bb]andit [NC,OR]

Blokowanie odniesień (referencyjne)RewriteCond %{HTTP_REFERER} free-social-buttions\.com [NC,OR]

Blokowanie adresów IPDeny from 173.192.34.95 – pojedynczy adresDeny from 65.160.238.176/28 – zakres adresów

.HTACCESSCache strony

ExpiresByType image/jpeg "access plus 1 month„ ExpiresByType text/html "access plus 0

seconds„ ExpiresByType font/opentype "access plus 1 month„ ExpiresByType application/javascript "access plus 0

seconds"

16.DODANIE W

ŁASNEGO

KODU JAV

ASCRIPT LU

B

PHP

C Z Y L I JO O M L A ! J E

S Z C Z E MO C N I E

J SZ A

DODAWANIE WŁASNEGO KODU

Niebezpieczeństwa:• Niedoskonałość kodu• Podatność na ataki• Wadliwość działania• Szybkość działania strony• Brak standardowej integracji z bazą danych

Sourcerer• Wielokrotne wykorzystanie

dla różnych kodów• Wstawianie kodu php, js i

html• Kod jest wstawiany wewnątrz

artykułu lub modułu• Wersja darmowa i płatna

{source} <?php echo 'This text is placed through <strong>PHP</strong>!'; ?> {/source}

Add Custom JS• Możliwość dodania tylko

jednego pliku js• Obsługuje wyłącznie pliki

javascript• Pliki jest oddzielnym

tworem, który jest linkowany we wtyczce

• Darmowy

DODAWANIE WŁASNEGO KODU

17.QUICKSTA

RT

D O B R O D Z I EJ S

T W O CZ Y U

T R A P I EN I E

QUICKSTARTPlusy:• Widać jak co zrobić• Możliwość podejrzenia użytych styli css• Możliwość podglądnięcia sposobu używania dodatków

Minusy:• Mnóstwo niepotrzebnych elementów• Znaczne obciążenie bazy danych

QUICKSTARTCo zatem zrobić?• Zainstaluj quickstart lokalnie• Zainstaluj czystą wersję Joomla!, na której będziesz pracował• Podglądaj w QuickStarcie co i jak zrobić i nanoś zmiany na czystej

Joomla!

18.DODAW

ANIE IKON DO

MENU

P R O S T S Z E NI Ż

SI Ę

WY D A J E

DODAWANIE IKON DO MENU• Pobierz wtyczkę NS Font Awesome , zainstaluj ją i opublikuj• Pobierz i zainstaluj RokCandy• Wejdź w Komponenty->ROkCandy->Macros i utwórz nowe makro

guzikiem NEW• W polu makro wpisz

[icon]{icon}[/icon]• W polu Html wpisz

<i class="fa {icon}"></i>• Zapisz i wyjdź

DODAWANIE IKON DO MENU• Przejdź do menu->Jakieś menu->Jakaś pozycja menu• W nazwie menu wstaw na przykład[icon]fa-user[/icon] About

Pełną listę ikon znajdziesz na http://fontawesome.io/cheatsheet/

DODAWANIE IKON DO MENU• Przejdź do zakładki Opcje wyglądu strony i wpisz w polu Tytuł strony

dla przeglądarki to, co masz za deklaracją ikony w tytule – w przykładzie jest to About

• Sprawdź efekt

19.WIELO

JĘZYCZNOŚĆ

P O CO S

I Ę M

Ę C Z Y Ć

WIELOJĘZYCZNOŚĆWielojęzyczność w Joomla! można tworzyć ręcznie

Minusy:• Kopia artykułu dla każdego języka• Kopia pozycji menu dla każdego języka• Kopia kategorii dla każdego języka

• Dobre przy niewielkich stronach• Jeśli Klient sobie tak życzy

FaLang• Wszystko definiuje się w

jednym miejscu• Bez zbędnego skakania po

artykułach, modułach i pozycjach menu

• Znaczne ograniczenie ilości elementów strony

• Mniejsza baza danych• Wersja bezpłatna i płatna

Neno• Zautomatyzowana praca• Opcja tłumaczenia ręcznego,

automatycznego i profesjonalnego

• Oprócz treści tłumaczy elementy Joomla (Porównanie)

• Wsparcie dla ponad 60 języków

• Tłumaczenia profesjonalne tworzone przez tłumaczy przysięgłych

WIELOJĘZYCZNOŚĆ

20. WŁASNY M

ODUŁ W

ARTYKULE

B E Z DO D A W A N I A

DO K

A Ż D E G O AR T Y K U Ł U Z

O S O B N A

WŁASNY MODUŁ W ARTYKULE

Możliwości:• {loadposition}• Dodatki posiadające funkcję Load Module (np. Shortcodes Ultimate)• Dodatek Modules Anywhere

Ale co w przypadku, gdy chcemy w artykułach lub kategorii utworzyć boksy reklamowe?

WŁASNY MODUŁ W ARTYKULEDo dzieła• Znajdź element components->com_content->views->article->tmpl->default.html• Skopiuj go do szablonu do katalogu html->com_content->article (możesz również

zmienić nazwę pliku• W sekcji rozpoczynającej się komentarzem wstaw$document= JFactory::getDocument();$renderer= $document->loadRenderer('modules');$options = array('style' => 'xhtml');$position= 'reklama-w-artykule';$position1= 'srodreklama-w-artykule';

$positionx można wstawić dowolną ilość razy, w zależności od potrzeb

WŁASNY MODUŁ W ARTYKULE• W miejscu, w którym chcesz wyświetlić moduł wstaw kod<?php echo $renderer->render($position1, $options, null); ?>• Następnie utwórz moduł Własny HTML wpisując mu jako nazwę

pozycji wartość przypisaną do zmiennej, np. reklama-w-artykule

Ważne!Nazwa pozycji nie może być nazwą zdefiniowaną w używanym szablonie.

BONUS

C Z Y L I CO Ś Z

A DA R M O

BONUS PIERWSZY

Power .htaccessPobierz