Żadna inna platforma nie daje ci mocy, aby dostosować wygląd swojej witryny internetowej, takiej jak WordPress. To jeden z powodów, dla których WordPress jest popularny zarówno wśród wydawców, jak i twórców stron internetowych.


Możesz wziąć podstawowy (i bezbarwny) motyw WP, dodać logo, edytować kilka wierszy kodu, zmienić CSS i szybko stworzyć profesjonalną (a jednocześnie przyjazną) stronę internetową. To łatwa praca, a ten samouczek pokaże, jak to zrobić.

Jesteś gotowy? Zacznijmy od pierwszych rzeczy; kolory.

Projektowanie schematu kolorów

Podczas opracowywania schematu kolorów dla witryny WordPress należy wziąć pod uwagę wiele kwestii. Pomyśl o tym jak o malowaniu domu lub sklepu z kamieniami. Musisz określić kolor, który będzie na twoich ścianach i kolor, który chcesz drzwi.

Sposób, w jaki malujesz swoje zewnętrzne i wewnętrzne wnętrza, będzie zależał od kilku czynników, które są twoimi osobistymi preferencjami.

Kolorystyka witryny WordPress też nie jest inna. Jakiego koloru chcesz linki? Twoje pochodzenie, w jaki sposób uczynisz je najbardziej atrakcyjnym i sprawisz, że konkurenci znów staną się otwarci? Które kolory uzupełnią (a nawet wzmocnią) Twoją wiadomość? Jak chcesz swój tekst? Niebo ogranicza wybór kolorów, których możesz użyć na swojej stronie WP.

Musisz określić wszystkie kolory, których będziesz używać od samego początku. Radziłbym trzymać się tylko trzech kolorów, ale możesz używać tyle kolorów, ile chcesz.

Po prostu nie przesadzaj, bo w końcu rozcieńczysz swój przekaz marketingowy całym tym kolorem. W końcu nadmiar wszystkiego jest trujący, więc bez względu na wybrane kolory ważne jest, aby zapewnić harmonię.

Najlepiej używać większości kolorów, w których większość ludzi je zobaczy (i mam nadzieję) je pokocha. Mówię o twoim logo i mastheadzie. Te obszary są dokładnie tam, gdzie potrzebujesz najwięcej kolorów; reszta witryny może być mniej kolorowa, ale bardziej informacyjna.

216 kolorów kontra 12 kolorów

Wszyscy znamy dwanaście podstawowych kolorów, ale sieć jest pełna kolorów i ich różnych odcieni. Z tego właśnie powodu wybranie koloru, który będzie emanował osobistym ciepłem, tworząc profesjonalny wygląd, może być trudnym zadaniem.

Masz jednak szczęście, ponieważ łowiłem ryby w Internecie i znalazłem następujące narzędzia na początek:

KULER

kuler

Kuler został zaprojektowany przez Adobe, aby pomóc programistom tworzyć najlepsze schematy kolorów. Kuler to narzędzie online, co oznacza, że ​​możesz nosić go ze sobą i używać z dowolnego miejsca, ale jest też aplikacja komputerowa, która pomaga opracowywać schematy kolorów bezpośrednio z pulpitu. Ponadto, jeśli masz identyfikator Adobe ID, możesz zapisać swoje schematy kolorów jednym kliknięciem.

Kuler ma do wyboru różne reguły kolorów, w tym między innymi Monochromatic, Compound, Complementary, Analogous i Triad.

Sprawdź Kuler.

WYKRES KOLORÓW HTML

Znajomość kolorów, których będziesz używać, to tylko połowa pracy. Aby zaimplementować kolory, musisz je przetłumaczyć na kody HTML.

karta kolorów HTML

W tym miejscu pojawia się karta kolorów HTML. Jest to kolorowa karta z ponad 200 (216 faktycznie) kodami kolorów w sieci. Uzbrojony w wykres, żaden kolor pod słońcem nie powinien być trudny do wdrożenia.

Kody będą działać z HTML, CSS, Adobe PhotoShop i innymi narzędziami do manipulacji grafiką, dzięki czemu masz na całym świecie swobodę grania kolorami tak, jak chcesz.

