Jak przekonwertować stronę HTML do motywu biznesowego WordPress

Jak przekonwertować stronę HTML do motywu biznesowego WordPress

wiele firm nadal polega na prostych stronach HTML dla swojej obecności w Internecie. Te strony HTML są zwykle statyczne, co oznacza, że musisz edytować kod, aby zmienić nawet drobny szczegół na stronie internetowej. Aby tego uniknąć, możesz przekonwertować swoją witrynę HTML na WordPress.

w tym samouczku nauczę cię, jak przekonwertować HTML na motyw biznesowy WordPress. To utrzymuje wszystkie elementy HTML nienaruszone i daje elastyczność WordPress, aby łatwo dostosować dowolny element.

jeśli znasz zarówno HTML, jak i WordPress, ten samouczek jest dla ciebie dobry. Jeśli jesteś początkującym, spróbuj to zrobić za pomocą fałszywej strony na swoim lokalnym hoście, takiej jak XAMPP.

• Konwersja strony HTML na WordPress
• jakie pliki WordPress potrzebujesz
• Konfigurowanie CSS, JavaScript i obrazów
• Dodawanie funkcji WordPress, aby dodać funkcjonalność

Konwersja strony HTML na motyw WordPress

w tym samouczku wybrałem darmowy biznes HTML motyw stąd. Techniki pozostaną takie same podczas konwersji dowolnego tematu biznesowego. Jeśli masz pytania dotyczące tematu biznesowego, po prostu zostaw komentarz lub wiadomość e-mail, a z przyjemnością odpowiem.

przejdźmy dalej. Najpierw spójrz na swój motyw HTML i zaznacz elementy nagłówka, głównego ciała i stopki.

nagłówek: nagłówek będzie zawierał górną część sekcji.

główny korpus: jest to długa strona, więc powiększyłem, aby zrobić zrzut ekranu, ale cała środkowa część jest zawarta w głównym ciele.

Stopka: sekcja stopki będzie zawierać dolną część.

Krok 1: Wymagania wstępne

mam nadzieję, że masz już zainstalowany WordPress na swoim lokalnym hoście, takim jak XAMPP (tj. Twój komputer). Jeśli nie, omówiliśmy już szczegółowy przewodnik, który pomoże Ci zainstalować i skonfigurować WordPress lokalnie.

Krok 2: Utwórz Folder motywów

w tym samouczku używam XAMPP, a moja witryna WordPress jest zainstalowana w folderze htdocs. Aby utworzyć motyw WordPress, musisz uzyskać dostęp do folderu motywy i utworzyć nowy folder.
teraz otwórz folder XAMPP > htdocs > folder WordPress (w moim przypadku testuje) > wp-content > themes.

w folderze motywy zobaczysz wszystkie zainstalowane motywy WordPress. Utwórz nowy folder i nadaj nazwę swojemu motywowi.

Krok 3: Utwórz Pliki PHP

nowo utworzony folder motywów jest pusty i musisz utworzyć kilka plików, aby działał. W tym celu musisz uruchomić edytor kodu (VS kod) i otworzyć cały folder motywów WordPress (w moim przypadku farhan-WordPress-theme).

teraz Utwórz następujące niezbędne pliki WordPress, aby lepiej zorganizować swój motyw.

1. styl.css (zawiera szczegóły tematu i pliki CSS)
2. indeks.php (obsługuje główną zawartość, jeśli inne opcjonalne pliki nie są zadeklarowane)
3. nagłówek.php (zawiera elementy nagłówka motywu)
4. stopka.PHP (zawiera elementy stopki tematu)
5. funkcje.php (zawiera funkcje, które na WordPress theme)

Krok 4: Skopiuj foldery CSS, Obrazy i JavaScript (JS)

z motywu HTML (pobranego powyżej), skopiuj folder zasoby (foldery CSS, JS i obrazy) do nowego folderu motywu WordPress.

po przeniesieniu do nowego folderu motywów WordPress będzie wyglądał następująco:

Krok 5: Aktywuj nowy motyw WordPress

teraz dodałeś ważne foldery wymagane dla każdego motywu wp. Następnie otwórz witrynę WordPress w przeglądarce i zaloguj się do Pulpitu Nawigacyjnego. Przejdź do opcji wygląd > motywy, a zobaczysz, że nowy motyw został dodany do tej sekcji.Aktywuj motyw WordPress

