W początkach (sieci) wszystkie strony internetowe były tworzone z niczym innym jak tylko z tekstem i statycznym HTML. Teraz jednak, ponad 20 lat później, sieć jest znacznie innym miejscem. Strony internetowe są o wiele bardziej złożone. Zapewniają bogatsze i przyjemniejsze doświadczenia dla twórców stron i odwiedzających.
Jest to w dużej mierze zasługą projektów open source, takich jak WordPress. Który, w ciągu ostatnich dziesięciu lat lub tak, odniósł sukces w swojej podstawowej misji demokratyzacji publikacji online (i wiele więcej w procesie) tak, że każdy z instalacją WordPress i odpowiednim motywem / wtyczkami może mieć nowoczesną stronę internetową z zaawansowanym wzornictwem i funkcjonalnością. No coding-not even HTML!-required.
This is why to avid WordPress users like myself, it’s almost hard to believe that in 2018 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. Ale faktem jest, że nadal istnieje znaczna ilość aktywnych witryn HTML tylko tam. (Lub HTML z odrobiną CSS.)
Granted, ci właściciele witryn mogą mieć dobre powody, aby nie uaktualniać lub konwertować. Może ich zawartość strony nigdy się nie zmienia i proste formatowanie i projekt już na miejscu jest serwisable? A może to mniej kłopotów niż martwić się o utrzymanie witryny WordPress aktualizowane? Oba są ważne powody (wśród innych). Prime przykłady, „Nie naprawiaj tego, co nie jest zepsute.”
Jednakże mam wrażenie, że te mogą nie być głównym powodem niektóre (być może wiele) nie dokonał skoku. Najbardziej oczywistym z nich jest to, że po prostu nie wiem, jak przekonwertować swoją stronę HTML do witryny WordPress. Szczególnie bez utraty treści lub konieczności nadmiernego formatowania na stronie na podstawie strony.
Na szczęście, jak to często bywa w przypadku WordPress, istnieje wiele sposobów, aby przejść o rozwiązaniu tego problemu. I’ve compiled some options below.
Subscribe To Our Youtube Channel
Your Options for Converting a Static HTML site to a WordPress site
How you choose to convert your static HTML site into a WordPress site will no doubt depend upon your personal preference, desired time/monetary investment, and skill level with code. Będziesz musiał być tym, aby zdecydować, który jest najlepszy dla Ciebie, ale z podsumowań poniżej powinny być w stanie zdecydować szybko i pominąć prosto do najbardziej istotnych informacji w tym poście dla konkretnej sytuacji.
Istnieją trzy główne opcje:
1. Ręcznie utwórz motyw WordPress w oparciu o swoją obecną statyczną stronę HTML.
To będzie wymagać, aby dostać się do swojego kodu. Będziesz musiał uzyskać dostęp do bieżącego katalogu witryny za pośrednictwem FTP i użyć istniejącego kodu jako punktu wyjścia. Stamtąd trzeba będzie utworzyć niezbędne pliki dla motywu WordPress i skopiować kawałki kodu z kodeksu WordPress. Jest to dość proste i nieskomplikowane, jeśli masz jakieś doświadczenie z HTML, CSS i trochę PHP.
2. Zainstaluj gotowy motyw i po prostu migruj swoją zawartość.
Jest to prawdopodobnie najlepsza opcja na przecięciu prostoty i wartości. Zakładając, że masz już hosting dla swojej obecnej strony, będziesz musiał wydać pieniądze tylko wtedy, gdy zdecydujesz się na zakup motywu premium. Wtyczka, której będziemy używać do importowania treści jest swobodnie dostępna w oficjalnym Repozytorium Wtyczek WordPress.
3. Płacenie za usługę konwersji HTML do WordPressa, aby ponownie stworzyć swoją stronę.
Jest to najprostsze rozwiązanie, ponieważ nie wymaga od ciebie robienia wielu rzeczy. Jednak to nie zrobi wiele dla zapoznania się z WordPress i koszt będzie się różnić w zależności od tego, kto zdecyduje się zatrudnić. I nie będzie pokrycie tej opcji w sekcjach poniżej, ponieważ jeśli jest to trasa jesteś zainteresowany, można po prostu zrobić szybkie wyszukiwanie dla dostawców usług i będą dbać o resztę.
Przygotowanie do konwersji HTML do WordPress
Nie ma znaczenia, która trasa zdecydujesz się podjąć poniżej, istnieje kilka rzeczy, które będziesz chciał zrobić przed diving in.
Pierwszy jest wybór planu hostingowego. Będziesz chciał spojrzeć na opcje, które są tam i zdecydować się na pakiet, który najlepiej pasuje do Twoich potrzeb. A może chciałbyś stworzyć lokalną instalację WordPress zamiast? Zawsze można go zmigrować do usługi hostingowej później.
Po wybraniu, trzeba będzie zainstalować WordPress i zalogować się do WP Admin. To jest punkt, w którym nasze dwie możliwe ścieżki się dzielą.
Ręczna konwersja statycznej strony HTML do WordPress
Jeśli twoim celem jest nie tylko uzyskanie treści ze statycznej strony HTML do WordPressa, ale także zduplikowanie obecnego projektu, oznacza to, że będziesz musiał stworzyć swój własny motyw. Na szczęście, to nie jest tak straszne, jak może się wydawać na początku. Polega tylko na utworzeniu kilku folderów i plików, trochę kopiowania i wklejania, a następnie przesłaniu wyniku.
Będziesz potrzebował edytora kodu, takiego jak Sublime lub Notepad++ i dostępu zarówno do katalogu twojej strony HTML, jak i katalogu twojej nowej instalacji WordPressa.
Krok 1: Utwórz nowy folder motywu i niezbędne pliki
Na pulpicie utwórz nowy folder do przechowywania plików motywu. Nazwij go tak, jak chcesz, aby Twój motyw został nazwany.
Następnie utwórz kilka plików (które wszystkie znajdą się w nowym folderze motywu) w edytorze kodu. Nie rób z nimi nic na razie. Po prostu zostaw je otwarte do dalszej edycji.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Krok 2: Skopiuj istniejący CSS do nowego arkusza stylów
Jeśli chcesz zduplikować projekt, prawdopodobnie oznacza to, że masz przynajmniej trochę CSS, który chcesz zachować. Więc pierwszym plikiem, który będziesz chciał edytować jest twój plik Style.css.
Aby zacząć, dodaj poniższe do górnej części swojego pliku.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Po tej sekcji po prostu wklej swój istniejący CSS poniżej. Zapisz i zamknij plik.
Krok 3: Oddziel swój obecny HTML
Zanim przejdziemy do kroku trzeciego, pozwól mi dać ci krótką notatkę na temat tego jak działa WordPress. WordPress używa PHP do wywoływania i pobierania fragmentów danych ze swojej bazowej bazy danych. Każdy plik, którego używamy w tym małym samouczku jest zaprojektowany, aby powiedzieć WordPressowi, która część zawartości witryny ma być wyświetlana i gdzie.
Więc kiedy mówię, że będziemy „siekać” twój istniejący HTML, co tak naprawdę robimy, to po prostu wycinanie i wklejanie części twojego istniejącego kodu do różnych plików, które właśnie utworzyliśmy, aby WordPress wiedział, gdzie je wyświetlać.
Zaczynamy.
Po pierwsze, otwórz plik index.html twojej obecnej witryny. Podświetl wszystko od góry pliku do znacznika otwierającego div class=”main”. Skopiuj i wklej tę sekcję do swojego pliku header.php, zapisz i zamknij.
Po drugie, wróć do swojego pliku index.html. Podświetl element aside class=”sidebar” i wszystko wewnątrz niego. Skopiuj i wklej tę sekcję do swojego pliku sidebar.php, zapisz i zamknij.
Po trzecie, w swoim pliku index.html zaznacz wszystko po pasku bocznym, skopiuj i wklej do swojego pliku footer.php, zapisz i zamknij.
Na koniec, w swoim pliku index.html zaznacz wszystko co zostało (to powinna być główna sekcja treści) i wklej do swojego pliku index.php. Zapisz, ale nie zamykaj jeszcze.
Możesz teraz zamknąć swój plik index.html i przejść do ostatnich kroków. Prawie zrobione!
Krok 4: Sfinalizuj swój plik index.php
Aby sfinalizować plik index.php twojego nowego motywu musisz się upewnić, że może on wywołać inne sekcje (poza główną treścią), które znajdują się w innych plikach, które stworzyłeś. Innymi słowy, złóż z powrotem elementy, które właśnie „posiekaliśmy”.
Na samej górze twojego pliku index.php, umieść następującą linię php.
<?php get_header(); ?>
Następnie, na samym dole twojego pliku index.php, umieść te linie php.
<?php get_sidebar(); ?><?php get_footer(); ?>
I w końcu, musimy dodać to, co nazywa się The Loop. Jest to podstawowy kawałek php, którego WordPress używa do wyświetlania treści postów odwiedzającym. Więc ostatnim krokiem w tworzeniu pliku index.php twojego nowego motywu jest dodanie poniższego kodu w sekcji treści.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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 teraz gotowy! Wszystko co pozostało to wgranie go do twojej witryny WordPress.
Krok 5: Prześlij swój nowy motyw
Teraz, gdy utworzyłeś swoje pliki motywu i masz je wszystkie przechowywane w swoim nowym folderze motywu, będziesz potrzebował dostępu do swojego nowego katalogu instalacji WordPress.
Umieść swój nowy folder motywu wewnątrz /wp-content/themes/. Następnie przejdź z powrotem do WP Admin > Wygląd > Motywy i Twój nowo utworzony motyw powinien się tam pojawić. Śmiało i aktywuj go!
Wszystko, co pozostało do zrobienia w tym momencie, to zaludnienie nowej witryny WordPress zawartością starej witryny. Postępuj zgodnie z poniższą sekcją (pomijając część dotyczącą używania gotowego motywu), aby zobaczyć, jak to się robi.
Używanie gotowego motywu WordPress i importowanie zawartości HTML
Jeśli powyższe kroki wydają się zbyt intensywne lub czasochłonne dla Ciebie, to spokojnie, jest inny sposób. Zamiast przekształcać jakikolwiek projekt, z którym teraz pracujesz w motyw WordPress, możesz skorzystać z jednego z tysięcy motywów dostępnych na szerszym rynku WordPress.
Istnieją motywy darmowe i istnieją motywy premium. Przed podjęciem decyzji, który jest najlepszy dla Ciebie, możesz chcieć przeczytać o tym, które motywy są przeznaczone do zaspokojenia Twoich potrzeb i przeglądać według kategorii motywów tutaj na Elegant Themes i gdzie indziej.
Po wybraniu motywu, który Ci się podoba (i pobraniu jego spakowanego pakietu plików) będziesz chciał wrócić do WP Admin > Wygląd > Motywy > Dodaj nowy i zainstalować/aktywować swój nowy motyw WordPress.
Gdy to zrobisz, będziesz miał nową stronę WordPress i motyw – ale niewiele więcej. Kiedy podgląd witryny, to będzie pusty z treści i prawdopodobnie wyglądają rodzaj nudne. To jest ok, ponieważ następnie zamierzamy zaimportować zawartość twojej starej strony.
W WP Admin przejdź do Plugins > Add New i wyszukaj plugin o nazwie HTML Import 2 autorstwa Stephanie Leary. Gdy ta wtyczka zostanie zainstalowana i aktywowana, postępuj zgodnie z jej podręcznym przewodnikiem użytkownika, aby zaimportować cały katalog stron HTML. W komplecie z obrazami!
Po tym będziesz miał wszystkie swoje stare treści żyjące na WordPressie i sformatowane przez twój nowy motyw. Lub, jeśli stworzyłeś swój własny motyw powyżej, twoja strona powinna wyglądać tak, jak wcześniej – po prostu działając na WordPressie.
W podsumowaniu
Jeśli użyłeś tego postu jako przewodnika do migracji swojej strony do WordPressa, to właśnie dołączyłeś do jednej z największych społeczności open source na świecie. Witamy! To zabawne miejsce z wieloma programistami, projektantami, blogerami, majsterkowiczami i nie tylko – wszyscy budują, bawią się i tworzą za pomocą WordPressa i motywów/wtyczek WordPressa.
Jeśli „złapałeś bakcyla WordPressa”, oficjalna strona WordPress.org jest pełna przydatnych motywów, wtyczek i innych zasobów. Jeśli chciałbyś jeszcze bardziej podrasować swoje pliki motywów, poznaj Codex, gdzie znajdziesz niekończące się wskazówki, sztuczki i wariacje.