Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00663 009445 10749077 na godz. na dobę w sumie
Stwórz swoją własną stronę WWW. Komiksowy kurs HTML-a, CSS-a i WordPressa - ebook/pdf
Stwórz swoją własną stronę WWW. Komiksowy kurs HTML-a, CSS-a i WordPressa - ebook/pdf
Autor: , Liczba stron: 256
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-1784-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-20%), audiobook).

Tworzenie stron WWW, czyli wspaniała wyprawa w krainę znaczników!

Dzień dobry, oto Kim. Kim wyrusza właśnie na wyprawę, której celem jest opanowanie różnych elementów potrzebnych do wykonania strony internetowej. Musi poznać język HTML i kaskadowe arkusze stylów, a potem powędrować dalej: do miasta WordPress. Na szczęście Kim nie jest sama — towarzyszy jej pies Tofu, a w pokonywaniu różnych trudności pomagają jej Guru, Glinda i Wendy. Dołącz do Kim, a uda Ci się w mig poznać podstawy kilku naprawdę przydatnych technologii.

Kto powiedział, że nauka musi być nudna? Ten zabawny, interesujący poradnik opracowany w postaci komiksu pozwoli Ci w miłej i relaksującej atmosferze nauczyć się tworzenia stron internetowych, czyli czegoś, co już się stało standardem w wielu dziedzinach życia. Dzięki tej książce nauczysz się posługiwać znacznikami HTML, napiszesz kod CSS określający sposób wyświetlania Twojej strony, dowiesz się, jak skonfigurować WordPress, a także wybierzesz firmę świadczącą usługi hostingowe, umieścisz swoją stronę na serwerze i wybierzesz dobrą nazwę domeny. Zapraszamy Cię do świata Kim!

