WordPress, idealna strona startowa

Powrót do bloga

Strona startowa to dosyć często poruszany temat na niektórych forach dotyczących WordPress i co jakiś czas pada pytanie jak stworzyć taką stronę intro w WordPressie. Różnie jest to nazywane: strona intro, strona startowa, strona z obrazkiem, gdzie po kliknięciu w link/obrazek dopiero przenosi nas do właściwej strony. Postanowiłem dodać nieco obszerniejszy wpis na moim blogu, opisujący co należy zrobić, aby taki efekt osiągnąć.

Będziemy pracować na motywie Twenty Eleven, jest to jeden z moich ulubionych motywów, ale postaram się pokazać wszystko w miarę jasny i jak najbardziej uniwersalny sposób.

W tym wpisie pokażę, jak zrobić stronę startową w WordPress bazując na już istniejących plikach motywu, ale będziemy też tworzyć zupełnie nowe pliki.

WordPress ze stroną startową

Chcemy, aby po wpisaniu adresu głównego naszej strony, czyli przykładowo https://wpadmin.pl wyskakiwała strona startowa. Co moglibyśmy umieścić na takiej stronie startowej? W zależności i potrzeb praktycznie wszystko, ale przeważnie widać na takich „intrach” rzeczy w stylu banera promującego daną witrynę, lub zapraszającego do wejścia dalej, albo na przykład tekst z informującą o zawartości witryny nie do końca przeznaczonej dla szerokiego grona odbiorców… 😉 Utworzyłem demo strony, które może posłużyć jako przykład strony startowej.

Zanim zaczniemy przypominam o konieczności utworzenia kopii zapasowych, tak abyśmy mieli do czego wrócić w razie czego. Najlepiej będzie zacząć od utworzenia child theme, albo zainstalowania WordPress w testowym środowisku np. na serwerze lokalnym.

 

Tworzymy szablon strony startowej od początku

Zacznijmy od utworzenia (w katalogu motywu) nowego pliku pod nazwą page-intro.php. Otwieramy plik do edycji i dodajemy ten oto przykładowy kod:

<?php /* Template Name: Strona intro */ ?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja strona intro</title>
</head>
<body style="text-align:center;">

<h1><?php bloginfo('name'); ?></h1>
<p><a href="<?php echo get_permalink(get_option('page_for_posts')); ?>">Wejdź!</a></p>

</body>
</html>

W pierwszej linijce znajduje się „specjalny komentarz”, dzięki któremu szablon strony zostanie wykryty przez WordPress i możliwe będzie jego wykorzystanie jako szablon do renderowania wskazanej przez nas strony. Tak, wiem jak to brzmi. 🙂 Plik, który właśnie tworzymy będzie szablonem, który WP ma wykorzystać do wyświetlenia strony intra.

Użyta tutaj funkcja bloginfo() ma za zadanie wyświetlić nazwę naszej strony. Jest to dynamiczna funkcja pobierająca wartość ustawioną w opcjach WordPressa (Ustawienia → Ogólne → Tytuł witryny).

Natomiast konstrukcja ustawiona jako wartość atrybutu href linka, czyli to:

<?php echo get_permalink(get_option('page_for_posts')); ?>

zwróci adres do aktualnie ustawionej w opcjach strony z wpisami – strony głównej, lub tej na której użytkownik ma się znaleźć po kliknięciu w nasz link (Ustawienia → Czytanie → Strona z wpisami).

Dodajemy stronę startową do WordPress

Po zapisaniu pliku. W kokpicie tworzymy nową pustą stronę, z dowolnym tytułem, proponuję Strona intro. W sekcji Atrybuty strony, znajdującej się w skrajnie prawej kolumnie podczas edycji strony, powinniśmy mieć możliwość ustawienia Szablonu, na nasz nowo utworzony szablon, czyli Strona intro. Publikujemy stronę.

WordPress - Budowanie strony startowej

Teraz wystarczy już tylko w opcjach czytania ustawić Stronę intro jako stronę główną (Ustawienia → Czytanie → strona główna). Zapisujemy zmiany.

