Konwersja witryn HTML do witryn WordPress

Opublikowany: 2018-10-05

Na początku (sieci) wszystkie strony internetowe były tworzone wyłącznie z tekstu i statycznego kodu HTML. Teraz jednak, ponad 20 lat później, sieć jest zupełnie innym miejscem. Strony internetowe są znacznie bardziej złożone. Zapewniają bogatsze i przyjemniejsze wrażenia zarówno twórcom witryn, jak i odwiedzającym.

Dzieje się tak w dużej mierze dzięki projektom open source, takim jak WordPress. Który w ciągu ostatnich dziesięciu lat odniósł sukces w swojej podstawowej misji demokratyzacji publikowania online (i wielu innych w tym procesie), aby każdy, kto zainstaluje WordPressa i odpowiedni motyw/wtyczki, mógł mieć nowoczesną stronę internetową z zaawansowanym projektem i funkcjonalność. Nie wymaga kodowania, nawet HTML!

Dlatego też, aby być zapalonymi użytkownikami WordPressa takimi jak ja, aż trudno uwierzyć, że w 2018 roku ktoś może nadal prowadzić statyczną stronę HTML zamiast strony WordPress z motywem i wtyczkami. Ale faktem jest, że nadal istnieje znaczna liczba aktywnych witryn tylko w języku HTML. (Lub HTML z odrobiną CSS.)

To prawda, że ​​właściciele tych witryn mogą mieć dobre powody, aby nie uaktualniać ani nie konwertować. Może zawartość ich witryny nigdy się nie zmienia, a proste formatowanie i projekt, które już istnieją, są użyteczne? A może jest to mniej kłopotliwe niż martwienie się o aktualizowanie witryny WordPress? Oba są uzasadnione powodami (m.in.). Najlepsze przykłady: „Nie naprawiaj tego, co nie jest zepsute”.

Mam jednak wrażenie, że może to nie być główny powód, dla którego niektórzy (być może wielu) nie zrobili tego skoku. Najbardziej oczywistym jest to, że po prostu nie wiedzą, jak przekonwertować swoją witrynę HTML na witrynę WordPress. Zwłaszcza bez utraty treści lub konieczności nadmiernego formatowania strona po stronie.

Na szczęście, jak to często bywa w przypadku WordPressa, istnieje kilka sposobów rozwiązania tego problemu. Poniżej zestawiłem kilka opcji.

Subskrybuj nasz kanał YouTube

Twoje opcje konwersji statycznej witryny HTML na witrynę 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. To Ty musisz zdecydować, co jest dla Ciebie najlepsze, ale dzięki poniższym podsumowaniom powinieneś być w stanie szybko podjąć decyzję i przejść od razu do najistotniejszych informacji w tym poście dla Twojej konkretnej sytuacji.

Istnieją trzy główne opcje:

1. Ręcznie utwórz motyw WordPress na podstawie bieżącej statycznej witryny HTML.

Będzie to wymagało wejścia do swojego kodu. Będziesz musiał uzyskać dostęp do bieżącego katalogu witryny przez FTP i użyć istniejącego kodu jako punktu wyjścia. Stamtąd będziesz musiał utworzyć niezbędne pliki dla motywu WordPress i skopiować fragmenty kodu z kodeksu WordPress. Jest to dość proste i proste, jeśli masz trochę doświadczenia z HTML, CSS i trochę PHP.

2. Zainstaluj gotowy motyw i po prostu przenieś zawartość.

To prawdopodobnie najlepsza opcja na skrzyżowaniu prostoty i wartości. Zakładając, że masz już hosting dla swojej obecnej witryny, będziesz musiał wydać pieniądze tylko wtedy, gdy zdecydujesz się na zakup motywu premium. Wtyczka, której użyjemy do importowania treści, jest bezpłatnie dostępna w oficjalnym repozytorium wtyczek WordPress.

3. Płacenie, aby usługa konwersji HTML na WordPress ponownie utworzyła Twoją witrynę.

Jest to najłatwiejsze rozwiązanie, ponieważ nie wymaga od ciebie wiele pracy. Jednak nie pomoże Ci to zaznajomić Cię z WordPressem, a koszt będzie się różnić w zależności od tego, kogo zdecydujesz się zatrudnić. Nie będę omawiał tej opcji w poniższych sekcjach, ponieważ jeśli jest to trasa, która Cię interesuje, możesz po prostu szybko wyszukać usługodawców, a oni zajmą się resztą.

Przygotowanie do konwersji HTML na WordPress

Bez względu na to, którą trasę zdecydujesz się wybrać poniżej, jest kilka rzeczy, które chcesz zrobić przed nurkowaniem.

Pierwszym z nich jest wybór planu hostingowego. Będziesz chciał przejrzeć dostępne opcje i zdecydować się na pakiet, który najlepiej odpowiada Twoim potrzebom. A może zamiast tego chcesz stworzyć lokalną instalację WordPressa? Zawsze możesz przenieść go do usługi hostingowej później.

Po wybraniu musisz zainstalować WordPress i zalogować się do WP Admin. To jest punkt, w którym dzielą się nasze dwie możliwe ścieżki.

Ręczna konwersja statycznej witryny HTML do WordPress

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ć własny niestandardowy motyw. Na szczęście nie jest to tak przerażające, jak mogłoby się początkowo wydawać. 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 WordPressa.

Krok 1: Utwórz nowy folder motywów i niezbędne pliki

Na pulpicie utwórz nowy folder do przechowywania plików motywów. Nazwij go tak, jak chcesz, aby nazwał swój motyw.

