Jak przekonwertować stronę HTML na WordPress za darmo? Przewodnik

Opublikowany: 2015-05-18

Na początku wszystkie strony były tworzone z tekstem i statycznym HTML. Nie było WordPressa i trzeba było przekonwertować stronę HTML na WordPress lub jakikolwiek inny system CMS.

Wiele firm nadal opiera swoją obecność w Internecie na prostych witrynach HTML. Te witryny HTML mają zazwyczaj charakter statyczny. Oznacza to, że nawet zmiana drobnego szczegółu na stronie odbywa się poprzez edycję pliku kodującego.

Teraz, ponad 20 lat później, sieć jest zupełnie innym miejscem. Obsługujący ponad 25% sieci WordPress coraz częściej staje się systemem zarządzania treścią (CMS) wybieranym przez przeciętnego użytkownika.

Witryny internetowe są znacznie bardziej złożone. Zapewniają bogatsze i przyjemniejsze wrażenia zarówno twórcom witryn, jak i odwiedzającym. Czy przejście na WordPress oznacza rozpoczęcie od nowa i utratę całego czasu, energii i pieniędzy włożonych w obecną stronę internetową?

Spis treści

Witryna HTML

Bez względu na kod witryny, gdy użytkownik załaduje stronę w witrynie, przeglądarka pobiera wszystkie fragmenty (dołączenia po stronie serwera, obrazy z innego katalogu itp.) i łączy je w końcowy statyczny kod HTML strona.

Nawet jeśli niektóre elementy na stronie są nadal dynamiczne, sam kod znajduje się w jednym miejscu, które można przenieść na stronę WordPress, która nadal będzie działać. Mogą istnieć pewne wyjątki od tego, ale w przypadku większości witryn byłoby to prawdą.

Nawet jeśli Twoja witryna składa się z somepage.php, która wywołuje plik o nazwie header.inc, oraz plik o nazwie footer.php, gdy użytkownik przegląda somepage.php w przeglądarce, wynikowy kod źródłowy znajduje się w jednym miejscu , tak jakby został ręcznie zakodowany jako statyczna strona HTML.

Jest to rodzaj kodu, który jest potrzebny do konwersji witryny na WordPress. Każdy, kto ma zainstalowany WordPress i odpowiedni motyw/wtyczki, może mieć nowoczesną stronę internetową o zaawansowanym wyglądzie i funkcjonalności.

Migracja ze statycznej strony HTML do WordPress Wstępne kroki

Jeśli jesteś gotowy, aby przejść na WordPress, poniżej znajdują się cztery kroki, które należy wziąć pod uwagę:

1. Przeanalizuj swoją istniejącą witrynę HTML

Sprawdź swoją witrynę pod kątem nieistotnych lub nieaktualnych treści, a jeśli je znajdziesz, wyczyść ją. Sprawdź obecny system nawigacji i zastanów się, jak można go ulepszyć. Przeprowadzenie analizy witryny HTML pomoże Ci zdecydować, jakie treści, funkcje i funkcje należy przenieść do WordPress.

To da jasne wyobrażenie o tym, jakie wtyczki należy zainstalować, aby uzyskać tę samą funkcjonalność na platformie WordPress.

2. Poznaj WordPressa

Instalacja WordPressa to dość łatwy proces. Większość hostów internetowych oferuje instalację jednym kliknięciem. Jeśli nie jesteś zaznajomiony, dobrze byłoby przeczytać i poinformować o nowej platformie, na której będzie pracowała Twoja strona.

3. Wykonaj kopię zapasową swojej witryny HTML

Zdecydowanie zaleca się wykonanie pełnej kopii zapasowej witryny statycznej, aby uniknąć ryzyka utraty danych podczas migracji.

4. Konwertuj stronę HTML na WordPress

Zakładając, że masz wystarczającą wiedzę na temat kodowania, a Twoja witryna jest niewielka, najlepszą możliwą opcją jest podzielenie istniejącego kodu HTML na cztery sekcje (nagłówek, stopka, pasek boczny i treść), a następnie skopiowanie zawartości każdej sekcji do odpowiedni plik PHP.

Jeśli Twoja witryna jest duża, możesz skorzystać z wtyczki HTML do WordPress, takiej jak Import HTML 2, lub zatrudnić kogoś do konwersji HTML na WordPress.

