Konwertowanie HTML na WordPress (krok po kroku)


Konwersja HTML na WordPressDroga ze stron zbudowanych z czystego HTML do WordPress nie była krótka. Od samego tekstu projektowanie stron internetowych przeszło na wysoce interaktywną obecność w sieci. Ponadto nie musimy już sami pisać znaczników, ale możemy pozwolić, aby systemy zarządzania treścią wykonały ciężkie prace.


Nie oznacza to jednak, że statyczne strony HTML już nie istnieją. W rzeczywistości HTML5, najnowsza wersja języka znaczników, jest bardzo wydajna i pozwala tworzyć wysokiej jakości strony internetowe bez CMS-a za nimi.

Jednak rosnący udział WordPress w rynku pokazuje, że coraz więcej osób przechodzi na platformę.

Udział w rynku WordPress w 2019 r

W przypadku niektórych z nich oznacza to przejście ze statycznego HTML na WordPress. To może być trudne zadanie, ale w tym poście postaram się wyjaśnić, jak to zrobić na kilka prostych sposobów.

Poniżej pokażemy kilka sposobów konwersji z HTML na WordPress. Najpierw dowiesz się, jakie są różne opcje, a także ich zalety i wady. Następnie pokażemy Ci, jak wykonać każdy z nich krok po kroku.

Kontynuujmy.

3 sposoby przejścia ze statycznego HTML na WordPress

Aby przejść z HTML do WordPress, musisz zmienić swój projekt HTML w motyw WordPress. Motyw kontroluje wygląd i działanie strony WordPress, a funkcjonalność zapewnia sam CMS, a także dodatkowe wtyczki.

Aby dokonać zmiany, masz kilka opcji. To, który z nich jest dla Ciebie odpowiedni, zależy od czynników takich jak czas i pieniądze, które możesz i chcesz zainwestować, umiejętności kodowania i osobiste preferencje. Oto główne opcje.

A) Ręcznie przekonwertuj HTML na motyw WordPress

Pierwsza opcja jest również najbardziej techniczna. Jeśli pójdziesz tą drogą, weźmiesz istniejący kod i wykorzystasz go jako punkt wyjścia do utworzenia plików motywów WordPress.

Nie jest to zbyt skomplikowane, szczególnie jeśli masz doświadczenie w programowaniu. Możesz to zrobić z odrobiną HTML, CSS i trochę wiedzy o PHP. Wiele z nich to kopiowanie i wklejanie.

Wada: chociaż skończysz z działającym motywem WordPress, nie będzie on miał wszystkich możliwości, jakie WordPress ma do zaoferowania. Na przykład, jeśli nie wbudujesz go po fakcie, Twoja strona będzie pozbawiona obszarów widżetów lub możliwości zmiany menu z backendu WordPress.

Twoja witryna wykona swoją pracę, ale nie będziesz w stanie zarządzać nią całkowicie za pomocą WordPress. Z tego powodu osobiście wolimy następną opcję.

B) HTML do WordPress poprzez WordPress Child Theme

Naszym zdaniem jest to prawdopodobnie najłatwiejsza i najbardziej rozsądna droga pod względem wysiłku i inwestycji pieniężnych. Zamiast używać swojej istniejącej witryny jako punktu wyjścia, zamiast tego używasz gotowego motywu WordPress. Następnie dostosowujesz tylko jego wygląd, aby przypominał starą stronę internetową.

Dzięki temu możesz w pełni korzystać z WordPress, zachowując jednocześnie wygląd starej witryny. Nie będziesz też musiał później dodawać funkcji WordPress. Zamiast tego możesz oprzeć się na istniejącym motywie – czymś, co zostało wyraźnie stworzone na platformie WordPress.

C) Importuj zawartość z HTML do WordPress za pomocą wtyczki

