Tworzenie motywu WordPress z szablonu PSD. Tworzenie prostego motywu WordPress

W tym artykule dowiesz się, jak stworzyć najprostszy motyw WordPress. Chociaż Kodeks zapewnia obszerną dokumentację na ten temat, uważam, że jest on nieco skomplikowany dla nowicjusza. Dlatego w tym „samouczku” opowiem Ci o zasadach działania motywów WordPress i pokażę, jak dostosować do nich surowy szablon HTML. Jednocześnie nie jest wymagana znajomość PHP, ale dobrze jest znać Photoshop i CSS, aby stworzyć projekt.

1. Interfejs bloga

Zanim zaczniemy, przyjrzyjmy się standardowemu motywowi WordPress i zobaczmy, z czego się składa. Zaznaczmy elementy (nagłówek, tytuł postu, formularz wyszukiwania, nawigację, stopkę itp.).

Standardowa strona główna ( indeks.php)

Standardowy singiel ( singiel.php)

2. Układy Photoshopa

W oparciu o wygląd i styl standardowego motywu zaprojektuj układy Photoshopa dla swojego bloga. Na przykład używam GlossyBlue, jednego z moich darmowych motywów. Pobierz demo.zip, aby zobaczyć gotowy plik Photoshopa.

3. HTML i CSS

Gdy projekt PSD będzie już gotowy, utwórz szablon HTML+CSS dla każdej strony. Wykonując kroki opisane w tym samouczku, możesz używać moich plików HTML GlossyBlue demo.zip. Po rozpakowaniu archiwum zobaczysz indeks.html, pojedynczy.html I strona.html. Następnie użyję ich do przekształcenia ich w szablon.

Po co najpierw tworzyć statyczny kod HTML? Dzieje się tak głównie dlatego, że znacznie uprości to proces rozwoju. Zwykle dla każdego szablonu tworzę plik HTML, sprawdzam ich ważność (znaczniki HTML i CSS) we wszystkich przeglądarkach. Następnie pozostaje tylko wyciąć i wkleić kod WordPress. Dzięki temu nie musisz się już martwić błędami w HTML lub CSS.

4. Jak działa motyw WordPress?

Jeśli przejdziesz do domyślnego folderu motywu ( wp-content/themes/default), zobaczysz wiele plików php (zwanych plikami szablonów) i jeden plik styl.css. WordPress zwykle używa kilku plików szablonów ( indeks.php , nagłówek.php, pasek boczny.php, I stopka.php).

Więcej szczegółów w Kodeksie: „Architektura witryny” i „Hierarchia szablonów”.

5. Zduplikuj pliki szablonów

Skopiuj folder HTML z GlossyBlue do folderu wp-content/themes. Następnie przejdź do domyślnego katalogu motywów, skopiuj komentarze.php I searchform.php do folderu błyszczącyniebieski.

6. Styl.css

Przejdź do domyślnego folderu motywu, otwórz plik styl.css. Skopiuj skomentowany tekst na początku pliku i wklej go do styl.css Motywy GlossyBlue. Jeśli chcesz, możesz zmienić tytuł i informacje o autorze.

7. Separacja plików

Teraz musimy dowiedzieć się, gdzie podzielić pliki HTML na części: header.php , sidebar.php i footer.php. Poniższy zrzut ekranu przedstawia uproszczoną wersję mojego pliku indeksu, a także zasadę jego podziału.

8.Nagłówek.php

otwarty indeks.html. Musisz wyciąć sekcję od góry do miejsca, w którym się kończy, wkleić ją do nowego pliku php i zapisać jako nagłówek.php.
Przejdź do domyślnego folderu motywów, otwórz nowy nagłówek.php. Skopiuj i zamień znaczniki tam, gdzie wymaga tego kod php: tytuł, link, arkusze stylów, h1 i div class=description.

Menu nawigacji (wp_list_pages) Zamień tagi li V ul id=nawigacja NA ;

9. Pasek boczny.php

Wrócić do indeks.html, wytnij kod od miejsca, w którym się zaczyna identyfikator formularza = formularz wyszukiwania i do momentu zamknięcia tagu identyfikator div=pasek boczny, umieść go w nowym pliku php i zapisz jako pasek boczny.php.

Zastępować identyfikator formularza = formularz wyszukiwania z całą zawartością w formacie .
Zamień tagi li kategorie wg
Zamień tagi li archiwa na

10. Stopka.php

Wrócić do indeks.html. Wyodrębnij stamtąd kod identyfikator div=stopka włącznie ze znacznikiem div id=footer i do końca /html następnie włóż go do nowego stopka.php.

Ostatnie posty Tutaj użyłem query_post do wyświetlenia 5 najnowszych postów na blogu.

"Ostatnie komentarze"„Najnowsze komentarze” wygenerowane przez wtyczkę (zawarte w folderze motywu)

11. Indeks.php

Teraz w twoim indeks.html powinien tylko zostać identyfikator div=treść. Zapisz plik jako indeks.php. Wprowadź linie: get_header, get_sidebar, I get_footer w kolejności, w jakiej pojawiają się we wzorze.

12. Parsowanie pętli

Pętla wyświetla wpisy na blogu sekwencyjnie w oparciu o Twoje ustawienia. Poniższy zrzut ekranu ilustruje, jak to działa. Początkowo pętla sprawdza obecność rekordów i jeśli ich nie znajdzie, wyświetla komunikat "Nie znaleziono".

13. Kopiowanie cyklu

Przejdź do domyślnego katalogu motywów, otwórz indeks.php. Skopiuj cykl ze standardowego indeks.php w swoim - pomiędzy id div=treść../div. Następnie zastąp tekst statyczny tagami szablonu WordPress: data opublikowania, tytuł, kategoria, komentarze, następny i poprzedni link.

14. Podgląd motywu

Gratulacje! Utworzyłeś część publiczną (główną część szablonu). Przejdźmy teraz do panelu administracyjnego, przejdź do zakładki Projekt, powinieneś zobaczyć motyw GlossyBlue. Aktywuj go i przejdź do części publicznej, aby zobaczyć wynik w akcji.

15. Pojedynczy.php

