Инсталация на тема

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
В този урок ще ви покажа, как се избира тема и инталирането ѝ в wordpress.
Отворил съм сайта wordpress.
org и съм в раздела Тhemes.
Тук има 1584 теми, които са свалени 53 милиона пъти.
Това не означава, че са използвани толкова пъти.
Тук имаме "Most Popular".
Да видим тази тема тук.
Не изглежда зле.
"Featured Bar" ми харесва.
В дясно не ми харесват кутийките.
Да видим някоя друга тема.
Тази е доста странна.
Тази няма "featured bar".
Да вземем тази "iFeatured".
Click on Download.
Tози архив, ще го копирам тук.
Да видим, какво има вътре.
Разни файлове.
Ще обесня, какво правят те.
Първо ще ги копирам в моята директория на сървъра.
Tя се намира в "wp-content".
"Themes" Tук може да видите всички теми, които имате инсталирани на вашият wordpress.
Ще придърпам файловете в тази директория.
Файловете се копираха.
Ще се върна в контролния панел.
В Appearance, в Themes трябва да се покаже iFeature.
Ето го, показа се.
Кликвам на бутона "Activate".
Сега вече темата трябва да е инсталирана.
Да видим, как изглежда.
Тук в ляво имаме опции към темата.
"iFeatures options".
Някои теми ми дават такива опции.
Да видим какво мога да правя с тях.
Upgrade to IFeatured Pro 4 Това съобщение тук показва, че избраната тема е лимитирана.
За да използвам повече неща ще трябва да плащам.
Да видим, какви безплатни опции имаме.
Избираме Design.
Responsive Design.
On / Off .
Select Skin.
Typography.
Фон.
Мога да си избера този фон.
Запазвам настройките.
Да видим, какво ще стане.
Welcome.
Header.
В Header са добавили "Inactive Elements".
Logo и Contact.
Да сложим лого и контакти вътре.
Запазвам.
Тук е Contact Information.
Да видим, как ще изглежда.
Ето го, но аз не искам да изглежда така.
Сега запазвам с Logo и Contact.
По принцип, не обичам шаблонните опции.
Имам предвид, че някои неща лесно се променят, но за да направите промени, каквито вие искате точно, трябва или да заплатите или да се измъчвате със странният интерфейс, който предлагат.
Доста от нещата, които искате, няма да може да ги направите.
Затова тази тема няма да ползвам.
Ще изберем друга тема.
Този път ще изберем напълно безплатна.
Тази сигурно пак е платена.
По-хубавите винаги са платени.
Ще сваля една тема, която е базова и е готова за разработка.
Тя се нарича "Whiteboard".
Изписваме "whiteboard wordpress" Ето излезна на първо място.
Тази тема има адаптивен дизайн.
Когато екрана се намалява, тя става все по-малка.
Това става с CSS трик, който ще видим в следващото урок.
Кликвам на "download whiteboard".
Кликвам на download whiteboard.
Тези файлове ще ги копирам и ще ги кача на сървъра.
Тук избирам Apperance, след това Themes и ще активирам Тук избирам Apperance, след това Themes и ще я активирам.
Отварям сайта, за да видя, какво е станало.
Това е стандартната тема.
Има меню, постове, категории и са готови за стилизиране.
Отваряме в stylizer.
Натискам "Space", за да мина през елементите.
Гледам долу в лентата, какъв е техния път.
Тук имаме Main container sidebar.
Тези елементи са направени по същия начин, по който направихме нашата статична страница.
Тук имаме Main Container Content.
Изглежда Content и Sidebar са в елемент с клас контейнер, който има clear fix.
А пък Main е това което огражда цялата страница.
Tук имаме "main header".
Tук "Main header title logo".
Сега да променим стила на sidebar.
Kакто и на Content, ще сложа малко цветове.
Избираме Main, за да видим, какво представляват различните блокове.
Изглежда, че Main не обхваща всичко.
По-скоро е цялата страница.
Да видим дали това не е контейнер.
Изглежда контейнера не е в стил CSS.
Да, това е контейнера.
Тук има още един стил.
Принципно ще е доста сложно да разположите всичко, което виждате сега.
Но ако искате може да успеете.
Нека все пак да опитаме.
След това ще ви покажа начини как може да стартираме от самото начало.
Проблемът е, че разработчика е направил темата така, както той е сметнал за по-добре.
Сигурно има поне хиляда други начини, за да се направи тази тема.
Тук има Margins.
Кликваме и разбираме, че тези margins не правят нищо.
Имаме няколко файла, които са един върху друг и навсякъде правилата не са спазени.
Смешно нали, това се води за най-основната wordpress тема.
Искам това да го накарам да отиде до края.
Контейнер.
Ето виждате, на контейнера са му сложили padding.
Именно това, което не ми харесва.
Доста време ще трябва, за да промените този sidebar.
Тук има първи width, тук има втори width.
Тук вече трети.
Това е, защото този lessframework.
css,
има логика вътре в него.
Той спомага с това, че смачква сайта, когато сменим нашият browser.
Нека да ви покажа.
Намалям страницата и тя става все по-малка.
Имаме общо четири размера.
Това е за iPhone.
След това отиваме на таблет.
И вече за екран на компютър.
Този lessframework прави това нещо по начин, по който не може да го променяме с stylizer или по-точно, много по-сложно може да го променяме с stylizer.
Начинът, който ще ви покажа за създаваенто на адаптивни страници е доста по-прост и работи доста добре със stylizer.
Това, което може да направите с този дизайн или друга тема е да я променяте и добавяте различни малки неща.
Много сложно би било да промените целия дизайн и да го направите точно така, както искате.
По-скоро ще трябва вие да се адаптират към този дизайн и да променяте разни малки неща.
Другият начин е да си създадете сами темата.
Другият начин е да създадете сами темата.
Как става това ще видим в следващият урок.

