Przewodnik po BBCode

Wprowadzenie

Co to jest BBCode?
BBCode jest specjalną implementacją języka HTML, która daje lepszą kontrolę formatowania poszczególnych elementów w postach. Używanie BBCode na forum jest uzależnione od ustawień określanych przez administratora. Można wyłączyć BBCode w poszczególnych postach, zaznaczając odpowiednią funkcję w formularzu tworzenia posta. Sam BBCode jest podobny w składni do języka HTML, ale znaczniki zawarte są w nawiasach kwadratowych [przykład] zamiast w używanych w HTML-u nawiasach ostrych <przykład>. Każdy znacznik składa się ze znacznika otwierającego [nazwa_znacznika] i zamykającego [/nazwa_znacznika], np. [b][/b]. Zależnie od używanego szablonu można w bardzo łatwy sposób dodawać znaczniki BBCode do postów, używając odpowiednich przycisków znajdujących się na górze formularza tworzenia posta.

Formatowanie tekstu

Jak utworzyć pogrubiony, pochylony lub podkreślony tekst?
BBCode zawiera znaczniki umożliwiające szybką zmianę podstawowego wyglądu tekstu. Można to uzyskać w następujący sposób:
  • Aby pogrubić jakiś tekst, należy wstawić go pomiędzy znaczniki [b][/b]. Przykład:

    [b]Tekst[/b]

    będzie wyświetlany jako Tekst
  • Aby pochylić jakiś tekst, należy wstawić go pomiędzy znaczniki [i][/i]. Przykład:

    [i]Tekst[/i]

    będzie wyświetlany jako Tekst
  • Aby podkreślić jakiś tekst, należy wstawić go pomiędzy znaczniki [u][/u]. Przykład:

    [u]Tekst[/u]

    będzie wyświetlany jako Tekst.