WordPress - Budowanie strony startowej

Uwagi

Jeżeli w opcjach WordPressa nie ustawimy strony z wpisami (Ustawienia → Czytanie → Strona z wpisami), to kliknięcie w link będzie przenosiło użytkownika do strony głównej, którą dzięki nam, jest teraz strona intro. Innymi słowy link „Wejdź” będzie prowadził z powrotem do strony intra. Aby to naprawić należy utworzyć nową pustą stronę, w tytule wpisać np. Blog, albo Newsy, albo Strona Główna, a następnie ustawić tę stronę jako stronę z wpisami. Po zatwierdzeniu zmian, link na stronie startowej powinien się naprawić i prawidłowo przenosić do ustawionej strony.

WordPress Strona intro

W tym przykładzie treść strony startowej jest zrobiona na „sztywno”, przede wszystkim dla uproszczenia przykładu, ale podany kod można jeszcze wzbogacić na wiele różnych sposobów, jak pokazałem już na tym przykładzie możliwości są nieograniczone. Razić w tym momencie może brak funkcji wp_head() i wp_footer(), bez nich nie zobaczymy chociażby toolbara WP.

Gdybyśmy dodali na przykład pętlę WordPress-a (The Loop), moglibyśmy mieć w którymś miejscu fragment edytowalnego z poziomu kokpitu tekstu (ponieważ tej pętli tutaj nie ma toteż nie ma potrzeby wypełniania treści strony podczas jej tworzenia).

Niniejszy post jest kontynuacją rozważań z wcześniejszego wpisu, gdzie do problemu podszedłem nieco inaczej – WordPress inna strona główna. Również zapraszam.

 

 

Strona intro na plikach motywu

Innym bardzo szybkim sposobem na utworzenie strony intro we własnej instalacji WordPressa jest wykorzystanie plików dostępnych w motywie, ale tylko jeśli wiemy co robimy. Na pewno nie wyjdzie to w każdym motywie ze względu na fakt że motywy tworzone są przez różnych ludzi, różne firmy, kod jest pisany w inny sposób i później inaczej dzielony na pliki. Dużo zależy też od naszych potrzeb. Przykładowo jeżeli budujemy stronę intro, na której chcemy mieć jedynie obrazek przenoszący do strony głównej, to zwykle nie będziemy mogli skorzystać z domyślnych plików: header.php, czy footer.php, gdyż zwykle jest w tych plikach coś jeszcze (np. nawigacja). Z drugiej strony, jeżeli moglibyśmy skorzystać z tych plików, to czy nie lepiej byłoby podpiąć mniejszą ilość mniejszych plików niż wszystkiego z czego korzysta strona główna?

Najszybszym i na pewno najłatwiejszym sposobem, bez bawienia się w kodowanie, będzie skorzystanie z dostępnych w motywie szablonów plików, wybranie jednego i ustawienie go jako stronę statyczną.

WordPress strona startowa

  1. Ustawiamy tytuł strony, właściwie dowolny, abyśmy później wiedzieli do czego owa strona ma służyć. Następnie uzupełniamy treść – wcześniej z tego nie korzystaliśmy, ale w tym przypadku ma to sens bo nie bawimy się w edytowanie kodu. Więc umieszczamy tam wszystko co ma się pojawić w intrze.
  2. Wybieramy Szablon strony. Najczęściej wybiera się szablon bez sidebara.
  3. Publikacja strony.
  4. W opcjach czytania ustawiamy stronę jako strona statyczna.

Rozwinięciem tego sposobu może być drobna edycja CSS – można przykładowo dodać obrazek tła (jeżeli motyw jest dobrze zbudowany to zwykle do body dodawanych jest kilka unikalnych klas CSS, wykorzystując je możemy dodać CSS który będzie działać tylko na tej jednej stronie).

Pluginy

Jak zwykle w repozytorium wtyczek WordPressa udało mi się znaleźć kilka ciekawych opcji w temacie, oto kilka propozycji (wg ilości aktywnych instalacji):

Ultimate Coming Soon Page