Daj się porwać przygodzie i stwórz własną stronę WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Build Your Own Website: A Comic Guide to HTML, CSS, and WordPress Tłumaczenie: Konrad Matuk Skład: Ewa Galczak ISBN: 978-83-283-1782-6 Copyright © 2014 by Nate Cooper. Title of English-language original: Build Your Own Website, ISBN 978-1-59327-522-8, published by No Starch Press. Polish-language edition copyright © 2016 by Helion S.A. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawartew tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/komkur.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/komkur Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Od autora. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Podziękowania. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 1 Pierwszy dzień zajęć. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9 Podstawy internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Czego będziesz potrzebował? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Przeglądarka internetowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Edytor tekstu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Przydatne wiadomości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Jak czyta się adresy stron internetowych?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Co to jest klient? Czym jest serwer?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Jak działa infrastruktura sieciowa? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2 Kłopoty ze znacznikami HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Kim poznaje podstawowe znaczniki HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Zasady definiowania ścieżek i tworzenia nazw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Dodawanie obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Organizacja plików i folderów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Zabawa ze znacznikami HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Początek dokumentu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Korzystanie z podstawowych znaczników HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Wstawianie obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Dodawanie nagłówka do dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Niektóre z często używanych znaczników HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 3 Kim upiększa swoją stronę za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 CSS — początek przygody . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Kim poznaje podstawowe reguły CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Zgłębianie języka CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Kim poznaje klasy i identyfikatory CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Kaskadowe arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Poleć książkęKup książkę Tworzenie arkusza stylów i kojarzenie go z dokumentem HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Tworzenie pierwszego arkusza stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 CSS — język stylu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Składnia kodu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Klasy, identyfikatory i dziedziczenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Kolory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Znacznik div i wyrównywanie za pomocą kodu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Margines i dopełnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Znacznik div i struktury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 4 Kim w mieście WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Witamy w mieście WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Kim stawia pierwsze kroki w WordPressie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Kim tworzy swoją pierwszą stronę w WordPressie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Kim organizuje swoją stronę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Kim umieszcza na swojej stronie zdjęcia i inne media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Początek pracy z WordPressem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Logowanie się do WordPressa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Sprawdzaj efekty swojej pracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Treści publikowane na WordPressie: wpisy i strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Rozplanuj swoją witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Tworzenie pierwszej strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Wstawianie mediów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Publikowanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Organizacja stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Tworzenie wpisu publikowanego na blogu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Sortowanie wpisów: kategorie i tagi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Obrazki wyróżniające . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Obrazki, filmy i cytaty — formaty wpisów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Zarządzanie treścią i kasowanie wpisów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 5 Przystosowywanie WordPressa do indywidualnych potrzeb i preferencji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Panel Wygląd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Kim odkrywa moc wtyczek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Kim wchodzi za kurtynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Zmiana wyglądu: podstawy pracy z motywami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Personalizacja motywu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Personalizacja menu nawigacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Zakładka Opcje ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Personalizacja ustawień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Zaawansowana personalizacja witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Wtyczki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 4 Spis treści Poleć książkęKup książkę Widgety. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Aktualizacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Zmiana hosta witryny za pomocą panelu Narzędzia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Szukając pomocy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 6 Wielki start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Wszędzie dobrze, ale na serwerze najlepiej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Kim znalazła dom dla swojego portfolio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Społeczność przyjaciół . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Umieszczanie strony na serwerze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Wybór serwisu hostingowego — Twojego internetowego domu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Umieszczanie na serwerze prostej strony opartej na kodzie HTML i CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Instalacja WordPressa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Podsumowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Spis treści 5 Poleć książkęKup książkę Poleć książkęKup książkę 4 Kim w mieście WordPress Poleć książkęKup książkę Poleć książkęKup książkę Witamy w mieście WordPress K ! S A Z R T Tofu, wygląda na to, że oni byli tak samo wystraszeni jak ty S Z A S T ! Hau hau! Witamy w mieście WordPress 125 Poleć książkęKup książkę S T O WORDPRESS M I A Kto tam? 126 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę O! Dzień dobry! Mam na imię Kim, a to mój pies Tofu… Hau hau! Wspólnie pracujemy nad witryną internetową. Mamy ze sobą dokumenty stworzone za pomocą kodu HTML i CSS Słyszeliśmy, że WordPress pomoże w zarządzaniu treściami, które chcemy umieścić w internecie. Pracujemy nad moim portfolio i jak na razie mamy kilka stron napisanych za pomocą kodu HTML i CSS Androny! To nie są strony. Co to za bazgroły? To HTML…? Skoro tak twierdzisz… Jeżeli chcesz stworzyć stronę internetową, to jesteś we właściwym miejscu. WordPress jest nowoczesnym miastem, które ułatwi ci pracę nad stroną, blogiem, a nawet portfolio i zarządzanie publikowanymi na nich treściami Skoro już tu przyszłaś, to nie zechciałabyś zatrzymać się w gospodzie prowadzonej przez mojego brata? Mogłabyś tam przenocować Witamy w mieście WordPress 127 Poleć książkęKup książkę Halo! Jest tu kto? GOSPODA Tak? 128 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Witam. Rozmawialiśmy przed chwilą… Przepraszam, młoda damo! Widzę cię po raz pierwszy w życiu No dobra… Tak czy inaczej, szukamy noclegu Hau hau? Rozumiem. Jak długo chcecie tu zostać? Tworzenie portfolio może trochę potrwać. Może to nam zająć kilka tygodni, a może nawet i miesięcy… Kilka tygodni, a może nawet i miesięcy? Z pewnością nie. Posłuchaj mnie. Możesz tu przebywać tak długo, jak tylko chcesz, ale jutro zapoznam cię z tutejszą bibliotekarką. Ona z pewnością pomoże uruchomić twoją stronę w ciągu kilku godzin Godzin?! Hau hau! Zobaczysz, że w tym mieście niektóre rzeczy są naprawdę szybkie Witamy w mieście WordPress 129 Poleć książkęKup książkę Kim stawia pierwsze kroki w WordPressie GOSPODA BIBLIOTEKA To chyba tutaj, Tofu 130 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę INFORMACJA Przepraszam panią. Czy mogłaby mi pani pomóc? Dopiero co przybyłam do miasta, a chcę stworzyć portfolio Witaj! Mam na imię Wendy. Czy chcesz stworzyć bloga, czy witrynę? Nie jestem pewna. Czy blog nie jest stroną, na której ludzie umieszczają zdjęcia swoich posiłków? Niektórzy tak… Ale blogi mają o wiele więcej zastosowań. Mogę ci je pokazać. A tak w ogóle, jak masz na imię? Jestem Kim Kim, INFORMACJA chodź za mną Hau hau! Kim stawia pierwsze kroki w WordPressie 131 Poleć książkęKup książkę W budynku, który jest centralną bazą danych miasta WordPress Łał. Gdzie jesteśmy? INFORMACJA 132 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Inne strony zawierają krótkie artykuły, opinie albo po prostu zdjęcia. Ich zawartość jest aktualizowana o wiele częściej. CV nie jest czymś, co aktualizuje się codziennie, ale można w nim umieścić np. pole zawierające informacje o bieżących projektach, nad którymi pracujesz Niektóre z tych stron są statyczne – ich zawartość praktycznie w ogóle się nie zmienia. Przykładem takiej strony może być np. życiorys zawodowy – co jakiś czas ulega on aktualizacji, ale nie zmienia się go codziennie Blog jest dziennikiem sieciowym, który można porównać z pamiętnikiem. Jesteś artystką, czyli chcesz informować o swoich pracach na bieżąco, a to oznacza, że będziesz dość często tworzyła nowe wpisy. Osoby zaglądające na twoją stronę chciałyby wiedzieć, czym się aktualnie zajmujesz, a najlepiej jest je o tym informować za pomocą bloga! Kim stawia pierwsze kroki w WordPressie 133 Poleć książkęKup książkę Artykuł publikowany na blogu określamy mianem wpisu W PISY Codziennie tysiące blogerów tworzy miliony wpisów publikowanych na blogach. Treści publikowane na blogach są tworzone przez ludzi takich jak ty Rozumiem… Blogi to po prostu specjalne strony internetowe przeznaczone do publikowania zawartości, która często ulega zmianie Ten jest opatrzony dzisiejszą datą Ale blogi wyglądają tak jak zwyczajne strony internetowe! 134 Rozdział 4. Kim w mieście WordPress Masz rację. Wpisy publikowane na blogach są stronami internetowymi. Dotyczą one zwykle jakiegoś konkretnego zagadnienia i są opatrzone datą Poleć książkęKup książkę Zaczynasz rozumieć. Witryny internetowe są ważnym narzędziem służącym do przekazywania informacji, a blog jest stroną, która pozwala innym na poznanie cię. Większość stron internetowych jest tak naprawdę połączeniem bloga ze zbiorem zawartości, która nie ulega modyfikacji Jak te tam? S T RONY Tak. Zasadniczo wszystkie materiały publikowane w serwisie WordPress można podzielić na strony (niemodyfikowana, statyczna treść) i wpisy (krótkie artykuły publikowane na blogach) Rozumiem to, ale wciąż nie mogę pojąć, po co mi blog, skoro chcę stworzyć portfolio Portfolio możesz umieścić na stronach, ale chyba chcesz, aby ludzie chcieli odwiedzić twoją stronę ponownie, mam rację? Oczywiście, że tak Prowadzenie bloga jest dobrym sposobem na informowanie osób odwiedzających twoją stronę i potencjalnych klientów o tym, co robisz. Osoby, które zainteresują się twoją twórczością, z pewnością będą chciały odwiedzić twoją stronę ponownie Słyszałam, że częste aktualizowanie treści publikowanych na stronie ułatwia jej pozycjonowanie w wynikach wyszukiwania To prawda. Blogi pozwalają na wygenerowanie większej ilości treści indeksowanej przez wyszukiwarki Kim stawia pierwsze kroki w WordPressie 135 Poleć książkęKup książkę Kim tworzy swoją pierwszą stronę w WordPressie Rozumiem. Chyba czas zabrać się do pracy. Mam ze sobą strony, które stworzyłam za pomocą znaczników HTML Moja droga, te klamoty nie będą ci tutaj potrzebne Wszystkie czynności związane z tworzeniem strony możesz wykonać za pomocą edytora wizualnego, ale najpierw musimy się zalogować Nazwa użytkownika Hasło Nie wylogowuj mnie Zaloguj Mam się zalogować? Czy to jakiś serwer FTP? Nazwa użytkownika Hasło Nie wylogowuj mnie Zaloguj 136 Rozdział 4. Kim w mieście WordPress Hmm, tak jakby. WordPress działa na serwerze – zarządza plikami i umożliwia tworzenie stron. Logując się do WordPressa, uzyskujemy dostęp do jego zaplecza, zwanego kokpitem Poleć książkęKup książkę Kokpit jest panelem sterowania twojej strony. W przeciwieństwie do klienta FTP nie służy tylko do zarządzania plikami. Kokpit pozwala na tworzenie stron Pracując w WordPressie, nie potrzebujemy już edytora kodu? Nie! Kokpit pozwala na wykonywanie wszystkich czynności. Tutaj korzystamy z edytora wizualnego Spójrz na te wszystkie ikony. Ten serwis przypomina edytor tekstu Kokpit Witaj w WordPressie! Co to takiego? Edytor wizualny jest prostym narzędziem pozwalającym na tworzenie stron lub wpisów publikowanych na łamach WordPressa Dodaj nową stronę Opublikuj Atrybuty strony Kim tworzy swoją pierwszą stronę w WordPressie 137 Poleć książkęKup książkę Masz rację. Spróbuj sformatować jakiś tekst Czy mogę skopiować do tego okna tekst ze stron HTML, które stworzyłam wcześniej? Załóżmy, że chcesz pogrubić kilka słów. Wystarczy, że je zaznaczysz, a następnie klikniesz przycisk B Oczywiście, że tak. Zajmiemy się tym później. Teraz napisz coś nowego, a następnie sformatuj to tak, jakbyś korzystała z narzędzi edytora tekstowego. To właśnie jest główna zaleta edytora wizualnego! Widzę również ikonę pozwalającą na zmianę koloru tekstu Dodaj medium Akapit Witaj w moim portfolio! Cześć. Mam na imię Kim. Tutaj znajdziesz informacje dotyczące projektów, nad którymi teraz pracuję. Jeżeli chcesz uzyskać więcej informacji na temat mojego dorobku, to kliknij tutaj. 138 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę To wspaniałe! A co, jeżeli będę chciała zamieścić odwołanie? Dodaj medium Akapit Witaj w moim port Tak, a ponadto możesz w ten sposób nadawać również style. Zaznacz fragment „Witaj w moim portfolio!”, a następnie kliknij menu Akapit i z rozwiniętej listy wybierz nagłówek Do tego służy ta ikona Wystarczy ją kliknąć? Tak To bardzo proste! Witaj w moim portfolio! Cześć. Mam na imię Kim. Tutaj znajdziesz informacje dotyczące projektów, nad którymi teraz pracuję. Jeżeli chcesz uzyskać więcej informacji na temat mojego dorobku, to kliknij tutaj. Kim tworzy swoją pierwszą stronę w WordPressie 139 Poleć książkęKup książkę Czy gdy pracuję w edytorze wizualnym, to tworzone przeze mnie strony nie zawierają kodu HTML? Znasz HTML? Od dawna nikt nie zadał takiego pytania Wizualny HTML Widzisz zakładkę HTML? Tak. Wiele osób tworzących strony za pomocą WordPressa nigdy nie zagląda do tej zakładki i nie zdaje sobie sprawy z tego, że edytor tak naprawdę służy do generowania kodu HTML Rozumiem. To dlatego właściciel gospody nie rozumiał mnie, gdy mówiłam o kodzie HTML Ale tworząc nowe strony w WordPressie, mogę pisać i formatować ich treść bez konieczności posługiwania się kodem HTML? Tak! To właśnie z tego powodu WordPress tak bardzo ułatwia tworzenie stron internetowych Kliknij ją, a zobaczysz kod HTML h3 Witaj w moim portfolio! /h3 Cześć. Mam na imię Kim. Tutaj znajdziesz informacje dotyczące strong projektów, nad którymi teraz pracuję /strong . Jeżeli chcesz uzyskać więcej informacji na temat mojego dorobku, to a href= http://www kliknij tutaj /a . kod HTML? A więc edytor wizualny generuje Tak. W związku z tym, że stworzyłaś już całkiem sporo stron HTML, możesz po prostu skopiować stworzony przez siebie kod i wkleić go w zakładkę pozwalającą na podgląd kodu HTML. Dzięki temu nie będziesz musiała ponownie formatować wprowadzonego tekstu 140 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Kim organizuje swoją stronę Od czego powinnam zacząć? Od stworzenia strony czy wpisu? Wciąż nie wiem, jak zorganizować swoją stronę w ramach WordPressa Nie martw się! Wszystkie nowe rzeczy na początku wydają się skomplikowane. Pamiętaj o tym, że strony zawierające twoje portfolio będą „stronami”, a nie „wpisami” wchodzącymi w skład bloga ISY Wszystkie te treści powinny być stronami, ponieważ ich zawartość nie będzie ulegała zmianom. Uporządkujmy ich zawartość w WordPressie zgodnie z naszkicowanym przez ciebie planem S T RONY WordPress przechowuje strony w sposób hierarchiczny No dobra… Wynika z tego, że muszę zacząć zakładać foldery, w których umieszczę poszczególne elementy mojej strony Kim organizuje swoją stronę 141 Poleć książkęKup książkę Nie bój się! Wszystkie czynności związane z organizacją treści można wykonać za pomocą kokpitu Nie będę musiała korzystać z FTP? KONTAKT Nie! I żadnych folderów! Atrybuty strony Rodzic Szablon Kolejność Spójrz na to pole, znajdujące się w prawym dolnym rogu edytora Tak. Prawda, że to bardzo łatwe? Wystarczy wybrać właściwą opcję z listy? Atrybuty strony Rodzic (brak tematu) Zdjęcia Tofu Kolejność Chodzi ci o okno z napisem Rodzic? Tak. Gdy strona jest podstroną jakiejś innej strony, to można określić ją mianem potomka strony będącej rodzicem Atrybuty strony Rodzic Szablon Kolejność 142 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Tak. To prosty interfejs, pozwalający na wykonanie wszystkich operacji, które musiałam wykonywać wcześniej za pomocą kodu HTML i klienta FTP A to pozwala ci oszczędzić czas Jeżeli strony i wpisy tworzy się za pomocą edytora wizualnego, to czym tak naprawdę się one różnią? Strony są zorganizowane w sposób hierarchiczny (tak, jak np. elementy twojej mapy), a wpisy są po prostu elementami bloga, a więc zależności pomiędzy nimi mają charakter liniowy Blog Ostatni wpis Poprzedni wpis Jeszcze starszy wpis Najstarszy wpis Czyli jest to po prostu duża lista posortowana według daty Generalnie blog składa się z jednej strony wyświetlane są wszystkie stworzone przez ciebie wpisy zawierającej wpisy. Na blogu Właśnie. Pierwszy wpis został już stworzony za ciebie – został on nazwany „Witaj, świecie!”. Stwórzmy kolejny Kim organizuje swoją stronę 143 Poleć książkęKup książkę Tutaj nie ma sekcji Rodzic? Tak. Wpisy nie są przechowywane w sposób hierarchiczny. Są one sortowane według kategorii. Czy widzisz menu Kategorie? Projekty artystyczne Komiksy Moje życie + Dodaj nową kategorię Klikając przycisk Dodaj nową kategorię, np. Rysunki Kim możesz utworzyć nową kategorię i nadać jej nazwę, taką jak Tak, widzę. Znalazłam tam kategorię o nazwie Bez kategorii Wpis możesz przypisać do kilku kategorii Wszystkie kategorie Najczęściej używane Bez kategorii Recenzje książek Projekty artystyczne Zaczynam już wszystko rozumieć. Mogę również stworzyć kategorię Projekty w przygotowaniu, do której mogę przypisywać wpisy zawierające informacje dotyczące projektów, nad którymi pracuję 144 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Do czego służą „tagi”? Tagi pozwalają na porządkowanie wpisów według ich tematyki. Kategorie to nieco szersze pojęcie, a tagi pozwalają na precyzyjne określenie tematyki wpisu. Osoba czytająca twój wpis może kliknąć działające jak hiperłącza tagi i kategorie, a następnie znaleźć inne wpisy dotyczące podobnych zagadnień + Dodaj nową kategorię Tagi Dodaj Rozumiem. Strony WordPressa są zorganizowane tak jak tradycyjne strony internetowe, a wpisy są sortowane według tematu i daty A kategorie i tagi pełnią funkcję słów kluczowych, pozwalających czytelnikowi na odnalezienie poprzednich wpisów dotyczących określonego tematu. Mam rację? Tak! Identyfikacja wpisu za pomocą odpowiednich słów kluczowych pozwoli twoim czytelnikom na jego odnalezienie U ! A H Kim organizuje swoją stronę 145 Poleć książkęKup książkę Kim umieszcza na swojej stronie zdjęcia i inne media Widzę, że masz bardzo dużo zdjęć! Czy chcesz stworzyć portfolio? Wiem już wszystko na temat folderów i konieczności sortowania plików. Umiem także załadować pliki na serwer FTP Masz szczęście! WordPress jest wyposażony w narzędzie pozwalające na zarządzanie zdjęciami – bibliotekę mediów Ale my już jesteśmy w bibliotece Cały WordPress jest jak wielka biblioteka, której treści są podzielone na strony, wpisy i zdjęcia. Zjedźmy na dół do archiwum i zobaczmy, jak przechowywane są media takie jak zdjęcia 146 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Ń ! Y Z D K A MEDIÓ W Łał. Wszystko tutaj jest tak dobrze zorganizowane Wolimy używać słowa „zarządzane” BIBLIOTEKA MEDIÓW Jak mogę wysłać moje zdjęcia do biblioteki mediów WordPressa? To bardzo proste Możesz je wysłać ze swojego komputera, korzystając z metody „przeciągnij i upuść” Kim umieszcza na swojej stronie zdjęcia i inne media 147 Poleć książkęKup książkę Tofu Ukryj Wspaniale. A co z możliwością tworzenia folderów i segregowania zdjęć? Biblioteka mediów jest scentralizowana. Zdjęcia można sortować za pomocą opisów. Nie musisz dzielić ich na grupy Obrazom możesz nadawać nazwy zawierające spacje, a także dłuższe opisy. Tutaj możesz podać również tekst przypisywany znacznikowi alt – nie musisz umieszczać go w kodzie HTML. Wszystkie te czynności możesz wykonać za pomocą biblioteki mediów WordPressa Dostęp do wszystkich obrazów można uzyskać, klikając przycisk Biblioteka znajdujący się w dziale Media Wpisy Media Biblioteka Dodaj nowe Odnośniki Strony Biblioteka mediów jest prywatna? Tak Teraz możesz je sortować według daty, nazwy lub opisu. Nie musisz martwić się organizacją zdjęć ani miejscem, w którym są zapisane. O to wszystko dba WordPress. Możesz przeszukiwać swój prywatny zbiór zdjęć za każdym razem, gdy tworzysz wpis lub stronę Plik Autor Wgrany do Data 148 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę To jak mam umieścić zdjęcia na stronie? Chcę opracować portfolio, a więc będę musiała stworzyć wiele stron ze zdjęciami. Chciałabym być pewna, że zdjęcia te będą widoczne również dla innych! Z komputera Z adresu URL Biblioteka mediów Zdjęcie Tofu Pokaż Ukryj Nazwa pliku: Typ pliku: Data załadowania: Wymiary: Tytuł Tekst alternatywny Etykieta To dobre pytanie! Wróćmy do edytora wizualnego. W oknie edycji wpisu lub strony znajduje się przycisk Dodaj medium Teraz możemy załadować nowe medium, które będziemy mogli później umieścić w naszym wpisie lub na naszej stronie. Możemy również kliknąć zakładkę Biblioteka mediów i wybrać załadowany wcześniej obraz. Pamiętaj o tym, że wszystkie obrazy są przechowywane w tej bibliotece. Gdy znajdziesz już obraz, który chcesz wstawić, to możesz zmienić szczegóły, takie jak jego opis lub tekst alternatywny. Możliwa jest nawet zmiana wielkości obrazu. Jeżeli wybierzesz średni rozmiar obrazu, WordPress będzie wyświetlał mniejszą wersję obrazu, nie modyfikując oryginału To dość praktyczna funkcja. Niektóre moje zdjęcia są dość duże, a chciałabym, żeby część z nich można było zmieścić w małych polach dokumentów HTML Adres URL Wyrównanie Rozmiar Brak Do lewej Do środka Do prawej Miniatury Średni Duży Pełny rozmiar Wstaw do wpisu Gdy będziesz już gotowa, wystarczy, że klikniesz przycisk Wstaw do wpisu Wspaniale! Korzystając z opcji wyrównywania, mogę nawet sprawić, że obraz będzie otaczany tekstem Kim umieszcza na swojej stronie zdjęcia i inne media 149 Poleć książkęKup książkę Z pewnością. To dobrze, że rozumiesz HTML i CSS, ale WordPress sprawi, że proste mniej czasu formatowanie tekstu i wstawianie obrazów będzie zajmowało Tak, właśnie! K A MEDIÓ W To bardzo praktyczne rozwiązanie. Widzę, że WordPress naprawdę przyśpieszy moją pracę nad stroną Hau! Świetnie. Zobaczmy, jak wygląda gotowa strona No dobra… Widzę swoje zdjęcia, ale popatrz na tę czcionkę. Popatrz na ten grubaśny nagłówek. Nigdy nie zastosowałabym takich kolorów Jak mogę zmienić wygląd strony? Jak samodzielnie określać fonty i kolory? Aaa… Prawda… Kolory… 150 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Jedną z najważniejszych zalet WordPressa jest oddzielenie stylu od publikowanych treści A więc mój kod CSS znajduje się gdzieś indziej? Tak. CSS jest elementem motywu Czego? Nie martw się. Praca z WordPressem jest przyjemna. Dzisiaj i tak nauczyłaś się wielu nowych rzeczy. Jutro nie pracuję. Możemy spotkać się przed panelem Wygląd i wybrać na zakupy – poszukać jakichś ciekawych motywów. I tak chciałam poszukać sobie nowego motywu Świetnie. Naprawdę to doceniam. Już widzę, że zaprezentowane przez ciebie techniki zarządzania treścią pozwolą mi zaoszczędzić sporo czasu Kim umieszcza na swojej stronie zdjęcia i inne media 151 Poleć książkęKup książkę Chwileczkę, poczekaj! Prawie zapomniałam! Nie zgub tego R O T A R T M I N I S D A Hau hau Aby opublikować coś na stronie wykonanej na bazie WordPressa, musisz posiadać login i hasło administratora. Ukryj te dane w bezpiecznym miejscu. Podczas zakładania konta podaj swój prawdziwy adres e-mail. Dzięki temu, gdy zapomnisz hasła, będzie ono mogło zostać przysłane na twoją skrzynkę pocztową Dzięki! Długi dzień w mieście? GOSPODA Tak. Po kilku tygodniach spędzonych w lesie myślę, że miasto WordPress jest czymś wspaniałym Dbamy o porządek! Widzę! 152 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Początek pracy z WordPressem WordPress jest rozbudowanym narzędziem przeznaczonym do tworzenia blogów i systemem zarzą- dzania treścią. Systemy zarządzania treścią takie jak WordPress automatyzują wiele czynności zwią- zanych z pracą nad stronami internetowymi, takich jak np. ładowanie zdjęć i organizowanie treści. WordPress eliminuje również potrzebę ręcznego tworzenia kodu poszczególnych stron lub wpisów na blogu. W rozdziałach 2. i 3. mogliśmy testować stworzony przez nas kod HTML i CSS bezpośrednio na komputerze. Aby wykonać czynności związane z budową strony opartej na WordPressie opisane w tym rozdziale, będziesz potrzebował hosta (zobacz rozdział 5.) lub darmowego konta założonego w serwisie https://pl.wordpress.com/. Nie ma niczego za darmo. Darmowe konto charakteryzuje się ograniczoną funkcjonalnością i nie będziesz mógł korzystać z własnej nazwy domeny — Twoja strona będzie musiała być umieszczona pod adresem twoja_nazwa .wordpress.com. Po uiszczeniu dodat- kowej opłaty możliwości Twojego konta zostaną poszerzone — będziesz mógł na przykład przenieść swoją stronę pod inną domenę. W tej książce skupię się głównie na WordPressie niewymagającym korzystania z zewnętrznych usług hostingowych (http://pl.wordpress.org/). Dzięki temu będziemy mogli korzystać z niektórych bardziej zaawansowanych funkcji WordPressa, takich jak nieograniczone instalowanie motywów i wty- czek. Jeżeli chcesz uruchomić WordPressa na swoim serwerze, zajrzyj do ramki „Wskazówki dotyczące wyboru serwisu hostingowego WordPressa”, znajdującej się na końcu rozdziału 6. Wykonaj opisane tam czynności przed przystąpieniem do dalszej lektury tego rozdziału. Jedną z zalet WordPressa jest oddzielenie publikowanych treści od struktury i stylu strony. Przypo- mnij sobie, jak tworzyliśmy strony internetowe za pomocą kodu HTML. Cała treść (słowa wyświetlane w oknie przeglądarki), a także znaczniki znajdowały się w jednym dokumencie. Gdybyś chciał zmody- fikować treści znajdujące się w takim dokumencie, musiałbyś przeglądać dokument pełen znaczników. WordPress ułatwia edycję tekstów i umieszczanie mediów na stronie, ponieważ wyświetla tylko treści umieszczone na stronie — ukrywa wszystkie znaczniki. Zmiana wyglądu stron internetowych jest moż- liwa poprzez wprowadzanie zmian w motywach, które są niezależne od treści. Motywy w WordPressie pełnią funkcję podobną do kodu CSS, wpływającego na wygląd dokumentu HTML. Wszystkie te udogodnienia mają sprawić, że zamiast przejmować się znacznikami, skoncentrujesz się na najtrudniejszej rzeczy związanej z tworzeniem stron internetowych — publikowaniu interesują- cej treści. Popularność WordPressa wcale nie jest czymś dziwnym. Czas zgłębić jego tajniki. Logowanie się do WordPressa Gdy zainstalujesz WordPressa (lub założysz konto na stronie https://pl.wordpress.com/), będziesz musiał utworzyć nazwę użytkownika będącego administratorem, a także hasło. Będą to klucze do Twojego królestwa. Administrator ma pełny dostęp do konta i może edytować wszystkie opublikowane treści, dodawać nowe wpisy lub skasować całą stronę. Każda strona oparta na WordPressie wymaga utworze- nia przynajmniej jednego konta administratora. Dysponując nazwą użytkownika i hasłem, możesz zalogować się do kokpitu WordPressa (zobacz rysunek 4.1). Dostęp do kokpitu można uzyskać, wpisując w przeglądarce internetowej adres http:// adres-twojego-wordpressa /wp-admin/. Aby zaoszczędzić czas potrzebny na ponowne zalogowanie do kokpitu, dodaj tę stronę do ulubionych. Będziesz bardzo często korzystać z tego adresu! Logowanie się do WordPressa 153 Poleć książkęKup książkę Rysunek 4.1. Ekran logowania Kokpit WordPressa wygląda tak, jak pokazano na rysunku 4.2. Jest to zaplecze Twojej nowej strony opartej na WordPressie. Jest to narzędzie administracyjne pozwalające na modyfikacje strony, a także dodawanie do niej nowych elementów. Tylko Ty i osoby, którym utworzyłeś konta, macie dostęp do zaplecza strony. Rysunek 4.2. Kokpit WordPressa; zakładki znajdujące się po lewej stronie okna umożliwiają zarządzanie różnymi elementami Twojej strony 154 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Wszystkie osoby odwiedzające Twoją stronę będą widziały jej front, na którym będą znajdowały się wpisy publikowane na blogu, a także inne treści. Teraz Twój serwis wygląda mniej więcej tak, jak poka- zano na rysunku 4.3. Rysunek 4.3. Front Twojej witryny — wszystko to, co widzą odwiedzający ją goście; modyfikując stronę za pomocą jej kokpitu (zaplecza WordPressa), możesz wprowadzić zmiany widoczne dla gości. Na wygląd bloga wpływa wybrany motyw; na rysunku pokazano wygląd strony po wybraniu motywu Twenty Fourteen WskazóWka Warto pamiętać, że strona WordPressa jest dostępna dla wszystkich osób posiada- jących jej adres. WordPress umożliwia tworzenie szkiców wpisów, które nie są upubliczniane na stronie, ale wykonując ćwiczenia opisane w tej książce, będziesz publikował różne treści w internecie. Strona będzie dostępna, ale nie martw się na razie o swoją prywatność. Jeżeli nie udostępnisz komuś adresu, to prawdopo- dobieństwo, że ktoś obcy wejdzie na Twoją stronę, jest bardzo niskie. Pamiętaj, że strony stworzone podczas wykonywania ćwiczeń można później z łatwością skasować. Zapomniałeś, gdzie masz się zalogować? Jeżeli zapomniałeś adresu URL strony umożliwiającej zalogowanie do WordPressa, to spróbuj dodać do adresu swojej strony sufiks /wp-admin. Jeżeli zainstalowałeś Word- Pressa pod adresem http:// adres-twojego-wordpressa , to zalogowanie umożliwi adres http:// adres-twojego-wordpressa /wp-admin/. Logowanie się do WordPressa 155 Poleć książkęKup książkę Sprawdzaj efekty swojej pracy Tworząc podstrony i zawartość witryny za pomocą jej zaplecza, prawdopodobnie będziesz chciał zobaczyć, jak będą one wyglądały w przeglądarce gościa odwiedzającego stronę. Jeżeli jesteś zalogo- wany do WordPressa jako administrator, to u góry okna wyświetlany jest pasek narzędzi administracyj- nych (zobacz rysunek 4.4). Rysunek 4.4. Pasek narzędzi administracyjnych Jeżeli jesteś w kokpicie, to kliknij nazwę strony — spowoduje to przełączenie na podgląd frontu. Tworzona przeze mnie strona została nazwana Portfolio Kim, a więc aby włączyć podgląd frontu, musiałem kliknąć tę nazwę. Jeżeli widzisz front strony, a chcesz dodać do strony jakieś nowe elementy, to z rozwijanego menu wybierz Kokpit, co spowoduje wyświetlenie zaplecza (zobacz rysunek 4.5). Po prawej stronie paska narzędzi administracyjnych widoczne jest menu pozwalające na wylo- gowanie się (zobacz rysunek 4.6). Wylogowanie się jest bardzo ważne, jeżeli korzystasz z publicznego komputera! Nie chcesz, aby ktoś inny edytował Twoją stronę. Rysunek 4.5. Rozwijane menu widoczne po lewej stronie okna pozwala na przejście z podglądu frontu na zaplecze (wyświetlenie kokpitu) Rysunek 4.6. Rozwijane menu widoczne po prawej stronie okna umożliwia edycję profilu i wylogowanie się Wystarczy już tego przełączania pomiędzy frontem a zapleczem strony. Czas opublikować coś na stronie! Włącz motyw Twenty Fourteen — dzięki temu Twoja strona będzie wyglądała tak jak moja. Otwórz kokpit i z menu Wygląd wybierz opcję Motywy. Spowoduje to otwarcie okna zarządzania moty- wami (działanie tego okna omówimy później w rozdziale 5., w sekcji „Zmiana wyglądu: podstawy pracy z motywami”). Teraz po prostu sprawdź, czy aktywowano motyw Twenty Fourteen. Jeżeli nie jest on aktywny, znajdź go na liście motywów i kliknij przycisk Włącz. 156 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Treści publikowane na WordPressie: wpisy i strony Treści publikowane na WordPressie można podzielić na wpisy (posty publikowane na blogu) i strony. W ramach wpisów i stron można publikować te same treści, składające się z treści, odwołań, obra- zów, filmów itp. WordPress był początkowo projektowany jako narzędzie przeznaczone do tworzenia blogów, a więc domyślnie po otwarciu strony opartej na WordPressie wyświetlana jest lista wpisów. Wpisy są sortowane według daty, tak jak wpisy w dzienniku. Poza wpisami na swojej witrynie możesz również tworzyć strony, takie jak np. O autorze lub Kontakt. Informacje zawarte na tego typu stronach powinny być łatwo dostępne i umieszczanie ich we wpisie bloga nie ma większego sensu. Strony charakteryzuje jeszcze jedna zaleta, której nie mają wpisy: po stworzeniu strony odwołanie do niej jest umieszczane w menu nawigacji — w motywie Twenty Fourteen jest to poziomy pasek widoczny u góry każdej strony (zobacz rysunek 4.7). Rysunek 4.7. Strony są wyświetlane w menu nawigacji — dzięki temu osoby odwiedzające stronę mogą z łatwością dotrzeć do najważniejszych publikowanych przez Ciebie treści; odwołania do stron mogą zostać skasowane, gdy nie będą już potrzebne Wpisy są serią krótkich tekstów publikowanych na łamach bloga (zobacz rysunek 4.8) Rysunek 4.8. Wpisy, w przeciwieństwie do stron, zwykle nie są wyświetlane w górnym menu nawigacyjnym; posty są sortowane według daty publikacji; domyślnie strona z wpisami jest wyświetlana jako pierwsza Różnica pomiędzy wpisami i stronami jest najważniejszą rzeczą, którą trzeba zrozumieć przed przy- stąpieniem do pracy z WordPressem. Pamiętaj, że samodzielne treści należy publikować na łamach stron, a artykuły będące postami bloga należy publikować jako wpisy. Treści publikowane na WordPressie: wpisy i strony 157 Poleć książkęKup książkę Rozplanuj swoją witrynę Jeżeli chcesz poeksperymentować z WordPressem, to nie potrzebujesz dobrego planu witryny, ale warto stworzyć mapę struktury strony przed rozpoczęciem tworzenia jej zawartości. Najpierw pomyśl o wywarciu dobrego wrażenia na odbiorcy — które strony powinien on zobaczyć w pierw- szej kolejności? WordPress domyślnie jako pierwszą wywołuje stronę z blogiem, ale można to zmie- nić (zobacz rozdział 5., sekcja „Personalizacja ustawień”). Nie ma obowiązku publikowania wpisów na blogu! Jak chcesz zorganizować pozostałe strony? Warto zaplanować strukturę stron i zaznaczyć miejsce, jakie ma w niej pełnić blog. Jeżeli planujesz stworzenie prostego bloga, to struktura taka może zawie- rać tylko stronę bloga i stronę z informacjami o Tobie (zobacz rysunek 4.9). Strona główna (blog) O mnie Rysunek 4.9. Schemat organizacyjny bardzo prostej strony Jeżeli tak jak Kim chcesz stworzyć stronę zawierającą Twoje portfolio (Twoja witryna ma składać się z kilku podstron), to stworzenie planu takiej strony jest bardzo ważne (zobacz rysunek 4.10). Strona główna (blog) O mnie Portfolio Zdjęcia Komiksy Zdjęcia Tofu Fotogra(cid:30)a artystyczna Rysunek 4.10. Plan strony pomoże Ci podczas tworzenia jej zawartości; plan wykonaj przed przystąpieniem do pracy nad stroną — dzięki niemu publikowane przez Ciebie treści będą lepiej rozplanowane 158 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Po opracowaniu mapy swojej witryny możesz rozpocząć pracę nad poszczególnymi stronami wchodzącymi w jej skład. O konieczności tworzenia planu przypomnę jeszcze raz pod koniec tego rozdziału — będziesz wtedy wiedział, jak działają różne funkcje WordPressa. Teraz po prostu poznaj działanie WordPressa i dowiedz się, jak publikować stworzone przez siebie treści. Tworzenie pierwszej strony Stwórzmy stronę. Zaloguj się do kokpitu i wejdź w zakładkę Strony, znajdującą się w menu wyświetlanym po lewej stronie ekranu. Kliknij przycisk Dodaj nową (zobacz rysunek 4.11). Na ekranie otworzy się edytor wizualny (zobacz rysunek 4.12), który umożliwia edycję wpisów i stron. Stwórzmy prostą stronę za pomocą tego edytora. Na początku nadajmy jej tytuł. Kliknij napis Wprowadź tytuł i wpisz tytuł Moja strona, a następnie kliknij przycisk Zapisz szkic, znajdujący się w polu Opublikuj, umiejscowionym po prawej stronie ekranu. WordPress pozwala w ten sposób na zapisywanie efektów pracy bez ich publikowania. Teraz kliknij przycisk Podejrzyj. Twoja przeglądarka otworzy teraz nowe okno lub nową zakładkę i wyświetli Twoją stronę za pomocą bieżącego motywu (zobacz rysunek 4.13). Okno podglądu możesz otwierać w dowolnym momencie, ale strona nie zostanie opublikowana do momentu kliknięcia dużego niebieskiego przycisku Opublikuj. Rysunek 4.11. Aby utworzyć nową stronę, kliknij przycisk Dodaj nową w menu Strony, znajdującym się w pasku narzędzi umiejscowionym po lewej stronie ekranu Rysunek 4.12. Wizualny edytor stron; po lewej stronie widoczne są opcje pozwalające na publikację strony i jej właściwe zaszufladkowanie; w środkowej części ekranu umieszczono pole przeznaczone do pisania publikowanych treści, dodawania zdjęć itd.; w polu Wprowadź tytuł należy podać tytuł strony Treści publikowane na WordPressie: wpisy i strony 159 Poleć książkęKup książkę Rysunek 4.13. Podgląd strony umożliwia weryfikację wprowadzonych zmian przed opublikowaniem strony Jak widzisz, WordPress znacznie ułatwia tworzenie stron internetowych — nie musisz stosować znacznika title , nie musisz tworzyć kodu CSS definiującego styl nagłówka. WordPress oddziela zawartość strony od jej struktury i stylu — tworząc stronę za pomocą kokpitu, nie musimy przejmo- wać się tymi rzeczami. Możemy skoncentrować się na publikowanej treści, a WordPress wykona za nas wszystkie pozostałe zadania. Zamknij okno lub zakładkę z podglądem i wróć do kokpitu. Na naszej stronie testowej umieśćmy kolejne elementy. W edytorze wizualnym wprowadź następujący tekst: Tekst pogrubiony. Tekst zapisany kursywą. Sformatujmy go za pomocą paska narzędzi przeznaczonych do formatowania tekstu (zobacz rysunek 4.14). Zaznacz pierwszą linię wprowadzonego tekstu i kliknij przycisk B — zaznaczony tekst zostanie pogrubiony. Zaznacz drugą linię tekstu i kliknij przycisk I — zaznaczony tekst zostanie wyświe- tlony za pomocą kursywy. Rysunek 4.14. Pasek narzędzi przeznaczonych do formatowania tekstu umożliwia przeprowadzenie podstawowych operacji formatujących tekst bez konieczności posługiwania się znacznikami HTML Zapisz szkic i ponownie podejrzyj stronę. Teraz powinna ona wyglądać tak, jak pokazano na rysunku 4.15. 160 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Rysunek 4.15. Po sformatowaniu tekstu za pomocą edytora wizualnego możesz podejrzeć wygląd gotowej strony WordPress sformatował tekst za Ciebie — nie musisz stosować znaczników strong i  em . Zwróć uwagę, że w oknie podglądu WordPress umieścił oba akapity w osobnych wierszach, mimo że nie sto- sowaliśmy znaczników p . Jest to kolejna funkcja WordPressa, dzięki której oszczędzamy czas. Edytor wizualny jest narzędziem typu WYSIWYG — od razu widzisz efekt swojej pracy, dzięki temu edytor ten jest o wiele bardziej przyjazny dla użytkownika od standardowego edytora kodu HTML. Na stronie umieśćmy kolejny wiersz tekstu: Kliknij tu Zamieńmy ten napis na hiperłącze. Zaznacz go, a następnie kliknij przycisk Wstaw/edytuj odnośnik (zobacz rysunek 4.16). Rysunek 4.16. Aby wstawić hiperłącze, wystarczy zaznaczyć odpowiedni fragment tekstu i kliknąć przycisk Wstaw/edytuj odnośnik Treści publikowane na WordPressie: wpisy i strony 161 Poleć książkęKup książkę Kliknięcie wspomnianego przycisku spowoduje otwarcie okna dialogowego, w którym możesz podać adres URL (zobacz rysunek 4.17). Wprowadź adres http://natecooper.co/ i kliknij przycisk Dodaj odnośnik. Zwróć uwagę na to, że tekst będący odwołaniem wygląda jak hiperłącze nawet w oknie edytora wizualnego. Prawda, że dodawanie hiperłączy jest proste? Rysunek 4.17. Po kliknięciu przycisku Wstaw/edytuj odnośnik wyświetlane jest okno dialogowe, w którym możesz wprowadzić docelowy adres URL Teraz dodajmy do dokumentu pierwszą linię — napis „Witaj, świecie!”. Chcemy, aby linia ta była nagłówkiem. Jak to zrobić? W pasku z narzędziami edytora wizualnego nie ma przycisku pozwala- jącego na przekształcenie zaznaczonego tekstu w nagłówek. Być może zauważyłeś wcześniej mały, dziwny przycisk znajdujący się po prawej stronie paska z narzędziami. Przycisk ten oznaczono etykietą Przełącz widoczność paska narzędzi (zobacz rysunek 4.18). Jeżeli go klikniesz, to na ekranie zostanie wyświetlony drugi rząd przycisków paska narzędzi. Jednym z wyświetlonych elementów będzie lista rozwijana z etykietą Akapit. W oknie edytora wpisz tekst „Witaj, świecie!”, zaznacz go, a następnie kliknij na listę Akapit. Wybierz z niej opcję Nagłówek 1. W ten sposób stworzyliśmy nagłówek. Rysunek 4.18. Kliknięcie przycisku Przełącz widoczność paska narzędzi powoduje wyświetlenie dodatkowego, ukrytego rzędu opcji formatowania tekstu Zapisz szkic i otwórz podgląd dokumentu. Powinien on wyglądać tak, jak pokazano na rysunku 4.19. Dzięki WordPressowi mogliśmy zbudować funk- cjonalną stronę w zaledwie kilka minut. Edytor wizu- alny zwalnia nas z obowiązku formatowania tekstów za pomocą znaczników HTML. Czy naprawdę nie trzeba uczyć się tajników języka HTML? Dobre sobie! Nie można poznać za bardzo języka HTML lub CSS. Wizualny edytor WordPressa tworzy za Ciebie kod, co może czasami przy- śpieszyć pracę, ale WordPress również korzysta ze znacz- ników HTML. Zamknij podgląd strony i wróć do edytora. Kliknij przycisk Tekstowy, znajdujący się nad polem prze- znaczonym do wpisywania tekstu. Powinieneś zobaczyć prawie cały kod HTML tworzący Twoją stronę (zobacz rysunek 4.20). 162 Rozdział 4. Kim w mieście WordPress Rysunek 4.19. Napis „Witaj, świecie!” jest teraz nagłówkiem — jest wyróżniony Poleć książkęKup książkę Rysunek 4.20. Po kliknięciu zakładki Tekstowy edytor wyświetla kod HTML generowany przez WordPressa; jeżeli wprowadzisz tutaj znaczniki HTML, to będą one wpływały na wygląd tworzonej przez Ciebie strony Strona w dalszym ciągu zawiera znaczniki HTML, ale proces tworzenia strony został zautomaty- zowany przez WordPressa. Warto zwrócić uwagę na kilka rzeczy. Po pierwsze, nie ma tutaj kodu CSS. Podobnie jak w przypadku tworzenia strony za pomocą edytora kodu, kod CSS umieszczony jest w innym miejscu niż kod HTML. Cechą charakterystyczną edytora WordPressa jest to, że nawet w tym trybie nie widać znaczników p /p . Co ciekawe, WordPress filtruje je z tekstu widocznego w try- bie tekstowym. Jednak jeżeli wprowadzisz samodzielnie (w widoku tekstowym) znaczniki p /p lub  br , to WordPress rozpozna je i będzie brał je pod uwagę przy formatowaniu tekstu. Warto wiedzieć, jak WordPress automatycznie formatuje kod, ponieważ będziesz mógł wtedy samodzielnie wprowadzać modyfikacje tego formatowania. Jeżeli potrafisz analizować kod strony ze znacznikami HTML, to możesz wtedy ręcznie nanosić poprawki i modyfikować wygląd strony w wybranych miejscach. Codziennie miliony użytkowników korzystają z WordPressa bez jakiejkolwiek znajomości znaczni- ków HTML, ale nie znając tego języka, nie mają oni pełnego wpływu na wygląd akapitów, odstępy i for- matowanie. Takie problemy nie powinny spotkać Ciebie. Im lepiej znasz języki HTML i CSS, tym większe są Twoje możliwości wpływania na wygląd stron. Wstawianie mediów Czas dodać obraz do naszej strony. Możesz wstawić nawet ten sam obraz, z którego korzystałeś, pra- cując nad stroną internetową w rozdziale 2. Wstawianie obrazów jest czymś naprawdę interesującym, ponieważ WordPress usprawnia pracę z obrazami za pomocą wbudowanej biblioteki mediów. Wróć do edytora wizualnego i zaznacz napis „Witaj, świecie!”, a następnie wciśnij klawisz Delete. W ten spo- sób otrzymałeś miejsce, w które wstawisz obraz. Kliknij przycisk Dodaj medium (zobacz rysunek 4.21). Na ekranie powinno wyświetlić się okno dialogowe pozwalające na wstawianie mediów (zobacz  rysunek 4.22). Treści publikowane na WordPressie: wpisy i strony 163 Poleć książkęKup książkę Rysunek 4.21. Przycisk Dodaj medium Rysunek 4.22. Teraz możesz kliknąć przycisk Wybierz pliki i przejrzeć zawartość swojego komputera w celu znalezienia obrazów, które chcesz umieścić na swojej stronie; możesz też przeciągnąć je do tego okna i upuścić Innym sposobem wstawiania obrazów jest ich przeciąganie do edytora wizualnego. Po przeciągnięciu obrazu wyświetlany jest ekran dialogowy widoczny na rysunku 4.23. Rysunek 4.23. Biblioteka mediów WordPressa zawiera wszystkie załadowane wcześniej obrazy; można w niej umieszczać również materiały wideo, dokumenty PDF, dokumenty programu Word, a także inne pliki 164 Rozdział 4. Kim w mieście WordPress Poleć książkęKup książkę Fotografia zostanie błyskawicznie załadowana do Word- Pressa — postęp ładowania jest wskazywany graficznie za pomocą paska. Po załadowaniu obrazu do biblioteki mediów będzie on wyróżniony kolorem niebieskim, a w jego prawym górnym rogu zostanie umieszczony haczyk (zobacz rysu- nek 4.23). Oznacza on, że obraz został poprawnie załadowany i może być wstawiony na stronę. Prawda, że to bardzo proste? Po załadowaniu zdjęcia do WordPressa możemy wstawić je na naszą stronę. Służy do tego przycisk Wstaw na stronę, który znajduje się w prawym dolnym rogu okna. Jednakże zanim go klikniesz, musisz skonfigurować jeszcze kilka opcji. Po prawej stronie wybranego obrazu wyświetlane są szczegółowe informacje o nim (zobacz rysunek 4.24). Pamię- tasz, jak wstawiając obraz do dokumentu HTML za pomocą znacznika img src , musieliśmy dodawać parametr alt=”opis”, umożliwiający wyszukiwarkom poprawne skata- logowanie wstawianego obrazu? WordPress również umożli- wia dodanie tego parametru do obrazu. W polach Tytuł i Opis można umieścić informacje, które są dodatkowe i zwykle nie są widoczne dla czytelników, ale mogą pomóc Ci w póź- niejszym odnalezieniu zdjęcia w bibliotece. Zawartość pola Etykieta będzie wyświetlana na stronie (podanie etykiety jest również dobrowolne). Jednakże powinieneś wyrobić sobie nawyk wpisywania opisu obrazu w polu Alternatywny tekst, ponieważ informacje podane w tym polu pomagają w opty- malizacji strony pod kątem wyszukiwarek. Tekst ten zostanie również odczytany przez programy opisujące zawartość ekranu dla osób niewidomych. Na razie nie będziemy jeszcze zajmować się zawartością rozwijanego menu Wyrównanie. W menu Odnośnik do na razie wybierz opcję Brak. Pamiętaj o tym, że obrazy mogą być również hiperłączami. Domyślnie obrazy są odnośnikami do samych siebie. Pozwala to na umieszczenie miniatury obrazu na stronie, a użytkownik po kliknięciu na miniaturę będzie mógł zobaczyć obraz w większej rozdzielczości. Na razie chcemy po prostu wstawić obraz na naszą stronę. Po wybraniu opcji Brak w menu Odnośnik do możemy wstawić obrazek, który nie będzie odnośnikiem. WordPress może również automatycznie zmienić rozdzielczość obrazu wyświetlanego na stronie. Jeżeli Twój obrazek charakteryzuje się odpowiednio wysoką rozdzielczością, to powinieneś mieć do wyboru cztery opcje: Miniatura, Średni, Duży, Pełny rozmiar. Wybierz opcję Średni (zobacz rysunek 4.25). Kliknij przycisk Wstaw na stronę, WordPress automatycznie wróci do okna edytora (zobacz rysunek 4.26). WskazóWka WordPress nie zwiększa rozdzielczości obrazów. Jeżeli Twój obraz charakteryzuje się zbyt niską rozdziel- czością, to liczba opcji dostępnych w menu Rozmiar może być ograniczona. Rysunek 4.24. WordPress oferuje wiele opcji pozwalających na zarządzanie obrazami — umożliwia między innymi tworzenie etykiet i alternatywnego tekstu, a także zmianę rozdzielczości obrazu (dostosowanie jego wymiarów do aktualnych potrzeb) Rysunek 4.25. Po załadowaniu obrazu do WordPressa automatycznie stworzone zostaną kopie tego obrazu o niższej rozdzielczości; jeżeli załadujesz obraz o niskiej rozdzielczości, to możesz mieć do wyboru tylko opcje Miniatura i Średni Treści publikowane na WordPressie: wpisy i strony 165 Poleć książkęKup książkę Rysunek 4.26. W edytorze wizualnym widoczny jest obrazek, a nie kod odpowiedzialny za jego wyświetlenie, jak w przypadku edytora kodu HTML Kliknij obrazek, aby go zaznaczyć. Wokół obrazu pojawi się osiem punktów służących do zmiany jego rozmiarów. Kliknięcie ikony X spowoduje usunięcie obrazu ze strony (obraz ten pozostanie w bibliotece mediów i będziesz mógł skorzystać z niego w przyszłości). Kliknięcie ikony Edytuj pozwala na wprowadzenie zmian w opisie, etykiecie i tekście alternatywnym. Zaznaczony obraz możesz wyrów- nać za pomocą przycisków wyrównywania. Obraz możesz również przekształcić (tak samo jak tekst) w hiperłącze. Obraz w oknie podglądu wygląda tak samo, jak będzie wyglądał na finalnej wersji strony. Kliknij przycisk Zapisz szkic, a następnie otwórz podgląd strony — powinna ona wygląda tak, jak poka-
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Stwórz swoją własną stronę WWW. Komiksowy kurs HTML-a, CSS-a i WordPressa
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: