Wskazówki dotyczące przeprojektowania witryny WordPress

Żadna inna platforma nie daje Ci mocy, aby dostosować wygląd i styl swojej witryny, jak WordPress. Jest 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 szary) motyw WP, dodać logo, edytować kilka linii kodu, zmienić swój CSS i mieć profesjonalną (jeszcze personalną) stronę internetową w mgnieniu oka. To łatwa praca, a ten samouczek pokaże Ci, jak to zrobić.

Gotowy? Zacznijmy od rzeczy po pierwsze; kolory.

Projektowanie Kolorystyki

Opracowując schemat kolorów dla witryny WordPress, należy wziąć pod uwagę wiele rzeczy. Pomyśl o tym, jak o malowaniu domu lub sklepu z kamieniami i zaprawą. Musisz określić kolor, który pójdzie na ścianach i kolor, który chcesz drzwi.

Sposób malowania elewacji i wnętrz zależy od kilku czynników, które są twoimi osobistymi preferencjami.

Kolorowanie witryny WordPress również nie jest inne. Jakiego koloru chcesz swoje linki? Twoje tło, w jaki sposób uczynisz go najbardziej atrakcyjnym i pozostawisz konkurentom usta agape? Jakie kolory uzupełnią (a nawet wzmocnią) Twój przekaz? Jak chcesz SMS-a? Niebo jest granicą wyboru kolorów, których możesz użyć na swojej stronie WP.

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

Po prostu nie przesadzaj, bo skończysz rozcieńczając swoją wiadomość marketingową w tym kolorze. W końcu nadmiar czegokolwiek jest trujący, więc bez względu na kolory, które wybierzesz, ważne jest, aby zapewnić harmonię.

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

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 wybór koloru, który emanuje osobistym ciepłem podczas tworzenia profesjonalnego wyglądu, może być trudnym zadaniem.

Masz jednak szczęście, ponieważ łowiłem w całym Internecie i znalazłem następujące narzędzia, aby zacząć:

KULER

Kuler został zaprojektowany przez firmę Adobe, aby pomóc programistom internetowym tworzyć najwyższej klasy schematy kolorów. Kuler jest narzędziem online, co oznacza, że możesz go nosić i używać z dowolnego miejsca, ale istnieje również aplikacja komputerowa, która pomoże Ci opracować schematy kolorów bezpośrednio z pulpitu. Ponadto, jeśli masz identyfikator Adobe ID, możesz zapisać schematy kolorów za pomocą jednego kliknięcia.

Istnieją różne zasady kolorów do wykorzystania z Kuler, w tym monochromatyczne, złożone, komplementarne, Analogowe i Triadowe między innymi.

Spójrz na Kulera.

WYKRES KOLORÓW HTML

Znajomość kolorów, których użyjesz, to tylko połowa zadania. Aby zaimplementować kolory, musisz przetłumaczyć je na kody HTML.

Tutaj pojawia się wykres kolorów HTML. Jest to kolorowy Wykres z ponad 200 (w rzeczywistości 216) kodami kolorów internetowych. Uzbrojony w Wykres, żaden kolor pod słońcem nie powinien okazać się trudny do wdrożenia.

Kody będą współpracować z HTML, CSS, Adobe PhotoShop i innymi narzędziami do manipulacji graficznej, dzięki czemu masz całą swobodę na świecie, aby bawić się kolorami tak bardzo, jak chcesz.

Sprawdź tabelę kolorów HTML.

GENOPAL

Jeśli potrzebujesz pomocy w wyborze kolorów, GenoPal jest aplikacją, 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”. 🙂

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, aplikacja mobilna jest w przygotowaniu. Po uruchomieniu pozwoli Ci nosić aplikację i tworzyć kolory na urządzeniu mobilnym. Ich konstrukcja jest pomysłowa, a fakt, że ta aplikacja faktycznie działa, jest wyraźnym znakiem, że GenoPal oznacza biznes.

COLORHEXA

