Kod strony przechwytującej

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.

No comments

Trackbacks/Pingbacks

  1. 2 Strona przechwytująca - kod - […] Kod strony przechwytującej. Więcej na http://szkoleniajana.eu/kod-strony-przechwytujacej/ […]

Dodaj komentarz