Oczywiście, jeśli nie nalegasz na wykorzystanie obecnego projektu i jesteś otwarty na jego zmianę, wszystko staje się jeszcze łatwiejsze. W takim przypadku wystarczy założyć witrynę, zainstalować motyw i zaimportować treść HTML. Jak zobaczycie poniżej, jest to bardzo szybki i bezbolesny proces.

A) Jak ręcznie przekonwertować HTML na motyw WordPress

Jeśli Twoim celem jest rozpoczęcie od zera i stworzenie własnego motywu WordPress, który przypomina istniejącą witrynę HTML, zacznij od tutaj.

Nie martw się, jeśli brzmi onieśmielająco, zobaczysz, że to nic innego. Wystarczy kilka plików i folderów, a także kilka kopii i wkleić.

1. Utwórz folder motywów i pliki podstawowe

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nowy folder motywów. Możesz to zrobić na pulpicie, tak jak w przypadku katalogu na komputerze. Nazwij go, jak chcesz, aby nazywać się Twoim motywem.

Następnie przejdź do edytora kodu i utwórz kilka plików tekstowych. Nazwij je następująco:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Nie rób nic z nimi jeszcze, trzymaj pliki otwarte w edytorze. Będziesz ich wkrótce potrzebować.

2. Skopiuj istniejący CSS do arkusza stylów WordPress

Czas przygotować arkusz stylów WordPress (plikstyle.css właśnie utworzyłeś), aby skopiować do niej CSS starej witryny. W tym celu otwórz plik i wklej:

/ *
Nazwa motywu: dwadzieścia trzynaście
Motyw URI: http://wordpress.org/themes/twentythirteen
Autor: zespół WordPress
Autor URI: http://wordpress.org/
Opis: Motyw WordPress z 2013 r. Zabiera nas z powrotem na blog, oferując pełną gamę formatów postów, z których każdy pięknie prezentuje się na swój własny, niepowtarzalny sposób. Mnóstwo szczegółów projektowych, zaczynając od żywej kolorystyki i pasujących obrazów nagłówka, pięknej typografii i ikon oraz elastycznego układu, który wygląda świetnie na każdym urządzeniu, dużym lub małym.
Wersja: 1.0
Licencja: GNU General Public License v2 lub nowsza
Identyfikator URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
Tagi: czarny, brązowy, pomarańczowy, jasnobrązowy, biały, żółty, jasny, jednokolumnowy, dwukolumnowy, prawy pasek boczny, elastyczna szerokość, niestandardowy nagłówek, niestandardowe menu, styl edytora, polecane obrazy, mikroformaty, post-formaty, wsparcie dla języka rtl, sticky-post, gotowe do tłumaczenia
Domena tekstowa: dwadzieścia trzynaście

* /

Jest to tak zwany nagłówek arkusza stylów (Ważne: nie zostawiaj komentarza/*...*/ tagi!). Wypełnij każdą część w ten sposób:

  • Nazwa motywu – Oto nazwa twojego motywu. Może to być wszystko, co chcesz, ale zwykle jest takie samo jak nazwa folderu motywu.
  • URI motywu – Zazwyczaj umieszczasz tutaj stronę główną motywu, ale możesz użyć własnego adresu witryny.
  • Autor – To ty. Wpisz tutaj swoje imię lub jak chcesz się nazywać.
  • Identyfikator URI autora – Link do Twojej strony głównej. Może to być ten, który budujesz lub cokolwiek ma sens.
  • Opis – Opcjonalny opis twojego motywu. To pokaże się w backend WordPress.
  • Wersja – Wersja twojego motywu. Ponieważ go nie publikujesz, to naprawdę nie ma znaczenia. Zazwyczaj podajemy tutaj 1,0.
  • Licencja, identyfikator URI licencji, tagi – Te rzeczy są ważne tylko, jeśli planujesz przesłać swój motyw do Katalog motywów WordPress. Możesz je pominąć w tym przypadku, po prostu umieściliśmy je w celu uzupełnienia.

