1. 1. Teraz czytam: Samouczek WordPress: Jak utworzyć motyw WordPress z HTML (część 1)
  2. 2). Samouczek WordPress: Jak utworzyć motyw WordPress z HTML (część 2)
  3. 3). Wprowadzenie do anatomii motywu WordPress

Jeśli zacząłeś od strony HTML (+ CSS), nie musisz wyrzucać tego wszystkiego, przechodząc do WordPress. Możesz przekonwertować HTML na WordPress i uruchomić swoją (teraz bardziej wydajną) witrynę na dynamicznej platformie WordPress.


A może tak nie jest. Być może zastanawiasz się, jak przekonwertować projekt HTML klienta na pełnoprawny motyw WordPress. A może chcesz nauczyć się podstawowego programowania WordPress (+ PHP) od bardziej znanej strony HTML.

Bez względu na powód, dla którego jesteś tutaj dzisiaj, ten samouczek WordPress zapozna Cię z podstawami tworzenia motywu WordPress z HTML. Możesz postępować zgodnie z tym przewodnikiem, aby utworzyć motyw od zera, lub możesz przejść do Github i pobrać motyw startowy WPExplorer, który zapewnia „puste płótno” do utworzenia motywu ze wszystkimi niezbędnymi plikami szablonów i kodem na początek. Więc jeśli jesteś jedną z tych osób, które raczej uczą się poprzez czytanie kodu, pobierz motyw startowy, pomiń przewodnik i zobacz, jak to działa… W przeciwnym razie uzyskaj edytor kodu (używam i polecam Notatnik++, lub SublimeText) i gotowa przeglądarka, a następnie postępuj zgodnie z tym prostym przewodnikiem do końca.

Nazywanie motywu WordPress

Po pierwsze, musimy nadać Twojemu motywowi unikalną nazwę, która nie jest konieczna, jeśli tworzysz motyw tylko dla swojej witryny. Niezależnie od tego musimy nazwać Twój motyw, aby był łatwy do zidentyfikowania podczas instalacji.

Ogólne założenia w tym momencie:

  • Masz gotowy plik index.html i arkusz stylów CSS.
  • Masz działającą instalację WordPress z co najmniej jednym motywem, np. Dwadzieścia czternaście
  • Utworzyłeś już folder motywów, w którym będziesz zapisywać nowy motyw WordPress ��

Wróćmy do nazywania motywu WordPress. Otwórz edytor kodu i skopiuj i wklej zawartość arkusza stylów do nowego pliku i zapisz go jako style.css w folderze motywów. Dodaj następujące informacje na samej górze nowo utworzony style.css:

/ *
Nazwa motywu: nazwa twojego motywu
URI motywu: URL twojego motywu
Opis: krótki opis twojego motywu
Wersja: 1.0 lub dowolna inna wersja, którą chcesz
Autor: Twoje imię lub nazwa użytkownika WordPress.org
Autor URI: Twój adres internetowy
Tagi: Tagi do zlokalizowania motywu w repozytorium motywów WordPress
* /

Nie pomijaj tagów komentarzy (/ *… * /). Zapisz zmiany. Ta informacja informuje WordPress o nazwie twojego motywu, autora i podobnych rzeczy. Ważną częścią jest nazwa motywu, która pozwala wybrać i aktywować motyw za pomocą pulpitu nawigacyjnego WP.

Rozbijanie szablonu HTML na pliki PHP

W tym samouczku założono, że szablon HTML jest ułożony od lewej do prawej: nagłówek, treść, pasek boczny, stopka. Jeśli masz inny projekt, być może będziesz musiał trochę zagrać z kodem. To zabawne i super łatwe.

Kolejny krok obejmuje utworzenie czterech plików PHP. Za pomocą edytora kodu utwórz index.php, header.php, sidebar.php i footer.php i zapisz je w folderze motywów. W tym momencie wszystkie pliki są puste, więc nie oczekuj, że coś zrobią. W celach ilustracyjnych używam następujących plików arkusza stylów index.html i CSS:

INDEX.HTML




Jak przekonwertować szablon HTML na motyw WordPress - WPExplorer








To jest sekcja nagłówka. Umieść tutaj swoje logo i inne szczegóły.






To jest główny obszar treści.






To jest pasek boczny






I to jest stopka.

ARKUSZ STYLOWY

