Kiedy po raz pierwszy pojawił się Internet, strony internetowe były dość głupie. Oznacza to, że nie były niczym więcej niż tekstem i statycznym kodem HTML, bez żadnych fantazyjnych efektów i bardzo małej interaktywności.

Dwadzieścia lat później strony internetowe opierają się na złożonym oprogramowaniu, a ich zbudowanie może zająć tygodnie, a nawet tygodnie. Są bogate w funkcje, wysoce interaktywne, bardziej responsywne, lepiej wyglądają i tak dalej.

Dziś zamiast pisać kod samodzielnie, możesz skorzystać z systemów zarządzania treścią, które same zajmują się kodem Twojej witryny. Wszystko, co musisz zrobić, to wybrać motyw i zacząć publikować.

Jednym z takich systemów CMS jest WordPress, z którego korzystają obecnie miliony użytkowników na całym świecie. Najlepsze w WordPressie jest to, że jest to bardzo elastyczna platforma. Nie wymaga żadnej wiedzy na temat kodowania, aby z niego korzystać, a dzięki niemu możesz tworzyć najbardziej responsywne i niesamowite strony internetowe.

Jeśli posiadasz witrynę, która nie była aktualizowana od lat 90., ten artykuł stworzony przez nasz zespół wpDataTables pomoże Ci przekonwertować HTML na WordPress, abyś Ty również mógł czerpać korzyści z nowoczesnej technologii internetowej.

Czytaj dalej, aby dowiedzieć się więcej.

Dlaczego warto przekonwertować HTML na WordPress?

Powody, dla których dana osoba powinna przekonwertować HTML na WordPress, są dość różnorodne. Oto wybór najważniejszych z nich:

Konwersja na WordPress zapewnia pełną kontrolę nad każdym szczegółem Twojej witryny. Jeśli nie podoba Ci się część witryny, możesz ją łatwo dostosować do własnych upodobań.
Witryny WordPress są znacznie łatwiejsze w dostępie, zarządzaniu i utrzymaniu w porównaniu ze statycznymi witrynami HTML. To bardzo ważny powód, aby przeprowadzić migrację HTML do WordPress.
Konwertując styl szablonu HTML na WordPress, uzyskasz unikalny motyw, którego nie posiada żadna inna osoba korzystająca z CMS.
WordPress pomaga w optymalizacji pod kątem wyszukiwarek i zapewnia, że Twoja witryna zostanie odkryta przez więcej osób.
Jako programista stron internetowych Twoja praca zostanie zmniejszona o połowę, ponieważ WordPress poradzi sobie z większością czynności, które wcześniej były niepotrzebnie czasochłonne.

Przejście od statycznego HTML do WordPress: metody

Teraz, gdy masz już wszystkie powody, aby przekonwertować HTML na WordPress, możesz przejść do nauki, jak to zrobić.

Do wyboru są dwie metody: metoda ręczna, która polega na zrobieniu wszystkiego samemu, od podstaw; oraz metoda motywu potomnego, która polega na użyciu podstawowego motywu WordPress i dostosowaniu go do własnych potrzeb.

Wybór metody zależy od Twojego doświadczenia z kodowaniem, tego ile czasu chcesz zainwestować w to zadanie, a także od własnych preferencji. Każda z tych metod zostanie przedstawiona w poniższych sekcjach, gdzie dowiesz się, jak przekonwertować HTML na WordPress.

Metoda ręczna

1 Utwórz nowy folder motywu

Utwórz nowy folder na pulpicie, w którym będą przechowywane pliki motywów. Nazwij ten folder, jak chcesz (będzie reprezentował nazwę motywu). Utwórz te pliki w preferowanym edytorze kodu i pozostaw je otwarte:

styl.css
index.php
header.php
sidebar.php
stopka.php

2 Skopiuj istniejący kod CSS do nowego arkusza stylów

Po utworzeniu plików możesz przejść do kopiowania kodu CSS. Ci, którzy chcą zduplikować swoje witryny i przenieść je do WordPressa, będą musieli wyeksportować i zaimportować kod CSS swojej poprzedniej witryny. CSS odpowiada za wygląd strony, więc edytuj plik style.css, dodając do niego następujące wiersze kodu:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Zastąp wymagane informacje własnymi, dodaj pozostałe wiersze CSS i gotowe. Nie zapomnij zapisać pliku. Możesz teraz zamknąć style.css.

3 Pobierz aktualny kod HTML

Przejdź do pliku index.html swojej witryny i zaznacz całą zawartość od początku dokumentu do znacznika div class="main". Tę sekcję należy wkleić do pliku header.php utworzonego w kroku 1.

Wróć do pliku index.html i zaznacz wszystko wewnątrz elementu class="sidebar”. Skopiuj zawartość i wklej ją do utworzonego pliku sidebar.php. Zrób to samo dla stopki, z całą zawartością po elemencie sidebar.

W przypadku pliku index.php zaznacz całą zawartość pozostałą po podświetleniu i wklej ją w nowym pliku, zapisz i pozostaw ją otwartą do następnego kroku.