Sprawdź tabelę kolorów HTML.

OGÓLNE

Jeśli potrzebujesz pomocy w doborze kolorów, GenoPal to aplikacja, której potrzebujesz. Jest to bardzo prosta aplikacja internetowa, która „przypina” palety kolorów do okna przeglądarki. Po wybraniu kolorów pojawiają się one w przeglądarce w postaci kolorowych „karteczek samoprzylepnych”. ��

genopal

Dzięki GenoPal możesz zwiększyć jasność i kontrolować nasycenie odcienia, dzięki czemu uzyskasz dokładnie taki odcień, jaki chcesz.

Na ich stronie internetowej przygotowywana jest aplikacja mobilna. Po uruchomieniu pozwoli Ci nosić aplikację i rozwijać kolory na urządzeniu mobilnym. Ich konstrukcja jest genialna, a fakt, że ta aplikacja naprawdę działa, jest wyraźnym znakiem, że GenoPal oznacza biznes.

COLORHEXA

ColorHexa to wersja online programu płyta malarska artysty. Ta strona internetowa umożliwia miksowanie kolorów poprzez wpisanie kodów kolorów. Ich wyprzedzająca aplikacja jest narzędziem do mieszania kolorów, ale mają również generator gradientu i odejmator kolorów. Czy ten geniusz nie działa tutaj?

colorhexa

Jak działa ColorHexa Blender? Wystarczy wpisać kody kolorów oddzielone znakiem „+”, a ColorHexa wykona resztę pracy. Na przykład próbowałem:

# ff0000 + # 0000ff + # ff00ff i dostałem # aa00aa. Co więcej, dają ci całą stronę z informacjami o kolorze (na końcowym kolorze, np. # Aa00aa). To jedno z narzędzi, które musisz wypróbować, aby doświadczyć mieszania kolorów jak nigdy dotąd.

Sprawdź ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

najlepszy generator gradientu kolorów

Jest to prawdopodobnie najlepsze narzędzie do generowania gradientów kolorów. Jest całkowicie online i pomaga generować odświeżające punkty środkowe i odpowiadające im kody CSS. Udostępniają także dodatki do przeglądarki Chrome i Firefox, które umożliwiają integrację aplikacji z przeglądarką w celu łatwiejszego i szybszego dostępu.

Jest obszar podglądu, w którym widzisz swój gradient, więc wszystko, co musisz zrobić, to wygenerować gradient według własnego uznania kopiuj wklej wygenerowany kod CSS. To naprawdę takie proste i mają więcej kolorów niż kiedykolwiek będziesz używać.

Sprawdź Ultimate CSS Gradient Generator.

Pobieranie czcionek

Teraz, gdy pokazałem Ci, jak wybierać i mieszać kolory, takie jak Picasso, bawmy się czcionkami.

Twoje kolory i projektowanie stron internetowych przyciągną ludzi, ale to twoje słowa, tj. Strony i posty, sprawią, że ludzie pozostaną.

Cały czas tworzymy najlepsze historie, więc większość z nas zapomina, że ​​czcionki też mają znaczenie. Ale wybrana czcionka wpływa na interakcje użytkowników z witryną. Dzięki odpowiednim czcionkom docelowi odbiorcy będą chcieli pozostać i ostatecznie przechodzić do innych stron, co jest dokładnie tym, czego chcesz. Zaręczynowy.

Istnieje milion i jedna czcionka, ale niestety użytkownik zobaczy tylko czcionki zainstalowane na swoim komputerze. Jeśli czcionka, której używasz, nie jest zainstalowana na ich komputerach, zobaczy bliską alternatywę (lub zupełnie inną czcionkę), która nie będzie miała takiego efektu, jaki chciałeś.

„Zabawa czcionkami przypomina zabawę ogniem. Czasami może zapalić zapałkę na stronie internetowej, brylant ładnego tekstu. Innym razem może spalić cały dom. ” – Lorelle z cameraontheroad.com.

Możesz kontrolować swoje czcionki (i tworzyć pożądany efekt) za pomocą arkusza stylów. W twoim motywie arkusz stylów jest zwykle style.css plik. Możesz użyć tego pliku do kontrolowania koloru czcionek, rodzaju czcionki / rodziny czcionek, rozmiaru czcionki i innych aspektów wybranej czcionki.