ten motyw wygląda pusto. Aby dodać informacje i baner dla nowo utworzonego motywu, Otwórz swój styl.plik css (utworzony wcześniej) i wklej poniższy kod i zapisz go (ctrl + s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

w przypadku banera musisz dodać plik obrazu do nowego folderu motywu. Rozmiar obrazu powinien wynosić 800 na 600, a nazwa obrazu powinna być zrzutem ekranu (format png).

po dodaniu zrzutu ekranu.plik png, odśwież pulpit nawigacyjny wp-admin, a pojawi się baner obrazu.

teraz możesz wyświetlić informacje o motywie po kliknięciu banera.

dalej, po prostu kliknij Aktywuj.

Krok 6: Konwertuj kod HTML na nagłówek, indeks i stopkę

Nagłówek, Stopka i główna treść są oznaczone komentarzami HTML, aby łatwo dodać je do plików PHP WordPress i przekonwertować kod.

Teraz skopiuj kod nagłówka z indeksu.html pobranego motywu do nagłówka.plik PHP utworzony w folderze WordPress themes. Musisz skopiować z <!DOCTYPE html> do </header> i zapisz go.

podobnie, skopiuj elementy stopki i głównego ciała z indeksu.html do stopki.php i index.php, odpowiednio.

dla stopki, skopiuj z < stopki>(w moim przypadku w znaczniku stopki jest zdefiniowana nazwa klasy, więc nie daj się pomylić) do </html> do stopki.plik php i zapisać go.

następnie skopiuj cały kod za znacznikiem </header> i tuż przed stopką <> do indeksu.php i zapisz go.

Dodaj funkcję WordPress get_header() na górze i get_footer() na końcu indeksu.plik php.

get_header() jest wbudowaną funkcją wywołującą w nagłówku.php i podobnie get_footer() jest funkcją wywołującą footer.php.

Dodaj następujący kod na górze indeksu.plik php i zapisać go.

<?php get_header(); ?>

aby wywołać w stopce, wstaw poniższy kod na końcu indeksu.kod php i zapisz go.

<?php get_footer(); ?>

teraz odwiedź swoją witrynę, a zobaczysz coś takiego.

Krok 7: Konfigurowanie CSS

fakt, że Twój motyw wygląda dziwnie, ponieważ pliki CSS nie są stosowane do motywu.

już skopiowałeś folder CSS z motywu HTML do folderu motywu WordPress. Teraz musisz wywołać te pliki CSS, aby ukończyć wygląd motywu.

pamiętaj, że nazwy plików CSS mogą się różnić – więc sprawdź dokładnie przed rozpoczęciem tego procesu.

arkusze stylów CSS znajdziesz w nagłówku.plik php, więc musisz wyszukać”rel=” arkusz stylów „” przez CTRL + f.

następnie usuń arkusze stylów czcionek Google, ponieważ ich nie potrzebujemy. Teraz muszę tylko zarejestrować rzeczywisty arkusz stylów CSS tj. <link rel=”arkusz stylów” href=”assets/css/style-starter.css ” >.

WordPress nie rozumie zwykłej struktury arkusza stylów CSS; dlatego muszę zapytać i zarejestrować arkusz stylów CSS. Przejdź do funkcji.plik php i dodać następujący kod.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

wp_register_style pomoże Ci zarejestrować arkusz stylów CSS.

get_template_directory_uri() . '/href’służy do pobrania bieżącej ścieżki katalogu szablonu. Połączy bieżącą ścieżkę z odpowiednim plikiem. Tutaj musisz zdefiniować lokalizację pliku CSS (href). Możesz zobaczyć, jak zdefiniowałem ścieżkę do tego pliku CSS: get_template_directory_uri (). '/assets / css / style-starter.css”.

teraz możemy usunąć link arkusza stylów CSS z nagłówka.plik php i zastąpić go poniższym kodem i zapisać plik.

<?php wp_head(); ?>

wp_head() jest niezbędnym Hookiem WordPress zdefiniowanym w sekcji nagłówka< head ></head >.php.

kiedy odwiedzasz swoją witrynę WordPress, zauważysz, że pliki CSS są faktycznie pytane o nowy motyw WordPress, ale mimo to projekt nie jest w porządku. Dzieje się tak dlatego, że nie skonfigurowałeś jeszcze skryptów JS.

w nagłówku.php, mam jeden arkusz stylów CSS i zarejestrowałem go tylko w funkcjach.php. Ale co, jeśli masz wiele arkuszy stylów? W takim przypadku musisz zdefiniować wp_register_style () dla każdego arkusza stylów. Nie martw się! Możesz wziąć przykład z następnego kroku, gdzie mam wiele skryptów JS. Proces jest taki sam, więc wyczyści Twoje zapytania i pomoże Ci zrozumieć, w jaki sposób wykonasz tę pracę.

Krok 8: Konfiguracja JavaScript

motyw HTML, z którym pracujesz, korzysta z JavaScript i znajduje się w stopce.plik php, pliki JavaScript są już wywoływane w formacie HTML. Aby uruchomić te pliki JS, wystarczy wykonać te same czynności, które wykonałeś w poprzednim kroku.

Otwórz stopkę.plik php i wyszukaj „< script src = „za pomocą” CTRL + f”. To pomoże Ci znaleźć wszystkie pliki JS, które masz. W moim przypadku mam pięć, a tutaj muszę się zarejestrować i zapytać o wszystkie z nich.

następnie musisz otworzyć swoje funkcje.plik php i wklej poniższy kod:

function add_script(){ wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'js-script'); wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'change'); wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'popup'); wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'carousel'); wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'bootstrap');}add_action('wp_enqueue_scripts', 'add_script');