Po nagłówku skopiuj i wklej istniejący CSS ze swojej statycznej strony HTML. Następnie zapisz plik w nowym folderze motywu i zamknij go. Czas przejść do reszty.

3. Rozdziel istniejący kod HTML

W następnej części musisz zrozumieć, że WordPress zwykle używa PHP do pobierania informacji z bazy danych. Z tego powodu musisz pokroić istniejący kod HTML na różne części, aby system CMS mógł je poprawnie złożyć.

Choć wydaje się to skomplikowane, oznacza to tylko, że kopiujesz i wklejasz części dokumentu HTML do kilku plików PHP. Aby to lepiej zademonstrować, przygotowaliśmy prostą przykładową stronę, którą możesz zobaczyć poniżej.

HTML do przykładowej strony WordPress

Jak widać, jest to bardzo standardowy szablon HTML, który zawiera nagłówek, obszar zawartości, pasek boczny i stopkę. Towarzyszący kod to:





tytuł strony







tytuł strony

  • element nawigacyjny nr 1
  • element nawigacyjny nr 2
  • element nawigacyjny nr 3

Tytuł artykułu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. W semper konsekat est, ue porta velit mollis gdzie indziej niesklasyfikowane.

Podtytuł

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat easisis pharetra.

Podtytuł

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel Vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat easisis pharetra.

Jeśli twój projekt jest inny, być może będziesz musiał nieco dostosować poniższe kroki. Cały proces pozostaje jednak taki sam.

Najpierw otwórz swój obecny index.html (główny plik witryny HTML). Następnie przejrzyj nowo utworzone pliki WordPress i skopiuj do nich następujące elementy (poniższe przykłady to mój znacznik):

header.php

Wszystko od początku pliku HTML do głównego obszaru treści (zwykle oznaczonego

lub

) trafia do tego pliku. Ponadto tuż przed tym, co mówi, kopiuj i wklej . Jest to kluczowe dla prawidłowego działania wielu wtyczek WordPress.




tytuł strony






tytuł strony

  • element nawigacyjny nr 1
  • element nawigacyjny nr 2
  • element nawigacyjny nr 3

sidebar.php

Wszystko należące do sekcji

Potem skończysz index.html i mogę to zamknąć. Zapisz wszystkie inne pliki w folderze motywów i zamknij je z wyjątkiem header.php i index.php. Masz z nimi jeszcze trochę pracy.

4. „WordPressify” Header.php i Index.php

W przypadku nagłówka wystarczy zmienić wywołanie arkusza stylów z HTML na format WordPress. Aby to zrobić, poszukaj istniejącego linku w Sekcja. Może to wyglądać mniej więcej tak:

Zamień to na:

Fajnie, teraz możesz zapisać i zamknąć header.php. Następnie zwróć się do index.php. W tej chwili powinno być puste. Najpierw skopiuj i wklej następujące wiersze kodu:




Są to wezwania do innych plików, które zawierają resztę twojej witryny. Możesz zauważyć odstęp między wywołaniem nagłówka i paska bocznego. Tam dodasz Pętla.

Ta ostatnia jest częścią WordPress, w której CMS generuje zawartość utworzoną w backendie. Jest to bardzo ważne, jeśli chcesz, aby WordPress dynamicznie dodawał treści do stron, które zaimportujesz później. W tym celu wklej to tutaj zaraz po :


Teraz zapisz index.php zarchiwizuj i zamknij. Dobra robota! Twój podstawowy motyw jest gotowy. Teraz możesz dodać go do swojej nowej witryny WordPress.

5. Utwórz zrzut ekranu i prześlij motyw

Teraz dodasz zrzut ekranu motywu, który wraz z informacjami z nagłówka arkusza stylów będzie służyć jako podgląd witryny w backendie WordPress.

