Strony przechwytujące – tworzenie

Twoja strona przechwytująca na bloga

Jak tworzyć strony przechwytujące, czyli edycja.

Tworzenie stron przechwytującychJak już plik szablonu strony na bloga wczytany masz ( o tym znajdziesz w poprzednim wpisie), to już strony przechwytujące majstrujesz w kilka minut. Może być i jedna za drugą. Dodajesz nową stronę do bloga, w jej edycji wybierasz szablon strony przechwytującej, dodajesz i edytujesz tekst jak dla zwykłej strony bloga. Na koniec publikujesz i masz stronę przechwytującą darmo całkiem.

Edytor bloga ubogi ciut.

Edytor tekstów bloga w domyślnej konfiguracji ciut mało opcji dla edycji tekstu posiada. To i kłopot jaki jest z formatowanie tekstu na stronie. Dla zaradzanie tej to niedogodności starczy wtyczkę jedną do bloga dodać. Doda co trzeba do paska narzędziowego edytora. Już bez problemów nijakich przerobisz tekst na stronie przechwytującej po swojemu, wedle fantazji osobistej.
Wtyczka zaś zwie się TinyMCE Advanced. Dodać ową do bloga kłopot żaden, sam zresztą wiesz.

Nie tylko strony przechwytujące.

Szablonu strony idzie używać i do innych spraw, nie tylko dla stron przechwytujących. U mnie, na tym szablonie jest strona polityki prywatności bloga i kilka innych stron. Tam, gdzie nie chcę pokazywać całego przybytku, znaczy widzialnego nagłówka bloga z menu, sliderem, paskami bocznymi i innymi takimi, szablonu tego używam. Ty zrobisz, jak zechcesz.
A mniej na uwadze, to tak między nami, co blog Twój powinien, a w zasadzie musi posiadać stronę polityki prywatności i stronę informacyjną o ciasteczkach, czyli plikach cokies. Tak wymagają przepisy przeróżniste, za brak kara może być, czasem dotkliwa.
Kiedy tam o tym napiszę specjalnie, z przykładami.

Grafika dla przycisku formularza zapisu.

Formularz zapisu pełną gębą przycisk graficzny posiadać powinien. To jego atrakcyjność podnosi i ciut do kliknięcia nakłania. Co może i konwersję podnieść.
Taki to przycisk prosto do formularza wstawić. Ot, podmieniasz ciut wiersza jednego w kodzie formularza samego, tam gdzie masz akurat przycisk opisany.
Oto zamiast tego co masz w oryginalnej wersji formularza, tu akurat dla autorespondera GVO
<input type=”submit” value=”Wyślij” />
Umieszczasz wpis
<input type=”image” src=”http://szkoleniajana.eu/alokata/PrzyciskUsyzkajDostep.png”  />
Zmieniasz tam typ pola  z submit na image, czyli graficzny. Dalej podajesz URL pliku z grafiką przycisku.
Formularz będzie działała dalej normalnie, po kliknięciu grafiki dane zostaną wysłane do autorespondera.
Gotową grafikę przycisków, zapisaną na jednym z moich serwerów, możesz bez problemów jakich używać do woli.
Starczy jej adres wpisać jako wartość parametru src.
Dla dostania namiarów na grafikę wypełnij i wyślij formularz na stronie http://szkoleniajana.eu/twoja-strona-przechwytujaca/
W jednej z wiadomości otrzymasz adres, gdzie masz przygotowane grafiki. Jak byś jakiej specjalnie potrzebował, napisz do mnie. W miarę dostępnego czasu postaram się przygotować co potrzebujesz. Adres do kontaktu też w wiadomości dostaniesz.

Kod strony przechwytującej

Kod strony przechwytującej wcale nieskomplikowany

Kod strony przechwytującej prosty a niepogmatwany.

Kod strony przechwytującejKod szablonu strony przechwytującej, w wersji podstawowej oczywista, liczy ledwie 61 wierszy ( linijek niby).
Tak po prawdzie, to nie musisz studiować togo, co dalej napisałem. Ale jak ciekaw jesteś, co i jak, co z czego się bierze, to czytaj dalej. Wiele ciekawego poznasz, a pożytecznego.

Kod szablonu strony porać możesz tu
http://szkoleniajana.eu/szkolenia-jana-witam/
Tyle, co katalog z plikiem hasłem chroniony jest. Hasło jest sposobność dostać w tym miejscu
http://szkoleniajana.eu/twoja-strona-przechwytujaca/
Link do pobrania edytora tekstu Notepad++ niezbędnego do przeglądania i edycji kodu strony znajdzie w poprzednim wpisie o stronie przechwytującej.

Cały kod szablonu umieszczony jest w pliku PHP. Nic to sprawy naszej nie komplikuje, a musi tak być. Tylko wtedy silnik WordPress rozpozna, że to jest szablon strony.
Cały ten tam PHP jest przetwarzany przez parser na serwerze i odsyłany do przeglądarki jako zwykła strona HTML. I to całkowicie poprawna strona HTML.
Poprawna, znaczy zawierająca trzy sekcje:
– Definicję typu dokumentu –> wiersz kodu 7
– Nagłówek dokumentu html (header) –> wiersz 11
– Ciało strony (body) –> wiersz 22
– Tu dodatkowo wstawka PHP z nazwą szablonu strony –> wiersz 1
Powyższe znajdziesz w grafice 1 Poprwny dokument HTML co masz niżej w glaerii.