możesz zobaczyć, że struktura kodu jest taka sama jak wcześniej w części konfiguracyjnej CSS. Ale tutaj użyjesz wp_register_script zamiast stylu. Rejestrujesz i wyszukujesz każdy plik JS w tej samej funkcji.

teraz możesz usunąć wszystkie linki do skryptów js (mam pięć) ze stopki.plik php, następnie wklej poniższy wiersz kodu na końcu kodu (powyżej znacznika< / body >) i zapisz plik.

<?php wp_footer(); ?>

teraz otwórz swoją witrynę w przeglądarce, a zauważysz, że nowy motyw WordPress działa dobrze, ale nadal ma kilka brakujących obrazów.

Krok 9: Konfiguracja obrazów

ten proces jest prosty i tutaj musisz zdefiniować ścieżkę obrazów.

najpierw otwórz indeks.plik php i wyszukaj „< img src = „przez” CTRL + f”. To pomoże Ci znaleźć wszystkie pliki obrazów, które masz. W moim przypadku mam osiem,a tutaj potrzebuję ścieżki dla wszystkich.

, aby nadać ścieżkę do obrazów; Dodaj następujący kod PHP w znacznikach src i zapisz plik.

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

teraz Twój motyw będzie wyglądał podobnie do motywu HTML i pobierze wszystkie obrazy.

ale będzie brakować funkcji WordPress, takich jak zmiana tytułu witryny i menu nawigacji WordPress.

krok 10: Włącz Niestandardowy tytuł w WordPress

jeśli wejdziesz do panelu administracyjnego WordPress i zmienisz tytuł witryny, nie wpłynie to na tytuł witryny. Aby włączyć tę funkcję, możesz użyć wbudowanej funkcji WordPress bloginfo () z parametrem „nazwa” między znacznikami tytułu w nagłówku.plik php i zapisać plik.

<?php bloginfo( 'name' ); ?>

i podobnie, musisz użyć wbudowanej WordPress funkcji bloginfo() z parametrem „nazwa” między znacznikami h1 w nagłówku.plik php i zapisać plik.

<?php bloginfo( 'name' ); ?>

teraz Twój motyw odbierze tytuł ustawiony w Ustawieniach -> ogólne-> Tytuł witryny w panelu WP-admin.

krok 11: Dodaj Menu nawigacyjne WordPress w WordPress

kiedy odwiedzasz administratora WordPress swojej witryny i przejdź do wyglądu, nie zobaczysz opcji Menu.

musisz najpierw włączyć Menu, dodając następujący wiersz kodu w funkcjach.plik php.

add_theme_support( 'menus' );

to umożliwi funkcjonalność Menu w Twoim motywie, ale wymaga pewnej konfiguracji do zarządzania menu z pulpitu WP.

najpierw znajdź, gdzie znajduje się menu nawigacji motywu HTML, a następnie zastąp je za pomocą wbudowanej funkcji wp_nav_menu () WordPress; możesz przeczytać więcej o tej funkcji tutaj.

w tym temacie nagłówek.php zawiera menu nawigacyjne.

Znajdź następujące linie kodu:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

Zamień powyższe wiersze na:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

twoje menu WordPress pojawi się teraz w Twoim motywie i zwiększy elastyczność Twojego motywu biznesowego WordPress.

Koniec!

mam nadzieję, że ten artykuł pomógł Ci zrozumieć, jak przekonwertować szablon HTML lub witrynę na motyw WordPress. Jest to szczegółowy samouczek, w którym omówiłem jedenaście kroków, aby zademonstrować ten proces.

jeśli masz jakieś pytania i wątpliwości, możesz zapytać w dowolnym momencie w sekcji komentarzy poniżej.