За да направите своя WordPress сайт, определено ще трябва да добавите тема. Те се наричат ​​още шаблони. Това е основата на всеки уеб ресурс.

Тази статия ще покрие стъпките за създаване на шаблон и ще опише оформлението на psd файловете.

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

Моля, имайте предвид, че това ръководствоне включва описание за добавяне на готова тема - това е ръководство за генериране на ваш собствен шаблон. Ако сте изтеглили темата и не знаете как да я инсталирате, отидете в административния панел на WordPress, в секцията „ Външен вид” и добавете една от наличните кожи там. И сега ще анализираме по-подробно какво е тема, защо е необходима и как да я създадете сами.

Каква е целта на ръчното създаване на тема?

Темата (шаблонът) е колекция от функционални и стилови файлове, които заедно определят дизайна на даден ресурс. Темата определя как ще изглежда сайтът, така че е много важно да се подходи правилно към процеса на създаване на шаблон. Мнозина сега задават въпроса: „Защо да създавате своя собствена тема, ако можете да изтеглите готова от интернет и безплатно?“. Това е логичен въпрос и има много изчерпателен отговор на него: „Да направим перфектния шаблон, който напълно отговаря на вашите изисквания.“

Когато закупите дизайн или го изтеглите от каталог безплатни шаблони WordPress, обикновено жертвате качеството. По правило такива шаблони нямат всичко, което е подходящо за вас. Но ти се примири, мисля че един-два нюанса не са цялата картина и че после ще редактираш темата. Но всъщност се оказва, че сайтът остава с недовършена тема, която не ви харесва. Ето защо е по-добре да направите своя собствена веднага. И въпреки че първоначално оформлението може да изглежда сложно, но след това, когато научите, можете дори да създавате персонализирани шаблони.

Освен това, след като създадете шаблон, ще се почувствате като „лекар“ на WordPress – ще знаете какво има вътре в сайта. Разберете кои елементи за какво са отговорни. Тогава сайтът и вие ще говорите за вас. Запознайте се с таговете, структурата и циклите на WordPress. Или може би искате да го правите професионално и да започнете да правите шаблони, за да си изкарвате прехраната.

И така, ето основните причини, поради които трябва да направите свой собствен шаблон за уебсайт:

• научете всичко за HTML, CSS и нещо за PHP;
• можете да създавате, защото уеб дизайнът също е изкуство;
• ще бъде възможно да печелите пари чрез продажба на теми;
• открийте ново умение;
• създайте дизайн, който ще бъде 100% подходящ за вашия бъдещ сайт.

На какви стандарти отговаря темата?

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

Всички теми на WordPress се хостват в папката wp-content/themes/. В тази папка има други папки с отделни теми, файл с допълнителни функции(functions.php), стилови файлове и изображения. За да намерите данни по определена тема, трябва да отидете в съответната директория. Това ще постави темата „Western“ в папката wp-content/themes/western/.

Преди да започнете, трябва поне няколко пъти да погледнете структурата на предварително създадените теми. Сайтът на WordPress по подразбиране се предлага с два шаблона по подразбиране, които можете да прегледате. Това е стандартният и класическият шаблон. Отворете техните файлове в желаната директория на сървъра и сравнете разликите им.

Ще забележите, че един шаблон обикновено се състои от три файлови формата:

1. Style.css е стиловият файл, отговорен за външен дизайнсайт.
2. Функции.php функционален файл A, който добавя различни функции към страниците.
3. Други php файлове, които отговарят за функциите на шаблонния изход на сайта, интеграция на тема с WordPress. Именно тези файлове ви позволяват да преведете psd оформлението в пълноценен шаблон.

Нека анализираме всеки от тези файлове по-подробно, за да разберем как върви оформлението на тема на WordPress.

Правила за създаване на style.css файл

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

1. Име на шаблона.
2. URL адресът, който води до темата.
3. Описание, посочващо основните характеристики на шаблона. Накратко.
4. Име на автора. В този случай въведете вашето име.
5. Линк към автора, тоест към вас. Можете да предоставите връзка към вашия профил в социалните медии.
6. Името на родителската тема не е задължително.
7. Версия на темата. Ако е само създаден, тогава v. 1.0.
8. Пълно описание на шаблона. Можете да пишете обширно.

