Урок за WordPress: Как да създадете WordPress тема от HTML (част 1)

  1. 1. В момента четете: Урок за WordPress: Как да създадете WordPress тема от HTML (част 1)
  2. 2. Урок за WordPress: Как да създадете WordPress тема от HTML (част 2)
  3. 3. Въведение в анатомията на WordPress тема

Ако сте започнали с уебсайт на HTML (+ CSS), не е нужно да го изхвърляте при преминаване към WordPress. Можете да конвертирате вашия HTML в WordPress и да стартирате вашия (сега по-мощен) уебсайт на динамичната платформа WordPress.


Или може би това не е така Може би просто се чудите как да превърнете HTML дизайна на клиента в напълно актуална тема на WordPress. Или може би искате да научите основно програмиране на WordPress (+ PHP) от по-познатата страна на HTML.

Каквато и да е причината да сте тук днес, този урок за WordPress ще ви запознае с основите на създаването на тема на WordPress от HTML. Можете да следвате това ръководство, за да създадете своята тема от нулата или можете да преминете към Github и да изтеглите темата за стартиране на WPExplorer, която предоставя „празно платно“, за да създадете вашата тема с всички необходими файлове на шаблони и код, за да започнете. Така че, ако сте един от онези хора, които по-скоро се учат чрез четене на код, след това изтеглете стартовата тема, пропуснете ръководството и вижте как работят нещата … В противен случай вземете редактор на кодове (използвам и препоръчвам Notepad++, или SublimeText) и готов браузър, след това следвайте това просто ръководство до края.

Наименуване на вашата WordPress тема

Първо, първо трябва да дадем на вашата тема уникално име, което не е необходимо, ако създавате тема само за вашия уебсайт. Независимо от това, трябва да назовем вашата тема, за да я разпознаем лесно при инсталирането.

Общи предположения към този момент:

  • Имате готов своя index.html и CSS таблица за стилове.
  • Имате работеща WordPress инсталация с поне една тема, напр. Двадесет Четиринадесет
  • Вече сте създали папка с теми, в която ще запазвате новата си тема WordPress ��

Да се ​​върнем към именуването на вашата WordPress тема. Отворете редактора на кода и копирайте и поставете съдържанието на вашия стилов лист в нов файл и го запишете като style.css във вашата папка с теми. Добавете следната информация в самия връх на новосъздаден style.css:

/ *
Име на темата: Името на вашата тема
URI на темата: URL адрес на вашата тема
Описание: Кратко описание на вашата тема
Версия: 1.0 или всяка друга версия, която искате
Автор: Вашето име или потребителско име на WordPress.org
URI на автора: Вашият уеб адрес
Етикети: Етикети, за да намерите темата си в хранилището на WordPress
* /

Не изключвайте (/ *… * /) маркерите за коментари. Запазете промените. Тази информация казва на WordPress името на вашата тема, автора и безплатни подобни неща. Важната част е името на темата, което ви позволява да избирате и активирате темата си през WP таблото за управление.

Разбиване на вашия HTML шаблон в PHP файлове

Този урок допълнително предполага, че имате HTML шаблон, подреден отляво надясно: заглавка, съдържание, странична лента, долен колонтитул. Ако имате различен дизайн, може да се наложи да си поиграете с кода малко. Забавно е и супер лесно.

Следващата стъпка включва създаване на четири PHP файла. Използвайки редактора на кода, създайте index.php, header.php, sidebar.php и footer.php и ги запишете в папката си с теми. В този момент всички файлове са празни, така че не очаквайте те да направят нищо. За илюстрация използвам следните файлове със стилове index.html и CSS:

index.html




Как да конвертирате HTML шаблон в WordPress тема - WPExplorer



Това е заглавната част. Поставете тук вашето лого и други подробности.

Това е основната зона на съдържание.

И това е подножието.

CSS STYLESHEET