Jak przekonwertować stronę HTML na samouczek WordPress

Sposób, w jaki zdecydujesz się przekonwertować statyczną witrynę HTML na witrynę WordPress, bez wątpienia będzie zależeć od twoich osobistych preferencji, pożądanej inwestycji czasowej / pieniężnej i poziomu umiejętności w zakresie kodu.

Metoda 1

Dzięki tej metodzie konwertowania witryny HTML na WordPress zachowasz ten sam projekt i wygląd witryny.

1. Pobierz strony HTML ze swojego obecnego hosta. W tym celu użyj WinHTTrack. To świetne darmowe narzędzie, które jest bardzo łatwe w użyciu. Upewnij się, że bierzesz też folder obrazów (lub gdziekolwiek masz swoje obrazy na starej stronie).

2. Zainstaluj WordPress na nowym hoście internetowym.

  • Ustaw strukturę permalinku na „Nazwa posta” (/%postname%/)
  • Zaznacz pole „Zniechęcaj wyszukiwarki do indeksowania tej witryny” (dopóki wszystko nie zostanie zrobione)
  • Zainstaluj wtyczkę trybu konserwacji (jeśli chcesz), aby nikt oprócz Ciebie nie miał dostępu do nowego WordPressa.
  • Zainstaluj darmową wtyczkę WordPress Import HTML 2. Użyj go, aby „przesłać” starą witrynę do nowej witryny. Podręcznik użytkownika do importowania całego katalogu stron HTML.

3. Prześlij zawartość pobraną właśnie w kroku 1 do nowej struktury plików hosta internetowego. Umieść je w folderze o nazwie na przykład „pliki-html do importu”. Prześlij wszystkie stare obrazy do Biblioteki multimediów w WordPressie w nowej witrynie.

4. Uruchom import

5. Przygotuj wiersz poleceń DOS i Excel

  • W wierszu poleceń DOS przejdź do miejsca, w którym umieściłeś pliki HTML (najłatwiej jest umieścić je w folderze o nazwie „twojawitryna” i umieścić ten folder na dysku C:\). Następnie zainicjuj to polecenie: katalog > pliki.txt
  • Otwórz plik files.txt w programie Excel.
  • Teraz do Excela. Zasadniczo będziesz używać kilku funkcji programu Excel, w tym „konkatenacji” do renderowania „kanonicznego” kodu, który umieścisz w plikach HTML.
  • Umieść odpowiedni kod kanoniczny w każdym pliku HTML. Mógłbyś to zrobić, zatrudnić go do outsourcera lub zatrudnić kogoś do napisania kodu PHP, który zrobi to automagicznie.

6. Prześlij pliki HTML do swojego usługodawcy hostingowego . Umieść je w folderze ROOT (tj. najwyżej) dla swojej nowej witryny. Nie zapomnij przesłać również folderu obrazów do katalogu ROOT.

7. Upewnij się, że wszystko nadal działa w nowej witrynie.

8. Odznacz pole z kroku #2 – „Zniechęcaj wyszukiwarki do indeksowania tej witryny” i wyłącz wtyczkę HTML Import 2.

9. Zmień DNS u swojego rejestratora.

10. Upewnij się, że adres URL Twojej witryny prowadzi do właściwego adresu IP (twój nowy adres IP, a nie stary adres IP) oraz że WSZYSTKIE strony ładują się poprawnie. Być może będziesz musiał poczekać kilka godzin na aktualizację serwerów nazw.

11. Po pewnym czasie możesz usunąć stare strony HTML , ale nie ma takiej potrzeby. Nie dostaniesz kar za powielanie treści, ponieważ odniesienia kanoniczne o to zadbają.

Będziesz chciał dodać przekierowania w pliku .htaccess, które kierują twoje stare strony „.html” na nowe strony WordPress.

Metoda 2

Jeśli Twoim celem jest nie tylko przeniesienie treści ze statycznej witryny HTML do WordPressa, ale także powielenie obecnego projektu, oznacza to, że będziesz musiał utworzyć niestandardowy motyw.

Wymaga tylko utworzenia kilku folderów i plików, odrobiny kopiowania i wklejania, a następnie przesyłania wyniku. Będziesz potrzebować edytora kodu, takiego jak Sublime lub Notepad++ i dostępu zarówno do katalogu witryny HTML, jak i katalogu nowej instalacji WordPress.