За да създадете най-простата тема на WordPress, просто добавете редактирана версия с един файл style.css. В този файл, до реда „шаблон“, посочете името на основната тема. Например Classic, ако редактирате стандартен шаблон. Сега създадената тема ще отговаря напълно на класическия шаблон. Следователно ще трябва да качите файловете в директорията wp-content/themes/classic.

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

Характеристики на файла с допълнителна функционалност functions.php

Шаблоните не винаги използват файла functions.php, но в повечето случаи е необходим. Трябва да бъде поставен в директорията с подходящата тема. Моля, обърнете внимание, че ако този файл присъства в папката на шаблона, той ще бъде взет предвид при инициализиране на темата. Работи като плъгин. И ще изпълнява такива функции, каквито му дадете.

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

Характеристики на php шаблонни файлове

Файловете във формат PHP ще отговарят за отделните части на сайта. Те определят както съставните страници, така и заглавията, категориите и другите секции, които ще се показват на потребителя. Тъй като сега вие сте създателят на темата, само вие ще определите кои и колко шаблонни файла да изберете. След като ги изберете, новите функции ще се появят във вашия админ панел. Колкото по-малко файлове изберете, толкова по-бързо ще работи сайтът, но толкова по-малко функционалност ще има. Помислете добре кои файлове ви трябват и без кои можете.

Ако искате да добавите минимална тема към сайта или да изпробвате свое собствено psd оформление, тогава ви трябват само два файла в директорията на шаблона:

1. style.css
2. Index.php

Опитните уебмастъри успяват да променят файла index.php по такъв начин, че е достатъчно само да направят настройки за долния колонтитул, страничната лента, търсенето, архива, категориите, страниците и т.н. Но по-добре опитайте да направите WordPress шаблон, в който всяка файлът ще изпълнява съответната функция.

Дори ако случайно не посочите шаблонен файл, WordPress автоматично ще добави свои собствени настройки по подразбиране към сайта. Например, ако не добавите файл, отговорен за коментарите, тогава двигателят ще намери свои собствени версии на тази функция в директориите - например wp-comments.php. Тогава „чуждите“ коментари ще се сринат в структурата на вашия сайт, което няма да отговаря на изискванията на шаблона. За да предотвратите това да се случи, трябва да добавите всички основни файлове за показване на различните компоненти на страницата:

• header.php - отговаря за хедъра на сайта;
• sidebar.php - странични ленти;
• footer.php - долен колонтитул на ресурса (долната му част);
• comments.php и comments-popup.php са коментари.

След генерирането на всеки един от тези файлове, за да започне сайтът да ги показва, трябва да въведете данни за тях в основния файл index.php на шаблона. За да направите това, посочете в index.php таговете, които водят до посочените файлове. Например:

• за да добавите заглавен файл на сайта (header.php), напишете етикета

  шаблонен етикет get_header();

• за долния колонтитул е подобно, но вместо хедър, посочете долния колонтитул и т.н.

Пример за включване на един от шаблонните файлове в index.php би изглеждал така: . Ще трябва да потърсите отделна информация за всеки от посочените файлове с шаблон на ключ. Намерете ръководства за всеки от файловете, както и образци, така че да разберете всички функции, предписани в шаблоните.

Избор на функционалност на шаблона

С времето ще се изправите пред дилема – кой тип шаблон да изберете. Двигателят предоставя избор. Или можете да изберете шаблон със свързана йерархия на шаблона, или оформление с условни етикети.

Първият вариант вече е разгледан. Всички файлове php шаблон- това е йерархията на шаблона. Тоест, следвайки правилата на тази йерархия, вие постепенно генерирате отделни файлове с оформление. Така ще създадете пълноценен шаблон от редица функционални php компоненти. Йерархията в този случай работи на принципа на зареждане при поискване. Например, ако имате файл с категория (category.php) и потребителят го е поискал, тогава този конкретен компонент на сайта ще бъде зареден в браузъра. Ако не, ще се зареди файлът с шаблон на ключ index.php.

По този начин можете да промените външния вид на отделни части на сайта, като използвате принципа на шаблонната йерархия. Всяка страница има свой специфичен ID. Добавете файла category-6.php към директорията на темата и когато поискате категория с ID 6, този дизайн ще се отвори. Ако не е там, тогава настройките ще останат стандартни - index.php ще се разшири.

