Blog WordPress – Jak dodać i modyfikować strony?

Blog WordPress

Podstawy masz już opanowane. Ustawiłeś blog pod własne potrzeby oraz potrafisz dodawać wpisy i je modyfikować. Teraz warto rozbudować blog o nowe strony statyczne. Zasady są podobne, ale też pokażę coś nowego co jest związane z wpisami jak i stronami. Właśnie w tym artykule dowiesz się jak dodawać i edytować podstrony Twojego bloga.

Dodanie i modyfikacja stron blog WordPress

Wejdź do zakładki Strony -> Wszystkie strony. Na podobnej zasadzie jak z wpisami znajdziesz tutaj listę aktualnych stron. Kliknij na tytuł strony, aby wejść w jej edycję.

Edycja strony WordPressJak widzisz okno edycji strony wygląda tak samo jak wpisu. W poprzednim poście omówiłem poszczególne funkcje formatowania tekstu oraz resztę opcji związanych z edycją i opublikowaniem. Dlatego teraz pokażę Ci coś innego.

Ostatnio napisałem, że omówię zakładki pod numerem 15. Na obrazku powyżej zaznaczyłem je, aby przypomnieć o które mi chodzi. Aktualnie jesteś w zakładce Wizualny. W tym widoku masz podgląd jak mniej więcej będzie wyglądała Twoja strona lub wpis. Masz też tutaj dostęp do opcji formatowania jak w zwykłym edytorze tekstu. Na zasadzie zaznacz fragment tekstu, a następnie kliknij odpowiednią ikonę, aby zmienić wygląd tego tekstu.

Wygląd Twoich wpisów i stron na blogu zależny jest od wybranego motywu. Tę kwestię poruszę w dalszym wpisie, w którym dowiesz się jak zmienić wygląd strony.

Co wspólnego ma język HTML z Twoim blogiem?

Jednak strony internetowe nie są zbudowane jak zwykły dokument tekstowy w Word. Podstawą budowy każdej strony www jest język HTML (z angielskiego HyperText Markup Language – hipertekstowy język znaczników). Teraz nie będę omawiał w całości tego języka, lecz powiem o podstawie. Rozłożę nazwę języka HTML na dwie części.

  • Hipertekstowy, ponieważ w treści strony www występują hiperłącza (inaczej linki), które są zwykłym tekstem, ale taki tekst można kliknąć i przenosi użytkownika do innej strony internetowej.
  • Znaczników, ponieważ składa się on z treści (najczęściej tekstu, który jest podstawą każdej strony internetowej) oraz znaczników, które budują strukturę strony i w pewnym stopniu określają jej wygląd wizualny.

Znaczniki to tekst, który otoczony jest nawiasami ostrymi. Tekst jaki znajduje się między tymi nawiasami określa wpływ na treść, która znajduje się po nim. Każdy znacznik musi się kończyć. Zakończenie to zawsze taki sam tekst między tymi nawiasami, a dodatkowo przed tekstem jest znak ukośnika. Zaraz przejdę do przykładów, ale zanim to zrobię wyjaśnię Ci po co to znać, skoro można pisać treść i formatować nie znając języka HTML.

Co zyskasz dzięki znajomości języka HTML i innych technologii internetowych?

Do podstawowego formatowania treści, o której wcześniej wspomniałem, nie potrzebujesz znajomości języka HTML. Kiedyś to było niezbędne, aby zrobić stronę internetową. Dzisiaj każdy może łatwo i szybko stworzyć stronę www bez znajomości języków programowania. A to dzięki programistom, którzy stworzyli aplikacje CMS jak przykładowo WordPress. Jednak dostępne opcje są dla Ciebie ograniczeniem jeśli chcesz zrobić coś więcej.

Jeśli chcesz dowolnie modyfikować wygląd swojej strony internetowej to niezbędne jest, abyś znał języki programowania, które pozwolą Ci na to. I tak jak już powiedziałem takim podstawowym językiem programowania dla stron internetowych jest HTML. Jednak na języku HTML przygoda z dowolną wizualizacją stron www się nie kończy, ale to już jest opowieść na inny czas.

Przejdź do zakładki HTML, to zobaczysz jak naprawdę wygląda strona internetowa od środka. Ten sam efekt możesz uzyskać, gdy przeglądasz jakąś stronę www w Internecie. Wybierz w przeglądarce internetowej opcję Pokaż źródło strony. Często jest to skrót na klawiaturze Ctrl+U. Przejdę do przykładów.