ColorHexa to wersja online płytka malarska artysty. Ta strona internetowa daje możliwość mieszania kolorów przez samo wprowadzenie kodów kolorów. Ich poprzednią aplikacją jest narzędzie do mieszania kolorów, ale mają również generator gradientu i odejmnik kolorów. Czy to nie geniusz w pracy?

Jak działa Blender ColorHexa? Wszystko, co musisz zrobić, to wpisać kody kolorów oddzielone ” + ” i ColorHexa zrobi resztę pracy. Na przykład, próbowałem:

# ff0000 + # 0000FF + #ff00ff i mam # aa00aa. Co więcej, dają ci całą stronę informacji o kolorze (na twoim ostatecznym kolorze np. #aa00aa). Jest to jedno narzędzie, które musisz wypróbować, aby doświadczyć mieszania kolorów, jak nigdy dotąd.

Sprawdź ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

Jest to prawdopodobnie najlepsze narzędzie, jeśli chodzi o generowanie gradientów kolorów. Jest całkowicie online i pomaga generować odświeżające punkty środkowe i odpowiadające im kody CSS. Zapewniają również dodatki Chrome i Firefox, które umożliwiają integrację aplikacji z przeglądarką w celu łatwiejszego i szybszego dostępu.

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

Sprawdź ostateczny Generator gradientu CSS.

Pobieranie Czcionek

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

Twoje kolory i projektowanie stron internetowych przyciągną ludzi, ale to twoje słowa, tj. Twoje strony i posty, które sprawią, że ludzie pozostaną w pobliżu.

Jesteśmy zajęci tworzeniem naszych najlepszych historii przez cały czas, więc większość z nas zapomina, że czcionki również mają znaczenie. Ale czcionka, którą wybierzesz, wpływa na sposób interakcji użytkowników z Twoją witryną. Dzięki odpowiednim czcionkom Twoi odbiorcy docelowi będą chcieli pozostać w pobliżu i ostatecznie kliknąć na inne strony, co jest dokładnie tym, czego chcesz. Zaręczyny.

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

„Zabawa czcionkami jest jak zabawa z ogniem. Czasami może zapalić zapałkę na stronie internetowej, iskierkę ładnego tekstu. Innym razem może spalić cały dom.”- Lorelle z cameraontheroad.com.

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

Oto dobry przykład:

# menu {font-family:Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0.8 em; color: black;}

Powyższy kod ustawi rozmiar czcionki w menu na 0.8 em i ustaw 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 mają Helvetica lub Arial, Verdana, Sans-serif lub Times New Roman przejmie kontrolę.

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

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

Dodatkowo jest to łatwa praca.

Wszystko, co musisz zrobić, to otworzyć swój styl.css i umieść poniższy 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ę czcionki. W powyższym przykładzie ” Museo300 „jest czcionką, która została zapisana w folderze o nazwie”fonts”.

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

body{font-family: Museo300;}

Możesz użyć osadzonej czcionki dla dowolnego elementu na swojej stronie internetowej. 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 swój serwer, co według mnie jest dość uciążliwe.

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

Możesz po prostu linkować do czcionek z głowy (nagłówek.PHP) sekcja jak tak:

< link href="http://fonts.googleapis.com/css?family=over + the + rainbow" rel= "stylesheet" type= "text / css" / >

Jak i gdzie dodać powyższy wiersz?  Musisz otworzyć swój Panel administracyjny WordPress – > wygląd – > edytor – > nagłówek.php

Jeśli nie chcesz lub nie możesz edytować nagłówka.pliku php, wystarczy zaimportować czcionki wpisując następujący wiersz w styl.css:

