ten artykuł został przyczynił się PSDtoWP.net

chyba najlepiej zacząć od tego dlaczego. Około jedna czwarta wszystkich stron internetowych działa na WordPress, internetowej platformie blogowej. To sprawia, że jest to zdecydowanie jeden z najpopularniejszych systemów zarządzania treścią open source na świecie.

zdecydowana większość projektantów stron internetowych nadal używa Photoshopa do projektowania strony internetowej, chociaż istnieją alternatywy. Oznacza to, że wielu projektantów stron internetowych musi znaleźć sposoby na konwersję plików PSD na responsywny motyw WordPress!

teraz to może wydawać się dość proste. Jednak konwersja pliku PSD na witrynę WordPress nie jest łatwa. Wymaga znacznie więcej niż tylko umiejętności Photoshopa! Aby zmienić plik PSD w responsywny motyw, który może być używany w WordPress, potrzebujesz wiedzy na temat języków programowania front-end, takich jak HTML, CSS i JavaScript, a także języka programowania backendowego PHP.

teraz, dlaczego jest z drogi, nadszedł czas, aby przejść do jak! Chociaż jak z pewnością nie jest łatwe, to nadal można osiągnąć w pięciu dość prostych do zrozumienia kroków!

Krok pierwszy: Utwórz projekt strony internetowej

przejdź do kroku drugiego, jeśli już zaprojektowałeś swoją witrynę.

Tworzenie strony internetowej to o wiele więcej niż tylko stworzenie logo i umieszczenie menu, paska bocznego, stopki i treści razem. Elementy tej układanki muszą zostać stworzone w pierwszej kolejności, a proces tworzenia jest czymś, co nie każdy może zrobić tak łatwo.

Projekt strony internetowej, który tworzysz, musi być idealną równowagą między formą a funkcją, projektem strony internetowej, który zapewnia doskonałe wrażenia użytkownika.

badania

aby stworzyć projekt internetowy, który z powodzeniem spełnia kryteria wyglądu i funkcjonalności, musisz przeprowadzić poważne badania. Przede wszystkim, kto jest twoją grupą docelową i czego chce twoja grupa docelowa? Są to oczywiście kluczowe aspekty badań.

Ucz się od innych

kolejnym aspektem projektowania stron internetowych, który musisz zbadać, są techniki, które zastosowali twoi konkurenci. Ci konkurenci są najprawdopodobniej lepiej ugruntowani niż ty, więc z pewnością będziesz w stanie wiele nauczyć się od projektu, którego używają! Po zakończeniu badań i masz dobry pomysł na to, jak powinna wyglądać Twoja strona internetowa, powinieneś zacząć myśleć o funkcjonalności. Jakie funkcje ma posiadać Twój projekt internetowy?

Wireframe

gdy już wszystko uporządkujesz, zapisz to na papierze. Narysuj & szkicuj, jak wyobrażasz sobie, aby Twoja strona wyglądała, aby mieć wizualną pomoc, gdy idziesz do przodu!

projektowanie

po zakończeniu tworzenia fizycznych szkiców / szkiców możesz wskoczyć na fotel kapitana i odpalić Photoshopa. Pierwszą rzeczą, którą musisz zrobić, zanim zaczniesz na poważnie, jest upewnienie się, że używasz siatki opartej na kolumnach, takiej jak XXgrid. Dzięki temu Twój projekt będzie wyglądał naprawdę schludnie i wyrównany! To nie tylko dla estetyki. Korzystanie z siatki Kolumnowej do tworzenia wyrównanego projektu ułatwi Tobie lub Twojemu front-end developer, który będzie rozwijał HTML i CSS, aby stworzyć zoptymalizowany, responsywny układ dla tabletów i smartfonów!

zanim przejdziesz do następnego kroku, pamiętaj, że musisz zachować pliki projektu PSD zorganizowane w warstwy, tzn. każda sekcja powinna mieć swój własny folder z odpowiednimi tytułami!

Krok Drugi: Slice the PSD

po utworzeniu projektu strony internetowej, z której jesteś w pełni zadowolony, nadszedł czas na kryzys. Zasadniczo to, co musisz teraz zrobić, to proces PSD do WordPress.