1. Utwórz nowy folder motywu i niezbędne pliki. Na pulpicie utwórz nowy folder do przechowywania plików motywów. Nazwij go tak, jak chcesz, aby Twój motyw został zidentyfikowany.

Następnie utwórz kilka plików (wszystkie znajdują się w folderze nowego motywu) w edytorze kodu:

  • Styl.css
  • Index.php
  • header.php
  • sidebar.php
  • stopka.php

2. Skopiuj istniejący CSS do nowego arkusza stylów Jeśli chcesz zduplikować projekt, prawdopodobnie oznacza to, że masz przynajmniej część CSS, które chcesz zapisać. Więc pierwszym plikiem, który będziesz chciał edytować, jest plik Style.css.

Aby rozpocząć, dodaj następujące elementy na początku pliku.

 /*
 Nazwa motywu: zastąp nazwą motywu.
 URI motywu: URI motywu
 Opis: Krótki opis.
 Wersja: 1.0
 Autor: Ty
 URI autora: adres Twojej witryny.
 */

Po tej sekcji wklej poniżej istniejący kod CSS. Zapisz i zamknij plik.

3. Oddziel swój obecny kod HTML

Nadchodzi proces wycinania i wklejania części istniejącego kodu do różnych utworzonych plików.

  • Najpierw otwórz plik index.html bieżącej witryny. Podświetl wszystko, od góry pliku do otwierającego tagu div class=”main” . Skopiuj i wklej tę sekcję do pliku header.php , zapisz i zamknij.
  • Wróć do pliku index.html . Podświetl element klasy „sidebar” i wszystko, co się w nim znajduje. Skopiuj i wklej tę sekcję do pliku sidebar.php , zapisz i zamknij.
  • W swoim index.html zaznacz wszystko po pasku bocznym i skopiuj i wklej do pliku footer.php , zapisz i zamknij.
  • W pliku index.html zaznacz wszystko, co pozostało (powinna to być sekcja głównej zawartości) i wklej ją do pliku index.php . Zapisz, ale jeszcze nie zamykaj. Można zamknąć plik index.html teraz jednak i przenieść się do końcowych etapów. Prawie skończone!

4. Sfinalizuj plik Index.php

Aby sfinalizować plik index.php nowego motywu, musisz upewnić się, że może wywołać inną sekcję (oprócz głównej zawartości), która znajduje się w innych utworzonych przez Ciebie plikach.

Na samej górze pliku index.php umieść następujący wiersz php.

<?php get_header(); ?>

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

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Teraz masz „Pętlę”. Jest to podstawowy fragment php, którego WordPress używa do wyświetlania treści Twojego posta odwiedzającym. Tak więc ostatnim krokiem w tworzeniu pliku index.php nowego motywu jest dodanie poniższego kodu w sekcji treści.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Zapisz swój index.php i zamknij. Twój motyw jest już gotowy! Pozostało tylko przesłać go na swoją witrynę WordPress.

5. Prześlij swój nowy motyw

Teraz będziesz przechowywać utworzone pliki motywów w nowym folderze motywów. Zainstaluj WordPressa.

Umieść nowy folder motywu w /wp-content/themes/ . Przejdź do WP Admin> Wygląd> Motywy i powinieneś zobaczyć tam nowo utworzony motyw. Aktywuj to! Wszystko, co pozostało do zrobienia w tym momencie, to wypełnienie nowej witryny WordPress zawartością starej witryny.

6. Skopiuj zawartość strony HTML do WordPress

W WP Admin przejdź do Wtyczki> Dodaj nowy. Wyszukaj wtyczkę o nazwie HTML Import 2 autorstwa Stephanie Leary. Po zainstalowaniu i aktywacji tej wtyczki postępuj zgodnie z jej instrukcją obsługi, aby zaimportować cały katalog stron HTML. Po tym Twoja witryna powinna wyglądać tak, jak wcześniej, po prostu działająca na WordPressie.

Używanie istniejącego motywu WordPress do konwersji witryny HTML (najłatwiejsza metoda)

Jeśli powyższe kroki wydają się zbyt intensywne lub czasochłonne, istnieje inny sposób. To najłatwiejszy sposób.

Zamiast konwertować istniejący projekt HTML, aby wyglądał tak samo na WordPressie, możesz skorzystać z jednego z tysięcy motywów dostępnych w WordPress Marketplace.