Въпроси и отговори

  • Защо когато качвам wordpress 

    Diana:

    на хостинга ми и въведа линка до сайта не стартира инсталацията на самия wordpress. Качвам ги на byethost6 ако това има значение

    Антон Иванов:

    Диана, честно да ти кажа, не знам! ;-) Но разгледах byethost6, и дори безплатният хостинг поддържа всичко необходимо за Wordpress, би трябвало да можеш да я подкараш тази инсталация. Щом от самото начало не тръгва, като начало виж какъв е индексният ти файл, може заради някакви настройки да не е достатъчно да въведеш като адрес само името на домейна, а и самия индексен файл, примерно http://твоят_домейн/index.php или index.html или index.htm (като при това се предполага, че си настроила домейнът ти да сочи съответния IP-адрес. Можеш да насочиш отговарящите, ако сложиш една картинка тук, изобразяваща какво виждаш на бразура, когато въведеш "линка до сайта". 

    Живко Казаков:

    В много случаи, по подразбиране е само index.html, а index.php - не. Моят случай, на локалният компютър, е точно такъв. Затова отварям index.php в html редакторът, който ползвам, и оттам го стартирам във външен браузър. Мога да си променя конфигурацията, но предпочитам, файловете, които свършват на .php да се отварят в редакторът. Може този случай да е точно такъв.

    Ivan Pukov:

    Лично аз виждам следния проблем: Качили сте папката на wordpres-a, а не файловете т.е. ако използвате хостинг с cpanel и домейна ви нагласен към папката public_html , сте качили папка wordpress , където са ви файловете , логично да не ви се отвори. и тогава трябва да отваряте домейн/wordpress , a не домейна. Просто проверете дали всичко е качено на правилните места . И хубаво да пише на поддръжка от хостинг компанията , за подобен проблем, понеже е възможно те да има друга структура ( пример стария панел на host.bg , където сайта трябваше да бъде в папка root/www)

    Antoaneta Neshkova:

    Избрах 000webhost.com и там те питат искаш ли директна инсталация на WordPress , без да е необходимо да го свалям на моя компютър и да разархивирам. В 000webhost.com през File Manager и облачето File Upload public_html> wp-content> themes > създадох folder с име witeboard и чрез upload Files вътре записах всичките файлове на Whiteboard разархивирани от моя компютър . В WordPress смених темата и то тръгна !

  • Как да отворя блога си със Stylizer CSS редактор?

    Петър Нефтелимов:

    neftelimov.com – Това е моят блог. Имам го от половин година, като само му инсталирах тема на WordPress. Не разбирам как да го отворя със Stylizer, за да променя темата по мой вкус

    Ангел Арънски:

    Какво се случва когато вкараш адреса си в Stylizer 'address bar-а' ?

    Би трябвало да се покажа главната страница и да можеш да редактираш.
    След това може да запазиш файла или директно да го качиш на сървъра ако имаш SSH или FTP достъп. Ако сайта ти не се вижда, то може би трябва да смениш броузъра с който stylizer работи. Например Chrome или Firefox
  • Може ли .. 

    Християна:

    Тези, които не ползваме Stylizer, в Wordpress - Appearance - Editor ли редактираме темата ? 

    Ангел Арънски:

    Да но ще е по-сложно.

  • Къде се качва Wordpress тема?

    Християна:

    На какъв сървър качваме свалената тема, за да може да се активира в  wordpress-a? Правя си нов free hosting или на локалния сървър? Пробвам на локалния сървър обаче не знам трябва ли да кача цялата папка на wordpess в дясната част? 


    Ангел Арънски:

    Да цялата wordpress папка трябва да е на сървъра и в директория която е достъпна от уеб сървъра. В повечето случаи /home/ivan/www или /home/ivan/public_html/

    Християна:

    Да разбирам,че трябва да кача папката на локалния сървър...?И ако да, с drag и drop ли качвам wordpress папката или е по - специфично ? Много забивам тук и не мога да продължа модула ... 

    Християна:

    Оправих се.

    Ангел Арънски:

    Цялата папка, а не само wp-content. Да с drag&drop ще стане, това са нормални файлове.

  • Как да си активирам темата?

    Elena Kocheva:

    Имам проблем с темата! Качих я в сървъра и след като отидох на appearance-themes не я намерих. Как да реша проблема?

    Иван Цукев:

    За да се появи темата, трябва да е качена на правилното място.


    Това е в папка wp-content\themes

    Между другото, вече имаме и пълен 8 месечен wordpress курс, ако имаш затруднения със самия wordpress.
    http://aula.bg/kurs-wordpress/
    Даниела Йорданова:

    За мой късмет, първо минах wordpress курса и сега ми е лесно.