strony internetowe są obecnie zbudowane przy użyciu HTML5 i CSS3. Są one znacznie lepsze niż XHTML i CSS2, ponieważ zamiast wszystkich przycisków, obramowań, gradientów, zaokrąglonych krawędzi i wszystkich innych funkcji tworzonych za pomocą obrazów, są one tworzone jako funkcjonalne części kodowania CSS3. W związku z tym, krojenie pliku PSD będzie w zasadzie teraz obejmować tylko krojenie obrazów tła z PSD!

aby to zrobić, musisz otworzyć plik w programie Photoshop lub Illustrator, w zależności od oprogramowania użytego do utworzenia projektu. Gdyby projektant dobrze wykonał swoją pracę, stworzyłby dobrze zorganizowany plik projektu z folderami i warstwami, dzięki czemu łatwo znajdziesz to, czego potrzebujesz. Przestudiuj Projekt strony internetowej i poszukaj obrazów, które Twoim zdaniem wymagają krojenia. Są to w zasadzie wszelkie obrazy, których nie można utworzyć przy użyciu CSS3, Zwykle logo i obrazy tła. Przeczytaj, jak pokroić obrazy tutaj.

po zastąpieniu tych obrazów tła za pomocą CSS, zobaczysz ogromny spadek czasów ładowania. Przyciągnęłoby to wielu użytkowników do twojej witryny, ponieważ przeciętny użytkownik Internetu nie może znieść długich czasów ładowania!

Krok trzeci: Utwórz HTML, CSS3 i JavaScript(jQuery)

po pokrojeniu obrazów z pliku PSD nadszedł czas na utworzenie HTML5 i CSS3. Pierwszą rzeczą, którą musisz zrobić, to utworzyć nowy folder, w którym tworzysz indeks.html i styl.css. Utwórz również podfolder o nazwie obrazy lub img (w zależności od tego, co wolisz) i umieść wyodrębnione obrazy w tym folderze. Utwórz kolejny folder o nazwie JavaScript lub js. Jest to na później, więc możesz przechowywać wszystkie pliki JavaScript i jQuery w dobrze oznaczonej lokalizacji. Po zakończeniu tworzenia wszystkich folderów, plików i podfolderów nadszedł czas, aby rozpocząć budowanie HTML5 i CSS3.

HTML5

HTML5 jest stosunkowo nowym językiem, który posiada zarówno funkcje XHTML, jak i HTML. Język ten jest zasadniczo używany do tworzenia podstawowej struktury dokumentu, a także wyznaczania wszystkich elementów strony. HTML5 ma osobne elementy dla różnych sekcji witryny, takie jak nagłówek< >,< nav >,< poza >, a także elementy< stopka > (i wiele innych), które umożliwiają stworzenie schludnego, dobrze zorganizowanego dokumentu, który jest powszechnie czytelny. Oto kilka doskonałych zasobów, których możesz użyć, aby nauczyć się lub odświeżyć pamięć o HTML5.

zasoby HTML

W3Schools to najlepsza strona internetowa do nauki podstaw HTML5. Każdy element i atrybut tego języka jest wyjaśniany i nauczany za pomocą demonstracji, co ułatwia naukę.

Mozilla Developer ’ s Section – ludzie stojący za popularną przeglądarką Mozilla Firefox mają sekcję dewelopera na swojej stronie internetowej. Możesz użyć tej sekcji, aby dowiedzieć się wiele o HTML5 poprzez samouczki, które tam mają, niezależnie od tego, czy jesteś początkującym, czy zaawansowanym programistą.

Web Design Tuts – ta strona ma wiele różnych tutoriali HTML5, z których niektóre są bezpłatne, a niektóre płatne.

w3 – ta strona jest odpowiedzialna za rozwój wszystkich otwartych standardów internetowych, które zostały stworzone w celu zapewnienia długowieczności sieci. Tutaj możesz znaleźć szczegółowe informacje na temat HTML5, a także wszystkich jego najnowszych osiągnięć.

walidator W3-po ukończeniu HTML5 przepuść go przez ten walidator. Powie Ci, czy twój HTML5 spełnia standardy W3 open web!

CSS3