Dostępne są darmowe motywy i motywy premium. Po wybraniu motywu, który Ci się podoba (i pobraniu spakowanego pakietu plików), zainstaluj/aktywuj nowy motyw WordPress.

Gdy to zrobisz, będziesz mieć nową witrynę i motyw WordPress. Gdy wyświetlisz podgląd swojej witryny, będzie ona pusta. Czas zaimportować zawartość i zakończyć proces konwersji strony HTML na stronę WordPress.

W WP Admin przejdź do Wtyczki> Dodaj nowy i wyszukaj wtyczkę o nazwie Import HTML 2. Postępuj zgodnie z instrukcją użytkownika, aby zaimportować cały katalog stron HTML. Po tym będziesz mieć całą swoją starą zawartość, ale nowy wygląd.

4 Konwertuj HTML na WordPress za pomocą dopasowywania motywów

Możesz także użyć dopasowywania motywów. Oferuje automatyczną konwersję HTML na WordPress. Wystarczy wejść na swoją stronę i wybrać odpowiedni obszar. Theme Matcher pobiera obrazy, style i układ z istniejącej witryny.

Konwertuj-HTML-stronę-stronę-WordPress-z-dopasowaniem-motywu

5 Usługa konwertera HTML na WordPress

HTML do WordPress konwertuje projekty HTML do motywów WordPress bez konieczności pisania jednej linii PHP.

Możesz wybrać plan usług, w którym przekonwertują twoją statyczną stronę HTML na WordPress. Ta opcja może zwiększyć cenę. Możesz również wybrać opcję Konwerter, która jest znacznie tańsza.

Usługa konwertera HTML na WordPress

Konwersja jest w pełni zautomatyzowana , a funkcjonalność motywu można rozszerzyć, dodając do kodu HTML klasy konwertera z przedrostkiem „wp-”.

Konwerter tworzy szablony dla każdego pliku HTML i odwołuje się do zasobów oraz wypełnia wszystkie niezbędne funkcje php. Korzystaj z Bootstrap, Webflow, Dreamweaver lub innego narzędzia/frameworka, z którym już znasz się do tworzenia witryn internetowych. Dopóki strona jest wykonana w języku HTML, możesz przekonwertować ją na motyw.

Co należy zrobić po migracji?

Po zakończeniu konwersji musisz zrobić kilka rzeczy, aby nadać swojej witrynie WordPress ostateczny szlif.

  • Zainstaluj niezbędne wtyczki — aby odświeżyć swoją nową witrynę WordPress o te same funkcje, co witryna HTML, zainstaluj wtyczki, które okazały się przydatne.
  • Sprawdź i napraw uszkodzone linki – Sprawdź swoją witrynę pod kątem uszkodzonych linków (błędy 404), a jeśli je znajdziesz, napraw je.
  • Skonfiguruj niestandardową stronę błędu 404 – dodaj niestandardową stronę błędu 404, aby przekierować odwiedzających do odpowiednich sekcji witryny WordPress, na wypadek gdyby próbowali uzyskać dostęp do dowolnego adresu URL, który nie istnieje.
  • Linki przekierowujące — aby poinformować wyszukiwarki, że zawartość Twojej witryny została przeniesiona na nowy adres internetowy, skonfiguruj przekierowania 301. W tym celu możesz użyć prostego przekierowania 301.
  • Włącz indeksowanie w wyszukiwarkach : Przejdź do „ Ustawienia -> Czytanie ” na pulpicie WordPress i zaznacz „ Zezwalaj wyszukiwarkom na indeksowanie tej witryny ”, aby Twoja witryna była indeksowana przez wyszukiwarki.
  • Wygeneruj i prześlij mapę witryny XML : aby zapewnić jak najszybsze uwzględnienie Twojej witryny w wynikach wyszukiwania, utwórz mapę witryny XML i prześlij ją do Google.

WordPress vs HTML – ZALETY i WADY

Uruchomienie biznesowej strony internetowej nie jest łatwym procesem. Jednym z największych dylematów jest to, czy wybrać statyczną stronę HTML, czy wybrać WordPress.

WordPress – WordPress jest postrzegany jako CMS (system zarządzania treścią). Uproszczona wersja HTML dla nietechnicznych użytkowników do dodawania i modyfikowania rzeczy na swoich stronach internetowych.

