Дишайте в своя статичен уеб сайт нов живот с помощта на WordPress конверсия (част 1), CMS и

Уеб дизайн и изработка са сред най-търсените професии в последните години. Съгласни ли сте?

Тъй като онлайн бизнес расте, все повече и повече клиенти са склонни да харчат големи суми на своите уебсайтове и на хора с подходящи умения. Може да са се научили как да се създаде уеб сайт в HTML и CSS. Но, най-вероятно, в момента е създаването на такива сайтове вече не прави смисъл за голям бизнес или дори един блог. Това е една добра причина да се направи -konvertatsiyu WordPress сайт с HTML и CSS.

На пръв поглед, има няколко причини, поради които хората спряха по избор на статични HTML (и CSS) сайт.

Защо хората избират статични уеб сайтове?

• Статичен сайт се поддържа от почти всички браузъри;
• Лесно персонализиране.

Но когато става дума за функционалност, динамичен сайт, като WordPress. че е по-правилният начин.

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

Шаблони изглеждат много по-добре от сайтове, изградени върху традиционните статични HTML.

Не е необходимо да се напише код, ако искате да добавите страница или по пощата. Просто го направи чрез административния панел.
Функции за сигурност, предлагани от HTML. много по-ограничени, отколкото сигурността на динамични сайтове на WordPress и други CMS.

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

В това две части серия, аз ще говоря за основните принципи на преобразуване на HTML към напълно функционална WordPress тема с NeoBlog HTML и CSS теми.

В края на тази статия, вие ще знаете как можете да превърнете статични HTML-CSS сайт в напълно динамичен сайт с WordPress. Това ще гарантира, че собствениците на сайта по-голяма гъвкавост, като по този начин съживявяне сайта.

Необходимите средства за изпълнението на задачите на тази статия

• Тема NeoBlog HTML и CSS;
• Основни познания на WordPress кодекс;
• Някои PHP и JQuery умения.

Това, което се създаде

Какво трябва да знаете за кода

WordPress тема е един вид "шкурка" екстериорен дизайн на сайта си. С общата тема на вашия сайт може да се променя съществено, и WordPress ще предостави за тази GUI.

Когато създавате WordPress тема, трябва да се обърне внимание на следното:

• Бъдете внимателни с имената на шаблонни файлове, които създавате. По подразбиране, WordPress ще разпознае като имена шаблонен файл като single.php и page.php. Преди да се обадите или да създадете нов потребител файл, аз препоръчваме да посетите имената на WordPress шаблони по подразбиране;
• Прегледайте секциите на WordPress кодекс. посветени на специфични функции, етикети или други елементи, преди да ги използвате в шаблонните файлове. Той ще ви каже правилната посока за развитието на вашата тема;
• В някои случаи, ще трябва външни JQuery файлове. за подобряване на външния вид на WordPress теми, или да добавите някои функции. WordPress не осигурява всички необходими ресурси в основния набор;
• Уверете се, че използвате правилно структуриран, без PHP грешки код и валиден HTML тагове. За повече информация се обърнете към WordPress стандарти за кодиране;
• Използвайте чиста валиден CSS. Вижте CSS стандарти за кодиране.
• При разработването на дизайна и оформлението на сайта следва основните принципи на проектиране.
• Поддържайте резервни копия на файлове. Вие никога няма да загубят нищо, ако направите резервно копие на файлове. Като допълнителна предпазна мярка, трябва да направите резервни копия на всички тематични файлове, плъгини, които се използват, както и някои други файлове, които са свързани с развитието на темата.

Защо ви е необходимо познаването на PHP?

PHP - е език за програмиране и скриптове за динамични интерактивни уебсайтове. Той е широко използван скриптов език със софтуер с отворен код, което е особено подходящ за уеб разработки. В допълнение към това, той може да се вгражда в HTML.

WordPress използва PHP като скриптов език. Той е лицензиран с отворен код, заверен от Инициативата за отворен код. Някои части от код структурата на WordPress за PHP -razmetki в противоречие помежду си, важно е, че имате основни PHP умения.

Как става това?

На първо място, е необходимо да се определи файлове, необходими за създаване на цялостна WordPress тема. След това трябва да се добави подходящ код за всеки файл с шаблон.

В процеса на развитие, ще се сблъскате с функция, която може да не е напълно ясно за вас. В този случай, ще трябва да помогне на WordPress кодекс.

След като сте създали всички необходими шаблони, ще трябва да ги добавите към вашата тема съдържание, за да се провери дали всички кодове, които се използват, за да работят правилно.

Първи стъпки