#wrap {margin: 0 auto; szerokość: 95%; margines na górze: -10px; wysokość: 100%;}
.nagłówek {szerokość: 99,8%; border: 1px solid # 999; wysokość: 135px;}
.zawartość {szerokość: 70%; border: 1px solid # 999; margin-top: 5px;}
.pasek boczny {float: right; margines na górze: -54px; szerokość: 29%; border: 1px solid # 999;}
.stopka {szerokość: 99,8%; ramka: 1px bryła # 999; margines na górze: 10px;}

Możesz pobrać oba kody, jeśli nie masz z czym pracować. Wystarczy skopiować i wkleić je do edytora kodu, zapisać je, utworzyć cztery wspomniane pliki PHP i przygotować się do następnej części. Otwórz nowo utworzone (i puste) header.php. Zaloguj się do istniejącej instalacji WordPress, przejdź do Wygląd – >> Redaktor i otwórz header.php. Skopiuj cały kod między tagi i wklej go do pliku header.php. Oto kod, który otrzymałem z pliku header.php w motywie Twenty Fourteen:



<?php wp_title( '|', true, 'right' ); ?>

/js/html5.js">

Następnie otwórz index.html plik i skopiuj kod nagłówka (tj. kod w

sekcja) do pliku header.php tuż pod tagi, jak pokazano poniżej:




<?php wp_title( '|', true, 'right' ); ?>









To jest sekcja nagłówka. Umieść tutaj swoje logo i inne szczegóły.

Następnie dodaj…

… Gdziekolwiek pomiędzy tagi w pliku header.php, aby połączyć arkusz stylów. Pamiętaj również, aby umieścić i otwieranie tagów w header.php, jak pokazano powyżej. Zapisz wszystkie zmiany.

Skopiuj drugą sekcję (tj.

…

z index.html do nowo utworzony index.php , i dodaj…

… Na samym szczycie i…

… Do absolutnego dna. Te trzy wiersze pobierają header.php, sidebar.php i footer.php (w tej kolejności) i wyświetlają je w pliku index.php, który ponownie składa kod. Zapisz wszystkie zmiany. W tym momencie plik index.php powinien wyglądać następująco:

Następnie skopiuj zawartość z sekcji paska bocznego i stopki w pliku index.html do odpowiednio sidebar.php i footer.php.

Dodawanie postów

Twój szablon HTML zmieni się w motyw WordPress. Musimy tylko dodać twoje posty. Jeśli masz posty na swoim blogu, w jaki sposób wyświetlasz je w niestandardowym motywie „HTML-to-WordPress”? Używasz specjalnego typu funkcji PHP znanej jako Pętla. Pętla to po prostu wyspecjalizowany fragment kodu, który wyświetla Twoje posty i komentarze w dowolnym miejscu.

Teraz, aby wyświetlić swoje posty w sekcja treści szablonu index.php, skopiuj i wklej następujący kod między

i

tagi, jak pokazano poniżej:

To zadba o twoje posty. Łatwe jak ABC. W tym momencie (i przy użyciu przykładowych plików zawartych w tym samouczku) plik header.php powinien wyglądać następująco:



<?php wp_title( '|', true, 'right' ); ?>

/js/html5.js">

Twój sidebar.php powinien wyglądać tak:

Twój footer.php powinien wyglądać tak:



I to jest stopka

Czy zauważyłeś zakończenie i tagi w stopce? Nie zapomnij też o nich dołączyć.

Twój style.css powinien wyglądać mniej więcej tak:

/ *
Nazwa motywu: Tworzenie motywu WordPress z HTML
Motyw URI: http://wpexplorer.com
Opis: Ten motyw pokazuje, jak tworzyć motywy WordPress z HTML
Wersja: 1.0
Autor: Freddy dla @WPExplorer
Autor URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tagi: wpexplorer, niestandardowy motyw, HTML do WordPress, utwórz motyw WordPress
* /
ciało {
rodzina czcionek: arial, helvetica, verdana;
rozmiar czcionki: 0,8em;
szerokość: 100%;
wysokość: 100%;
}

.nagłówek {
kolor tła: # 1be;
margines lewy: 14%;
góra: 0;
szerokość ramki: 0,1 em;
kolor obramowania: # 999;
styl obramowania: pełny;
szerokość: 72%;
wysokość: 250 pikseli;
}

.zadowolony {
kolor tła: # 999;
margines lewy: 14%;
margines na górze: 5 pikseli;
float: left;
szerokość: 46%;
szerokość ramki: 0,1 em;
kolor obramowania: # 999;
styl obramowania: pełny;
}

.Pasek boczny {
kolor tła: # 1d5;
margines z prawej: 14%;
margines na górze: 5 pikseli;
float: prawo;
szerokość ramki: 0,1 em;
kolor obramowania: # 999;
styl obramowania: pełny;
góra: 180 pikseli;
szerokość: 23%;
}

.stopka {
kolor tła: czerwony;
margines lewy: 14%;
float: left;
margines na górze: 5 pikseli;
szerokość: 72%;
wysokość: 50 pikseli;
szerokość ramki: 0,1 em;
kolor obramowania: # 999;
styl obramowania: pełny;
}

Twój index.php powinien wyglądać podobnie do:











"rel =" bookmark "title =" Stały link do „>

Znowu – jest to oparte na lewej stronie z nagłówkiem, treścią, paskiem bocznym i układem stopki. Czy obserwujesz? Wszystkie pięć plików należy zapisać w folderze motywu. Nazwij folder, jak chcesz i skompresuj go do archiwum ZIP za pomocą WinRar lub równoważnego programu. Prześlij nowy motyw do instalacji WordPress, aktywuj go i zobacz przekonwertowany motyw w akcji!

To było łatwe, prawda? Możesz stylizować swój motyw, jak chcesz, ale większość funkcji, które kochamy w WordPress, jest nadal nieaktywna, ponieważ … ten samouczek obejmuje podstawy konwertowania szablonów HTML na WordPress i powinien być dla Ciebie bardzo ważny jako początkujący. W następnym samouczku zajmiemy się znacznie wyżej i będziemy bawić się innymi aspektami programowania WordPress (np Pliki szablonów i Tagi szablonów), które pozwolą Ci zmieniać szablony HTML w dowolny sposób. Bądźcie czujni!