4 Edytuj plik index.php

Aby sfinalizować plik index.php, skopiuj te wiersze kodu i wklej je na górze dokumentu:

Następnie na samym dole pliku index.php umieść te wiersze PHP.

Plik nie jest jeszcze gotowy, ponieważ musisz utworzyć pętlę postów, która reprezentuje kod PHP, którego potrzebuje WordPress, aby poprawnie wyświetlać posty na blogu lub artykuły Twojej witryny. Dodaj następujące wiersze kodu w sekcji zawartości pliku:

Po zakończeniu zapisz plik, zamknij go i przejdź do następnego kroku.

5 Prześlij swój nowy motyw

Gdy folder motywu będzie gotowy, musisz go przesłać do swojej witryny i dokończyć konwersję HTML do WordPress. Aby to zrobić, przejdź do folderu, w którym zainstalowałeś WordPress i umieść właśnie utworzony folder w /wp-content/themes/.

Przejdź do strony administratora WP, Wygląd, a następnie Motywy, aby sprawdzić, czy nazwa motywu pojawia się na liście, czy nie. Jeśli tak, zrobiłeś wszystko poprawnie i możesz go aktywować. Jeśli tak się nie stanie, uważnie przeczytaj wszystkie kroki, jak ponownie przekonwertować HTML na WordPress.

Jest też ten przydatny przewodnik wideo autorstwa Traversy Media, który powinieneś sprawdzić:

Korzystanie z motywu potomnego WordPress

Jeśli kroki wymienione w poprzednim kroku wydają się zbyt skomplikowane dla Twojego poziomu, jest to metoda wymagająca mniejszej wiedzy z zakresu kodowania. Jest łatwiejszy w zarządzaniu i zajmie mniej czasu.

Aby szybciej przekonwertować HTML na WordPress, możesz użyć motywu podrzędnego z istniejącego motywu. Motywy potomne są nazywane w ten sposób, ponieważ są zbudowane na drugim motywie, który jest motywem nadrzędnym.

1 Wybierz motyw

Przede wszystkim wybierz motyw odpowiedni dla Twojego projektu HTML. Poszukaj motywu podrzędnego, który jest podobny do Twojej istniejącej witryny. Poszukaj struktury, którą ma, abyś nie musiał zagłębiać się w kodowanie.

Powinieneś wybrać motyw startowy, ponieważ opierają się na bardzo podstawowych liniach kodu.

2 Utwórz nowy folder motywu

Tak jak w poprzednim przypadku, będziesz musiał utworzyć nowy folder motywu. Jedyną różnicą jest to, że nazwiesz folder w taki sam sposób, jak motyw nadrzędny, na którym oparty jest Twój motyw potomny i dodasz do niego przyrostek „-child”.

Na przykład, jeśli twój motyw nazywa się Dwadzieścia dziewięć, nazwiesz folder „dwadzieścia dziewięć-dziecko”. Upewnij się, że nie dodajesz spacji w nazwie.

3 Skonfiguruj nowy arkusz stylów

Następnie utwórz plik style.css w folderze i dodaj następujące wiersze kodu:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Pamiętaj, że to jest przykład. Będziesz musiał zastąpić informacje własnymi. Zapisz plik po zakończeniu.

4 Utwórz plik functions.php

Gdy masz już plik style.css, możesz aktywować motyw bez zmian. Jednak, aby strona wyglądała i działała lepiej, będziesz musiał użyć funkcji i stylów motywu nadrzędnego. W tym celu musisz utworzyć plik functions.php.

Użyj tych wierszy kodu i zapisz plik:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Aktywuj motyw potomny

Na koniec musisz aktywować motyw. Spakuj folder i dodaj go do WordPress, przechodząc do menu Wygląd, Motywy, a następnie kliknij "Dodaj nowy". Prześlij tam spakowany plik. Inną opcją byłoby przeciągnięcie folderu w wp-content/themes.

W zamknięciu

Aby przekonwertować HTML na WordPress, potrzebujesz trochę cierpliwości, ale z pewnością jest to warte zachodu. Mimo że proces ten wymaga trochę Twojej uwagi, otrzymasz naprawdę wyjątkową witrynę, która jest o wiele wygodniejsza w zarządzaniu ze wszystkich punktów widzenia.

Jeśli dokładnie wykonasz kroki przedstawione w tym artykule, nic nie może się nie udać, więc nie martw się! Jeśli jednak napotkasz jakiekolwiek problemy, nie wahaj się zajrzeć na fora pomocy społeczności WordPress. Jest tam wielu użytkowników, którzy chętnie Ci pomogą.

Jeśli podobał Ci się ten artykuł na temat konwersji HTML na WordPress, powinieneś zapoznać się z tym artykułem o wynagrodzeniu programisty WordPress.

Pisaliśmy również o kilku powiązanych tematach, takich jak najlepszy edytor kodu, szkolenia dotyczące WordPressa, biblioteki JavaScript i rozszerzenia Brackets.

Źródło nagrywania: wpdatatables.com