Понякога принципът на йерархията на шаблона не е достатъчен, за да осигури най-удобното показване на шаблона. В този случай програмистите прибягват до използването на втория принцип - въвеждат условни тагове. Тези тагове проверяват сайта за съответствие определени условия, а ако те не се спазват, променят външния му вид. Тоест тези тагове работят на принципа if/else (ако/тогава). Така че не е нужно да добавяте море от ​​​​php файлове с номера на всяка категория, но можете да напишете условията за всеки ID веднъж.

Как е оформлението на psd оформлението в WordPress

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

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

PSD е файл от приложението Photoshop. Това е като графично изображениевашият дизайн. За да го компенсирате, трябва текстов редактордобавете html маркиране. Постепенно ще промените всяка една от точките на това маркиране, постигайки крайния резултат, който е показан на оформлението. Незабавно посочете центрирането на вашия шаблон, както и размерите на различните му части.

Следващата стъпка е да добавите фонови изображения. Можете също да ги направите сами, като използвате същото приложение на Photoshop. Най-лесният вариант е да създадете градиентни фонови изображения. След това започнете да създавате логото. Постепенно решавайте всички възникнали заявки - коригирайте хедъра, долния колонтитул, страничната лента и всички негови части, според направеното оформление. Не забравяйте да добавите важни шаблонни файлове към неговата директория, така че сайтът да се зарежда според вашите изисквания.

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

Ще видим как се създава готов WordPress шаблон, готов за инсталиране на хостинг. За да направите това, на базата на файла index.htm се създават php файлове, всеки от които отговаря за съответната част от шаблона на WordPress. По-специално, това са файлове, които контролират заглавката на сайта, външния вид на главната страница, страничната лента, архивите, страницата за търсене, единичната публикация, единичната страница и коментарите. Искам веднага да кажа, че на този етап би било хубаво да имате някои основни познания, по-специално, за да разберете какво представляват шаблонните етикети.

Преди да започнете да изучавате този урок, искам да ви предупредя за един ... хм ... трик на автора на урока. Когато започнах да превеждам този цикъл от уроци, бях сигурен, че накрая ще имаме готов шаблон, изработен от мен. Но нещата са малко по-сложни. В последния урок авторът даде кодове на WordPress не под формата на текст, както в предишните уроци, а под формата на снимки с обяснения. И цялата готов шаблонПредлага се за изтегляне като готов архив срещу символична такса. Бих могъл да купя този архив и да го публикувам тук, но не съм сигурен дали е законен. Общо взето това е положението. Така че този урок най-вероятно ще трябва да бъде изпълнен единствено за образователни и образователни цели.

Проектирано оформление на сайта
И така, в първите два урока ние първо, а след това с помощта на HTML и CSS инструменти. Кликнете върху изображението по-долу, за да видите как изглежда оформлението на сайта.

Всички шаблонни файлове на WordPress
Сега остава да създадем WordPress шаблон на базата на оформлението на сайта. Картината по-долу показва стандартен комплектшаблонни файлове на wordpress. В предишния урок създадохме папка изображенияи файл style.css. Имаме и файл index.htm, от които ще бъдат взети кодови фрагменти и копирани в съответните файлове php. И след това по-късно в phpфайловете се вмъкват от WordPress команди и по този начин се формират phpшаблонни файлове на wordpress.

Редактиране на файла style.css
Първо вмъкнете в началото на файла style.cssинформация за шаблона. Това е стандартен код, който се редактира според вашите данни (име на шаблона, url, описание, информация за автора).

Header.php
Този файл отговаря за показването на заглавката на сайта. Същността е следната, част от кода се взема от файл index.htm(по-горе и включително

) се вмъква във файла header.phpи след това се интегрират в командния код на WordPress. На снимката са маркирани в червено. Кликнете върху снимката, за да видите в голям размер.

Index.php
Този файл е отговорен за показването на това, което потребителят вижда начална страницасайт. Файлът се генерира по същия начин. index.php. Копиране на част от кода от index.htmи изпълнен с команди на WordPress. Кликнете върху снимката, за да видите в голям размер.

странична лента.php
Този файл отговаря за показването на елементи в страничната лента. Ние също изрязваме кода от index.htm(цяло div id="страна") и го поставете във файла странична лента.php. След това, както преди, вмъкнете командите на WordPress. Кликнете върху снимката, за да видите в голям размер.

Архив.php
Отговаря за издаването на архивни документи на обекта. За да създадем този файл, ние напълно копираме съдържанието на файла index.phpи вмъкнете в архив.phpи след това вмъкнете част от кода (7 реда) между редовете и

