Jeśli zacząłeś od strony HTML ( + CSS), nie musisz wyrzucać tego wszystkiego podczas przenoszenia do WordPress. Możesz przekonwertować swój HTML na WordPress i uruchomić swoją (teraz potężniejszą) stronę internetową na dynamicznej platformie WordPress.
A może tak nie jest. Być może zastanawiasz się, jak przekonwertować projekt HTML klienta na w pełni rozwinięty motyw WordPress. A może chciałbyś nauczyć się podstaw programowania WordPress (+PHP) od bardziej znanej strony HTML.
Bez względu na powód, dla którego tu jesteś, ten samouczek WordPress wprowadzi cię w podstawy tworzenia motywu WordPress z HTML. Możesz postępować zgodnie z tym przewodnikiem, aby utworzyć motyw od zera lub możesz udać się do Github i pobrać motyw startowy WPExplorer, który zapewnia „puste płótno”, aby utworzyć motyw ze wszystkimi niezbędnymi plikami szablonów i kodem, aby rozpocząć. Więc jeśli jesteś jedną z tych osób, które raczej uczą się czytając kod, pobierz motyw startowy, pomiń przewodnik i zobacz, jak to działa…w przeciwnym razie pobierz edytor kodu (używam i polecam Notepad++ lub Sublimetext) i gotową przeglądarkę, a następnie postępuj zgodnie z tym prostym przewodnikiem do końca.
Nazywanie Twojego Motywu WordPress
Po pierwsze, musimy nadać Twojemu szablonowi unikalną nazwę, co nie jest konieczne, jeśli budujesz motyw tylko dla swojej witryny. Niezależnie od tego, musimy nazwać Twój motyw, aby był łatwy do zidentyfikowania po instalacji.
Ogólne założenia w tym momencie:
- Masz swój indeks.gotowy arkusz stylów html i CSS.
- Masz działającą instalację WordPress z co najmniej jednym motywem np. Twenty Fourteen
- Masz już utworzony folder tematyczny, w którym będziesz zapisywać swój nowy motyw WordPress 🙂
Wróćmy do nazwania Twojego motywu WordPress. Otwórz edytor kodu i skopiuj i wklej zawartość arkusza stylów do nowego pliku i zapisz go jako styl.css w folderze tematycznym. Dodaj następujące informacje na samej górze nowo stworzony styl.css:
/*
Nazwa tematu: Nazwa Twojego motywu
Theme URI: adres URL Twojego motywu
Opis: Krótki opis tematu
Wersja: 1.0 lub inna wersja, którą chcesz
Autor: Twoje imię lub WordPress.org nazwa użytkownika
Autor URI: Twój adres internetowy
Tagi: tagi, aby zlokalizować swój motyw w repozytorium motywów WordPress
*/Nie pomijaj znaczników (/*…*/) komentarzy. Zapisz zmiany. Ta informacja mówi WordPress nazwę Twojego motywu, autora i bezpłatne rzeczy takie jak to. Ważną częścią jest nazwa motywu, która pozwala wybrać i aktywować motyw za pośrednictwem Pulpitu WP.
Podział szablonu HTML na pliki PHP
Ten samouczek zakłada, że masz szablon HTML ułożony od lewej do prawej: nagłówek, treść, pasek boczny, stopka. Jeśli masz inny projekt, być może będziesz musiał trochę pobawić się kodem. To zabawne i bardzo łatwe.
Kolejnym krokiem jest utworzenie czterech plików PHP. Za pomocą edytora kodu Utwórz indeks.php, header.php, sidebar.php i stopka.php i zapisać je w folderze motywów. Wszystkie pliki są puste w tym momencie, więc nie oczekuj, że będą cokolwiek robić. Dla celów ilustracyjnych używam poniższego indeksu.pliki arkuszy stylów html i CSS:
Indeks.HTML
< head>
< meta charset = "UTF-8">
< title>Jak przekonwertować szablon HTML na motyw WordPress-WPExplorer< / title>
< link rel=" stylesheet"type=" text/css"media=" all"href =" style.css" / >
< / head>
< body>
< div id = "wrap">
to jest sekcja nagłówka. Umieść swoje logo i inne szczegóły tutaj.< / p>
< / header>
< div class = "content">
to jest główny obszar treści.< / p>
< / div>
< div class = "sidebar">
< p>To jest pasek boczny
< / div>
< footer class = "footer">
a to jest stopka.< / p>
< / footer>
< / div>
< / body>
< / html>
ARKUSZ STYLÓW CSS
# wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height: 135px;}
.content{width:70%; border:1px solid #999;margin-top: 5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border: 1px solid # 999;}
.footer{width:99.8%;border:1px solid #999;margin-top: 10px;}Możesz pobrać oba kody, jeśli nie masz z czym pracować. Wystarczy skopiować i wkleić je do edytora kodu, zapisać je, utworzyć cztery pliki PHP, o których właśnie wspomnieliśmy i przygotować się do następnej części. Otwórz nowo utworzony (i pusty) nagłówek.php. Zaloguj się do istniejącej instalacji WordPress, przejdź do Wygląd – > > Redaktor i otwarte nagłówek.php. Skopiuj cały kod pomiędzy znacznikami < head> i wklej go do nagłówka.plik php. Poniżej znajduje się kod, który otrzymałem z nagłówka.plik php w temacie Twenty Fourteen:
< head>
< meta charset="">
< meta name=" viewport "content =" width = device-width">
< title> < / title>
< link rel = "profile"href = "http://gmpg.org/xfn/11">
< link rel = "pingback" href="">
< / head>Następnie otwórz swój indeks.html plik i skopiuj kod nagłówka (tj. kod w sekcji < div class = „header”>) do nagłówka.php tuż pod znacznikami < head>, jak pokazano poniżej:
< html>
< head>
< meta charset="">
< meta name=" viewport "content =" width = device-width">
< title> < / title>
< link rel = "profile"href = "http://gmpg.org/xfn/11">
< link rel = "pingback" href="">
< link rel = "stylesheet" href=" "type=" text / css" / >
< / head>
< body>
to jest sekcja nagłówka. Umieść swoje logo i inne szczegóły tutaj.< / p>
< / header>
Następnie dodaj…
< link rel = "stylesheet" href=" "type=" text / css" / >… gdziekolwiek pomiędzy znacznikami < head> w nagłówku.plik php do połączenia arkusza stylów. Pamiętaj również o umieszczeniu znaczników otwierających < html > i < body > w nagłówku.php jak pokazano powyżej. Zapisz wszystkie zmiany.
Skopiuj drugą sekcję (tzn.
… na samej górze i …
… do absolutnego DNA. Te trzy linie pobierają nagłówek.php, sidebar.php i stopka.php (w tej kolejności) i wyświetla je w indeksie.php, który poskłada Twój kod do kupy. Zapisz wszystkie zmiany. W tym momencie, Twój indeks.plik php powinien wyglądać jak:
Następnie skopiuj zawartość z sekcji paska bocznego i stopki w indeksie.html do paska bocznego.php i stopka.odpowiednio php.
Dodawanie Postów
Twój szablon HTML ma zamiar przekształcić się w motyw WordPress. Musimy tylko dodać swoje posty. Jeśli masz posty na swoim blogu, jak byś je wyświetlał w swoim niestandardowym motywie „HTML-to-WordPress”? Używasz specjalnego typu funkcji PHP znanej jako Loop. Pętla to tylko wyspecjalizowany fragment kodu, który wyświetla Twoje posty i komentarze gdziekolwiek je umieścisz.
Teraz, aby wyświetlić swoje posty w sekcja treści indeksu.szablon php, skopiuj i wklej poniższy kod między To zajmie się Twoimi postami. Łatwe jak ABC. W tym momencie (i przy użyciu przykładowych plików dostarczonych w tym samouczku), Twój nagłówek.php powinno wyglądać tak: Twój pasek boczny.php powinno wyglądać tak: Twoja stopka.php powinno wyglądać tak: A to jest stopka Czy zauważyłeś zamykające znaczniki < /Body > i < / html > w stopce? Nie zapomnij o tym. Twój styl.css powinien wyglądać mniej więcej tak: I twój indeks.php powinno wyglądać podobnie do: Ponownie-jest to oparte na stronie od lewej do prawej z nagłówkiem, treścią, paskiem bocznym, układem stopki. Nadążasz? Wszystkie pięć plików należy zapisać w folderze motywu. Nazwij folder, co chcesz i skompresuj go do archiwum ZIP za pomocą WinRar lub równoważnego programu. Prześlij swój nowy motyw do instalacji WordPress, aktywuj go i zobacz przekonwertowany motyw w akcji! To było łatwe, prawda? Możesz styl swój motyw jednak chcesz, ale większość funkcji, które kochamy w WordPress są nadal nieaktywne, ponieważ … ten poradnik obejmuje podstawy konwersji szablonów HTML w WordPress i powinien mieć wielką wartość dla Ciebie jako początkującego. W następnym samouczku weźmiemy rzeczy wyżej i pobawimy się innymi aspektami programowania WordPress (takimi jak Pliki Szablonów oraz Tagi szablonów), które pozwolą Ci zmienić szablony HTML w dowolny sposób. Zostańcie z nami!< div class = "content">
< div id = " post -" >
< div class = "post-header">
< div class = "date">< / div>
< / a > < / H2>
< div class = "author">< / div>
< / div>
< div class = "entry clear">
< / div>
< footer class = "post-footer">
< div class = "komentarze">< / div>
< / footer>
< / div>
< head>
< meta charset="">
< meta name=" viewport "content =" width = device-width">
< title> < / title>
< link rel = "profile"href = "http://gmpg.org/xfn/11">
< link rel = "pingback" href="">
< / head>< footer class = "footer">
/*
Nazwa tematu: tworzenie motywu WordPress z HTML
Temat URI: http://wpexplorer.com
Opis: ten motyw pokazuje, jak tworzyć motywy WordPress z HTML
Wersja: 1.0
Autor: Freddy dla @ WPExplorer
Autor URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tagi: wpexplorer, niestandardowy motyw, HTML do WordPress, Utwórz motyw WordPress
*/
body {
rodzina czcionek: arial, helvetica, verdana;
font-size: 0.8 em;
Szerokość: 100%;
wysokość: 100%;
}
.header {
background-color: #1be;
margin-left: 14%;
top: 0;
border-width: 0.1 em;
border-color: # 999;
border-style: solid;
szerokość: 72%;
wysokość: 250px;
}
.content {
background-color: # 999;
margin-left: 14%;
margin-top: 5px;
float: left;
Szerokość: 46%;
border-width: 0.1 em;
border-color: # 999;
border-style: solid;
}
.sidebar {
background-color: #1d5;
margin-right: 14%;
margin-top: 5px;
float: right;
border-width: 0.1 em;
border-color: # 999;
border-style: solid;
top: 180px;
Szerokość: 23%;
}
.stopka {
background-color: red;
margin-left: 14%;
float: left;
margin-top: 5px;
szerokość: 72%;
wysokość: 50px;
border-width: 0.1 em;
border-color: # 999;
border-style: solid;
}
< div class = "content">
< div id = " post -" >
< div class = "post-header">
< div class = "date">< / div>
< / a > < / H2>
< div class = "author">< / div>
< / div>
< div class = "entry clear">
< / div>
< footer class = "post-footer">
< div class = "komentarze">< / div>
< / footer>
< / div>