Następnie utwórz kilka plików (wszystkie znajdują się w nowym folderze motywu) w edytorze kodu. Nie rób im jeszcze nic. Po prostu zostaw je otwarte do dalszej edycji.

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

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

Jeśli chcesz zduplikować projekt, prawdopodobnie oznacza to, że masz przynajmniej część kodu CSS, który 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. 

/*
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.
*/

Po tej sekcji po prostu wklej poniżej swój istniejący kod CSS. Zapisz i zamknij plik.

Krok 3: Oddziel swój obecny kod HTML

Zanim przejdziemy do kroku trzeciego, przedstawię krótką notatkę na temat działania WordPressa. WordPress używa PHP do wywoływania i pobierania fragmentów danych z bazowej bazy danych. Każdy plik, którego używamy w tym małym samouczku, ma na celu poinformowanie WordPressa, która część zawartości Twojej witryny ma być wyświetlana i gdzie.

Więc kiedy mówię, że zamierzamy „pociąć” twój istniejący kod HTML, tak naprawdę po prostu wycinamy i wklejamy części istniejącego kodu do różnych plików, które właśnie utworzyliśmy, aby WordPress wiedział, gdzie wyświetlić im.

No to ruszamy.

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.

Po drugie, wróć do pliku index.html . Podświetl element sidebar = „sidebar” i wszystko, co się w nim znajduje. Skopiuj i wklej tę sekcję do pliku sidebar.php , zapisz i zamknij.

Po trzecie, w swoim index.html zaznacz wszystko po pasku bocznym i skopiuj i wklej do pliku footer.php , zapisz i zamknij.

Na koniec w pliku index.html zaznacz wszystko, co pozostało (powinna to być sekcja głównej zawartości) i wklej to 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!

Krok 4: Sfinalizuj swój 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. Innymi słowy, złóż z powrotem elementy, które właśnie „pokroiliśmy”.

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(); ?>

I na koniec musimy dodać coś, co nazywa się The Loop. 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) 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><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></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.

Krok 5: Prześlij swój nowy motyw

Teraz, po utworzeniu plików motywów i przechowywaniu ich wszystkich w nowym folderze motywów, będziesz musiał uzyskać dostęp do katalogu nowej instalacji WordPress.

Umieść nowy folder motywu w /wp-content/themes/ . Następnie wróć do WP Admin> Wygląd> Motywy, a nowo utworzony motyw powinien się tam pojawić. Śmiało i aktywuj go!

Wszystko, co pozostało do zrobienia w tym momencie, to wypełnienie nowej witryny WordPress zawartością starej witryny. Postępuj zgodnie z sekcją poniżej (pomijając część dotyczącą używania gotowego motywu), aby zobaczyć, jak to się robi.

Korzystanie z gotowego motywu WordPress i importowanie treści HTML

Jeśli powyższe kroki wydają Ci się zbyt intensywne lub czasochłonne, możesz być pewien, że istnieje inny sposób. Zamiast przekształcać dowolny projekt, nad którym obecnie pracujesz, w motyw WordPress, możesz skorzystać z jednego z tysięcy motywów dostępnych na szerszym rynku WordPress.

Istnieją darmowe motywy i motywy premium. Przed podjęciem decyzji, który jest dla Ciebie najlepszy, możesz przeczytać, które motywy są zaprojektowane tak, aby zaspokoić Twoje potrzeby, i przeglądać według kategorii motywów tutaj w Elegant Themes i gdzie indziej.

Po wybraniu motywu, który Ci się podoba (i pobraniu spakowanego pakietu plików), będziesz chciał wrócić do WP Admin> Wygląd> Motywy> Dodaj nowy i zainstalować / aktywować nowy motyw WordPress.

Gdy to zrobisz, będziesz mieć nową witrynę WordPress i motyw - ale niewiele więcej. Gdy wyświetlisz podgląd swojej witryny, będzie ona pusta i prawdopodobnie będzie wyglądać na nudną. W porządku, ponieważ teraz zaimportujemy zawartość Twojej starej witryny.

W WP Admin przejdź do Wtyczki> Dodaj nowy i wyszukaj wtyczkę o nazwie Import HTML 2 autorstwa Stephanie Leary. Po zainstalowaniu i aktywacji tej wtyczki postępuj zgodnie z jej poręczną instrukcją obsługi, aby zaimportować cały katalog stron HTML. W komplecie z obrazami!

Po tym będziesz mieć całą swoją starą zawartość na WordPress i sformatowaną według nowego motywu. Lub, jeśli utworzyłeś własny motyw powyżej, Twoja witryna powinna wyglądać tak, jak wcześniej - po prostu działa na WordPress.

Na zakończenie

Jeśli wykorzystałeś ten post jako przewodnik po migracji swojej witryny do WordPressa, to właśnie dołączyłeś do jednej z największych społeczności open source na świecie. Witam! To zabawne miejsce z wieloma programistami, projektantami, blogerami, majsterkowiczami i nie tylko - wszyscy budują, bawią się i tworzą za pomocą WordPress i motywów/wtyczek WordPress.

Jeśli „złapałeś błąd WordPressa”, oficjalna strona WordPress.org jest pełna przydatnych motywów, wtyczek i innych zasobów. Jeśli chcesz jeszcze bardziej ulepszyć swoje pliki motywów, zapoznaj się z Kodeksem, aby znaleźć niekończące się wskazówki, triki i wariacje.

I oczywiście mamy nadzieję, że pozostaniesz na czacie w komentarzach poniżej i subskrybujesz więcej postów na blogu w przyszłości.

Miniatura artykułu za pośrednictwem Maxa Griboedova / shutterstock.com