Co konkretnie możesz wykonać za pomocą znaczników HTML?

Zacznę od najważniejszego, czyli tworzenie linków. Służy do tego znacznik a. Wygląda to tak, że w nim wpisujesz atrybut o nazwie href i przypisujesz mu wartość adresu URL strony internetowej. Znaczniki czasem inaczej nazywa się tagami. Między tagiem otwierającym a kończącym wpisz tekst, który stanie się linkiem. Taki tekst, który jest linkiem nazywa się anchorem (z angielskiego od kotwicy), ponieważ zarzucasz kotwicę do innej strony i tworzy się połączenie od Twojej strony do innej. Taki link mogę zrobić do mojego bloga:

<a href=”http://www.pawelprotas.pl>Nowe technologie w biznes online</a>

W moim przypadku anchorem tekstowym jest „Nowe technologie w biznes online”. Napisałem tekstowym, ponieważ linkami mogą też być obrazki. Po utworzeniu w kodzie HTML odnośnika w taki sposób, pojawi się też on w wersji wizualnej. Zauważ, że nie mogę normalnie wpisać nawiasów ostrych, ponieważ przeglądarka internetowa odczyta je jako część znaczników. Gdy chcę pokazać nawiasy ostre jako zwykłe znaki w tekście, to muszę skorzystać z kodów znaków.

Pokazałem Ci tą funkcję w poprzednim poście i teraz ona się przyda. Zamiast wpisania z klawiatury znaków nawiasów, wpisuje kody tych znaków poprzez okno wstawiania znaków specjalnych. Przykładowo dla nawiasu otwierającego wpisuje kod w języku HTML w postaci &lsaquo; lub w wersji numerycznej &#8249;

Innym prostym przykładem może być pogrubienie czcionki. Jeśli pogrubisz pewien fragment tekstu za pomocą ikon w zakładce Wizualny, to gdy przełączysz się na zakładkę HTML, to zobaczysz, że ten tekst znajduje się między znacznikami o nazwie strong. Akurat tak się składa, że strong najczęściej pogrubia tekst, ale nie jest to regułą i można to zmienić. Ściśle do pogrubienia zawsze działa znacznik b.

Na razie podałem Ci tylko przykłady działania języka HTML. Więcej o samym języku i jak go wykorzystać przy tworzeniu stron lub wpisów na WordPress powiem Ci w innym artykule. Podam Ci teraz przykład, który sam użyłem na jednym z moich wpisów. W wersji wizualnej brakuje możliwości przedstawienia treści w postaci tabelki. Do tego trzeba użyć języka HTML. Do tego użyłem tagów jak table, tr, td, które widzisz w przykładowym kodzie strony poniżej.

Strona w wersji HTML WordPress

Na górze okna są też ikony. Podobnie jak w widoku wizualnym tutaj też można wykorzystać gotowe wstawianie kodu. Zaznacz tekst i kliknij ikonę b, a ten tekst znajdzie się  pomiędzy tagami strong, co w efekcie otrzymasz pogrubienie tego tekstu.  Jest tutaj taki znacznik o nazwie code, który zmienia wygląd tekstu. Stosuje się go do oznaczania tekstu, który jest kodem języka programowania. Wygląd zależny jest od skórki strony, który zawarty jest w kaskadowych arkuszach stylów. Użyłem tego wcześniej do oznaczenia w kodzie jak utworzyć link w języku HTML.

Strony usuwa się tak samo jak wpisy, więc nie będę tego już omawiał. Nową stronę utworzysz też podobnie jak wpisy. Wejdź w zakładkę Strony -> Dodaj nową. Teraz pokażę Ci jak zrobić statyczną stronę główną, a wpisy przenieść na inną stronę. Po dodaniu nowej strony nadaj jej tytuł Blog, ponieważ na tej stronie będę pojawiać się wpisy. Treść strony zostaw pustą i Opublikuj. Utwórz tak samo stronę o nazwie Strona główna i w treści wpisz to, co chcesz aby pojawiało się zawsze, gdy ktoś wejdzie na Twojego bloga na stronę główną. Wejdź następnie do zakładki Ustawienia -> Czytanie.