Aby to zrobić, otwórz istniejącą witrynę w przeglądarce i zrób zrzut ekranu z preferowaną metodą. Następnie otwórz wybrane oprogramowanie do edycji obrazu i przytnij go do 880 x 660 pikseli. Zapisz to jako screenshot.png i dodaj go do folderu motywu. Teraz możesz przesłać swój motyw.

Aby przenieść nowy motyw na swoją stronę WordPress, masz kilka opcji. Warunkiem jest jednak, aby wszystkie pliki znajdowały się w folderze motywu.

Pierwszą opcją jest utworzenie z niego pliku zip. Następnie przejdź do swojej witryny WordPress, a następnie do Wygląd> Tematy. Kliknij tutaj Dodaj nowe u góry, a potem Prześlij motyw.

prześlij przekonwertowany motyw

W nadchodzącym menu użyj przycisku, aby przejść do lokalizacji pliku zip. Zaznacz i kliknij otwarty, następnie Zainstaluj teraz. Po zakończeniu aktywuj motyw.

Możesz też połączyć się z serwerem za pośrednictwem FTP (lub po prostu przejść do lokalnego katalogu na dysku twardym) i przejść do wp-content / themes. Następnie prześlij tam (rozpakowany) folder motywów. Następnie aktywuj motyw z tego samego miejsca, co wcześniej.

Miły! Interfejs Twojej nowej witryny powinien teraz wyglądać jak Twoja stara witryna. Aby przejść z HTML do WordPress, wystarczy zaimportować istniejącą zawartość. Omówimy to bardziej szczegółowo poniżej, mówiąc o używaniu istniejącego motywu WordPress.

Pamiętaj jednak, że chociaż podstawowy motyw działa teraz, możesz zrobić więcej, aby lepiej zintegrować swój HTML z WordPress. To zawiera dzięki czemu tytuł i opis bloga można edytować, dodawanie obszarów widżetów, komentarze i wiele więcej. Konieczne może być również dodanie znaczników CSS, ponieważ treść nie jest częścią oryginalnego projektu, takiego jak obrazy.

Ponieważ jest to dużo pracy, osobiście lubimy korzystać z rozwiązania, które ma już całą tę funkcjonalność i wymaga jedynie zmiany w projekcie. Oto, co pokażemy Ci dalej.

B) HTML do WordPress poprzez WordPress Child Theme

Jeśli powyższe wydaje się zbyt intensywne, następna metoda może być łatwiejsza do zarządzania. Pozwala Ci korzystać z tysięcy istniejących motywów WordPress przy jednoczesnym zachowaniu oryginalnego projektu.

To dzięki tak zwanemu motywowi podrzędnemu. Te motywy są zbudowane na podstawie innego motywu (nadrzędnego), który nie jest samodzielny, a jedynie modyfikuje nadrzędny motyw, aby dopasować go do Twoich potrzeb. Łatwo to zrobić, choć wymaga trochę pracy detektywistycznej.

1. Wybierz odpowiedni motyw

Pierwszym krokiem jest wybranie odpowiedniego motywu, na którym oprzesz swój projekt. W tym celu pomaga znaleźć motyw zbliżony do istniejącego projektu lub użyć frameworka motywu lub motywu początkowego, które działają jako podstawa motywów niestandardowych.

Sprawdź Katalog motywów WordPress, naszą listę niesamowitych motywów lub zajrzyj do motywy premium znaleźć odpowiedniego kandydata. Po kilku poszukiwaniach zdecydowaliśmy, że Dwadzieścia dwanaście Motyw byłby dobrym punktem wyjścia do przejścia z HTML do WordPress. Zazwyczaj wybieramy coś bardziej aktualnego, ale pasuje to do prostego projektu, nad którym pracujemy.

Po dokonaniu wyboru zainstaluj motyw na swojej stronie WordPress, tak jak chcesz zainstalować dowolny motyw. Nie musisz go aktywować. Jak wspomniano, jest to po prostu podstawa do pracy. Reszta dzieje się w motywie potomnym.