Search.php
Този файл отговаря за резултатите от търсенето. За да създадем този файл, ние напълно копираме съдържанието на файла index.phpи вмъкнете в search.phpи след това вмъкнете част от кода (1 ред) между редовете и . Вижте как се прави на снимката по-долу. Кликнете върху снимката, за да видите в голям размер.

Единичен.php
Този файл извежда една публикация. Кликнете върху снимката, за да видите в голям размер.

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

Демо шаблон на живо
Ако щракнете върху снимката, можете да видите готовия WordPress шаблон онлайн.

PS. Пазач. И знаете ли, за да започнете да правите дизайни, трябва да овладеете инструментите и функциите на Photoshop. В този случай курсовете по Photoshop ще ви помогнат, което ще ви даде необходимото базово ниво на знания.

Ако четете тази статия, шансовете са, че имате много красив дизайн на уебсайт, вероятно направен в Адобе Фотошопи запазете като PSD, JPG, PDF, AI или PNG формат. Сега искате да конвертирате този файл с изображение в тема на WordPress, така че да можете да го приложите към вашия новосъздаден уебсайт или блог. Може и да си пожелаете PSD към WordPress конвертор -Но какво ще стане, ако можете да направите тази трансформация съвсем сама и това също е свободен!

Много хора, които са добри в графичния дизайн, стигат до тази точка на конвертиране на PSD в WordPress теми. И се чувстват блокирани! Но вината не е тяхна. Изграждането на уебсайт изисква не само способността да създавате страхотно изглеждащи дизайни, но също така се нуждае от някои умения за програмиране. Трябва да сте експерт поне в HTML, CSS, JavaScript, jQuery и PHP програмиранеда превърнете вашия PSD файлкъм уеб страница. Проблемът е, че повечето хора са или добри дизайнери, или добри програмисти!

Въпреки това, не се притеснявайте. Не е толкова трудно да конвертирате PSD в WordPress тема. Всичко, което трябва да знаете, е правилните стъпки, които да предприемете. В тази статия ще ви кажа същото! Да започнем да учим.

Какво е PSD файл?

Тези, които не знаят PSD означава Photoshop документ.Това е файловият формат, в който Adobe Photoshop записва изпълними файлове. Можете да отворите PSD файловете във Photoshop и да направите допълнителни промени в дизайна, както желаете. Поради това PSD файловете понякога се наричат отворени файлове (позовавайки се на факта, че тези файлове могат да се редактират).

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

Какво е WordPress?

WordPress е по същество безплатна платформа за блогове. Отворено е програмен кодпрограмата улесни дори и непрограмисти да създават свои собствени уебсайтове или блогове. WordPress е стабилен и мащабируем и е написан на PHP.

Дизайн на уеб сайт базиран на WordPress се нарича тема(и понякога, проба).

Конвертирайте PSD в WordPress тема

Стъпка 1: Изрежете PSD файла

След като вашият PSD файл е готов, първото нещо, което трябва да направите, е да го разделите на части. За какво? Е, защото едно изображение ще бъде голямо по размер и ще отнеме повече време за зареждане. Освен това ще трябва да свържете различни поведения с различни сегменти на изображението. Така че трябва да го отрежете.

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

Adobe Photoshop ви позволява да използвате слоеве. Той има вграден обект за нарязване на PSD и запазване на получените сегменти като отделни файлове с изображения. Можете да запазите тези изображения във формати JPG или PNG. Ако имате нужда от прозрачност, за да работите в някой от тези сегменти, тогава трябва да го запишете PNG форматзащото JPG не поддържа прозрачност.

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

Докато нарязвате PSD с цел превръщането му в тема на WordPress, трябва да разберете това в момента css времедоста мощен и може да създаде набор от елементи само с няколко реда код. Например, можете да създавате плътни цветни фонове, градиентни фонове, бутони различни видове, линии, стрелки и специални символи, само със използвайки CSS. По този начин не е необходимо да запазвате тези неща като изображения. По-малко изображения, по-бързо ще се зареди вашият сайт.

Следното видео в YouTube показва точно как да нарежете PSD файл и да го запазите като различни изображения:

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

Стъпка 2: Създайте HTML и CSS файлове

Сега започва основната кодираща част от процеса на конвертиране на PSD в уебсайт. По принцип трябва да създадете уеб страница и да сглобите всички нарязани изображения по такъв начин, че да изглежда точно като вашия PSD.