Strona główna jako statyczna strona internetowa WordPress

Wybierz opcję strona statyczna. Dla Strona główna wybierz z listy stronę o tytule „Strona główna” lub inną, która chcesz, aby stała się stroną główną Twojego bloga. Dla Strona z wpisami wybierz stronę pustą o nazwie Blog i Zapisz zmiany.


Jeśli podoba Ci się artykuł to kliknij poniżej przycisk „Lubię to!”.

Wpisz poniżej swój komentarz dotyczący tego wpisu i filmu. Jeśli coś jest dla Ciebie niejasne lub masz dodatkowe pytania, to wpisz je poniżej. Jakie strony statyczne masz lub chcesz mieć na swoim blogu?

Paweł Protaś podpis

Następny artykuł z tej serii to Blog WordPress – Jak dodać multimedia i dokumenty?

Podziel się na:
  • Facebook
  • Wykop
  • Twitter
  • Blip
  • Śledzik
  • Google Bookmarks
  • Gadu-Gadu Live
  • Blogger.com
  • co-robie
  • Forumowisko
  • Kciuk.pl
  • LinkedIn
  • Drukuj

Ten artykuł znaleziono w wyszukiwarce Google m.in. poprzez poniższe frazy kluczowe:

  • jak doda skrki do rocketdock
  • wordpress edycja strony głównej
  • jak edytowac strone w przegladarce wordpress