@ import url(https://fonts.googleapis.com/css?family=over + tęcza);

Powyższy przykład pozwoli Ci użyć Over The Rainbow font from Google anywhere on your site. Na przykład, jeśli chcesz użyć Over the Rainbow w całej swojej witrynie, możesz użyć tego kodu:

body{font-family: "Over the Rainbow";}

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

Aktualizacja (07/12/13): Jeśli chcesz łatwo dodać czcionki Google do swojej witryny WordPress,możesz użyć wtyczki Google Typography. Poza tym możesz dowiedzieć się więcej o Google fonts i jak je wdrożyć w tym Ulepsz typografię witryny WordPress za pomocą Google Fonts autorstwa Toma Ewera.

Więcej zasobów na temat gry z czcionkami

• Essential Guide to @ font-face
• Oficjalna dokumentacja o font-face
• W3 Schools: czcionki CSS
• Kamera na drodze: eksperymenty CSS-czcionki internetowe i czcionki osadzone

Wtyczki WordPress Do Dodawania Czcionek

A dla tych, którzy nie chcą kopać w kodzie, zawsze możesz zainstalować wtyczkę WordPress, aby wykonać dla ciebie ciężką robotę. Oto kilka z bardziej popularnych darmowych wtyczek do czcionek od WordPress.com:

• WP Google Fonts
• Font-Oficjalna Wtyczka Webfonts
• Użyj Dowolnej Czcionki

Dobrze się bawisz? Chodźmy dalej.…

 Formatowanie daty i godziny

Czy byłeś na stronie WordPress, która wyświetliła datę lub godzinę w naprawdę ładnym tonie, który sprawił, że poczułeś się jak kompletny noob, w którym Twoja strona była zainteresowana? Właściciele tych witryn właśnie bawili się z pojedyncza linia kodu a teraz nie masz dość ich randek. Haha.

Dobra wiadomość, możesz edytować ta linia kodu i zaskocz swoich czytelników.

W Twoim WP Dashboard, przejdź do Wygląd, a potem do Redaktor jak pokazano poniżej:

Gdy tam, będzie można zobaczyć listę swoich .Pliki php po prawej stronie:

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

the_time

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

<?php the_time ('F Y');?>

Teraz obszar, który chcesz edytować, to („F Y”).

Pozwólcie, że przygotuję tę sekcję, aby dać wam coś bardziej mięsistego do gryzowania.

„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ć tak:

Wrzesień 2013

Jeśli dorzucisz 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 (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:

A oto kilka przykładów:

Zawsze pamięta, aby edytować tylko znaki w nawiasach („F Y”) i, zanotuj, nie usuwaj pojedynczych znaków cudzysłowu. Możesz używać tyle znaków, ile chcesz, aby osiągnąć pożądany efekt i pamiętaj, aby zapisać wszystko, gdy skończysz.

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

<?php the_time ('F Y')?>

… tak jak niedawno na moim blogu. Now teraz, wszystko co dostaję to Dodane przez Fred w kategorii tak i tak … bla bla. Żadnych randek.

Czy jesteś napędzany do następnej części? Oby.

Nie znalazłeś funkcji the_time?

To jest ok, ponieważ wiele tematów teraz dni używają funkcji the_date() zamiast funkcji the_time (), co jest właściwie lepszą praktyką. Jeśli twój motyw korzysta z funkcji the_date (), nie będziesz musiał edytować, ponieważ możesz po prostu zmienić sposób wyświetlania danych na pulpicie nawigacyjnym w sekcji „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 WordPress, dodawanie obrazów może być wyzwaniem.

WordPress pozwala dodawać obrazy za pomocą narzędzia przesyłania lub (przycisk Dodaj Media) podczas tworzenia nowego postu lub strony. Wszystko, co musisz zrobić, to umieścić kursor w miejscu, w którym chcesz, aby obraz znajdował się w Twoim poście lub stronie, a następnie kliknąć „Dodaj Media”.

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

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

• WordPress: Korzystanie Z Obrazów
• Projekt Motywu (Dodawanie Zdjęć)
• Rozmiar i jakość obrazu
• Optymalizacja Obrazu WordPress
• Edycja Zdjęć W WordPress

A jeśli nie jesteś pewien, gdzie znaleźć niesamowite Darmowe obrazy, sprawdź post, który napisaliśmy, obejmuje najlepsze zasoby graficzne dla WordPress.

Widzisz? Mówiłem, że będzie najkrótszy 🙂

Dodawanie Favicon

Zanim całkowicie zapomnimy o obrazach, stwórzmy i dodajmy favicon do twojej witryny WordPress. Favicon (lub ikona ulubionych) jest ikoną używaną do zakładek do strony internetowej.

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

Ogólnie rzecz biorąc, favicon to kwadratowy plik graficzny o wymiarach 16 X 16 pikseli z rozszerzeniem .ico. Rozszerzenie oznacza ikonę.

Jak utworzyć Favicon

Możesz utworzyć favicon online lub za pomocą programów do edycji obrazów, takich jak GIMP, lub innych, które pozwalają zapisać .pliki ico. Większość usług online jest bezpłatna.

Chociaż obraz jest zwykle bardzo mały (16 na 16 pikseli), ikonka favicon powinna reprezentować twój blog w całości. Obraz lub tekst, którego używasz do utworzenia favicon, powinien reprezentować twoją firmę online.

Jeśli używasz edytora obrazów:

• Kadruj lub dodaj odpowiednio miejsce, aby upewnić się, że obraz jest kwadratowy
• Zmień rozmiar obrazu na 16 X 16 pikseli oraz
• Zapisz obraz jako favicon.ico

Usługi Online, za pomocą których można tworzyć favicony, obejmują (między innymi):

• Real Favicon Generator
• Napęd Dynamiczny

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 ikonka favicon, musisz ją usunąć za pomocą klienta FTP lub dowolnej dostępnej metody. Klienci FTP są zalecane, ponieważ są łatwe w użyciu i można szybko znaleźć dowolny plik, którego szukasz.

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

Z faviconem.plik ico w ręku, prześlij to samo do głównego folderu motywu. Jest to folder, w którym przechowywany jest bieżący motyw.

Następnie prześlij kolejną kopię swojej favicon do folderu głównego (Zwykle public_html) lub głównego katalogu, w którym przechowywana jest Twoja witryna, dzięki czemu będziesz mógł zobaczyć swoją favicon podczas pisania yoursite.com/favicon.ico. spowoduje to automatyczne dodanie favicon do kanałów.

Kiedy skończysz przesyłać, nadszedł czas, aby uzyskać favicon.ico działa. To jest to, co powinieneś zrobić:

Dodawanie Faviconu za pomocą wtyczki

Najlepszym sposobem na dodanie faviconu jest użycie wtyczki. Polecam użycie wtyczki ” Wszystko W Jednym Faviconie „dla bardziej zaawansowanego użycia dla bardzo prostego podejścia możesz użyć wtyczki” najprostszy Favicon”, która nie ma żadnych opcji zaplecza, wystarczy przesłać plik o nazwie favicon.ico w odpowiednim miejscu na twoim serwerze.

Ręczne dodawanie ikony favicon do szablonu

Niektórzy ludzie mogą preferować (nawet jeśli nie jest to najlepszy sposób) ręczne dodawanie faviconów do szablonu, aby to zrobić, wykonaj następujące kroki:

• Zaloguj się do swojego Dashboard
• Przejdź do Wygląd
• Następnie do Edytor (Theme Editor)
• Znajdź i otwórz nagłówek.php (nagłówek) plik

Dodaj tę linię do pliku nagłówkowego (najlepiej na górze, gdzie widzisz inne < link rel = … / > tagi:

< link rel = "ikona skrótu" href="<? php echo gets_stylesheet_directory_uri ();?> / favicon.ico" / >

Zapisz raz zrobione. 

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

W tym momencie powinieneś być w stanie zmieniać kolory, wybierać lepsze czcionki, formatować daty i godziny, używać obrazów i dodawać ikonę favicon.

Wniosek

Jest tak wiele do omówienia na temat przeprojektowania witryny WordPress, że byłoby to dla Ciebie przykrością (dla ciebie), aby spróbować pokryć wszystko w jednym poście.

Aby uzyskać jak najwięcej korzyści, najlepiej podzielić samouczek na kilka części (jest to część 1). W miarę upływu dni będziemy dzielić się kolejnymi sztuczkami dotyczącymi przeprojektowania, więc bądźcie czujni. Celem tych samouczków jest pomoc w stworzeniu najlepszej witryny WordPress i pozostawienie cię szczęśliwszym, ponieważ zrobiłeś to wszystko sam.

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