2. Utwórz nowy folder

Podobnie jak we wcześniejszej metodzie, dla motywu potomnego musisz utworzyć folder motywu. Tutaj umieścisz wszystkie należące do niego pliki.

Podczas tworzenia motywów podrzędnych często nazywa się folder o tej samej nazwie co motyw nadrzędny plus -dziecko. Ponieważ nasz motyw potomny jest oparty na motywie Dwadzieścia Dwanaście, nazywamy go katalogiem dwadzieścia jeden-dziecko.

Bez względu na to, jaką nazwę wybierzesz, pamiętaj, aby nie uwzględniać spacji, ponieważ nie zadziała to w ten sposób.

3. Skonfiguruj arkusz stylów

Motyw potomny wymaga również arkusza stylów. Ten będzie działać prawie tak samo, jak arkusz stylów utworzony powyżej. Ma jednak nieco inny nagłówek i będzie zawierał mniej kodu.

Do drugiej części przejdziemy później. Na razie stwórz zwykłe style.css i umieść go w folderze motywów. Następnie dodaj następujące elementy:

/ *
Nazwa motywu: Twenty Fifteen Child
Identyfikator URI motywu: http://example.com/twenty-fifteen-child/
Opis: Twenty Fifteen Child Theme
Autor: John Doe
Identyfikator URI autora: http://example.com
Szablon: dwadzieścia piętnaście
Wersja: 1.0.0
Licencja: GNU General Public License v2 lub nowsza
Identyfikator URI licencji: http://www.gnu.org/licenses/gpl-2.0.html
Tagi: jasny, ciemny, dwukolumnowy, prawy pasek boczny, responsywny układ, gotowy na dostęp
Domena tekstowa: dwadzieścia piętnaście dzieci
* /

Jak widać, jest bardzo podobny do nagłówka arkusza stylów, którego używałeś wcześniej z jednym wyjątkiem: zawiera on Szablon etykietka.

W tej sekcji należy umieścić nazwę motywu, który będzie działał jako element nadrzędny. Bez tego motyw potomny nie zadziała. Aby tego uniknąć, wprowadź nazwę folderu nadrzędnego. Tak byłoby w przypadku Dwadzieścia Dwunastu Szablon: dwadzieścia jeden.

4. Utwórz Functions.php i odziedzicz style nadrzędne

Za pomocą tylko arkusza stylów i folderu można już aktywować motyw podrzędny. Nie przyniosłoby to jednak wiele dobrego, ponieważ w tej chwili witryna wyglądałaby jak strona HTML bez stylizacji.

Aby to zmienić, musisz najpierw odziedziczyć style rodzica, a do tego potrzebujesz functions.php. Ten plik jest ważną częścią każdej instalacji WordPress i pozwala na dokonanie gruntownych zmian w witrynie.

Jednak w tym przypadku użyjesz go tylko do wywołania stylu rodzica. W tym celu utwórz nowy plik i wywołaj go functions.php. Pierwszą rzeczą, którą dodasz na samym początku, jest:

Z otwierającym znacznikiem PHP plik jest teoretycznie gotowy, ale jeszcze nic nie robi. Więc dodatkowo będziesz musiał wprowadzić to:

funkcja child_theme_enqueue_styles () {

$ parent_style = 'Parent-style';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('child-style',
get_stylesheet_directory_uri (). „/style.css”,
tablica ($ parent_style),
wp_get_theme () -> get ('Version')
);
}
add Działalności („wp_enqueue_scripts”, „child_theme_enqueue_styles”);

Ten fragment kodu mówi WordPressowi, aby przejść do katalogu szablonów (zwanego też motywem nadrzędnym) i użyć zawartych w nim stylów. Umożliwia także modyfikację motywu za pomocą motywu potomnego (więcej na ten temat później).

5. Aktywuj motyw podrzędny

W tym momencie motyw potomny jest gotowy do aktywacji.

