Skocz do zawartości

#1 | IPS4 Tips: Widżet powitalny


Reedzev_

Rekomendowane odpowiedzi

Hej, chciałbym wam dzisiaj pokazać, jak w prosty sposób zrobić blok powitalny dla zalogowanych użytkowników w IPS4.

Dowiecie się, jak zrobić taki o to blok:

Spoiler

e85523bd29106da490db57988ff14892.png

No cóż - czas na krok pierwszy.

1. Wgrywanie pluginu na bloki

Co prawda, na bloki PHP jest chyba opcja w Pages, ale tak czy siak, wolę tego używać, zwłaszcza że Pages nie posiadam :v

Link do pluginu: Zarejestruj się lub zaloguj, aby zobaczyć ukrytą treść!

Po wgraniu, trzeba się upewnić czy plugin ma włączone widżety PHP: wchodzimy w ACP i wybieramy kolejno: System -> Aplikacje i moduły -> Wtyczki -> ołówek (Edytuj) obok pluginu PHP & TXT Widget, po czym zaznaczamy "Active PHP Widget" i klikamy Zapisz.

Spoiler

eb26a3dc7dec38b625074c6142e2da35.png

2. Tworzenie szablonu

Czas na stworzenie szablonu naszego powitania. Wchodzimy w ACP, Wygląd > Wygląd > Style i szablony, klikamy w menu rozwijane stylu w którym chcemy dodać powitanie, a następnie Edytuj HTML i CSS.

Pokaże nam się strona z szablonami i plikami CSS naszego stylu, nas jednak interesują tylko szablony. Przewijamy na dół strony i klikamy "Nowy" i wybieramy "Szablon HTML".

To, jaką nazwę szablonu i lokalizację wybierzecie, to już od Was zależy, ale koniecznie trzeba ustawić zmienne na "$id,$name".

W moim przypadku będzie to wyglądać tak:

Spoiler

e89882777c891012d2656fc348f8580d.png

A skoro już mamy szablon, to czas dodać do niego zawartość.

Aby uzyskać taką zawartość jak na pierwszym screenie, użyję następującego kodu: 

<style>
[data-blockid="plugin_1_sodPhpWidget_3nyvaezqg"] .ipsWidget_inner {padding-left: 5px;}
[data-blockid="plugin_1_sodPhpWidget_3nyvaezqg"] h3 {
    padding: 10px !important;
    margin: 0;
    font-size: 14px;
    font-weight: 400 !important;
    position: relative;
    color: #fff;
    background: #3c6994 !important;
    border-radius: 2px 2px 0px 0px;
}
</style>
<p>Witaj <a contenteditable="false" data-ipshover="" data-ipshover-target="/profile/{$id}-uzytkownik/?do=hovercard" data-mentionid="{$id}" href="/profile/{$id}-uzytkownik/" rel="">@{$name}</a>!</p>
<p>Radzimy się zapoznać z <a href="/guidelines/">regulaminem</a> oraz życzymy miłego korzystania z forum <img src="/uploads/emoticons/59061d9707cf7_happy(4).png"></p>

{$id} oraz {$name} to zmienne, których wartość ustalimy ładując szablon w następnym kroku

UWAGA: Linki które są w moim szablonie prowadzą do głównej ścieżki strony, jeśli forum jest np. w folderze /forum/ (np. example.com/forum/), trzeba zamiast np. /guidelines/ dać /forum/guildelines/.

Podobnie z <style>, zamiast "plugin_1_sodPhpWidget_3nyvaezqg" wpisujemy nasz blockid - w następnym kroku dowiecie się, jak go uzyskać.

Oraz z emotikoną.

3. Tworzenie widżetu

Gdy już stworzymy szablon, trzeba stworzyć widżet - otwieramy pasek z widżetami i przenosimy w dowolne miejsce na stronie widżet PHP Code z kategorii PHP & TXT Widget.

Następnie edytujemy go i ustawiamy Widget Title (tytuł widżetu) na dowolny tekst. Pomijamy Widget Description i w Widget Contents się zacznie nasza zabawa z PHP.

Na początek zdefiniujmy dwie zmienne, ID i nazwa zalogowanego użytkownika:

<?php 
$name = \IPS\Member::loggedIn()->name;
$id = \IPS\Member::loggedIn()->member_id;
?>

Wracamy do ACP i sprawdzamy lokalizację szablonu. Najłatwiej jest wyszukać naszego szablonu: wtedy dokładnie wszystko widać.

Spoiler

bb78c3504c9966096c640379dbea4234.png

Na zdjęciu oznaczyłem napisy poszczególnymi numerkami, aby było łatwiej zrouzmieć poniższy kod:

$template = \IPS\Theme::i()->getTemplate( 'index', 'core', 'front' )->welcome_message($id,$name); 

Czyli, zastępując numerkami:

$template = \IPS\Theme::i()->getTemplate( '3', '1', '2' )->4($id,$name);

W ten sposób właśnie uzyskujemy szablon skonwertowany na czysty HTML.

Zostało już tylko wyświetlenie szablonu:

<?php 
$name = \IPS\Member::loggedIn()->name;
$id = \IPS\Member::loggedIn()->member_id;
$template = \IPS\Theme::i()->getTemplate( 'index', 'core', 'front' )->welcome_message($id,$name); 
print_r($template);
?>

No, i mamy efekt:

Spoiler

ce418a875472d598562a662ec177855b.png

Jak widać, nie załadował się tylko CSS - trzeba zmienić wspominany wcześniej blockid w szablonie. Aby go uzyskać, musimy zbadać element, po czym nam wyskoczy coś w tym stylu w przeglądarce:

Spoiler

12b63cc3bc5003f028a9f29e1ef99498.png

Strzałka wskazuje wartość, która nas interesuje. Podmieniamy ją w szablonie, zapisujemy, i wszystko działa jak należy:

Spoiler

10ba33e7fe06c9355c250237c635d5bd.png

 

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ixidi zablokował(a) ten temat
Nieaktywny
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...