За да започнете, трябва да се създаде тема папка в WP-съдържание папка WordPress / теми.

Моля, имайте предвид, че името на папката трябва да съвпада с името на темата, която искате да създадете. За тази статия, темата и папката ще бъде назован NeoBlog:

шаблонни файлове

В сравнение с статични HTML-CSS сайт WordPress тема се състои от купчина шаблонни файлове.

Това са файлове, които съдържат код, който дава възможност за работа на WordPress теми. Затова се създаде NeoBlog тема папка следните файлове:

За тази статия, ние ще запълни тези файлове кодове, които са на лечение с меню-цикли и джаджи.

В тази част от поредицата ще отнеме това, ние се нуждаем от следните неща:

• Копирайте файловете в папката NeoBlog WP;
• style.css;
• screenshot.png;
• Активиране на темата.

За да започнете, копирате CSS папка. шрифтове, изображения и теми от JS NeoBlog HTML и CSS в тема папка NeoBlog РП на:

Стъпка 2 - давате имена на WordPress теми, използвайки style.css файла

Преди да започнете работа с файла на шаблона, добави позоваване на стилове NeoBlog HTML и CSS тема в темата NeoBlog WP. След това създайте style.css файла в темата NeoBlog WP и да копирате кода по-долу:

Също така този код съдържа серия от @import тагове. Те свързват CSS стилове от папката с основните стилове NeoBlog WP Теми. които се съдържат в този файл.

Стъпка 3 - Добавяне на файл с изображение на екрана

В действителност, в екрана на WordPress административния панел ще бъдат показани в резолюцията на 387 от 290 пиксела, но увеличение с повече от два пъти размера ви позволява да го видите с висока детайлност в HiDPI дисплеи:

След това запишете новосъздадения файл като screenshot.png в главната директория NeoBlog WP теми.

СТЪПКА 4 - Активиране тема

След като добавите снимката, е необходимо да активирате палитрата NeoBlog WP.

Но преди да направите това, трябва да се провери дали темата или не работи. За да направите това, да създадете основната директория на тема NeoBlog WP празен файл index.php на (не се притеснявайте, ние ще добавим код за това по-късно).

На следващо място, активирате палитрата, отидете в административния панел на WordPress и главното меню, изберете дизайн -> Теми. Поставете мишката върху иконата, която съответства на нашата тема, и кликнете върху бутона Activate:

Ако просто искате да проверите появата на NeoBlog WP теми. ще видите, празна страница, защото няма с какво да се добави към файла index.php.

Основните трудности, които може да срещнете

По време на работа, може да изпитате проблеми с комбиниране на PHP - и HTML таг.

Какво трябва да се направи

Проверете отново код. Това е първото нещо, което трябва да се направи. Тя може да се случи, че сте пропуснали да затворите декларация, ако или линия, докато вътрешността на WordPress.

Следният код ще генерира грешка, тъй като операторите няма да се свършат, ако:
Например:

В следния код, този проблем е решен:

Също така проверете дали сте поставили всички затварящи тагове; В противен случай, когато се смесва с PHP HTML-код не може да работи.

Ако искате да научите повече за това как да добавите допълнителна функционалност към вашия блог, моля консултирайте се с WordPress кодекс.

Какви са границите?

Тази тема ще осигури само основните функции на един блог, например, лента и долен колонтитул, поле за търсене, списък на записи, специално изображение и така нататък.

заключение

Отличен! Приключихме с първата част на тази серия. В тази статия, вие научихте как да създадете файл с шаблон, и това, което трябва да се обърне специално внимание при създаването на WordPress теми.

послеслов

Ако използвате WordPress. най-вероятно прекарват много време в търсене на теми, които бихте искали. Например, вие трябва да погледнете за дълго време една тема, която ще бъде с определен цвят, но с различни тунинг елементи. Така че може би е време да се научите как да създадете своя собствена тема WordPress.

Тази серия от статии ще ви помогне да научите как да конвертирате HTML и CSS шаблон, и в същото време можете да създадете своя собствена тема WordPress. Ще разберем цялата история, и да обмислят как темата обсъдени подробно с всички файлове, които са необходими, за да се създаде пълнофункционален WordPress тема.

Нашата HTML вече е готов и може да бъде превърнат в серия от тематични файлове. В следващата статия, ние ще работим с досиетата на шаблони и добавяне на функции, за да ви WordPress теми.

Превод на статията «Енергизирайте Вашият статичен уеб сайт с WordPress Това преобразуване начинаещи (част 1)" се получава чрез екипа на проекта приятелски Уеб дизайн от А до Я.