Czas stworzyć szablon singiel.php. Jeśli chcesz, możesz powtórzyć kroki, przenosząc kod ze standardowego motywu. Ale wydaje mi się, że łatwiej jest użyć tego, który właśnie stworzyłem indeks.php, zapisując jako singiel.php. otwarty singiel.php ze standardowego motywu i skopiuj znaczniki szablonu w wymagane miejsca. Następnie połącz szablon_komentarzy. Poniższy zrzut ekranu pokazuje zmiany, które wprowadziłem:

16.Strona.php

Teraz nowy singiel.php zapisz pod nazwą strona.php. Usuń datę wpisu, formularz komentarza, następny/poprzedni link. To wszystko, to wszystko – Twój szablon strona.php gotowy .

17. Usuwanie plików HTML

Usuń wszystkie pliki HTML z folderu błyszczącyniebieski(nie będziemy już ich potrzebować). Technicznie rzecz biorąc, wystarczy to, aby stworzyć podstawowy motyw WordPress. Być może zauważyłeś, że standardowy motyw zawiera więcej plików PHP. Właściwie tak naprawdę ich nie potrzebujesz, jeśli chcesz prostego motywu. Na przykład, jeśli search.php Lub 404.php nie będzie w folderze motywów, WordPress użyje go automatycznie indeks.php aby wyświetlić stronę. Aby uzyskać więcej informacji, przeczytaj Hierarchię szablonów.

18. Szablon strony WordPress

Teraz w ostatnim przykładzie pokażę, jak użyć Szablonu Strony do utworzenia strony Archiwum, która będzie zawierać listę wszystkich postów na Twoim blogu (przydatne w przypadku mapy witryny). Kopiuj Archives.php ze standardowego folderu motywów. Usuń niepotrzebny kod i uzyskaj coś takiego:

Jeśli czytasz ten artykuł, prawdopodobnie masz bardzo piękny projekt strony internetowej, prawdopodobnie wykonany w programie Adobe Photoshop i zapisany w formacie PSD, JPG, PDF, AI lub PNG. Teraz chcesz przekonwertować ten plik obrazu na motyw WordPress, aby móc zastosować go w nowo utworzonej witrynie lub blogu. Możesz także chcieć Konwerter PSD na WordPress -Ale co by było, gdybyś mógł dokonać tej transformacji sam i to też za darmo!

Wiele osób, które są dobre w projektowaniu graficznym, dochodzi do momentu konwersji motywów PSD na WordPress. I czują, że utknęli! Ale to nie ich wina. Tworzenie strony internetowej wymaga nie tylko umiejętności stworzenia świetnie wyglądającego projektu, ale także pewnych umiejętności programowania. Aby zamienić plik PSD w stronę internetową, musisz być ekspertem przynajmniej w zakresie programowania HTML, CSS, JavaScript, JQuery i PHP. Problem w tym, że większość ludzi jest albo dobrym projektantem, albo dobrym programistą!

Jednak nie martw się. Konwersja PSD na motyw WordPress nie jest wcale taka trudna. Wszystko, co musisz wiedzieć, to podjąć właściwe kroki. W tym artykule powiem ci to samo! Zacznijmy się uczyć.

Co to jest plik PSD?

Ci, którzy nie wiedzą PSD oznacza dokument programu Photoshop. Jest to format pliku, w jakim Adobe Photoshop zapisuje pliki wykonywalne. Możesz otwierać pliki PSD w Photoshopie i wprowadzać dalsze zmiany w projekcie według własnego uznania. Dlatego czasami nazywane są pliki PSD Otwórz pliki(powołując się na fakt, że pliki te można edytować).

Jeśli chcesz zaprojektować swoją wymarzoną stronę internetową, prawdopodobnie wybierzesz Photoshopa, aby ją urzeczywistnić. Photoshop to niewątpliwie najlepsze i najpopularniejsze narzędzie do projektowania graficznego.

Co to jest WordPress?

WordPress jest zasadniczo bezpłatną platformą blogową. Ten program typu open source ułatwił nawet osobom niebędącym programistami tworzenie własnych stron internetowych lub blogów. WordPress jest niezawodny i skalowalny oraz napisany w języku PHP.

Projektowanie stron internetowych w oparciu o WordPress nazywa się temat(i czasami, próbka).

Konwertuj plik PSD na motyw WordPress

Krok 1: Wytnij plik PSD

Gdy plik PSD będzie gotowy, pierwszą rzeczą, którą musisz zrobić, to podzielić go na kawałki. Po co? Ano dlatego, że jeden obraz będzie miał duży rozmiar i ładowanie będzie trwało dłużej. Dodatkowo będziesz musiał powiązać różne zachowania z różnymi segmentami obrazu. Więc trzeba to posiekać.

Nie oznacza to jednak, że możesz po prostu wyciąć obraz losowo. Trzeba działać w logiczny sposób. Przykładowo nagłówek może stanowić jedną całość, stopka powinna być oddzielna... wtedy można wyciąć tło, przycisk i menu itp.

Adobe Photoshop umożliwia korzystanie z warstw. Posiada wbudowaną funkcję dzielenia plików PSD i zapisywania powstałych segmentów jako oddzielnych plików graficznych. Możesz zapisać te obrazy w formatach JPG lub PNG. Jeśli potrzebujesz przezroczystości do pracy w którymkolwiek z tych segmentów, musisz zapisać ją w formacie PNG, ponieważ JPG nie obsługuje przezroczystości.

Przycinając obraz, musisz zachować precyzję. Nawet błąd pojedynczego piksela może sprawić, że dwie części nie nadadzą się do użytku w replice.

Dzieląc plik PSD w celu przekształcenia go w motyw WordPress, musisz zrozumieć, że CSS jest obecnie dość potężny i może utworzyć wiele elementów za pomocą zaledwie kilku linii kodu. Na przykład możesz tworzyć tła w jednolitym kolorze, tła gradientowe, różne typy przycisków, linie, strzałki i znaki specjalne, po prostu używając CSS. Dzięki temu nie będziesz musiał zapisywać tych rzeczy jako obrazów. Mniej obrazów oznacza, że Twoja witryna będzie ładować się szybciej.

Poniższy film na YouTube pokazuje dokładnie, jak pokroić plik PSD i zapisać go w różnych obrazach:

OK, teraz, gdy masz już różne elementy wizualne projektu swojej witryny, czas przejść do następnego kroku.