CSS odnosi się do kaskadowych arkuszy stylów, a CSS3 jest najnowszą wersją tego języka front-end. CSS3 jest używany do pobierania gołych kości elementów utworzonych za pomocą HTML5 oraz ich kształtu, pozycji i stylu. Pozwala to na stworzenie spójnego projektu strony internetowej, w którym wszystkie elementy potwierdzają ogólny projekt strony. Po użyciu CSS3 przekonasz się, że Twój HTML5 będzie o wiele czystszy i lepiej zorganizowany, co z kolei pozwoli mu ładować się znacznie szybciej, a także pozwoli na szybsze indeksowanie przez wyszukiwarki. Poniżej znajduje się kilka zasobów, które pomogą Ci nauczyć się lub odświeżyć pamięć o CSS3:

zasoby CSS

W3 CSS – W3 znajduje się na najbardziej znanych i renomowanych zasobach dla samouczków CSS3 i przykładów różnych selektorów, właściwości i wartości CSS3. Najlepsze w tym jest to, że każdy samouczek ma stronę „wypróbuj sam”, która pozwala zastosować to, czego się nauczyłeś.

dowiedz się CSS3-Mozilla to nie tylko twórca przeglądarki Firefox. Jest to również doskonałe miejsce, aby zapoznać się z CSS3, a także zaktualizować swoją wiedzę na temat języka.

CSS Web Design Tuts – ta strona zawiera cały róg obfitości tutoriali, które możesz przejść. Niektóre z tych samouczków muszą być płatne, ale inne nadal są całkowicie bezpłatne i mogą nauczyć cię wiele o selektorach, właściwościach i wartościach CSS3.

W3 CSS-ta strona jest doskonałym miejscem, aby być na bieżąco z najnowszymi wiadomościami CSS3, ponieważ jest to społeczność, która rozwija standardy internetowe CSS3. Jest to również świetne miejsce, aby dowiedzieć się informacji technicznych na temat języka.

walidator CSS – jest to walidator, za pomocą którego należy uruchomić cały CSS3 przed upublicznieniem strony. Ma to na celu upewnienie się, że Twój CSS3 spełnia standardy sieciowe określone przez W3!

projektowanie responsywne

internet przeszedł długą drogę od samego początku. Wynika to po części z pojawienia się smartfonów i tabletów oraz rozprzestrzeniania się tego typu technologii w naszym codziennym życiu. W wyniku ogromnej popularności tych urządzeń znaczna część ogółu użytkowników Internetu patrzy na strony internetowe na znacznie mniejszych ekranach niż przeciętny laptop. Ponadto wchodzą w interakcję z tymi stronami internetowymi nie za pomocą kursorów, a za pomocą palców. Dlatego nowoczesna strona internetowa musi być w stanie dostosować się do różnych typów urządzeń, które są tam. Tu pojawia się responsywny design. Korzystając z responsywnego projektu, projektanci są w stanie stworzyć stronę internetową, która może dostosować cały układ w zależności od rodzaju urządzenia, na którym jest przeglądana.

dobrze jest wcześniej zdecydować, czy chcesz, aby Twoja nowa witryna miała responsywny projekt, czy nie, zanim zaczniesz budować HTML5 i CSS3. Dzieje się tak dlatego, że gdy kodujesz responsywną część projektu witryny, musisz pracować z zapytaniami CSS3 media queries. Za pomocą tych zapytań do mediów można definiować różne tekstury i style dla różnych rozdzielczości ekranu.

pamiętaj, aby nigdy nie używać stałych szerokości, zamiast tego użyj procentów. Jest to określane jako płynny lub płynny projekt układu, który pozwala zoptymalizować witrynę nie tylko pod kątem rozdzielczości zdefiniowanych w zapytaniach o media, ale także dla wszystkich rozdzielczości między nimi. Jest to ogromna zaleta dla Twojej witryny, ponieważ smartfony, tablety i komputery, które dziś wychodzą, mają tak wiele różnych rozmiarów, a zatem rozdzielczości i musisz je wszystkie pomieścić.

zasoby responsywne

oto kilka świetnych zasobów, których możesz użyć, aby odświeżyć pamięć lub dowiedzieć się o responsywnym projekcie i wszystkich związanych z nim kodowaniu:

Google Responsive – to świetne źródło informacji dla tych z Was, którzy dopiero zaczynają korzystać z responsywnego projektowania przy użyciu zapytań multimedialnych CSS3.