Witryny CMS są zwykle dynamiczne, co oznacza, że ​​nie ma ograniczeń co do częstotliwości zmian treści. Możesz zmienić wszystko od obrazków do całych tekstów.

Interfejs jest bardzo prosty i przyjazny dla użytkownika i nikt nie potrzebuje specjalnego przeszkolenia, aby się go nauczyć. Rynek CMS jest bardzo konkurencyjny, ale WordPress za każdym razem pokonuje konkurencję.

Inną rzeczą, o której należy pamiętać, zanim zaczniesz, jest znacząca różnica między WordPress.com a WordPress.org, ponieważ ta ostatnia jest CMS o otwartym kodzie źródłowym. Z drugiej strony WordPress.com działa jako usługa hostingu blogów.

Zalety korzystania z WordPressa:

  • Zapewnia tysiące wtyczek, aby dodać do witryny brakującą funkcjonalność.
  • Modyfikacja jest możliwa w każdej chwili i nikt Cię nie ogranicza.
  • W porównaniu z konfiguracją HTML, konfiguracja WordPressa zajmuje znacznie mniej czasu.

Wady korzystania z WordPressa:

  • Nie możesz tego po prostu skonfigurować i zapomnieć. Wymaga pełnej uwagi i ciągłej aktualizacji oprogramowania, wtyczek i motywów.
  • Hakerzy będą atakować słabo chronione i niezaktualizowane strony internetowe. Ryzykujesz, że Twoja strona w ogóle nie będzie działać, jeśli nie będziesz na bieżąco z aktualizacjami.
  • WordPress jest łatwy, ale nie tak bardzo dla początkujących. Istnieje wiele samouczków online i obszernych materiałów, które pomogą Ci przejść przez krzywą uczenia się.

Statyczne strony internetowe HTML – Wcześniej nie było czegoś takiego jak szablony, a jedynym sposobem na stworzenie strony internetowej było zatrudnienie specjalisty od programowania, który zrobi to za Ciebie.

Dlatego wszystkie strony zostały zbudowane w Statycznym HTML (Hyper Text Markup Languages). Chodziło o posiadanie strony internetowej. Nie modyfikować treści ani jej układu, ponieważ musiałbyś ponownie zatrudnić programistę HTML.

Na stronach HTML zawartość jest przechowywana w plikach statycznych, co bardzo utrudnia jej modyfikowanie.

Zalety strony HTML:

  • Gdy witryna przejdzie do trybu online, nie musisz jej aktualizować ani tworzyć jej kopii zapasowej. Przez większość czasu nic nie trzeba zmieniać na tej stronie.
  • Strony HTML są proste i łatwe w konfiguracji.
  • Ich rozmiar i fakt, że zużywają mniej zasobów niż witryny dynamiczne, zapewniają im znaczną przewagę szybkości w porównaniu do witryn dynamicznych, dzięki czemu ładują się znacznie szybciej.

Wady strony HTML:

Musisz być profesjonalistą w językach znaczników. W przeciwnym razie nie będziesz w stanie dokonać żadnej znaczącej aktualizacji swojej witryny. Ciągłe zatrudnianie programisty internetowego będzie kosztować, nawet jeśli Twoja witryna jest naprawdę mała lub wyświetla tylko trywialne informacje.

Inną ważną wadą jest to, że nie możesz dodawać wtyczek , co oznacza, że ​​masz do czynienia z poważnym brakiem funkcjonalności.

Jak przekonwertować HTML na podsumowanie WordPress

Niezależnie od tego, czy potrzebujesz więcej od swojej witryny, czy też tworzysz nową z myślą o szablonie, proces konwersji może wydawać się dość skomplikowany dla nowicjusza. Cierpliwość i wiedza pozwolą ci zrobić to, co musisz zrobić, z pewnym poziomem sukcesu.

Po uruchomieniu witryny możesz być dumny z tego, że nauczyłeś się robić coś nowego i potrafiłeś zastosować tę wiedzę w swojej witrynie.

Mam nadzieję, że co najmniej jedna z powyższych metod pomogła Ci przekonwertować witrynę HTML na WordPress. Jeśli masz inną metodę lub samouczek, daj mi znać. Czy kiedykolwiek przekonwertowałeś HTML na WordPress i jakie masz z tym doświadczenia?