Krok 2: Utwórz pliki HTML i CSS

Teraz rozpoczyna się główna część kodowania procesu konwersji PSD na stronę internetową. Zasadniczo musisz utworzyć stronę internetową i złożyć w ten sposób wszystkie pokrojone obrazy, aby wyglądały dokładnie tak, jak Twój plik PSD.

Najpierw musisz utworzyć plik HTML. Możesz to nazwać jak chcesz, ale umownie nazwijmy to indeks.htm. W tym pliku będziesz musiał napisać kod HTML lub XHTML, aby wyświetlić różne części obrazu z pliku PSD. Aby utworzyć układ fundamentowy, możesz użyć elementów DIV. Elementy DIV są bardzo wszechstronne. Elementy DIV można umieszczać obok siebie, nakładając się, jeden na drugim. Możesz wyrównać środek elementu DIV do lewej i prawej strony, a także możesz ustawić je bardzo dokładnie pod określonymi współrzędnymi na stronie internetowej.

W tych elementach DIV możesz wywoływać zapisane obrazy i wyświetlać je jako takie lub jako tło w DIV.

Po ukończeniu podstawowego układu strony internetowej powinieneś to zrobić stylizuj go aby był taki sam jak plik PSD. Do stylizacji należy używać reguł kaskadowych arkuszy stylów (CSS). Dzięki tym zasadom możesz używać różnych stylów czcionek, rozmiarów, kolorów, cieni tekstu, skalowania szarości obrazu, obramowań itp.

Aby napisać reguły stylizacji CSS, musisz utworzyć inny plik o nazwie style.css a następnie wywołaj ten plik CSS do pliku indeks.htm. Style obecne w style.css będzie dotyczyć różnych elementów w plikach HTML.

Dobrze, poczekaj! Jeśli nie wiesz nic na temat kodowania HTML lub CSS, nie martw się! Są to bardzo proste języki skryptowe i można ich łatwo nauczyć się online. Poniżej znajdują się niektóre zasoby online, w których możesz nauczyć się CSS i HTML:

Poradniki HTML

Samouczek HTML W3Schools
PoradnikiPoint HTML samouczek
HTML.net
Pies HTML

Poradniki CSS

Samouczek CSS
Samouczek CSS W3Schools
TutsPlus
Podstawy CSS

Krok 3: Podziel plik HTML w plikach motywu WordPress

Na tym etapie konwersji PSD do motywu WordPress będziesz mieć jeden plik HTML (indeks.htm) i jeden plik CSS (style.css). W trzecim kroku będziesz musiał podzielić plik HTML według Motyw struktury WordPress. Zdezorientowany? Cóż, WordPress ma predefiniowany zestaw plików, które są wywoływane razem w celu utworzenia strony internetowej. Na przykład podczas wyświetlania posta WordPress wymaga między innymi zawartości pliku nagłówkowego, pliku postu, pliku paska bocznego i pliku stopki. Ale cały kod masz w jednym pliku - indeks.htm. Będziesz więc musiał rozpowszechnić kod indeks.htm w różnych plikach WP. Zasadniczo jest to praca polegająca na wycinaniu i wklejaniu! Oto lista niektórych ważnych plików motywów dla WordPress:

archiwum.php
kategoria.php
komentarze.php
stopka.php
nagłówek.php
indeks.php
strona.php
search.php
pasek boczny.php
singiel.php
styl.css
404.php

Aby utworzyć podstawowy motyw WordPress, chciałbyś utworzyć co najmniej nagłówek.php, stopka.php, pasek boczny.php, singiel.php I indeks.php.

Po prostu utwórz te pliki PHP w dowolnym edytorze tekstu w notatniku i skopiuj odpowiedni kod indeks.htm do tych plików. Zostanie wyświetlony kod do utworzenia części nagłówka nagłówek.php, przypis, do którego przejdzie kod stopka.php... itd. itp.

Jeśli nie jesteś zbyt zaznajomiony z PHP, możesz mieć trudności z poprawnym utworzeniem tych plików. Istnieje kilka naprawdę dobrych i bezpłatnych lekcji online do nauki PHP. W3Schools i PHP.net zapewniają łatwą do zrozumienia pomoc PHP. Możesz przejrzeć te samouczki, aby uzyskać pojęcie o PHP.