Oto dobry przykład:

#menu {rodzina czcionek: Arial, Helvetica, Sans-serif, Verdana, „Times New Roman”; rozmiar czcionki: 0,8em; kolor czarny;}

Powyższy kod ustawi rozmiar czcionki w menu na 0.8em i ustawi kolor na czarny. Ustawi również czcionkę na Arial, ale jeśli użytkownik nie ma Arial na swoim komputerze, Helvetica przejmie kontrolę. Jeśli nie będą mieli Helvetiki ani Arial, przejmie je Verdana, Sans-serif lub Times New Roman.

Kontrolując czcionki, możesz stworzyć bardziej spójny wygląd.

Aby jednak raz na zawsze rozwiązać problem niespójności czcionek, można użyć czcionek osadzonych. Korzystając z czcionek osadzonych (lub zewnętrznych), użytkownik nie musi mieć czcionki na swoim komputerze.

Dodatkowo jest to łatwa do wykonania praca.

Wszystko, co musisz zrobić, to otworzyć swój style.css i umieść następujący kod na górze.

@ font-face {font-family: Museo300; src: url ("fonts / museo300-regular.ttf") format: ('truetype'); font-weight: normal;}

UWAGA: Musisz zdefiniować nazwę i lokalizację swojej czcionki. W powyższym przykładzie „Museo300” to czcionka zapisana w folderze o nazwie „fonts”.

Aby na przykład użyć czcionki w całej witrynie, możesz napisać:

body {font-family: Museo300;}

Możesz użyć osadzonej czcionki dla dowolnego elementu w swojej witrynie. Na przykład…

#menu {font-family: Museo300;}

… Ustawi Museo300 w twoim menu.

Powyższa metoda oznacza, że ​​musisz pobrać czcionkę i przesłać ją na serwer, co jeśli mnie zapytasz, jest dość nużące.

jednak, ynie musisz pobierać żadnej zewnętrznej czcionki, której chcesz użyć.

Możesz po prostu połączyć się z czcionkami z sekcji head (header.php) w ​​następujący sposób:

Jak i gdzie dodajesz powyższą linię? Musisz otworzyć Panel administracyjny WordPress -> Wygląd -> Edytor -> header.php

Jeśli nie chcesz lub nie możesz edytować pliku header.php, po prostu zaimportuj czcionki, wpisując następujący wiersz w style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

Powyższy przykład pozwoli ci użyć Nad tęczą czcionka z Google w dowolnym miejscu na Twojej stronie. Na przykład, jeśli chcesz używać Over The Rainbow w swojej witrynie, możesz użyć tego kodu:

body {font-family: „Over The Rainbow”;}

Google zapewnia ponad 600 darmowych rodzin czcionek, więc zagraj!

Aktualizacja (07.12.12): Jeśli chcesz łatwo dodawać czcionki Google do swojej witryny WordPress, możesz użyć Wtyczka Google Typography. Oprócz tego możesz dowiedzieć się więcej na temat czcionek Google i sposobu ich implementacji w tym artykule. Popraw typografię witryny WordPress za pomocą czcionek Google autorstwa Toma Ewera.

Więcej zasobów na temat grania czcionkami

Wtyczki WordPress do dodawania czcionek

A dla tych, którzy nie chcą zagłębiać się w kod, zawsze możesz zainstalować wtyczkę WordPress, aby wykonać dla ciebie ciężkie podnoszenie. Oto kilka bardziej popularnych darmowych wtyczek czcionek z WordPress.com:

Dobrze się bawisz? Przejdźmy dalej…

 Formatowanie daty i godziny

Czy byłeś na stronie WordPress, która wyświetlała datę lub godzinę w naprawdę przyjemnym tonie, który sprawiał, że czujesz się jak kompletny noob, jeśli chodzi o twoją stronę? Właściciele tych witryn właśnie grali z pojedynczy wiersz kodu a teraz nie masz dość ich dat. Ha ha.

Dobra wiadomość, możesz edytować ten wiersz kodu i zaskoczyć również swoich czytelników.