Możesz dodać zrzut ekranu jak w powyższych instrukcjach, jeśli chcesz. Oprócz tego możesz go spakować i dodać do WordPress za pośrednictwem Wygląd> Tematy> Dodaj nowy> Prześlij motyw lub po prostu dodając folder tak jak jest wp-content / themes.

W obu przypadkach po aktywowaniu motywu witryna powinna teraz wyglądać dokładnie tak, jak jej rodzic.

6. Dostosuj projekt

Tutaj zaczyna się wspomniana praca detektywistyczna. Nadszedł czas, aby zmienić projekt istniejącego motywu, aby przypominał oryginalną witrynę HTML.

Na przykład jedną z pierwszych rzeczy, które się wyróżniają, jest to, że nasz motyw WordPress dodaje przestrzeń nad nagłówkiem i pod stopką, której nie ma nasza strona HTML.

HTML do wordpress za pośrednictwem przykładowej strony motywu potomnego

Aby temu zaradzić, możemy spojrzeć na stronę HTML za pomocą naszego narzędzia dla programistów przeglądarek znaleźć znaczniki odpowiedzialne. Kiedy to robimy, napotykamy na to:

ciało {
margines: 0;
}

Następnie robimy to samo z moim nowym motywem WordPress, w którym znajdujemy te style:

body .site {
margines na górze: 48 pikseli;
margines na górze: 3,428571429rem;
margines na dole: 48px;
margines na dole: 3,428571429rem;
}

Moim celem jest teraz zastosowanie stylizacji z witryny HTML do motywu WordPress. W takim przypadku możemy to osiągnąć, dodając następujące elementy do motywu mojego dziecka style.css:

body .site {
margines: 0 auto;
}

Po zapisaniu w motywie WordPress zastosowano nowe style:

HTML do WordPress poprzez przykładową stronę edytowaną motywem potomnym

Dzieje się tak, ponieważ wszystko, co dodasz do arkusza stylów motywu potomnego, zastępuje style w jego elemencie macierzystym. Pozostała część znaczników pozostaje jednak nienaruszona, więc możesz zmieniać tylko te istotne elementy.

Dodatkowo, jeśli używasz szablonu HTML5 jako startera i nowoczesnego motywu WordPress jako rodzica, wiele podstawowych znaczników będzie odpowiadać, co znacznie ułatwi Ci życie.

Motywy potomne można zrobić o wiele więcej, których można się nauczyć tutaj. Po zakończeniu dostosowywania projektu nadszedł czas na zaimportowanie treści. Przejdźmy teraz do tego.

C) Importuj zawartość z HTML do WordPress za pomocą wtyczki

Wreszcie, na liście przejścia z HTML do WordPress używa się istniejącego motywu i migruje do niego zawartość z witryny HTML. Jest to najprostszy sposób - wystarczy zainstalować i aktywować wybrany motyw (zakładamy, że już wiesz, jak to zrobić), a następnie wykonać poniższe kroki.

Nawiasem mówiąc, chociaż ten proces nie jest bardzo trudny, są rzeczy, które mogą pójść nie tak. Z tego powodu upewnij się, że wykonałeś kopię zapasową witryny WordPress, zanim przejdziesz do niej.

1. Zainstaluj wtyczkę importu

Pierwszą rzeczą, którą musisz zrobić, to zainstalować wtyczkę Import HTML 2. Najłatwiejszym sposobem na osiągnięcie tego jest przejście do Wtyczki> Dodaj nowe i szukaj go po nazwie. Gdy znajdziesz go na liście (może być dalej na dole), kliknij Zainstaluj teraz. Aktywuj go, gdy skończysz.

HTML do wtyczki importu WordPress

2. Przygotuj import