Poniższy film na YouTube pomoże Ci zrozumieć, jak skonfigurować „goły motyw WordPress” (w zasadzie oznacza to goły motyw WodPress.

Krok 4: Dodaj funkcje i tagi WordPress

Teraz nadszedł czas na konwersję prostych plików PHP na pliki motywów WordPress. Aby to zrobić, musisz dodać tagi WordPress do plików. Ale możesz zapytać Czym dokładnie są tagi WordPress?

Jak powiedziałem wcześniej, WordPress jest doskonałą i niezawodną platformą. Zapewnia ogromną liczbę wbudowanych funkcji, które można łatwo wywołać i załatwić sprawę.

Spójrzmy na przykład, aby lepiej to zrozumieć. Na stronie głównej (indeks.php), możesz wyświetlić listę ostatnich wiadomości. Ta lista powinna automatycznie zmieniać sposób i czas dodawania nowego postu. Możesz napisać własne funkcje PHP, aby pobrać dane poczty z bazy danych i wyświetlić je na stronie głównej. Ale twórcy WordPressa ułatwili Ci życie! Nie będziesz musiał pisać własnych szczegółowych funkcji. Po prostu użyj wp_get_recent_posts($args, $wyjście) z WordPress i zobacz listę ostatnich postów!

WordPress posiada obszerną dokumentację online, która zawiera informacje o wszystkich funkcjach i innych obiektach dostępnych w WordPressie. Dokumentacja zawiera również wiele przykładów, dzięki czemu jest bardzo łatwa do zrozumienia. Skorzystaj z poniższych łączy, aby uzyskać dostęp do tej dokumentacji:

Tagi szablonów WordPress
Link do funkcji WordPressa

Gdy pliki motywu będą gotowe, należy umieścić je w folderze, który powinien być taki sam, jak nazwa nowego motywu. W tym folderze mogą znajdować się także inne foldery do przechowywania plików CSS, plików JavaScript i plików obrazów.

Możesz także dołączyć obrazy do pliku o nazwie zrzut ekranu.jpg Lub zrzut ekranu.png. Ten plik zostanie wyświetlony jako miniatura Twojego motywu. Łatwo jest nauczyć się robić zrzut ekranu.

Lista plików w typowym motywie WordPress może wyglądać następująco:

Musisz pobrać folder motywu w folderze / Treść / motywy WP Instalacje WordPressa. Na przykład, jeśli nazwiesz motyw Minerva -Wtedy pliki motywu powinny się tam znajdować / Zawartość WP / tematy / Minerva

Po załadowaniu folderu motywu przejdź do pulpitu nawigacyjnego WordPress, a następnie przejdź do Wygląd > Motywy. Tutaj z przyjemnością zobaczysz swój własny, opracowany nowy motyw wśród motywów dostępnych do aktywacji. Po prostu wybierz motyw i aktywuj go.

Obejrzyj poniższy film, aby zobaczyć dalszy proces:

Krok 5: Dodaj więcej funkcji, takich jak funkcje wyszukiwania i użytkownika

Twój motyw WordPress jest już gotowy i działa. Podróż z PSD do motywu WordPress dobiegła końca. Ale nadal możesz dodać więcej funkcji do swojego motywu.

Możesz na przykład stworzyć search.php plik z kodem wyświetlającym wyniki wyszukiwania z Twojej witryny.

Możesz także tworzyć własne funkcje PHP i używać ich w różnych innych plikach PHP. Musisz utworzyć plik funkcje.php aby zachować niestandardowe funkcje w jednym miejscu.

Aby poradzić sobie z błędami 404 (nie znaleziono strony), możesz utworzyć plik 404.php. WordPress wyświetli zawartość tego pliku za każdym razem, gdy ktoś spróbuje uzyskać dostęp do adresu URL Twojej witryny, który nie istnieje.

Możesz także dodać trochę funkcjonalności JavaScript. JavaScript jest najczęściej używanym językiem skryptowym po stronie klienta. Funkcje JavaScript można zapisywać w plikach .js i wywołaj te funkcje w swoich plikach PHP. Na przykład sprawdzanie poprawności formularza jest zwykle wykonywane przy użyciu JavaScript. Jeśli użytkownik spróbuje znaleźć coś na swojej stronie bez wpisywania słów kluczowych w polu wyszukiwania, JavaScript informuje użytkownika, że musi wprowadzić kryteria wyszukiwania.

Po wykonaniu tych kroków możesz z łatwością samodzielnie stworzyć własny motyw WordPress. Te kroki przekonwertują plik PSD na funkcjonalny motyw WordPress. Niektórzy jednak szukają darmowe PSD dla konwerterów WordPress. Istnieje wiele firm, które twierdzą, że pobierają plik PSD i przekształcają go w konkretny motyw. Jeśli nie chcesz wdawać się w kłopoty z nauką programowania, możesz po prostu przekazać swoje pliki PSD tym firmom. Ale oczywiście pobierają za to opłatę!

Darmowe PSD dla konwerterów WordPress

Natknąłem się na oprogramowanie Elemente firmy DivineProjects. Możesz pobrać ten program za darmo, a przekonwertuje on Twój plik PSD w gotowy do użycia, w pełni funkcjonalny motyw WordPress. To oprogramowanie działa jak wtyczka do Photoshopa.

Mam nadzieję, że ten artykuł był dla Ciebie pomocny. Jeśli masz jakiekolwiek pytania dotyczące tego tematu, nie wahaj się ich zapytać. Zrobię co w mojej mocy, aby ci pomóc. Dziękujemy za korzystanie z TechWelkin.

Aby stworzyć swoją witrynę na WordPressie, na pewno będziesz musiał dodać motyw. Nazywa się je również szablonami. To jest podstawa każdego zasobu internetowego.

W tym artykule zostaną omówione etapy tworzenia szablonu oraz opis układu plików psd.

Dowiesz się także o podstawowych wymaganiach technicznych motywów WordPress, jaki powinien być szablon, aby działał na rdzeniu WordPress. Dzięki temu będziesz mógł stworzyć stronę internetową z własnym motywem, który będzie dokładnie odpowiadał Twoim wymaganiom.

Należy pamiętać, że ten poradnik nie zawiera opisu dodawania gotowego motywu - jest to instrukcja generowania własnego szablonu. Jeśli pobrałeś motyw i nie wiesz, jak go zainstalować, przejdź do obszaru administracyjnego WordPress, do sekcji „Wygląd” i dodaj tam jeden z dostępnych projektów. Przyjrzyjmy się teraz bliżej, czym jest motyw, dlaczego jest potrzebny i jak go stworzyć samodzielnie.

W jakim celu motyw jest tworzony ręcznie?

Motyw (szablon) to zbiór plików funkcjonalnych i stylistycznych, które razem określają projekt zasobu. Temat określa, jak będzie wyglądać witryna, dlatego bardzo ważne jest, aby poprawnie podejść do procesu tworzenia szablonu. Wiele osób zadaje sobie teraz pytanie: „Po co tworzyć własny motyw, skoro można pobrać gotowy w Internecie i za darmo?” To logiczne pytanie i istnieje na nie całkowicie obszerna odpowiedź: „Aby stworzyć idealny szablon, który w pełni będzie odpowiadał Twoim wymaganiom”.

Kupując projekt lub pobierając go z bezpłatnego katalogu szablonów WordPress, zwykle poświęcasz jakość. Z reguły takie szablony nie mają wszystkiego, co jest dla Ciebie odpowiednie. Ale sam rezygnujesz, myślę, że jeden, dwa niuanse to nie cały obraz i że później będziesz redagował temat. Ale w rzeczywistości okazuje się, że strona pozostaje z niedokończonym motywem, który Ci się nie podoba. Dlatego lepiej od razu zrobić to samodzielnie. I chociaż układ może początkowo wydawać się skomplikowany, gdy się nauczysz, możesz nawet tworzyć niestandardowe szablony.

Dodatkowo po stworzeniu szablonu poczujesz się jak „lekarz” WordPressa – będziesz wiedział, co kryje się w środku witryny. Zrozum, które elementy są za co odpowiedzialne. Wtedy strona i ty będziesz mówił w Tobie. Zapoznaj się z tagami, strukturą i pętlami WordPress. A może będziesz chciał zająć się tym profesjonalnie i zacząć zarabiać na życie tworzeniem szablonów.

Oto główne powody, dla których warto stworzyć własny szablon strony internetowej:

dowiedz się wszystkiego o HTML, CSS i coś o PHP;
będziesz mógł tworzyć, bo projektowanie stron internetowych to także sztuka;
możliwe będzie zarabianie na sprzedaży motywów;
odkryj nową umiejętność;
stwórz projekt, który będzie w 100% pasował do Twojej przyszłej witryny internetowej.

Jakie standardy spełnia temat?

Podczas pisania szablonu bardzo ważne jest przestrzeganie oficjalnych zasad. Złamanie kodu, wstawienie tagu w złym miejscu i pominięcie go może zaszkodzić projektowi i całkowicie zrujnować jego wygląd. Powinieneś dokładnie zapoznać się z zasadami pisania kodu PHP, a także HTML, jeśli nie znasz jeszcze tych języków. Będziesz miał także do czynienia z kaskadowymi arkuszami stylów CSS, więc pamiętaj także o podstawach – w Internecie jest mnóstwo informacji na ten temat. No cóż, ostatnim i najmniej ważnym wymogiem jest stworzenie strony internetowej jak projektant, a nie jak uczeń, aby otrzymać poważny projekt. Inaczej nie ma sensu zajmować się tą sprawą.

Wszystkie motywy WordPress są przechowywane w folderze wp-content/themes/. Wewnątrz tego folderu znajdują się inne foldery z indywidualnymi motywami, plik z dodatkowymi funkcjami (functions.php), pliki stylów i obrazy. Aby znaleźć dane na konkretny temat należy udać się do odpowiedniego katalogu. Zatem motyw „Western” zostanie umieszczony w folderze wp-content/themes/western/.

Zanim zaczniesz, powinieneś przynajmniej rzucić okiem na strukturę gotowych motywów. Domyślna witryna WordPress zawiera dwa standardowe szablony, które można przeglądać. To jest szablon domyślny i klasyczny. Otwórz ich pliki w żądanym katalogu na serwerze i porównaj różnice.

Zauważysz, że szablon zazwyczaj składa się z trzech formatów plików:

Style.css to plik stylu odpowiedzialny za wygląd zewnętrzny witryny.
Functions.php to plik funkcjonalny, który dodaje różne funkcje do stron.
Inne pliki php, które odpowiadają za możliwości wyświetlania szablonu na stronie i integracji motywu z WordPressem. To właśnie te pliki pozwalają przekonwertować układ PSD na pełnoprawny szablon.

Przyjrzyjmy się każdemu z tych plików bardziej szczegółowo, aby zrozumieć, w jaki sposób tworzony jest motyw WordPress.

Zasady tworzenia pliku style.css

Po pierwsze, musi być zgodny ze wszystkimi funkcjami znaczników CSS. To, jak będzie wyglądać Twoja witryna, zależy od tego pliku. Ale to nie zadziała, jeśli nie dodasz do niego opisu utworzonego szablonu. Jest to pierwsza cecha WordPressa, którą należy wziąć pod uwagę przy przenoszeniu układu psd do silnika WordPress. Będziesz musiał określić następujące parametry:

Nazwa szablonu.
Adres URL prowadzący do tematu.
Opis wskazujący główne cechy szablonu. Krótko.
Imię autora. W takim przypadku prosimy o podanie swojego imienia i nazwiska.
Link do autora, czyli do Ciebie. Możesz podać link do swojego profilu w sieciach społecznościowych.
Nazwa motywu nadrzędnego jest opcjonalna.
Wersja tematyczna. Jeśli właśnie go utworzyłeś, to v. 1,0.
Pełny opis szablonu. Możesz napisać szczegółowo.

Aby stworzyć najprostszy motyw WordPress, wystarczy dodać edytowaną wersję z jednym plikiem style.css. W tym pliku obok wiersza „szablon” podaj nazwę motywu nadrzędnego. Na przykład Klasyczny, jeśli edytujesz standardowy szablon. Teraz utworzony motyw będzie w pełni odpowiadał szablonowi Classic. Dlatego będziesz musiał przesłać pliki do katalogu wp-content/themes/classic.

W ten sposób możesz stworzyć swój pierwszy, najprostszy motyw, który będzie „potomkiem” gotowego szablonu. Ale nie będzie to pełnoprawny projekt strony, a jedynie próba jej układu, dlatego powinieneś kontynuować badania.

Funkcje dodatkowej funkcjonalności plikufunctions.php

Szablony nie zawsze korzystają z plikufunctions.php, jednak w większości przypadków jest to konieczne. Należy go umieścić w katalogu o odpowiednim motywie. Pamiętaj, że jeśli ten plik znajduje się w folderze szablonów, zostanie wzięty pod uwagę podczas inicjalizacji motywu. Działa jak wtyczka. I będzie pełnił takie funkcje, jakie mu nadasz.

Głównym celem plikufunctions.php jest określenie dostępnych funkcji dostosowywania w panelu administracyjnym dla danego motywu. Oznacza to, że wszystkie funkcje, które wprowadzisz w plikufunctions.php, zostaną wyświetlone w panelu administracyjnym lub na stronie użytkownika. Zazwyczaj oznacza to zmianę schematu kolorów witryny WordPress, zmianę czcionki i wiele więcej. Ale istnieje wiele zastosowań tego pliku. To jednak zupełnie inna historia...

Funkcje szablonów plików php

Pliki PHP będą odpowiedzialne za poszczególne części serwisu. Definiują zarówno elementy strony, jak i nagłówki, kategorie i inne sekcje, które będą wyświetlane użytkownikowi. Ponieważ jesteś teraz twórcą motywu, tylko Ty decydujesz, które i ile plików szablonów wybrać. Po ich wybraniu w Twoim panelu administracyjnym pojawią się nowe funkcje. Im mniej plików wybierzesz, tym szybciej witryna będzie działać, ale będzie miała mniejszą funkcjonalność. Zastanów się dokładnie, jakich plików potrzebujesz, a bez których możesz się obejść.

Jeśli chcesz dodać minimalny motyw do swojej witryny lub przetestować układ psd, potrzebujesz tylko dwóch plików w katalogu szablonów:

Styl.css.
Index.php.

Doświadczonym webmasterom udaje się zmienić plik indeks.php w taki sposób, że wystarczy wprowadzić ustawienia dla stopki, paska bocznego, wyszukiwania, archiwum, kategorii, stron itp. Ale lepiej spróbuj stworzyć szablon WordPress, w którym każdy plik będzie wykonywał odpowiednią funkcję.

Nawet jeśli przypadkowo nie określisz żadnego pliku szablonu, WordPress automatycznie doda do witryny własne ustawienia domyślne. Przykładowo jeśli nie dodamy pliku odpowiedzialnego za komentarze, silnik znajdzie w katalogach własne wersje tej funkcji - np. wp-comments.php. Wtedy „obce” komentarze wpadną w strukturę Twojej witryny, która nie będzie spełniać wymagań szablonu. Aby temu zapobiec, musisz dodać wszystkie główne pliki, aby wyświetlić różne komponenty strony:

header.php – odpowiada za nagłówek strony;
sidebar.php – kolumny boczne;
footer.php – stopka zasobu (jej dolna część);
komentarze.php i komentarze-popup.php – komentarze.

Po wygenerowaniu każdego z tych plików, aby witryna zaczęła je wyświetlać, należy wprowadzić do nich dane w głównym pliku szablonu indeks.php. Aby to zrobić, określ tagi w pliku Index.php, które prowadzą do nazwanych plików. Na przykład:

aby dodać plik nagłówkowy witryny (header.php), dodaj tag
znacznik tamplate get_header();
W przypadku stopki jest tak samo, ale zamiast nagłówka określ stopkę itp.

Przykład włączenia jednego z plików szablonów do pliku Index.php mógłby wyglądać następująco: . Będziesz musiał wyszukać każdy z określonych plików szablonów kluczy, aby uzyskać osobne informacje. Znajdź instrukcje do każdego z plików, a także próbki, dzięki którym zrozumiesz wszystkie funkcje zawarte w szablonach.

Wybór funkcjonalności szablonu

Z czasem staniesz przed dylematem – jaki rodzaj szablonu wybrać. Silnik daje Ci wybór. Możesz wybrać szablon z połączoną hierarchią szablonów lub układ ze znacznikami warunkowymi.

Pierwsza opcja została już rozważona. Wszystkie pliki php szablonów są hierarchią szablonów. Oznacza to, że zgodnie z zasadami tej hierarchii stopniowo generujesz indywidualne pliki układu. W ten sposób stworzysz pełnoprawny szablon z szeregu funkcjonalnych komponentów PHP. Hierarchia w tym przypadku działa na zasadzie ładowania na żądanie. Na przykład, jeśli masz plik kategorii (category.php) i użytkownik o to poprosi, wówczas ten konkretny komponent witryny zostanie załadowany w przeglądarce. Jeśli go tam nie ma, zostanie załadowany plik szablonu klucza indeks.php.

W ten sposób możesz zmieniać wygląd poszczególnych części serwisu, korzystając z zasady Hierarchii szablonów. Każda strona ma swój własny, specyficzny identyfikator. Dodaj plik kategorii-6.php do katalogu motywu, a kiedy poprosisz o kategorię o identyfikatorze równym 6, ten projekt się otworzy. Jeśli go tam nie ma, ustawienia pozostaną standardowe - indeks.php zostanie rozwinięty.

Czasami zasada hierarchii szablonów nie wystarczy, aby zapewnić najwygodniejsze wyświetlanie szablonu. W tym przypadku programiści uciekają się do drugiej zasady - wprowadzają znaczniki warunkowe. Tagi te sprawdzają witrynę pod kątem spełnienia określonych warunków, a jeśli te warunki nie są spełnione, zmieniają jej wygląd. Oznacza to, że znaczniki te działają na zasadzie if/else. W ten sposób nie będziesz musiał dodawać morza plików php z numerem każdej kategorii, ale będziesz mógł raz określić warunki dla każdego identyfikatora.

Jak utworzyć układ psd w WordPress

Niektórzy lubią najpierw stworzyć układ przyszłego projektu za pomocą różnych programów, a dopiero potem przenieść go do konkretnego silnika. Jest to naprawdę wygodne, ponieważ niektóre aplikacje pozwalają na wygenerowanie doskonałego projektu bez żadnych umiejętności. Jeśli posiadasz już plik psd i chcesz go zaaranżować pod silnik WordPress bez użycia kodu, możesz skorzystać z pomocy jednej z popularnych usług.

Pamiętaj, że jest to usługa płatna, więc szablon będzie tylko w połowie Twój. Zamów taką usługę tylko w ostateczności, jeśli układ wydaje Ci się dobry, ale nie masz już sił na jego układanie. Jest wielu programistów, którzy są gotowi przenieść psd na WordPress za niską cenę i dosłownie z dnia na dzień.

PSD to plik z aplikacji Photoshop. To jak graficzne przedstawienie Twojego projektu. Aby to nadrobić, musisz dodać znaczniki HTML w edytorze tekstu. Stopniowo będziesz zmieniać każdy z punktów tego znacznika, osiągając końcowy wynik pokazany na układzie. Natychmiast wskaż wyśrodkowanie szablonu, a także rozmiary poszczególnych jego części.

Następnym krokiem jest dodanie obrazów tła. Można je także wykonać samodzielnie, korzystając z tej samej aplikacji Photoshop. Najłatwiejszą opcją jest utworzenie gradientowych obrazów tła. Następnie zacznij tworzyć logo. Stopniowo rozwiązuj wszystkie pojawiające się zapytania - dostosuj nagłówek, stopkę, pasek boczny i wszystkie jego części, zgodnie z wykonanym układem. Nie zapomnij dodać ważnych plików szablonów do katalogu szablonów, aby witryna ładowała się zgodnie z Twoimi wymaganiami.

Tylko w ten sposób, stopniowo ucząc się podstaw różnych języków programowania, można nauczyć się samodzielnie układać układ strony internetowej. Nikt nie mówi, że odniesiesz sukces dzisiaj lub jutro. Zrozumienie wszystkich funkcji procesu układu może zająć miesiące. Ale nie martw się – niektórym zajmuje to lata. Teraz znasz przybliżoną procedurę tworzenia szablonu od podstaw, a także przenoszenia układu psd do gotowego motywu dla zasobu internetowego za pomocą silnika WordPress.

Kategoria: . 4 komentarze. Opublikowano: 24 listopada 2012.

Witam, dzisiaj zdecydowałem się opublikować artykuł na temat tworzenia układu strony internetowej, który następnie ułożymy i przeciągniemy silnik wordpress. Dlatego jeśli nie chcesz przegapić publikacji tych artykułów, pamiętaj o subskrybowaniu aktualizacji bloga, a po opublikowaniu artykułu od razu się o tym dowiesz. Tworzenie układu strony psd i tworzenie szablonu WordPress jest w rzeczywistości bardzo prostym procesem i jestem pewien, że będziesz w stanie postępować zgodnie z moimi instrukcjami i uzyskać całkowicie unikalny szablon.

Aby stworzyć szablon, nie potrzebujemy dużej wiedzy, znajomości HTML I CSS, wystarczy przeczytać artykuły w tematach na tym blogu. Szczególną uwagę należy zwrócić na użycie znaczników DIV i SPAN.

Teraz zastanówmy się, czego potrzebujemy, aby utworzyć układ PSD, a następnie zaprojektujmy ten szablon dla witryny. Tak naprawdę nie potrzeba do tego wiele, programu Photoshop, który można pobrać z Internetu, mam nadzieję, że nie będzie to dla Was problemem i pobierzcie do tego materiały źródłowe.

Wkrótce opublikuję także artykuły, w których opowiem o tym, jak tworzyć tekstury i tła dla witryny, więc subskrybuj aktualizacje bloga.

Tworzenie dokumentu.

Teraz zacznijmy tworzyć układ i utwórz nowy dokument. Wybierz plik - utwórz. Wybierz wymiary dokumentu 960 NA 1600 pikseli.

Rysujemy dwie prowadnice, lewą i prawą. Aby to zrobić, po prostu kliknij linijki i narysuj linie.

Teraz musimy zmienić rozmiar płótna. Do tego wybieramy Rozmiar obrazu canvas i wybierz rozmiar płótna 1200 na 1600 pikseli. Następnie wypełnij ten obszar kolorem białym za pomocą narzędzia Wypełnienie farbą.

Grupy dla szablonu.

Teraz utwórzmy grupy dla witryny. Utwórzmy standardowe grupy jak we wszystkich szablonach i są to: nagłówek, menu, treść, kolumna boczna i stopka witryny. Jest to bardzo proste: w menu warstw kliknij obraz folderu; aby zmienić nazwę utworzonej grupy, wystarczy dwukrotnie kliknąć nazwę i wprowadzić żądaną nazwę.

Nagłówek witryny.

Teraz zacznijmy od utworzenia nagłówka witryny. Pierwszą rzeczą, którą musisz zrobić, to otworzyć teksturę z nazwą „Tekstura 1”. A teraz musimy przyciąć czarne tło, jest to bardzo łatwe, wybierz narzędzie "Magiczna różdżka" i kliknij czarne tło, teraz kliknij prawym przyciskiem myszy jasny obszar i wybierz „Odwróć zaznaczony obszar”.

Następnym krokiem jest doprecyzowanie naszych granic, wybranie prawego przycisku myszy i wybranie opcji Udoskonal krawędź. I ustaw wszystkie ustawienia tak, jak pokazano na obrazku.

Teraz wybierz „ warstwy – nowa – skopiuj na nową warstwę" Teraz bierzemy warstwę myszką i przeciągamy ją na nasz rysunek.

Następnym krokiem jest odwrócenie rysunku. Aby to zrobić, wybierz Edycja-Przekształć-Obróć o 90 stopni w kierunku przeciwnym do ruchu wskazówek zegara. Następnie, naciskając lewy przycisk myszy, będziesz musiał przesunąć warstwę, jak pokazano na poniższym rysunku.

Teraz musimy zwiększyć nasycenie naszego obrazu i w tym celu przechodzimy do zakładki Obrazy — Korekty — Barwa/Nasycenie. Teraz musimy zmniejszyć jasność obrazu do -100. A oto co powinniśmy otrzymać:

Teraz napiszmy logo naszej witryny. Aby to zrobić musimy zainstalować nową czcionkę. Myślę, że pobrałeś już plik materiału źródłowego, a w archiwum znajduje się również plik czcionki. Pierwszą rzeczą, którą musisz zrobić, to rozpakować czcionkę. Teraz musimy przejść do folderu (najczęściej jest to Dysk C:/windows - Czcionki).
I skopiuj tam wszystkie pliki czcionek. Teraz uruchom ponownie program, a ta czcionka będzie dla Ciebie dostępna.
Teraz wybierz narzędzie Tekst i wybierz naszą czcionkę, pomaluj na biało i utwórz logo w pobliżu lewej prowadnicy. Oto co dostałem.

Stwórzmy teraz menu po prawej stronie. Będzie się składać z trzech głównych punktów, a są to Strona Główna, Kontakty i O autorze. Wybierz ponownie narzędzie Tekst i kliknij je w żądanym miejscu. Kolor jest biały, czcionka to Wide Latin, a rozmiar to 18 pikseli.

Utwórz nową warstwę. Teraz weź proste narzędzie lasso i wybierz przycisk wokół jednej z etykiet.

I wypełnij zaznaczony obszar kolorem 2A2A2A. Teraz zmieniamy kolejność warstw, przesuwając warstwę z napisem nad warstwę z wypełnieniem.

Główna treść serwisu.

A teraz mamy przycisk menu po kliknięciu. Teraz musimy przejść do folderu Content i utworzyć w nim nową warstwę.

Otwarcie rysunek 3 i umieść go poniżej wszystkich warstw. Stosując transformację, zwiększamy rozmiar obrazu, aż wypełni całą przestrzeń.

Teraz dostosowujemy jasność i kontrast tekstury. Aby to zrobić, naciśnij przyciski Ctrl + Shift + U. Wybierz opcję Obraz – Korekcja – Krzywe.

Ustawiamy ustawienia jak na rysunku.

Utwórzmy nową warstwę, a teraz wspólnie z Tobą wybierzemy obszar zawartości. Nasz obszar zawartości będzie biały i będzie miał wymiary 660 na 1200 pikseli. W tym celu wybieramy narzędzie „Obszar i styl prostokąta – podane proporcje”, w którym należy wpisać wymiary pola, a następnie wypełnić pole narzędziem „Wypełnij”.

Teraz musimy ustawić skok dla naszego pola. Wybierz warstwę, na której znajduje się nasze zdjęcie i kliknij przycisk „Dodaj styl warstwy”, z rozwijanego menu wybierz Obrys.

I ustaw następujące ustawienia - grubość 1 piksel i kolor c8c7c7.

Teraz otwarte zdjęcie 4, stosując skalowanie zmniejszamy rozmiar, powinien być o około dziesięć pikseli większy od białego pola po prawej i lewej stronie. Góra i dół muszą być wcięte o 50-60 pikseli.

Teraz naciśnij kombinację przycisków Ctrl + Shift + U aby odbarwić teksturę i dostosować jasność za pomocą krzywych. Ustawienia jak na zdjęciu.

Wybierz warstwę z naszym białym płótnem, kliknij prawym przyciskiem myszy i wybierz „ Wybierz piksele».

Teraz wybierz szarą warstwę i kliknij wybór - modyfikacja - kompresja i ustaw zmniejszenie na trzy piksele. Następnie musimy odwrócić nasz wybór, już to zrobiliśmy i łatwo to zrobić, wybierz Inwersja selekcji, naciśnij przycisk Del. Oto co powinniśmy otrzymać:

Teraz utwórz maskę dla tej samej szarej warstwy.

Wybierz gradient czarno-biały i klikając lewym przyciskiem myszy przeciągnij od środka do dolnej krawędzi strony, wygładzając w ten sposób przejście.

Stwórzmy teraz przyciski nawigacji strony. Aby to zrobić, wystarczy narysować czarny prostokąt, możesz wybrać rozmiar według własnego uznania. W każdym przycisku musisz także wpisać nazwę stron. Do napisów używamy czcionki Czcionka Times New Roman i rozmiar 18 pikseli.

Otwórzmy teraz obrazek z ikonami i dodajmy je po przeciwnej stronie menu głównego. Teraz musimy wciąć treść po obu stronach o dwadzieścia pikseli. Teraz musimy dodać tytuł do naszego pierwszego artykułu, kolor tekstu jest czarny. Do daty i liczby komentarzy użyłem koloru cb8154.

Teraz, aby oddzielić tytuł od głównej treści witryny, musisz narysować linię. Aby narysować linię prostą należy wybrać narzędzie Ołówek i przytrzymując klawisz Shift narysować linię klikając na jej początku i rysując do samego końca.

Teraz musimy stworzyć miejsce na podgląd. Aby to zrobić, utwórz prostokąt o potrzebnych nam wymiarach, zdecydowałem się zrobić go o wymiarach 165 na 165 pikseli i wypełnić go kolorem czarnym. Zastosujmy do niego ustawienia: obrys i cień.

Udar mózgu.

Cień.

Teraz dodajmy niestandardowy tekst. Oto co powinniśmy otrzymać:

Teraz po zakończeniu artykułów należy oddzielić 30 pikseli i kolor szary (SSSSSS). Następnie narysuj cztery kwadraty o wymiarach 32 na 32 piksele i wypełnij je czerwonym kolorem 8E0A13.

Narysuj formularz wyszukiwania.

Aby to zrobić, wystarczy narysować prostokątny obszar białego koloru i zastosować do niego wewnętrzny cień.

Teraz rysujemy czerwony przycisk o tym samym rozmiarze 32 na 32 i kolorze czerwonym i piszemy słowo „na biało” Szukaj».

Pasek boczny.

Na nowej warstwie narysuj prostokąt o szerokości 270 pikseli i wypełnij go kolorem 1F1F1F. Dodajemy również nagłówek o tej samej szerokości 270 pikseli i wysokości 25 pikseli, wypełniony kolorem czarnym.

Teraz musimy napisać kategorie na blogu. Tekst jest napisany czcionką Times New Roman i ma rozmiar 16 pikseli. Do każdej pozycji menu należy dodać zdjęcie. Wybierać " Darmowa figura" i wybierz kształt punktu rastrowego " Ozdoba 4" i wypełnij go kolorem 818181.

Stopka witryny.

Stopką nie będziemy się zbytnio przejmować, po prostu wypełnimy całe pole kolorem czarnym i dodamy menu, czcionkę Times New Roman o rozmiarze 18 pikseli i kolorze E6E6E6.

Jeśli chcesz pobrać wynikowy szablon, kliknij przycisk, a łącze do pobrania będzie dostępne. Ten artykuł się skończył i myślę, że już wiesz, że pierwszym krokiem do stworzenia szablonu WordPress jest utworzenie układu strony PSD.

Nie jest tajemnicą, że w Internecie dostępnych jest mnóstwo gotowych szablonów dla WordPressa. Począwszy od darmowych, po drogie szablony premium z własnymi frameworkami.

Co za różnica? Jaki projekt wybrać dla swojej strony internetowej?

Artykuł ten przeznaczony jest dla tych, którzy planują swoją stronę internetową w oparciu o WordPress i stoją przed wyborem szablonu.

Zacznijmy od darmowych. Zaleta jest oczywista – cena, a raczej jej brak. Główną wadą szablonów publicznych jest to, że jeśli szablon jest w miarę przyzwoity, to na pewno będzie już na nim ogromna liczba stron. Prawdopodobieństwo, że Ty lub Twoi klienci natkniecie się na stronę internetową, która jest całkowicie identyczna pod względem projektu, jest bardzo, bardzo wysokie. Dlatego powinieneś wybierać szablony publiczne tylko wtedy, gdy Twój budżet jest naprawdę ograniczony i nie przejmujesz się szczególnie funkcjami graficznymi witryny. Tak, oczywiście, przy niewielkiej inwestycji wysiłku lub pieniędzy, możesz w unikalny sposób (dostosować) szablon publiczny nie do poznania. I nadal będzie to jedno z najtańszych rozwiązań.

Zapisz się na mój telegram i jako pierwszy otrzymuj nowe materiały, także te, których nie ma na stronie.