Първо трябва да създадете HTML файл. Можете да го наричате както искате, но по конвенция нека го наречем index.htm.В този файл ще трябва да напишете HTML или XHTML код, за да покажете различни части от изображението от вашия PSD. За да създадете оформление на основата, можете да използвате DIV елементи. DIV елементите са много гъвкави. Можете да поставите DIV елементи един до друг, припокриващи се, един върху друг. Можете да подравните центъра на DIV елемент отляво и отдясно и можете да ги позиционирате много конкретно в конкретни координати на уеб страницата.

В тези DIV елементи можете да извикате запазените изображения и да ги покажете като такива или като фон в DIV.

След като завършите това основно оформление на вашата уеб страница, трябва стилизирайте гоза да бъде същият като вашия PSD. За стилизиране трябва да използвате правила за каскадни стилови таблици (CSS). С тези правила можете да използвате различни стилове на шрифтове, размери, цветове, текстови сенки, мащабиране на сивото на изображението, граници и т.н.

За да напишете правила за CSS стил, трябва да създадете друг файл, наречен styles.cssи след това извикайте този css файл index.htm.Стилове, присъстващи в styles.cssще се прилага за различни елементивъв вашите HTML файлове.

Добре, изчакай! Ако не знаете нищо за HTML или CSS кодирането, не се притеснявайте! Това са много прости скриптови езици и можете лесно да ги научите онлайн. По-долу са някои от онлайн ресурсите, където можете да научите CSS и HTML:

Уроци за HTML

1. W3Schools HTML урок
2. TutorialsPoint HTML урок
3. HTML.net
4. HTML куче

CSS уроци

1. CSS урок
2. Урок за CSS на W3Schools
3. Tuts Plus
4. Основи на CSS

Стъпка 3: Разбиване на HTML файл в тематични файлове на WordPress

На този моментв процеса на конвертиране на PSD в тема на WordPress ще имате един HTML файл (index.html)и един css файл (styles.css).В третата стъпка ще трябва да разделите HTML файла според Структурна тема на WordPress.объркани? Е, WordPress има предварително дефиниран набор от файлове, които са именувани заедно, за да създадат уеб страница. Например, когато показва публикация, WordPress изисква съдържанието на заглавката на файла, zip файла, файла на страничната лента и долния колонтитул, между другото. Но имате целия код само в един файл - index.htm.Така че ще трябва да преразпределите кода index.htmкъм различни wp файлове. Това е основно работа за изрязване и поставяне! Ето списък на някои от важните файлове с теми за WordPress:

• архив.php
• категории.php
• коментари.php
• долен колонтитул.php
• header.php
• index.php
• страница.php
• search.php
• странична лента.php
• единичен.php
• style.css
• 404.php

За да създадете основна тема на WordPress, бихте искали да създадете поне header.php, footer.php, странична лента.php единичен.phpи index.php

Просто създайте тези PHP файлове във всеки текстов редактор на Notepad и копирайте съответния код от index.htmкъм тези файлове. Кодът, създайте заглавната част, ще влезе header.php,кодът за бележка под линия ще отиде на долен колонтитул.php... така нататък и така нататък.

Ако не сте много запознати с PHP, може да ви е трудно да създадете тези файлове правилно. Има някои наистина добри и безплатни онлайн уроциза изучаване на PHP. W3Schools и PHP.net предоставят лесни за разбиране PHP помощ. Можете да преминете през тези уроци, за да придобиете представа за PHP.