Aby zaimportować kilka stron jednocześnie, musisz przesłać je na ten sam serwer, na którym znajduje się instalacja WordPress. Wtyczka zaproponuje coś takiego Pliki HTML do zaimportowania  nazwę folderu, ale możesz wybrać cokolwiek chcesz. Pamiętaj tylko, aby zapamiętać nazwę ścieżki.

Jak zobaczysz poniżej, możesz także importować pojedyncze strony jedna po drugiej. Dla każdej metody przejdź do WordPress i Ustawienia> Import HTML. Omówimy teraz najbardziej podstawowe ustawienia. Jeśli potrzebujesz dodatkowych informacji lub coś jest niejasne, zapoznaj się z oficjalna instrukcja obsługi.

Akta

HTML do importu plików WordPress

Skonfiguruj ten ekran w następujący sposób:

  • Katalog do zaimportowania - Wprowadź ścieżkę, na którą właśnie skopiowałeś swoje istniejące pliki.
  • Stary adres URL witryny - Używany do przekierowań. Wpisz swój stary adres URL. Zajmiemy się tym ponownie w dalszej części tego artykułu.
  • Domyślny plik - Zwykle plik domyślny dla katalogów na starej stronie index.html.
  • Rozszerzenia plików do uwzględnienia - Rozszerzenia plików, które chcesz zaimportować.
  • Katalogi do wykluczenia - Jeśli masz stare katalogi w starej witrynie, których nie chcesz importować, wpisz je tutaj.
  • Zachowaj nazwy plików - Aby wtyczka automatycznie korzystała z nazw plików jako nowego adresu URL, zaznacz to pole. Ma to sens, jeśli twoje tytuły są bardzo długie, ponieważ zwykle importer użyje ich do utworzenia ślimaka.

Zadowolony

W obszarze treści musisz skonfigurować tag HTML, który zawiera treść witryny.

HTML do importu treści WordPress

Aby to zrobić, wybierz opcję Tag HTML na górze. Następnie skonfiguruj tag w następujących trzech polach. Na przykład, jeśli treść jest zawarta w tagu o nazwie

, informacje, które wprowadzisz, będą div, ID i Główny.

Inne ustawienia na tej stronie powinny być zrozumiałe i umożliwiać importowanie obrazów, dokumentów, aktualizację wewnętrznych linków i więcej.

Tytuł i metadane

HTML do WordPress importuj tytuł i metadane

Ta część jest podobna do poprzedniej części treści. Dotyczy to jednak tytułów stron. Na początku musisz powiedzieć wtyczce, jak tytuły są oznaczone w szablonie HTML, aby mógł je zaimportować we właściwe miejsce.

Ponadto możesz odfiltrować zbędne elementy, takie jak tytuł witryny, ponieważ są one często domyślnie wyświetlane przez motywy WordPress. Jeśli Twoje tytuły znajdują się w treści, możesz również poprosić importera o ich usunięcie, aby nie zostały dwukrotnie uwzględnione.

Ważne jest, abyś zdecydował, czy zaimportować starą treść, taką jak posty lub strony. Reszta jest dość oczywista i pozwala skonfigurować ustawienia WordPress dla nowych stron.

Pola niestandardowe

HTML do WordPress importować niestandardowe pola

Jeśli masz jakieś dane, które wymagają zaimportowania do pól niestandardowych, możesz to skonfigurować tutaj.

Kategorie i tagi

HTML do WordPress importować kategorie i tagi

Tutaj możesz przypisać kategorie, tagi i formaty wpisów do importowanej zawartości. Wtyczka pokaże istniejącą systematykę w Twojej witrynie, aby ułatwić ten krok.

Przybory

HTML do importowania narzędzi WordPress

Ten ekran zawiera listę przydatnych narzędzi do skutecznego importowania z HTML do WordPress.

3. Rozpocznij importowanie

Po zakończeniu zapisz ustawienia. Umożliwi to Importuj pliki przycisk. Kliknij, aby rozpocząć.

HTML do importu WordPress