Zasady Responsive Webdesign-przeczytaj ten artykuł, aby zrozumieć różnicę między responsive web design a adaptive Web design. Ma kilka świetnych przykładów, które pomogą Ci szczegółowo zrozumieć rzeczy!

siatki do płynów – możesz skorzystać z tego doskonałego artykułu autorstwa Ethana Marcotte, aby dowiedzieć się o siatkach do płynów i jak ich używać. Spróbuj sam skorzystać z przykładów podanych w artykule!

Responsive front-end framework

jeśli nie chcesz nauczyć się podstaw, jeśli chodzi o zapytania mediów CSS3, a może po prostu nie masz na to czasu, spróbuj użyć responsywnego front-end framework. Jeśli zdecydujesz się na użycie struktury siatki, pamiętaj, że musisz zastosować ten sam framework zarówno do CSS, jak i HTML, ponieważ będziesz pracować z predefiniowanymi klasami i identyfikatorami, aby połączyć framework utworzony za pomocą HTML5 z CSS3. Korzystanie z responsywnego frameworka front-end z pewnością pozwoli Ci znacznie szybciej rozwijać swoją witrynę, ale z drugiej strony spowolni to również czas ładowania witryny ze względu na dużą ilość kodu, którego nie będziesz używał.

niektóre z najpopularniejszych frameworków front-end to:

Bootstrap – ta responsywna struktura jest dość łatwa do wdrożenia, a dodatkową zaletą jest to, że wykorzystuje CDN, aby zmniejszyć wpływ prędkości ładowania witryny.

mniej-jest to adaptacyjny framework CSS grid, a nie responsywny, który pozwala na tworzenie adaptacyjnego układu.

Foundation-jest to front-end grid framework o rozmiarze pliku, który jest absolutnie niewielki, aby zminimalizować wpływ, jaki będzie miał na szybkość ładowania witryny.

JavaScript (vs CSS3)

JavaScript jest obecnie jednym z najpopularniejszych języków programowania na świecie. Wynika to z faktu, że jest obsługiwany przez szeroką gamę przeglądarek, a także z faktu, że zawiera biblioteki takie jak jQuery i systemy backendowe, takie jak Node.js jak i frameworki takie jak AngularJS. Nic dziwnego, że tak wielu programistów przeklina ten język programowania! Jednak w ostatnim czasie JavaScript stał się przestarzały, ponieważ wiele jego funkcji zaczęło być przejmowanych przez animacje CSS3, które pozwalają animować przejścia między stylami.

zasoby Javascript

W3 – jest to doskonałe miejsce, aby zacząć, jeśli jesteś nowy w JavaScript, dzięki doskonałemu samouczkowi, który jest dostępny na tej stronie.

jQuery-gdy masz jakieś doświadczenie z JavaScript, możesz zacząć używać bibliotek takich jak ta, aby łatwiej programować. jQuery jest najpopularniejszą biblioteką JavaScript na kilometr.

NodeJS – jeśli wolisz systemy backendowe, ale jednocześnie kochasz JavaScript, zajrzyj na tę stronę.

AngularJS-Połącz potężne siły HTML i Javy za pomocą tego frameworka i uzyskaj Dynamiczne widoki.

pamiętaj, aby sprawdzić następujące zasoby przed rozpoczęciem korzystania z JavaScript do animowania elementów na swojej stronie, podczas gdy prawdopodobnie możesz również użyć CSS3:

animacje CSS3 – po raz kolejny zwracamy się do w3schools dla naszych tutoriali CSS3. Przejrzyj dema dostępne na tej stronie, aby zrozumieć wszystkie różne animacje CSS3.

Mozilla Animations-poszerz swoją wiedzę na temat animacji CSS3 dzięki dziewięciu przykładom i przykładom, które dostarczyła Mozilla.

Krok czwarty: Zbuduj pliki motywów WordPress

teraz, gdy pomyślnie przekonwertowałeś projekty PSD NA HTML5, CSS3 i JavaScript, nadszedł czas na główną konwersję: przekształcenie HTML w w pełni responsywny motyw WordPress. Pamiętaj, aby postępować zgodnie z hierarchią szablonów WordPress, aby upewnić się, że twoje motywy będą działać. Ogólną kolejnością jest rozpoczynanie od nagłówka.php, a następnie index.php, stopka.php i style.css. Będziesz używać tych czterech szablonów na wszystkich stronach swojej witryny.