W Twoim Pulpit nawigacyjny WP, nawigować do Wygląd, a następnie do Redaktor jak pokazano niżej:

data formatowania

Tam znajdziesz listę plików .php po prawej stronie:

pojedynczy post

Kliknij pojedynczy post (single.php), a po otwarciu otwórz pasek wyszukiwania, naciskając Ctrl + F.. W wyświetlonym pasku wyszukiwania wpisz:

czas

Natychmiast zauważysz linię, która może wyglądać mniej więcej tak:

Teraz obszar do edycji to („F Y”).

Pozwólcie mi rozwinąć ten rozdział, aby dać wam coś bardziej mięsistego do gryzienia.

„F” w („F Y”) oznacza Pełna nazwa miesiąca a „Y” oznacza Rok w 4 cyfrach. Dlatego jeśli użyjesz („F Y”), twoja data będzie wyglądać następująco:

wrzesień 2013

Jeśli wstawisz przecinek między F i Y, powinieneś mieć coś takiego:

Wrzesień 2013

Jeśli chcesz dodać dzień i inne elementy, możesz użyć następujących znaków:

l = pełna nazwa dnia (małe litery L)

F = miesiąc

j = dzień miesiąca (data)

Y = rok w 4 cyfrach

y = rok w 2 cyfrach

Więcej znaków można znaleźć w poniższej tabeli:

formatowanie tabeli dat

A tutaj kilka przykładów:

przykłady formatowania daty

Zawsze pamięta, aby edytować tylko znaki w nawiasach kwadratowych („F Y”) i, weź pod uwagę, nie usuwaj pojedynczych cudzysłowów. Możesz użyć dowolnej liczby postaci, aby osiągnąć pożądany efekt, i pamiętaj, aby po zakończeniu zapisać wszystko.

Co więcej, możesz pozbyć się daty, usuwając …

… Jak kiedyś na moim blogu. �� Teraz dostaję tylko Wysłany przez Freda w tej i innej kategorii… bla bla. Żadnych dat.

Czy jesteś gotowy na następną część? Lepiej bądź.

Nie znaleziono funkcji czas?

To dobrze, ponieważ wiele motywów używa teraz funkcji the_date () zamiast funkcji__time (), co jest właściwie lepszą praktyką. Jeśli Twój motyw korzysta z funkcji_data (), nie musisz go edytować, ponieważ możesz po prostu zmienić sposób wyświetlania danych w panelu w „Ustawienia-> Ogólne”.

Korzystanie z obrazów

Jest to prawdopodobnie najłatwiejsza (i najkrótsza) część tego samouczka. Ale jeśli jesteś naprawdę nowy w WordPressie, dodawanie obrazów może być wyzwaniem.

WordPress pozwala dodawać obrazy za pomocą narzędzia do przesyłania lub (przycisk Dodaj multimedia) podczas tworzenia nowego postu lub strony. Wszystko, co musisz zrobić, to umieścić kursor w miejscu, w którym ma być obraz w poście lub na stronie, a następnie kliknij „Dodaj multimedia”.

Dodaj media

Po otwarciu narzędzia do przesyłania możesz dodać inne szczegóły, takie jak podpis, rozmiar, linki i wyrównanie.

narzędzie do przesyłania

Ten obszar znajduje się po prawej stronie narzędzia do przesyłania.

Aby dowiedzieć się więcej o dodawaniu zdjęć, sprawdź następujące zasoby:

A jeśli nie masz pewności, gdzie znaleźć niesamowite niesamowite zdjęcia, sprawdź post, w którym napisaliśmy, o najlepszych zasobach graficznych dla WordPress.

Widzieć? Mówiłem ci, że będzie najkrótszy ��

Dodawanie Favicon

Zanim całkowicie zapomnimy o obrazach, pozwól nam stworzyć i dodać favicon do swojej witryny WordPress. Favicon (lub ikona ulubionych) to ikona używana do dodawania zakładek do strony internetowej.

Favicon pomoże czytelnikom zidentyfikować twoją stronę wizualnie.

Ogólnie favicon to plik graficzny o wymiarach 16 x 16 pikseli z rozszerzeniem .ico. Rozszerzenie oznacza ikonę.