Jak zmienić kolor lub rozmiar tekstu?
Aby zmienić kolor lub rozmiar tekstu można użyć znaczników wymienionych poniżej. Końcowy rezultat użycia znaczników formatujących zależy od używanej przeglądarki i systemu operacyjnego.
  • Zmianę koloru tekstu można uzyskać poprzez zawarcie tekstu pomiędzy znacznikami [color=] [/color]. Po znaku = należy podać nazwę koloru, np. red, blue, yellow, albo wartość szesnastkową, np. #FFFFFF, #000000. Przykładowo, aby uzyskać tekst w kolorze czerwonym, należy użyć kodu:

    [color=red]kolorze czerwonym[/color]

    albo

    [color=#FF0000]kolorze czerwonym[/color]

  • Zmianę rozmiaru tekstu można uzyskać podobnie, jak i w przypadku koloru poprzez zawarcie tekstu pomiędzy znacznikami [size=] [/size]. Ten znacznik jest uzależniony od używanego szablonu, niemniej zalecanym formatem jest wartość liczbowa wyrażona w procentach, określająca rozmiar tekstu począwszy od wartości 20 – bardzo mały, aż do 200 – bardzo duży. Na przykład, aby uzyskać:

    mały rozmiar tekstu należy użyć kodu [size=30]mały rozmiar tekstu[/size].

    Natomiast, aby uzyskać:

    duży rozmiar tekstu, należy użyć kodu [size=200]duży rozmiar tekstu[/size].
Czy można łączyć znaczniki formatujące?
Tak, naturalnie, że można. Na przykład, aby zwrócić czyjąś uwagę, można napisać:

[size=200][color=red][b]POPATRZ NA MNIE![/b][/color][/size].

Tak napisany kod zostanie wyświetlony następująco:

POPATRZ NA MNIE!

Nie zaleca się nadużywania w tekście tego typu formatowania. Proszę pamiętać o prawidłowym domykaniu znaczników – zachowaniu poprawnej ich kolejności. Na przykład następujący kod jest nieprawidłowy:

[b][u]Tekst[/b][/u].

Po słowie Tekst powinien zostać użyty znacznik zamykający [/u] Prawidłowa konstrukcja tego kodu powinna wyglądać następująco:

[b][u]Tekst[/u][/b]

Cytowanie i wstawianie tekstu o stałej szerokości znaków

Cytowanie tekstu w odpowiedziach
Są dwa sposoby cytowania tekstu – z odwołaniem i bez.
  • Cytując tekst podczas odpowiedzi na post, tekst posta jest dołączany do odpowiedzi w postaci bloku zawartego pomiędzy znacznikami [quote=" "][/quote]. Ta metoda umożliwia cytowanie z podaniem odwołania do autora posta lub innego dowolnego źródła. Na przykład, aby zacytować kawałek tekstu napisanego przez użytkownika o identyfikatorze „Adam”, należy napisać:

    [quote="Adam"]Tekst, który napisał Adam[/quote]

    Wynikiem tego będzie wyświetlanie przed cytowanym tekstem frazy “Adam pisze:. Należy obowiązkowo wstawić znaki cytowania (" ") wokół cytowanej nazwy źródła. W tym przypadku cytowanym źródłem jest „Adam”.
  • Druga metoda pozwala cytować tekst bez podawania źródła. Aby jej użyć, należy cytowany tekst umieścić między znacznikami [quote] i [/quote]. Wynikiem tak użytych znaczników cytowania będzie wyświetlanie przed cytowanym tekstem znaku “.
Wstawianie kodu lub tekstu o stałej szerokości znaków
Jeśli zachodzi potrzeba wstawienia do posta kawałka kodu lub cokolwiek, co wymaga stałej szerokości znaków, należy użyć znacznika [code][/code]. Przykład:

[code]echo "Oto jakiś kod";[/code]

Żadne znaki formatowania użyte między znacznikami [code] i [/code] nie będą przetwarzane podczas wyświetlania i zostaną wyświetlone w oryginalnej formie.

Tworzenie list

Tworzenie listy wypunktowanej
BBCode umożliwia tworzenie dwóch rodzajów list: wypunktowanej i rozmieszczonej hierarchicznie. Są one w zasadzie takie same, jak ich odpowiedniki w języku HTML. Lista wypunktowana przedstawia kolejne pozycje jedna po drugiej, oznaczając każdą znakiem wypunktowania w formie kropki. Aby utworzyć listę wypunktowaną, należy użyć znacznika [list][/list] i oznaczyć każdą pozycję za pomocą znacznika [*]. Przykładowo, aby utworzyć listę ulubionych kolorów:

  • Czerwony
  • Niebieski
  • Żółty
należy zastosować następujący kod:

[list]
[*]Czerwony
[*]Niebieski
[*]Żółty
[/list]

Możesz również zmienić styl listy wypunktowanej używając [list=disc][/list], [list=circle][/list] lub [list=square][/list].
Tworzenie listy rozmieszczonej hierarchicznie
Drugi typ list – rozmieszczona hierarchicznie, umożliwia kontrolę nad tym, co jest wyświetlane przed każdym elementem. Aby utworzyć listę numerowaną, należy użyć znacznika [list=1][/list], listę alfabetyczną – [list=a][/list]. Podobnie, jak w liście wypunktowanej poszczególne elementy listy są oznaczane znacznikiem [*]. Na przykład, aby utworzyć listę numerowaną:

  1. Idź do sklepu
  2. Kup nowy komputer
  3. Przeklnij go, gdy się zawiesi
należy zastosować następujący kod:

[list=1]
[*]Idź do sklepu
[*]Kup nowy komputer
[*]Przeklnij go, gdy się zawiesi
[/list]

Aby utworzyć listę alfabetyczną:

  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=a]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

lub
  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=A]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

Możesz również utworzyć listę:

  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=i]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

lub
  1. Pierwsza odpowiedź
  2. Druga odpowiedź
  3. Trzecia odpowiedź
należy zastosować następujący kod:

[list=I]
[*]Pierwsza odpowiedź
[*]Druga odpowiedź
[*]Trzecia odpowiedź
[/list]

Tworzenie odnośników