gdy już w pełni zrozumiesz, jak działa hierarchia szablonów, musisz zacząć łamać pliki HTML na kawałki. Możesz zacząć od utworzenia folderu w folderze themes, który można znaleźć w instalacji WordPress, którego adres to / wp-content / themes/. Utwórz nagłówek pliku.php w tym folderze. Ten plik jest tym, czego użyjesz do zadeklarowania typu dokumentu, a także wszystkich elementów, które należą do nagłówka strony, takich jak Meta, tytuł, arkusze stylów, skrypty JavaScript i tak dalej. Gdy skończysz z tym, Utwórz stopkę.php i wklej wszystkie elementy stopki do dokumentu HTML. Jeśli projekt witryny zawiera pasek boczny, Utwórz plik o nazwie pasek boczny.również php i zawierać wszystkie istotne kodowanie w tym pliku.

po zakończeniu tworzenia wszystkich elementów Witryny w tych plikach, musisz rozpocząć tworzenie strony głównej. Można to zrobić na kilka sposobów. Na przykład możesz po prostu utworzyć indeks.php, frontpage.php lub page-home.php, każdy z tych plików będzie odpowiedni do tego, co próbujesz zrobić, więc ostateczny wybór należy wyłącznie do ciebie. Teraz, gdy skończysz tworzyć jeden z trzech szablonów dla swojej strony głównej, dołącz wszystkie .Pliki php, które właśnie stworzyłeś. Teraz, gdy masz gotowy górny, dolny i boczny, wklej HTML5 swojej strony głównej pomiędzy, a pomyślnie utworzysz stronę główną swojej witryny. Po prostu wykonaj ten sam proces dla wszystkich stron swojej witryny i możesz przejść do następnego i ostatniego kroku.

krok piąty: użyj wbudowanych tagów i funkcji WordPress

po pomyślnym utworzeniu motywu dla WordPress, musisz teraz upewnić się, że możesz edytować swoją witrynę z poziomu panelu administracyjnego, zamiast zmieniać plik motywu za każdym razem, gdy chcesz coś zmienić. Prawdopodobnie najbardziej popularne funkcje WordPress, aby cała zawartość była edytowalna za pośrednictwem panelu administracyjnego, to dodanie funkcji add_meta_box. Wystarczy skonfigurować pola meta dla treści na każdej stronie i jesteś gotowy!

tworzenie podstawowych funkcji witryny jest dość łatwe za pomocą WordPress. Na przykład wyświetlanie informacji, takich jak linki na stronach internetowych, można łatwo wykonać za pomocą funkcji WordPress. Po prostu sprawdź stronę referencyjną funkcji WordPress, aby zobaczyć wszystkie dostępne funkcje.

podobnie WordPress oferuje również tagi szablonów. Są to zasadniczo same funkcje, z tą różnicą, że zostały stworzone specjalnie dla określonych tematów, które czynią je bardziej wydajnymi.

menu WordPress

po zalogowaniu się do panelu administracyjnego swojej witryny prawdopodobnie chcesz zmienić elementy menu w menu i wygląd, aby nie trzeba było go edytować za pomocą panelu administracyjnego. Jest to dość łatwe dzięki temu, że korzystasz z WordPressa, wszystko, co musisz zrobić, to zastąpić listę menu pliku szablonu jedną linią PHP, po czym możesz po prostu zacząć dodawać pozycje menu.

mogą wystąpić sytuacje, w których strona wewnętrzna ma inny nagłówek lub stopkę. Aby dodać tę funkcjonalność do swojej witryny, wystarczy dodać tagi warunkowe. Pozwalają one na zastosowanie innego kodu dla wybranych stron lub postów.

gdy Twoja witryna WordPress jest uruchomiona na serwerze programistycznym, wszystko, co musisz zrobić, to pobrać ją na serwer na żywo. Oto artykuł, w którym szczegółowo wyjaśniono, jak przenieść witrynę WordPress, krok po kroku. Po prostu wykonaj wszystkie sześć dostarczonych kroków, a Twoja witryna będzie działać na serwerze na żywo w mgnieniu oka.