Jak utworzyć Favicon

Możesz utworzyć swojego favicon online lub za pomocą programów do edycji obrazów, takich jak GIMP, lub dowolnego innego, który pozwala zapisywać pliki .ico. Większość usług online jest bezpłatna.

Chociaż obraz jest zwykle bardzo mały (16 na 16 pikseli), ikona ulubionych powinna reprezentować cały blog. Obraz lub tekst, którego używasz do tworzenia swojej ulubionej, powinien reprezentować Twój biznes online.

Jeśli używasz edytora obrazów:

  • Przycinaj lub dodaj odpowiednio miejsce, aby obraz był kwadratowy
  • Zmień rozmiar obrazu na 16 x 16 pikseli i
  • Zapisz obraz jako favicon.ico

Usługi online, których można użyć do tworzenia ulubionych, obejmują (ale nie wyłącznie):

Po utworzeniu favicon pozwolą Ci pobrać go na komputer, więc nie martw się.

Jak zainstalować Favicon w WordPress

Jeśli w głównym folderze motywu znajduje się inna ikona ulubionych, musisz ją usunąć za pomocą klienta FTP lub dowolnej dostępnej metody. Klienty FTP są zalecane, ponieważ są łatwe w użyciu i można szybko znaleźć dowolny plik, którego szukasz.

W tym samouczku użyłem faviconer.com, aby utworzyć favicon dla mojego bloga i Filezilli, aby usunąć istniejące favicony.

Mając plik favicon.ico w ręku, prześlij go do głównego folderu motywu. To jest folder, w którym przechowywany jest bieżący motyw.

Następnie prześlij kolejną kopię swojego ulubionego do folderu głównego (zwykle public_html) lub głównego katalogu, w którym przechowywana jest Twoja strona, abyś mógł zobaczyć swój ulubiony po wpisaniu yoursite.com/favicon.ico. Spowoduje to automatyczne dodanie ulubionych do Twoich kanałów.

Po zakończeniu przesyłania nadszedł czas na uruchomienie favicon.ico. Oto co powinieneś zrobić:

Dodanie Favicon za pomocą wtyczki

Najlepszym sposobem na dodanie favicon jest użycie wtyczki. Polecam użycie „Wszystko w jednym Favicon”Plugin do bardziej zaawansowanego użycia dla bardzo prostego podejścia, którego możesz użyć„Najprostszy Favicon”Plugin, który nie ma żadnych opcji zaplecza, wystarczy przesłać plik o nazwie favicon.ico we właściwe miejsce na serwerze.

favicon typu „wszystko w jednym”

Ręczne dodawanie favicon do szablonu

Niektóre osoby wolą (choć nie jest to najlepszy sposób) ręczne dodawanie ulubionych do szablonu, aby to zrobić, wykonaj następujące kroki:

  • Zaloguj się do swojego Deska rozdzielcza
  • Nawigować do Wygląd
  • Następnie do Redaktor (edytor motywów)
  • Znajdź i otwórz header.php (nagłówek) plik

Dodaj ten wiersz do pliku nagłówka (najlepiej na górze, gdzie widać inne tagi:

Zapisz raz zrobione. 

Odśwież przeglądarkę, aby zobaczyć nowe zmiany.

W tym momencie powinieneś mieć możliwość zmiany kolorów, wybierania lepszych czcionek, formatowania dat i godzin, używania obrazów i dodawania ulubionych.

Wniosek

Jest tak wiele do omówienia na temat przeprojektowania witryny WordPress, że próba uwzględnienia wszystkiego w jednym poście byłaby dla ciebie niekorzystna.

Aby jak najlepiej skorzystać, najlepiej podzielić samouczek na kilka części (jest to część 1). Będziemy dzielić się kolejnymi sztuczkami przeprojektowującymi, gdy nadejdą dni, więc bądź czujny. Celem tych samouczków jest pomoc w stworzeniu najlepszej strony WordPress w historii i sprawienie, że poczujesz się szczęśliwszy, ponieważ zrobiłeś to wszystko sam.

Jeśli chcesz podzielić się opinią lub dodać coś do dyskusji, zostaw komentarz w sekcji komentarzy poniżej!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me