Odnośniki do innych stron
BBCode stosowany w phpBB umożliwia tworzenie URI (Uniform Resource Indicators), znanych też pod nazwą adresów URL oraz adresów www, na kilka różnych sposobów.
  • Pierwszy z nich wykorzystuje znacznik [url=][/url]. Wszystko, co zostanie wprowadzone za znakiem = zostanie uznane za adres URL. Na przykład, aby wstawić odnośnik do phpBB.com, gdzie opisem odnośnika będzie Odwiedź phpBB! należy użyć kodu:

    [url=http://www.phpbb.com]Odwiedź phpBB![/url].

    Odnośnik ten będzie otwierał się w tym samym lub nowym oknie – zależnie od ustawień przeglądarki użytkownika.
  • Jeżeli sam adres URL ma być wyświetlany jako opis odnośnika, należy użyć takiej konstrukcji znacznika:

    [url]http://www.phpbb.com/[/url]

    Taki kod wygeneruje następujący odnośnik: http://www.phpbb.com/
  • Dodatkowo phpBB zawiera funkcję zwaną magiczne odnośniki, która zmienia syntaktycznie (składniowo) poprawny adres URL na odnośnik, bez potrzeby dodawania jakichkolwiek znaczników lub nawet dopisywania na początku oznaczenia protokółu http://. Na przykład wpisanie www.phpbb.com w treści, zostanie automatycznie poprzedzone http:// i stanie się odnośnikiem www.phpbb.com podczas wyświetlania posta czy prywatnej wiadomości.
  • Podobnie jest z adresami e-mail. Można użyć znacznika BBCode [email][/email]. Adres e-mail zapisany w postaci

    [email]basia@domena.adr[/email]

    będzie wyświetlany jako basia@domena.adr. Można także po prostu wpisać basia@domena.adr. Adres ten podczas wyświetlania posta, czy prywatnej wiadomości, jeśli nie jest wyłączona funkcja magicznych odnośników, zostanie automatycznie zamieniony, tak jak w przypadku adresów URL, na odnośnik.
Adresy URL można wstawiać także do innych znaczników BBCode, takich jak [img][/img], [b][/b], itp. Zawsze należy pamiętać, aby prawidłowo otwierać i zamykać – zachować właściwą kolejność – znaczniki. Na przykład taka konstrukcja znaczników:

[url=http://www.phpbb.com/][img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/url][/img]

jest nieprawidłowa i może spowodować usunięcie posta, zatem należy zachować ostrożność i uważnie wstawiać znaczniki.

Wstawianie obrazków i załączników

Wstawianie obrazków do posta
BBCode używane w phpBB zawiera znacznik umożliwiający wstawianie obrazków do postów. Należy jednak pamiętać o dwóch istotnych kwestiach: wielu użytkowników nie lubi wielu obrazków w postach oraz wstawiany obrazek musi być dostępny w internecie – nie może istnieć tylko na komputerze lokalnym, chyba że jest on serwerem. Aby wstawić obrazek, należy zawrzeć jego adres URL pomiędzy znacznikami [img] i [/img]. Na przykład:

[img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/img]

Jeśli obrazek ma być odnośnikiem do jakiejś strony, należy jego adres URL umieścić pomiędzy znacznikami [url] i [/url] w następujący sposób:

[url=http://www.phpbb.com/][img]http://www.phpbb.com/theme/images/logos/blue/160x52.png[/img][/url]

Tak przygotowany odnośnik może wyglądać tak:

Wstawianie załączników do posta
Załączniki mogą być wstawiane do postów za pomocą znacznika [attachment=][/attachment]. Aby można go było używać, funkcja załączników na forum musi być włączona przez administratora witryny i użytkownicy muszą mieć odpowiednie uprawnienia. Na stronie tworzenia posta znajduje się etykieta „Dodaj załącznik” po kliknięciu, której otwiera się formularz dodawania załączników.

Różne

Czy można dodawać własne znaczniki?
Możliwość dodawania własnych znaczników mają administratorzy witryny posiadający odpowiednie uprawnienia.

Advanced BBCode Box BBCodes

Przekreślenie tekstu
[s]tekst[/s]

Example:
[s]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/s]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Indeks dolny
[sub]tekst[/sub]

Example:
[sub]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/sub] The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń. The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Indeks górny
[sup]tekst[/sup]

Example:
[sup]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/sup] The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń. The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Poświata tekstu
[glow=color]tekst[/glow]

Example:
[glow=red]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/glow]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Tekst z twardym cieniem
[dropshadow=color]tekst[/dropshadow]

Example:
[dropshadow=blue]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/dropshadow]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Rozmycie tekstu
[blur=color]tekst[/blur]

Example:
[blur=blue]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/blur]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Pulsujący tekst
[fade]tekst[/fade]

Example:
[fade]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/fade]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Pływający tekst
[marq=up|down|left|right]tekst[/marq]

Example:
[marq=left]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/marq]

Result:
The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.
Spoiler
[spoil]tekst[/spoil]

Example:
[spoil]The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.[/spoil]

Result:
Uwaga! Spoiler!The quick brown fox jumps over the lazy dog, a potem zażółć gęślą jaźń.