#wrap {margin: 0 автоматично; ширина: 95%; марж-нагоре: -10px; височина: 100%;}
.глава {ширина: 99.8%; рамка: 1px плътно # 999; височина: 135px;}
.съдържание {ширина: 70%; граница: 1px плътно # 999; граница на върха: 5px;}
.лента {поплавък: право; марж-нагоре: -54px; ширина: 29%; рамка: 1px твърд # 999;}
.footer {width: 99.8%; border: 1px solid # 999; margin-top: 10px;}

Можете да вземете и двата кода, ако нямате какво да работите. Просто ги копирайте и поставете във вашия редактор на кодове, запишете ги, създайте четирите PHP файла, които току-що споменахме, и се подгответе за следващата част. Отворете новосъздадения (и празния) header.php. Влезте в съществуващата си WordPress инсталация, отворете Външен вид – >> Редактор и отворен header.php. Копирайте целия код между тагове и го поставете във файла header.php. Следва кодът, който получих от файла header.php в тема Twenty Fourteen:




<?php wp_title( '|', true, 'right' ); ?>




След това отворете своето index.html файл и копирайте заглавния код (т.е. кодът в

раздел) до вашия header.php точно под маркери, както е показано по-долу:




<?php wp_title( '|', true, 'right' ); ?>







Това е заглавната част. Поставете тук вашето лого и други подробности.

След това добавете …

… навсякъде между тагове във файла header.php, за да свържете таблицата ви със стилове. Не забравяйте също да поставите и отварящи маркери в header.php, както е показано по-горе. Запазете всички промени.

Копирайте втория раздел (т.е..

от index.html до новосъздаден index.php , и добавете …

… в самия връх и …


… До абсолютно дъно. Тези три реда извеждат header.php, sidebar.php и footer.php (в този ред) и ги показват в index.php, което връща кода ви отново. Запазете всички промени. В този момент вашият index.php файл трябва да изглежда така:



След това копирайте съдържанието от страничните ленти и секциите на долния колонтитул в index.html съответно в sidebar.php и footer.php.

Добавяне на публикации

Вашият HTML шаблон е на път да се превърне в тема на WordPress. Просто трябва да добавим вашите публикации. Ако имате публикации в блога си, как бихте ги показали в своята персонализирана тема „HTML-към-WordPress“? Използвате специален тип PHP функция, известна като контур. Loop е просто специализиран код, който показва вашите публикации и коментари, където и да го поставите.

Сега, за да се показват вашите публикации в раздел със съдържание на шаблона index.php, копирайте и поставете следния код между

и

маркери, както е показано по-долу:

>

Това ще се погрижи за вашите постове. Лесно като ABC. На този възел (и използвайки примерните файлове, предоставени в този урок), header.php трябва да изглежда така:




<?php wp_title( '|', true, 'right' ); ?>




Вашият sidebar.php трябва да изглежда така:

Вашият footer.php трябва да изглежда така:

И това е подножието

Забелязахте ли затварянето и тагове във долния колонтитул? Не забравяйте да включите и тези.

Вашият style.css трябва да изглежда така:

/ *
Име на темата: Създаване на WordPress тема от HTML
Тематичен URI: http://wpexplorer.com
Описание: Тази тема ви показва как да създавате WordPress теми от HTML
Версия: 1.0
Автор: Фреди за @WPExplorer
URI на автора: http://WPExplorer.com/create-wordpress-theme-html-1/
Тагове: wpexplorer, персонализирана тема, HTML към WordPress, създаване на WordPress тема
* /
тяло {
семейство шрифтове: arial, helvetica, verdana;
размер на шрифта: 0.8em;
ширина: 100%;
височина: 100%;
}

.заглавие {
цвят на фона: # 1be;
марж-ляво: 14%;
отгоре: 0;
ширина на границата: 0,1ем;
цвят на рамката: # 999;
граничен стил: солиден;
ширина: 72%;
височина: 250px;
}

.съдържание {
цвят на фона: # 999;
марж-ляво: 14%;
марж-отгоре: 5px;
плувка: вляво;
ширина: 46%;
ширина на границата: 0,1ем;
цвят на рамката: # 999;
граничен стил: солиден;
}

.странична лента {
цвят на фона: # 1d5;
марж-десен: 14%;
марж-отгоре: 5px;
плувка: дясно;
ширина на границата: 0,1ем;
цвят на рамката: # 999;
граничен стил: солиден;
отгоре: 180px;
ширина: 23%;
}

.footer {
цвят на фона: червен;
марж-ляво: 14%;
плувка: вляво;
марж-отгоре: 5px;
ширина: 72%;
височина: 50px;
ширина на границата: 0,1ем;
цвят на рамката: # 999;
граничен стил: солиден;
}

И вашият index.php трябва да изглежда подобно на:





Отново – това се основава на уебсайт отляво надясно с оформление на заглавие, съдържание, странична лента, подложка. Следите ли? Всичките пет файла трябва да бъдат запазени в папката ви с теми. Назовете папката каквото искате и я компресирайте в ZIP архив с помощта на WinRar или еквивалентна програма. Качете новата си тема във вашата WordPress инсталация, активирайте я и вижте конвертираната тема в действие!

Това беше лесно, нали? Можете да стилизирате темата си, колкото искате, но повечето от функциите, които обичаме в WordPress, все още са неактивни, тъй като … този урок обхваща основите на конвертирането на HTML шаблони в WordPress и трябва да бъде от голяма полза за вас като за начинаещ. В следващия урок ще направим нещата доста по-високи и ще играем с други аспекти на WordPress програмирането (като напр. Файлове с шаблони и Маркери на шаблони), които ще ви позволят да завъртите HTML шаблоните си по който и да е начин. Продължавайте да се настройвате!

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