Tworzenie indywidualnego szablonu WordPress według W3C

Odkąd powstała pierwsza strona internetowa (czyli 6 sierpnia 1991 roku), technologie internetowe są stale rozwijane – możemy to zauważyć na przykładzie urządzeń mobilnych. Kiedyś strony internetowe miały stałą szerokość dopasowaną do komputerów i nie dopasowywały się do rozdzielczości ekranów. Przy pierwszych urządzeniach przenośnych powstały takie alternatywy jak strona mobilna. W dużym skrócie mówiąc, należało stworzyć dwa serwisy – na komputery oraz urządzenia mobilne. Podczas wczytywania się strony, skrypt sprawdzał na jakim urządzeniu wczytywany jest serwis i ten pokazywał. Aż ostatecznie wprowadzona byłe responsywność. Już nie potrzebne są dwie strony, dziś jedna dopasowuje się do urządzenia.

Idąc dalej powstają również sklepy, blogi, fora oraz bardziej rozbudowane serwisy internetowe jak popularne ostatnio streamingi wideo. Jednak aby nie powstał chaos, od początku musiały zostać zastosowane pewne zalecenia w jaki sposób tworzyć serwisy internetowe. Przez lata powstały takie protokoły jak http czy https, oraz języki stron internetowych html i jego rozwinięcie xhtml.

Dzięki przyjętym standardom nie tylko deweloperzy wiedzą w jaki sposób tworzyć kod danej witryny, ale również twórcy przeglądarek internetowych oraz wyszukiwarek internetowych mogą tworzyć odpowiednie narzędzia dla użytkowników, do wyświetlania oraz przeszukiwania zasobów serwisów webowych. Dzięki przejrzystym zasadą w kodzie w ten sam sposób oznaczane są podstawowe elementy takie jak nagłówki, obrazki czy klasy z zawartością.

I bez znaczenia jest fakt czy mówimy o stronach internetowych 30 lat temu, czy za 30 lat… W przeszłości, dziś i w przyszłości, strony internetowe podlegać muszą wytyczonym ogólnym zasadą, aby w pełni poprawnie wyświetlać się na dostępnych urządzeniach.

W jaki sposób stworzyć poprawny kod strony internetowej?

Podczas tworzenia strony czy sklepu internetowego, powinniśmy jako twórcy posługiwać się przyjętymi standardami W3C – zasady te stworzone zostały, do poprawnego tworzenia serwisów internetowych. Nad standardami czuwa Konsorcjum World Wide Web, które powstało niedługo po pierwszej stronie internetowej, czyli w 1994 roku. Pod swoimi skrzydłami mają międzynarodowe standardy internetowe: HTML, CSS, XML, SVG, HTML itd.

Zalecenia napisane i zaakceptowane przez konsorcjum W3C są oficjalnymi założeniami przy tworzeniu witryn www.

Główna lista standardów, pod opieką W3C:

• HTML/XHTML
• CSS
• DOM – Document Object Model
• XML
• HTTP
• SVG
• VoiceXML
• SMIL/TimeText – Synchronized Multimedia Integration Language
• XSL/XSLT/XPath/XPointer
• WAI
• PICS

Serwisy zweryfikowane poprawnie, mają możliwość wstawić znaczek W3C do stopki witryny, informujący o prawidłowym stworzeniu portalu internetowego. Utrzymanie osiągniętego poziomu niestety nie jest stałe, o czym można się przekonać korzystając z darmowych walidatorów HTML / CSS w różnych odstępach czasowych – narzędzia te również udostępnia konsorcjum W3C na swoich stronach internetowych.

Rozwijając myśl, serwisy ze znaczkiem W3C nie mogą osiąść na laurach, lecz powinny być stale przez nas rozwijane oraz aktualizowane – według aktualnych wymóg. W innym przypadku znaczek W3C na stronie, będzie jedynie chwilowym wyróżnieniem.

Ciekawostką może być, że na tą chwilę ponad 400 organizacji z całego świata współpracuje z World Wide Web Consortium. Faktem jest również, że nie ma przymusu nakazującego wykorzystywania przyjętych reguł, jednak indywidualność ma swoją cenę. Jedynie serwisy dopasowane do standardów są doceniane w przeglądarkach internetowych – poprzez poprawne wyświetlanie się serwisu internetowego, oraz mają szansę na wysoką pozycję w wynikach wyszukiwarki Google. Dokładnie tak, Google posiada listę „must have” dotyczącą stron internetowych i na pewno jest to jedno z założeń.

W jaki sposób przetestować kod strony?

Bardzo prosto! Uruchamiamy przeglądarkę internetową zainstalowaną na naszym komputerze i wyszukujemy frazę „CSS Validation Service”. Otrzymamy w wynikach wyszukiwania listę serwisów oferujących sprawdzenie naszej witryny pod kątem standardów W3C dotyczących projektowania stron internetowych.

Formularze testera dają również wybór w formie dostarczenia kodu źródłowego do testu. Możemy podać adres domeny lub ewentualnie poprzez załadowanie pliku do walidatora. Trzecią opcją jest okno umożliwiające wstawienie fragmentu kodu.

Podstawowe funkcje CMS WordPress do wstawienia w kodzie

A jak to się ma w tematyce WordPress’a? Dokładnie tak samo jak z każdą inną stroną. WP wykorzystuje te same klasy co statyczna strona internetowa. Jednak w miejscu stałych elementów umieszczamy shortcode’y, którymi wypełniają wyznaczone miejsca treściami dodanymi w panelu administracyjnym. Dlatego bez znajomości programowania, mamy możliwości edycji zawartości strony internetowej.

Także posiadając stworzony statyczny kod, czyli taki który nie posiada możliwości zarządzania treścią w panelu administracyjnym, należy “ożywić go” poprzez wstawienie odpowiednich funkcji. Kod naszego serwisu musimy podzielić na elementy takie jak nagłówek (header.php), treść środkowa (index.php) oraz stopka (footer.php). Dodatkowo będziemy potrzebowali jeszcze pliku functions.php oraz style.css. Do stworzenia prostego szablonu to w zupełności nam wystarczy.

Nie będziemy wypisywać sobie wszystkich funkcji dostępnych w WP, gdyż byłby to materiał na kolejną serie artykułów. Przybliżę jedynie jak wyglądają dane elementy.

Przykładowe shortcode’y do wykorzystania w kodzie szablonu :

• wp_head() – umieszczamy go w nagłówku pomiędzyodpowiedzialny jest za wstawienie w nagłówku wszystkich plików CSS oraz JS potrzebny WP do poprawnej pracy
• get_header() oraz get_footer() – wykorzystujemy w index.php do pobrania wcześniej stworzonego nagłówka oraz stopki.
• the_title() – wyświetlanie nagłówka strony czy wpisu

Podsumowanie

Opowiedzieliśmy sobie w tym artykule o tworzenie serwisów internetowych zgodnych z przyjętymi standardami. Ważne jest aby się ich trzymać, gdyż tworząc serwis według własnego pomysłu (od strony kodowej), możemy mieć problem z poprawnym wyświetlaniem naszego serwisu w popularnych przeglądarkach internetowych. Pamiętajcie o tym 😊

Jeżeli macie jeszcze inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron to również śmiało pytajcie.