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.

Osobista strona przechwytująca

Osobista strona przechwytująca

Twoja strona przechwytująca na bloga.

Osobista strona przechwytującaStrona przechwytująca, czy tam z angielskiego landing page, wiadomo przydatna niezmiernie. Tyle że darmo dostać ciężko, a i nie zawsze dobra jest. Zawsze masz możność nabycia jakiej tam wtyczki do bloga, co taką stronę zmajstrować zezwala.
Ja tu z pomocą śpieszę.
Otóż ni mniej, nie więcej, nauczę każdego potrzebującego jak taką stronę przechwytującą na bloga osobiście zmajstrować. To nic, że na oka rzut pierwszy zawiłe to się zdaje być. To pozór tylko, sam przekonasz się.
W kilku postach, a i poradnikach video do nich zapodanych, wszystko prosto i jasno wyłożę. Ten wpis jest pierwszy.

Strona przechwytująca w kilku słowach.

Rzecz cała bloga się tyczy. Otóż jest konieczność zrobienia szablonu strony dla bloga, dla aktywnego tematu graficznego. Znaczy sam szablon strony, pasował będzie do każdego tematu graficznego, bez różnicy żadnej.
Po zmajstrowaniu takiegoż to szablonu trzeba owego koniecznie do odpowiedniego katalogu bloga przenieść. A tak konkretnie to do katalogu aktywnego tematu graficznego. Nie przejmuj się, wszystko prosto i jasno objaśnione miał będziesz.
Ten przeniesiony szablon strony pojawi się jako kolejna pozycja do wyboru szablony w trakcie tworzenia nowej strony na bloga.
Czyli tworzysz nową stronę na blogu, wybierasz szablon strony przechwytującej. Edytujesz to normalnie w edytorze WordPress, jak każdą inną stronę. Czyli w użytkowaniu proste i łatwe.

Strona przechwytująca, co wiedzieć trzeba.

Ano na teraz, czyli dzień dobry nic. Wszystko objaśnione będzie.
Użyjemy trochę html, ciut reguł styli css, odrobinkę języka Java. Tylko tyle, ile trzeba będzie, bo bez tego rady nie da.  Zresztą każdy dostanie gotowy kod takiej strony, tylko skopiować i na serwer wysłać. A dalej już wiadomo jak spożytkować.
A wszystko, co w tym kodzie, objaśnione co by wiadomo jak w razie czego przeinaczyć, dla osobistych potrzeb przystosować.

Co potrzebne będzie?

Po pierwsze ciut lepszy edytor tekstowy niż ten Windowsa, znaczy notatnik. W sam raz będzie darmowy Notepad++.
W sam raz do edycji kodu strony się nada, bez problemu obsługuje skrypty php. Adres do jego pobrania masz tu:
http://notepad-plus-plus.org/download/v6.6.3.html

Dalej wielce pomocny jaki klient FTP, na ten przykład FileZila. Znaczy niekoniecznie, bo wykorzystać można menadżera plików z Cpanel Twojego konta hostingowego.
Link do pobrania klienta FTP masz tu:
https://filezilla-project.org/download.php?type=client

Więcej nie trzeba nic, prócz Twojej głowy oczywista.
W następnym wpisie i poradniku zajmiemy się już majstrowaniem strony.