(Uwaga: możesz również dostać się tutaj przez Narzędzia> Importuj a następnie zbieranie Uruchom narzędzie Importer pod HTML opcja.)

Następnie wybierz, czy chcesz zaimportować katalog plików, czy pojedynczy plik (musisz do niego przejść), a następnie naciśnij Zatwierdź. Wtyczka przejdzie do pracy.

Po zakończeniu powinieneś mieć całą istniejącą zawartość na swojej stronie WordPress i sformatowaną według nowego motywu. Lub jeśli wybrałeś jedną z innych tras, Twoja witryna powinna wyglądać zasadniczo tak samo jak poprzednia witryna HTML. Ładnie wykonane!

Dodatkowe kroki

Jeśli planujesz wdrożyć witrynę WordPress w tym samym miejscu, w którym kiedyś znajdowała się statyczna witryna HTML, musisz jeszcze zrobić kilka rzeczy, zanim skończysz.

Pierwszym z nich jest sprawdzenie adresów URL nowo zaimportowanych postów i stron, aby upewnić się, że są przyjazne dla wyszukiwarek (tj. Uwzględnić słowa kluczowe, które chcesz uszeregować). To bardzo proste - wystarczy przejść na stronę lub post i spojrzeć na adres URL pod tytułem.

sprawdź permalinki po html do importu wordpress

Aby to zmienić, kliknij Edytować po prawej stronie zmień adres URL na wybrany przez siebie i naciśnij Ok.

Drugą rzeczą jest zaimplementowanie przekierowań ze starych adresów URL do nowych. W ten sposób nie stracisz istniejącej wartości SEO.

Jeśli podałeś stary adres strony we wtyczce HTML, utworzy on dla ciebie kod przekierowania. Możesz skopiować i wkleić to do pliku.htaccess który znajduje się na twoim serwerze (zwykle w katalogu głównym).

Dostęp do niego odbywa się za pośrednictwem FTP, jednak może być konieczne włączenie wyświetlania ukrytych plików, ponieważ domyślnie nie jest to widoczne. Następnie edytuj .htaccess i wprowadź zasady.

Pamiętaj, że działa to tylko wtedy, gdy adresy URL pozostały niezmienione. Jeśli nie chcesz i musisz ustawić niestandardowe przekierowania, skorzystaj z Wtyczka przekierowania. To bardzo wygodne rozwiązanie, które śledzi także, gdy ktoś wyląduje na nieistniejącym adresie URL w Twojej witrynie. W ten sposób możesz również wprowadzić przekierowania dla tych linków.

Czy udało Ci się przejść z HTML do WordPress??

I to wszystko. Właśnie nauczyłeś się, jak przekonwertować statyczną stronę HTML na WordPress. W rezultacie stałeś się częścią jednej z największych społeczności w sieci i uzyskałeś dostęp do tysięcy zasobów, aby Twoja strona była jeszcze lepsza.

W zależności od tego, które rozwiązanie wybrałeś powyżej, masz już wrażenie, jak działa WordPress. Odtąd łatwo jest rozgałęziać się i zagłębiać w tworzenie stron internetowych za pomocą platformy WordPress. Jeśli potrzebujesz dodatkowej pomocy w tym obszarze, na tej stronie jest jej mnóstwo. Możesz nauczyć się:

  • Dostosuj WordPress krok po kroku
  • Przenieś swoją witrynę z HTTP na HTTPS
  • Dodaj niestandardowe czcionki do WordPress
  • Przyspiesz swoją stronę WordPress
  • Dodaj formularz kontaktowy do swojej witryny WordPress

Oprócz tego życzymy powodzenia w nowej witrynie WordPress. Mamy nadzieję, że spodoba ci się praca z WordPress tak samo jak my.

Czy przeniosłeś swoją witrynę z HTML na WordPress? Jakie było twoje doświadczenie? Jakieś wskazówki do dodania? Daj nam znać w sekcji komentarzy poniżej.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map