Plugin robi to, do czego został stworzony – czyli możliwe jest stworzenie strony intro. Łatwo możemy taką stronę włączać i wyłączać. Przy odrobinie czasu coś tam można zrobić, ale wypadałoby znać przynajmniej podstawy html/css/js. Na plus możliwość edycji CSS, JS, oraz treści tekstu na jednej stronie. W tekście można dodać praktycznie wszystko – skrypty, HTML, CSS, pewnie również embedy.

WordPress strona startowa

Tutaj to, co udało mi się wyprodukować:

Pobieranie

WP Splash Page

Ten plugin jest zdecydowanie prostszy od poprzednich dwóch i kilku funkcjonalności mu brakuje, np jeżeli mamy jakieś linki w tekście to niestety ich koloru nie da się zmienić w tym pluginie. Fajna jest możliwość dodania filmiku z YT, ale myślę że w poprzednich dwóch również by się dało. Na plus zasługuje możliwość dodania do intra formularza do potwierdzania wieku użytkownika, albo konieczności zaakceptowania jakichś warunków. Plugin oferuje mało opcji dostosowujących wygląd – możliwe jest dodanie obrazka, ale brakuje możliwości jego rozciągnięcia na cały ekran – obrazek musi być odpowiednio duży. Co jeszcze można zmienić – sprawdźcie na screenach.

Strona intro plugin

Pobieranie

Launchpad – Coming Soon & Maintenance Mode Plugin

Ten plugin jest całkiem ciekawą alternatywą, chociaż nie ma tutaj wiele opcji jeśli chodzi o dostosowanie wyglądu, to dostajemy 3 gotowe tematy, które chociaż nie są zbyt szałowe, to jednak nie są też najgorsze. Najważniejsze, czyli to co jest najbardziej wyeksponowane na poniższym banerze – zegar, można wyłączyć. Więc jeżeli chodzi o nasze zastosowanie – strony startowej, to jak najbardziej można spróbować z tym pluginem. Plugin oprócz tytułu i dodatkowej notatki, może także wyświetlać filmik, jeżeli mamy embedowalny kod do formularza subskrypcji, to również znajdzie się pole. Możemy także edytować tekst stopki, dodać własne logo, zmienić obrazek tła (na cały ekran), dodać ikony do portali społecznościowych, ale niestety tylko tych: Facebook, Vimeo, Tumblr, WordPress, Twitter. Plugin umożliwia zmianę kolejności wyświetlanych sekcji, oraz dodanie własnego kodu CSS.

 

Strona intro plugin

Pobieranie

 

Podsumowanie

Który plugin jest najlepszy według mnie? Więc to zależy raczej od potrzeb, jak łatwo zauważyć w każdym przypadku starałem się dojść do tego samego efektu końcowego. Pierwszy plugin był najbliżej i pewnie gdybym posiedział przy nim jeszcze trochę czasu to pewnie udało by mi się zrobić dokładną kopię, ale podpinanie Font Awesome i plików Bootstrapa żeby zrobić ikony wydało mi się już bez bezsensownym pomysłem. Plugin jest najbardziej elastyczny, ale w zasadzie jeżeli ktoś potrafi to obsługiwać, to pewnie potrafi też napisać kod od zera i wyjdzie na tym o wiele lepiej. 2 i 3 to w zasadzie gotowce, mimo małej ilości opcji to również spełniają swoją rolę.

Gdyby tak udało się połączyć te pluginy, to powstałby jeden fajny plugin, a tak chyba jednak wolałbym napisać coś swojego.

Dziękuję za dobrnięcie do końca tego wpisu, mam nadzieję że pomoże on rozwiązać problem stron startowych także na Waszych WordPressach! 🙂

Inne ciekawe wpisy:

  1. Biały ekran śmierci WordPress
  2. WordPress Jak dodać blog do strony
  3. Jak napisać plugin do WordPress
  4. WordPress zmieniamy stronę główną
  5. kurs wordpress dynamiczne menu do motywu
  6. WordPress Stronicowanie wpisów

Wpis otagowano:

Komentarze do wpisu 57 komentarzy

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *