Konwertowanie szablonów HTML na motywy WordPress

Chociaż technologia internetowa przeszła długą drogę, nadal istnieją strony internetowe tworzone wyłącznie za pomocą HTML. Jeśli posiadasz jeden z nich, być może zastanawiasz się, jak przekonwertować szablon HTML na motyw WordPress.

Na szczęście masz do dyspozycji kilka opcji, jeśli chcesz przekonwertować te pliki HTML na WordPress. Dostępne techniki obejmują zarówno ręczne konwersje, jak i współpracę z ekspertami, którzy poradzą sobie z całym ciężkim podnoszeniem.

W tym artykule omówimy cztery różne podejścia do konwersji szablonów HTML. Dla każdego z nich zapewnimy instrukcje i zasoby, które pomogą Ci przenieść witrynę opartą na HTML do strony WordPress. Jest wiele do omówienia, więc zanurzmy się od razu!

Ręczna konwersja HTML

Pierwszą opcją, jeśli chodzi o konwersję, jest podejście ręczne. Ponieważ jest to dość praktyczny proces, musisz upewnić się, że masz dostęp do plików zarówno oryginalnej, jak i nowej witryny.

Zazwyczaj do tego celu będziesz używać aplikacji Secure File Transfer Protocol (SFTP). Po uzyskaniu dostępu do witryny możesz wykonać następujące czynności.

Krok 1: Utwórz folder motywu

Najpierw musisz utworzyć folder do przechowywania plików nowego motywu i oznaczyć go nazwą nowego motywu. Korzystając z edytora kodu, możesz utworzyć pięć określonych plików:

• styl.css
• indeks.php
• nagłówek.php
• stopka.php
• pasek boczny.php

Na razie możesz po prostu pozostawić te pliki puste i zapisać je w właśnie utworzonym folderze.

Krok 2: Skopiuj i wklej istniejący CSS

Kolejnym priorytetem jest dostosowanie pliku kaskadowego arkusza stylów (CSS). W tym miejscu nakreślisz wszystkie różne elementy stylu dla swojej witryny.

Na górze warto dodać informacje o pliku. W rzeczywistości, jeśli chodzi o WordPress, istnieje kilka elementów, które są wymagane, aby motyw pojawił się w katalogu motywów.

Poniżej tych informacji będziesz chciał wkleić istniejące style CSS z oryginalnej witryny, które chcesz przenieść do nowego motywu.

Krok 3: Oddziel istniejący kod HTML

W Twojej oryginalnej witrynie kod HTML określający nagłówek, stopkę, pasek boczny i główne obszary treści prawdopodobnie znajduje się w pliku index.html . Teraz musisz podzielić każdy z tych elementów na nowe pliki utworzone dla motywu WordPress.

Na przykład w pliku index.html oryginalnej witryny internetowej możesz zlokalizować pierwszy tag <div> z klasą „main”. Wszystko, co poprzedza ten tag, można następnie skopiować i wkleić do nowego pliku header.php .

Następnie powtórz ten proces dla tagów „pasek boczny” i „stopka”. Skopiuj kod zawarty w każdym z tych elementów i wklej go do odpowiednich plików PHP.

Teraz pozostanie ci podstawowa część pliku index.html . To właśnie składa się na główny układ treści Twojej witryny opartej na HTML. Musisz skopiować pozostały kod i wkleić go do nowego pliku index.php .

Krok 4: Skonfiguruj swój plik Index.php

Następnym krokiem jest upewnienie się, że nowy plik indeksu może zlokalizować pliki niezbędne do tego, aby Twój motyw wyświetlał strukturę i styl witryny. Aby to osiągnąć, użyjesz tagów szablonów WordPress. Służą one do nakazania motywowi pobrania plików nagłówka, stopki i paska bocznego.

Możesz na przykład ustawić, aby Twój szablon wyświetlał plik nagłówka utworzony przez Ciebie za pomocą następującego znacznika:

get_header();

Umieścisz to w pliku szablonu index.php lub na kolejnych stronach, na których chcesz, aby nagłówek się pojawił. To samo dotyczy Twojej stopki.

Jest jeszcze jedna ważna część nowego szablonu, którą również musisz zrozumieć. Nazywa się to pętlą WordPress – fragment kodu PHP, który mówi szablonowi, aby pobierał posty. Można go również dostosować, aby kontrolować liczbę wyświetlanych postów.

Krok 5: Prześlij swój nowy motyw

Teraz, gdy Twój nowy motyw jest gotowy do działania, musisz umieścić jego folder w katalogu wp-themes/content/ swojej witryny:

Po przesłaniu plików możesz zalogować się do pulpitu nawigacyjnego WordPress i przejść do Wygląd > Motywy. Tutaj powinieneś zobaczyć swój nowy motyw na liście i móc kliknąć Aktywuj i zacząć go używać.

Importowanie zawartości HTML za pomocą wtyczki

Innym sposobem obsługi tego procesu jest użycie wtyczki do przeniesienia treści ze starej witryny opartej na HTML. Niestety dostępnych jest bardzo niewiele narzędzi, które są kompatybilne z najnowszymi wersjami WordPressa. Możesz jednak sprawdzić bezpłatną wersję próbną WP Site Importer:

Ta wtyczka może przeskanować całą witrynę i skatalogować zawartość, która jest ruchoma. Działa najlepiej, jeśli kod HTML jest dobrze zorganizowany i „czysty” na początek. Będziesz także mógł importować zawartość, taką jak menu i linki.

Korzystanie z motywu potomnego

Innym sposobem na przeniesienie witryny HTML do WordPress jest motyw potomny. Ma tę samą podstawową funkcjonalność i styl, co motyw nadrzędny, ale będziesz mógł zachować wszelkie wprowadzone poprawki i dostosowania, nawet jeśli zaktualizujesz motyw nadrzędny.

Krok 1: Wybierz motyw

Istnieje wiele dobrze zbudowanych, darmowych motywów do wyboru w katalogu motywów WordPress. Po wybraniu jednego, który Ci się podoba, musisz go zainstalować, aby jego pliki były dostępne w katalogu plików Twojej witryny:

Nie musisz jednak aktywować tego motywu nadrzędnego.

Krok 2: Utwórz folder dla motywu dziecka

Następnie musisz uzyskać dostęp do swoich plików za pomocą aplikacji FTP i utworzyć nowy folder w katalogu wp-content/themes . Ten plik powinien mieć taką samą nazwę jak motyw nadrzędny, z dodanym na końcu „-child”.

Na przykład, jeśli zamierzasz utworzyć motyw potomny dla Twenty Nineteen, możesz utworzyć folder o nazwie 29thnineteen-child:

Ta konfiguracja oznacza, że ​​Twój motyw potomny będzie mógł automatycznie pobierać funkcje i style z motywu nadrzędnego, po skonfigurowaniu pozostałych niezbędnych plików motywu.

Krok 3: Skonfiguruj arkusz stylów

Następnym krokiem będzie skonfigurowanie pliku style.css . WordPress wymaga określonych informacji w arkuszu stylów, aby relacja motywu rodzic-dziecko działała. W razie potrzeby możesz również wkleić dodatkowe informacje o stylu z oryginalnych plików HTML.

Krok 4: Skonfiguruj plik Function.php

Teraz, gdy zasadniczo masz dwa motywy, z którymi pracujesz, musisz powiedzieć WordPressowi, że motyw potomny jest zależny od CSS rodzica. W tym celu możesz użyć wywołania PHP wp_enqueue_style() .

Najpierw utworzysz plik function.php i umieścisz go w folderze motywu potomnego. Jest to plik, w którym wykonasz funkcję kolejkowania, która określa zależności i hierarchię motywu.

Krok 5: Aktywuj motyw dziecka

Po przesłaniu tych nowych plików na serwer swojej witryny możesz wrócić do pulpitu nawigacyjnego WordPress i przejść do Wygląd > Motywy . Tam powinieneś teraz zobaczyć swój motyw potomny gotowy do pracy.

Kliknij opcję Aktywuj w motywie podrzędnym, aby ustawić go jako motyw witryny. Następnie możesz rozpocząć kopiowanie zawartości witryny HTML do nowej witryny WordPress.

Kup usługę konwersji witryny

Jeśli nie masz czasu ani zasobów, aby samodzielnie przeprowadzić konwersję, możesz również skorzystać z usługi konwersji. Dodatkowo, jeśli potrzebujesz więcej zasobów lub pomocy przy migracji innych treści WordPress, tutaj w WP Engine oferujemy wiele rozwiązań i zasobów do migracji i konwersji.

1. Zatrudnij WPGeeków

HireWPGeeks to opcja konwersji z pełnym zakresem usług. Poradzi sobie z całym ciężarem, a otrzymasz elastyczną, responsywną, opartą na motywach witrynę WordPress, która zawiera wszystkie Twoje treści. Będziesz musiał skontaktować się z firmą w celu wyceny, ale możesz zaplanować jej usługi już od 89 USD.

2. Rozwiązania FantasTech

FantasTech Solutions to kolejna usługa konwersji HTML na WordPress. Reklamuje wysoce profesjonalne konwersje z HTML na wysokiej klasy, dobrze zakodowane szablony motywów WordPress. Warto pamiętać, że koszty zaczynają się od 297 USD za jedną stronę. Dodatkowe strony zaczynają się od 147 USD za sztukę, a dokładne ceny zależą od złożoności.

Dostosuj swoją witrynę za pomocą WP Engine

Może się to wydawać dużym przedsięwzięciem, ale konwersja witryny HTML na WordPress może otworzyć wiele innych możliwości. Dzięki tej wysoce elastycznej i rozszerzalnej platformie staniesz się bardziej elastyczny i będziesz w stanie szybko wdrażać nowe treści.

W WP Engine wierzymy, że odpowiednie zasoby dla programistów mogą mieć ogromny wpływ na Twoje projekty. Oprócz innowacyjnych rozwiązań oferujemy plany i poziomy cenowe na każdą kieszeń!