Komentarze: 27

  1. Dobry wpis. Lubię takie długie i wyczerpujące i choć ja osobiście z niego już korzystać nie muszę, to i tak gratuluję – widać, że przykładasz się do ich tworzenia :) . I pewnie long taile też się często pojawiają? ;)
    Michał Krawczykowski ostatnio opublikował..Euterpe oleracea czyli jak (nie) reklamować produktów w internecieMy Profile

    • Dzięki za dobre słowo. Artykuły i filmy tworzę o tym, co sam się nauczyłem i zrobiłem. Zacząłem od narzędzi internetowych i WordPressa. Chcę w ten sposób dotrzeć do osób początkujących. Jeszcze szaleństwa nie ma w długim ogonie, ale nad tym pracuję.:)

  2. Marek pisze:

    Bardzo interesujące informacje i na prawdę przydatne.

  3. Wojtek pisze:

    Dobry wpis dla początkujących.
    Ostatnio doszedłem do wniosku, że po poznaniu podstawowych funkcji WordPressa, warto przerzucić się na własne szablony. Po prostu można więcej zrobić (a przy tym po swojemu).
    Gratuluję praktycznego bloga.
    Wojtek ostatnio opublikował..Wskaźnik CTR strony a współczynnik konwersjiMy Profile

  4. Magda pisze:

    Dzięki za wpis! Mam pytanie dot. widoku „HTML” i „Wizualnego” danego wpisu. W WordPressie, którego używam (3.3.2) przy tworzeniu wpisów widzę tylko widok HTML, co przy mojej marnej znajomości języka HTML powoduje, że ciężko wypunktowuje mi się teksty. Czy możesz mi powiedzieć jak włączyć edytor wizualny w WordPress?

    • Witaj Magdo.

      Jeśli widzisz zakładkę „Wizualny”, a aktualnie jesteś na zakładce „HTML”, to po kliknięciu zakładki „Wizualny” należy poczekać czasem dłuższy czas, aby pojawiły się ikony do formatowania treści. U mnie tak czasem bywa. To wynika z połączenia sieciowego między moim komputerem a serwerem, gdzie mam stronę internetową.

      Jeśli przy tworzeniu wpisu lub strony statycznej nie pojawia się zakładka „Wizualny” to takiego problemu jeszcze nie miałem. Jeśli tak jest to możesz zrobić tak:

      • Sprawdź czy ten problem występuje na różnych przeglądarkach internetowych. Przeglądarki różnie wyświetlają strony internetowe i niektóre elementy strony źle pokazują lub ich wcale nie widać. Czasem są zblokowane skrypty w ustawieniach danej przeglądarki. Sprawdź na takich przeglądarkach jak: Chrome, FireFox, Opera, Internet Explorer, Safari
      • Jeśli coś nie działa na WordPress poprawnie to może być też przyczyna wtyczek. Np. jakaś wtyczka kłóci się z inną wtyczką, lub dana wersja wtyczki nie działa pod daną wersją WordPressa. Możesz wyłączyć jedną wtyczkę i sprawdzić czy się zmieniło działanie. Jeśli wciąż jest źle, to wyłącz następną i tak dalej. W ten sposób możesz ustalić czy jakieś wtyczki powodują aktualnie problemy.
      • Ostatecznie jak nic z poprzednich czynności nie pomoże, to zostaje instalacja WordPressa od nowa i zaimportowanie kopii bazy danych. Chyba, że jest jeszcze coś o czym nie wiem i są inne rzeczy do sprawdzenia.
      • Napisz mi później, jakie kroki podjęłaś i jaki dało to efekt.

  5. Magda pisze:

    Właśnie o to chodziło, że nie miałam wyboru między widokiem „HTML” a „wizualnym”… miałam narzucony HTML i nic do przełączenia. Problemem okazał się najprawdopodobniej brak współpracy między nowym Firefoxem a WordPressem. Poklikałam też po wtyczkach i jest już ok. Dziękuję za pomoc!

  6. kusii pisze:

    Witam,

    Wspomniałeś, że komentarze można wyłączyć na poszczególnych stronach, ale nie doczytałem jak to zrobić. We wpisach nie ma najmniejszego problemu, ale jak to zrobić na wszystkich stronach, a pozostawić tylko na tej z wpisami?

    • W trakcie edycji każdej strony jest na dole dział Dyskusja i w nim dwa pola:

      • Zezwól na komentarze
      • Zezwól na pingbacki i trackbacki na tej stronie.

      Zaznacz kwadrat przy pierwszym polu, aby pozwolić na komentowanie tej strony. Jeśli nie chcesz pozwolić na komentarze na tej stronie, to te pole powinno pozostać puste.

      Jeśli w ustawieniach masz zaznaczone, aby na każdej stronie można było komentować, to w momencie tworzenia nowej strony, pole o którym wyżej mówię będzie domyślnie zaznaczone. Wystarczy je odznaczyć, aby zabronić komentowania tej strony. Właśnie w ten sposób mam ustawione na swoim blogu.

  7. kusii pisze:

    Dobra, znalazłem – chyba zaćmy dostałem. Pozdrawiam:)
    kusii ostatnio opublikował..Kubki lęgowe dla ślimaków.My Profile

  8. Agnieszka pisze:

    Witaj, mam pytanie, będę wdzięczna za pomoc. Chciałabym mieć możliwość dodawania wpisów na kilku różnych stronach (odrębne tematy). Wszędzie widzę, że można wybrać tylko jedną stronę. Może jest jakaś opcja, niezbyt skomplikowana, żeby jednak móc zamieszczać odpowiednie wpisy na odpowiednich stronach, a nie wszystko w jednym worku?

    Pozdrawiam,
    Agnieszka

    • Witaj. Najlepszym rozwiązaniem będzie przydzielenie odpowiednich kategorii do wpisów. Następnie w menu głównym dodać adresy URL do kategorii w zakładce Wygląd -> Menu. W ten sposób klikając w linki w menu głównym pokażą się wpisy tylko z wybranej kategorii. Nie każdy motyw obsługuje własne menu. Nowsze motywy powinny być do tego przystosowane. Na stronie głównej zostaną wszystkie wpisy z każdej kategorii. Czy wystarczająco wyjaśniłem Ci to Agnieszko?

      • Agnieszka pisze:

        Tak, dzięki. Już wiem jak, wypróbuję gdy uda mi się opanować własne menu :-)

      • Ania pisze:

        Cześć!
        A ja nie potrafię sobie z tym poradzić. Wiem… wszystko wymaga wprawy, ale zaczynam i jestem zupełną nowicjuszką.
        Może na printscreenach to pokażesz :)

  9. Dominik pisze:

    witam mam taki problem !
    chciałbym mieć na swojej stronie dwie nie zależna od siebie strony z blogami !!! jak można to zrobić ??
    Np.
    na 1. głównej stronie Blog – blog prowadzony systematycznie z wpisami kilka razy w tyg.
    na 2. stronie – treści informacyjne ( nie do komentowania:) wprowadzane raz na kwartał +/-
    Dominik ostatnio opublikował..Szkolenie „Jak założyć bloga?”My Profile

    • Witaj Dominiku. Na początku chcę powiedzieć, że w ciekawy sposób wykorzystałeś wtyczkę CommentLuv. Dzięki niej podlinkowałeś artykuł na moim blogu. Rozumiem, że jeszcze nie masz bloga, a chcesz prowadzić dwa jednocześnie. Zgadza się?

      Jeśli tak to najlepiej stworzyć blogi pod oddzielnymi domenami. Mogą między sobą linkować do siebie. Najlepiej jak będą podobnie tematycznie.

      Jeśli te dwa blogi mają być pod tą samą domeną, to masz dwie opcje:

      • Jeden blog pod domeną główną np. domena.pl, a drugi w innym katalogu, np. domena.pl/katalog
      • Jeden blog pod domeną główną np. domena.pl, a drugi w innym katalogu na serwerze a pod subdomeną, np. blog.domena.pl

      Również w tej wersji mogą te blogi do siebie linkować, np. możesz to zrobić w menu głównym.

      Czy wystarczająco jasno to przedstawiłem?

  10. Ania pisze:

    Mam problem z programem. Nie mogę utworzyć nowej galerii – wybieram zdjęcie ale się nie załącza. Proszę o pomoc. Jestem osobą początkującą, próbowałam na różne sposoby i nic….

  11. dani pisze:

    dzięki wielkie za te rady i za tego bloga
    dani ostatnio opublikował..Nie mieszajcie komponentów różnych firmMy Profile

  12. Marcin pisze:

    Witam, nie mogę sobie poradzić z edycją strony głównej, personalizacja nie posiada możliwości dodania kodu, chciałem dodać zrobiony przeze mnie kod (podstrona TEST) z animowanymi sześcioma okrągłymi kartami 3D na stronę główną i nie wiem jak to zrobić. Co zrobić, aby w panelu administratora – strony, znalazła się również moja strona główna? Filmik za wiele mi nie pomógł, ponieważ problemu z edycjami stron nie mam, lecz problem stanowi Strona główna. Na filmie jest pokazane, że mogę utworzyć Stronę główną jako dodatkową stronę, ale co zrobić dalej, żeby wszystko co jest teraz na mojej Stronie głównej, było również na tej nowo utworzonej Stronie głównej? Proszę o jakąś podpowiedź w tym temacie.

    • Dowolną podstronę można uczynić stroną główną. Trzeba wejść do Ustawienia -> Czytanie. Tam na początku jest opcja Strona główna wyświetla i wybrać opcję statyczna strona, a z listy rozwijanej podstronę, która ma stać się stroną główną.

  13. Marcin pisze:

    Dzięki za odpowiedź, ale nie o to mi chodzi. Wiem, że z każdej podstrony mogę zrobić stronę główną. Ja mam stronę, która się zawsze wyświetla jako główna, ale nie ma jej w panelu administratora w wykazie stron do edycji, mogę jedynie skorzystać z personalizacji, ale to dla mnie za mało, (mogę dodać tylko te opcje które są dostępne w danym szablonie). Ok. stworzę nową podstronę Strona główna, lecz będzie ona czysta, jak z wyświetlanej głównej strony przełożyć całą zawartość do nowo utworzonej Strony głównej (i wtedy zrobić z niej Stronę główną)?
    Marcin ostatnio opublikował..Hello world!My Profile

    • Pytanie najważniejsze to jaki efekt końcowy chcesz osiągnąć? Zrozumiałem, że te opcje, które masz dostępne w motywie do edycji strony głównej chcesz zachować, ale do tego coś dodać lub zmienić. Pytanie co chcesz dodać i zmienić na stronie głównej.

  14. Marcin pisze:

    Tak jak pisałem w pierwszym poście, chciałbym dodać jeden kod zrobiony przeze mnie (podstrona TEST) z animowanymi sześcioma okrągłymi kartami 3D, który miałby się znajdować pod częścią Parallax, pod tym dużym przyciskiem na stronie głównej. I tyle:)
    Marcin ostatnio opublikował..Hello world!My Profile

    • Jednak musiałbym do tego najpierw zobaczyć kod motywu. Może się da bez zmiany kodu motywu to zrobić, a może być tak, że trzeba coś zmienić lub dodać w kodzie motywu, aby wykonać to co chcesz.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CommentLuv badge

Czemu służy to pytanie?