Следване видео в youtubeще ви помогне да разберете как да настроите „гола тема на WordPress“ (това основно означава - празна тема на WodPress.

Стъпка 4: Добавяне на функции и етикети на WordPress

Сега е време да конвертирате простите PHP файлове във файлове с теми на WordPress. За да направите това, ще трябва да добавите WordPress тагове във файловете. Но можете да попитате какво точно представляват WordPress таговете?

Както казах преди, WordPress е отлична и надеждна платформа. Дава ви голяма сумавградени функции, които можете лесно да извикате и да свършите нещата.

Нека да разгледаме един пример, за да го разберем по-добре. На началната страница (index.php), можете да покажете списъка скорошни публикации. Този списък трябва автоматично да променя как и кога правите нова публикация. Можете да напишете своя собствена PHP функцииза извличане на данни за публикация от базата данни и показване на главната страница. Но създателите на WordPress са направили живота ви по-лесен! Няма да се налага да пишете своя собствена подробни функции. Просто използвайте wp_get_recent_posts($arg, $output)от WordPress и вижте списък с показани скорошни публикации!

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

• Етикети на WordPress шаблони
• Връзка към функциите на WordPress

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

Можете също да включите във файл с изображение с име screenshot.jpgили screenshot.png.Този файл ще бъде показан като миниатюрно изображение на вашата тема. Лесно е да научите как да направите екранна снимка.

Списъкът с файлове в типична тема на WordPress може да изглежда по следния начин:

Трябва да качите папката с тема в папката /wp-съдържание/теми WordPress инсталации. Например, ако наименувате темата Minerva - тогава файловете на темата трябва да са вътре / wp-съдържание / теми / Минерва

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

Разгледайте следното видео, за да видите по-нататъшния процес:

Стъпка 5: Добавете повече функционалност като търсене и персонализирани функции

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

Например, можете да създадете search.phpфайл с код, който показва резултатите от търсенето от вашия сайт.

Освен това можете да създадете свои собствени PHP функции и да ги използвате в различни други PHP файлове. Трябва да създадете файл functions.phpза да запазите персонализираните функции на едно място.

За да се справите с грешки 404 (страницата не е намерена), можете да създадете файл 404.php. WordPress ще покаже съдържанието на този файл, когато някой се опита да получи достъп до URL адреса на вашия сайт, който не съществува.

Можете също да добавите малко JavaScript функции. JavaScript е най-широко използваният скриптов език от страна на клиента. Можете да пишете функции на JavaScript във файлове .jsи извикайте тези функции във вашите PHP файлове. Например валидирането на формуляр е нещо, което обикновено се прави с JavaScript. Ако потребител се опитва да намери нещо на сайта си, без да въвежда ключови думив полето за търсене JavaScript казва на потребителя, че трябва да въведе критерии за търсене.

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

Безплатни конвертори на PSD към WordPress

попаднах на софтуер Elemente от DivineProjects. Можете да изтеглите тази програма безплатно и тя ще преобразува вашия PSD в готова за използване пълнофункционална WordPress тема. Този софтуер работи като приставка за Photoshop.

Надявам се тази статия да ви е била полезна. Ако имате някакви въпроси по тази тема, моля, не се колебайте да ги зададете. Ще се постарая да ти помогна. Благодарим ви, че използвате TechWelkin.

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

В тази статия ще ви запозная с някои доста добри услуги, които ще ви помогнат да спестите време и пари.

1 DevPress

Авторът на тази услуга е Tung Do, отличен WordPress дизайнер и разработчик, който ме зарадва с новия си продукт. Услугата, която предлага, е способна на: Дизайн на теми, XHTML/CSS кодиране, разработване на теми от XHTML към WordPress и управление на сайтове.

2. WP от PSD

Екип от професионални програмисти ще ви помогне да мигрирате дизайна си към стандартна WordPress тема за различни браузъри. Цялата работа е обещана да бъде извършена по най-висок стандарт. ниски цении в възможно най-скоро. Просто трябва да се доверим на момчетата :)

3. Кодиране на хора

Услугата предлага работа със статичен XHTML, HTML5, както и предлага готов набор от темплейти за онлайн магазин. Codingpeople се счита за немски авторитет по отношение на качеството на кода.

4. WP платно

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

5. PSD към WP

Ако сте създали отличен дизайн на уебсайт и имате нужда от бързо и висококачествено оформление, услугата PSDtoWordPress ще ви помогне с това. Превърнете дизайна си в готова WordPress тема с PSDtowordpress.

6.PixelWP

PixelWP.com предоставя на клиентите си отличен конвертор на PSD към wordpress шаблон, на който можете да разчитате. Можете да сте сигурни, че вашият проект ще бъде изпълнен качествено и в срок.

7. PSD към всяко

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

8. PSD 2 HTML

Услугата стартира за първи път през 2005 г. P2H.com / PSD2HTML.com беше първият по рода си и привлече над 50 000 клиенти.

9.HTML изрязване

HTMLcut е услуга стъпка по стъпка за прилагане завършен кодот вашия дизайн. Вие качвате PSD оформление, - останалото зависи от HTMLcut.

10. RapidXHTML

Ако искате да превърнете своя дизайн в готов блогили сайт на CMS, RapidxHTML е точно за вас. Услугата поддържа популярни платформи като WordPress, Blogger, Drupal, Joomla и Magento.