2 Nazwa szablonu strony przechwytującej.

Nazwa szablonu zawarta jest w pierwszej wstawce PHP, wiersz od 1 do 5 kodu strony.
Znacznik <? php informuje parser PHP że ma przejść z trybu html do trybu PHP, czyli zacząć przetwarzać kod PHP.
W trybie HTML parser nie przetwarza kodu i odsyła go do przeglądarki tak, jak jest napisany.
Znacznik / oznacza początek komentarza, parser PHP ignoruje to, co znajduje się po znaczniku komentarza.
Tu właśnie znajduje się tytuł naszej strony, tu konkretnie Template Name: Jana Szablon Przechwyt. I tak nazwa szablonu strony wyświetlana będzie w menu wyboru szablonu strony na zapleczu WordPress.
Możesz tu wpisać cokolwiek, oczywiście po dwukropku, bo Template Name musisz zachować nietknięte.
Dalej masz znacznik końca komentarza  
/, i wreszcie znacznik końca kodu PHP ?>. Ten znacznik przełącza parser z trybu PHP do trybu HTML.

3 Deklaracja typu dokumentu HTML

Ta część kodu strony przechwytującej określa odmianę języka HTML użytego na stronie. Tu masz akurat Transitional DTD, czyli wersja przejściowa dopuszczająca stosowanie „nielegalnych” elementów, takich jak pływające ramki.
Tu nie masz potrzeby niczego przeinaczać. Bez tej sekcji strona też się będzie wyświetlać, tyle że już nie będzie poprawnym dokumentem HTML.
Masz tu wreszcie znaczni html otwierający ( rozpoczynający) dokument html.

4 Nagłówek dokumentu

Nagłówek dokumentu nie jest wyświetlany przez przeglądarkę. Ale zawiera niezbędne informacje dla prawidłowego wyświetlania strony internetowej.
Rozpoczyna się od znacznika <head> a kończy znacznikiem </head>.

Wiersz <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> deklaruje typ kodowania znaków strony html, tu akurat UTF-8, co jest poprane i wystarczające.

Wiersz <link rel=”stylesheet” href=”http://szkoleniajana.eu/wp-content/themes/Minimal/style.css” type=”text/css” media=”screen” /> wskazuje na arkusz styli skórki bloga. Pozwala to na wykorzystanie formatowania takiego, jak dla całego bloga.
U Ciebie będzie to inny arkusz, inny adres jego, jak go odnaleźć, dowiesz się z poradnika Video dodanego do wpisu tego.

Wiersz <link rel=”Shortcut icon” href=”http://szkoleniajana.eu//favicon.ico” /> wskazuje na lokalizację pliku ikony ulubione. Ten plik powinien znajdować się w katalogu głównym Twojego bloga.

Wiersze
<title>
<?php
echo the_title();
?>
</title>
to znacznik title którego zawartość określa tytuł strony da przeglądarki internetowej. Wewnątrz znacznika masz użytą funkcję PHP umieszczającą w tym miejscu tytuł strony, jaki wpiszesz przy edycji swojej strony przechwytującej na zapleczu bloga.

Nagłówek można bardziej rozbudować, ale o tym będzie w kolejnym wpisie i poradniku. Tu zajmujemy się najprostszą wersją.

5 Wewnętrzny arkusz styli CSS

W nagłówku dokumentu umieściłem wewnętrzny arkusz styli CSS. Zawarte tam reguły pozycjonują warstwę komunikat. Znaczy ustawiają jej wyśrodkowanie na stronie oraz określają szerokość na 750 pikseli.
W tej to warstwie wyświetlane jest, to co wpiszesz jako zawartość strony w czasie edycji na zapleczu bloga. Oczywiście do tego korzystasz z edytora tekstu WordPress.

6 Ciało strony

To, co znajduje się w sekcji body jest wyświetlane przez przeglądarkę internetową. Tu akurat nie wszystko, bo część wierszy to znowu wstawki PHP, znaczy funkcje. Przeglądarka otrzyma wynik ich działania, czyli to co objęte znacznikami php będzie przetworzone do kodu html, i tak wysłane do przeglądarki.
Masz tu znacznik div wstawiający na stronę html warstwę. Warstwa to niby taki pojemnik, w którym możesz wyświetlać wszystko, co dusza zapragnie.
<div id=”komunikat”>
Te całe tam id=”komunikat” to nadanie warstwie unikatowej nazwy ( id). I dla tej unikatowej nazwy właśnie masz określone reguły w arkuszu styli CSS.

Dalej, wewnątrz warstwy komunikat masz znowu pętlę PHP która sprawdza czy post istnieje i odpowiednią funkcją wyświetla jego zawartość w tej to warstwie komunikat.

Ot i cała zawartość własnej strony przechwytującej. To co tam umieścisz, to już od potrzeby Twojej i fantazji uzależnione.