Основи на WordPress, подготовка на локална среда, инсталация на XAMPP и настройка на база данни. Инсталиране и активиране на теми и плъгини (добавки). Разглеждане на базовите функционалности на таблото за управление на WordPress.
Измислете подходящо домейн име (пример за домейн име: beron.bg).
Създайте база данни, спазвайки добрите практики за именуване на базат.
Измислете подходящо име и описание на сайта, отговарящо на тематиката на сайта.
Създайте страница „За нас“, като в тази страница освен нещата, които сте избрали да сложите, е добре да има няколко думи за екипа, който е работил по сайта, имената и кой с какво е допринесъл, за реализацията.
В раздел публикации, създайте 2-3 основни категории и 2-3 под категории, важно е да са логически свързани.
Създайте публикации, и ги сложете в подходящите категории.
Помислете дали началната страница на сайта ще е статична или на нея ще се извеждат публикациите, ако е статична, не забравяйте да си направите Начална страница.
След завършване, всеки трябва да представи сайта си пред учител, или да приложи стъпките от урок 3 – архивиране на WordPress сайт. Да го предаде на флаш памет или изпрати на електрона поща. Необходимо е архивния файл на сайта да е именуван с имената на екипа, пример „ivan_petya_kiro“. Срок на изпълнение до ……….
Оценяване
Оценяването ще е на база – тематика на уеб сайт, структура, оформление и дизайн. Който иска да наблегне на дизайн и на структура може да ползва примерен текст lorem ipsum и примерни картинки.
Критерии за оценка
Поощрявани ще бъдат с оригинална тема за сайт с авторски текст, добре написани заглавия с подходящи картинки. Екипите, които използват примерен текст могат да наблегнат на дизайн и добро оформление. Оценяването ще е като следва:
създаване на база и инсталиране на WordPress – Среден;
създаване на страница „За нас“ – Добър;
създаване на правилна структура на категории – Много добър;
Този урок е доста обширен и до голяма степен сложен, ако трябва да действаме като професионалист, бихме използвали система за контрол на версиите (git)q по известните от тях са GitHub, GitLab и Bitbucket. Но за целите на този урок ще приложим стандартния вариант, който също ще ни свърши работа.
Архивиране на файловете на WordPress
За да прехвърлим сайт от типа на WordPress в най-общи линии ни трябва архив на файловете и архив на базата данни. Първо нека направим архив на файловата система. Папка htdocs намираща е в xampp, ако сме спазвали стъпките от урок 1 инсталация WordPress би трябвало да се намира в локален диск „C“, тоест „C:\xampp\htdocs“ в нея би трябвало да се намира и папката с WordPress, която преименувахме с името на нашия проект. Архивираме с познатите ни архиватори zip, rar, 7z и алтернативи.
Архивиране на MySQL база от данни
След като имаме архив на файловете, е редно да направим и на MySQL базата данни. Това много лесно ще стане с помощта на софтуер за управление на MySQL бази данни. До като все още е стартиран apache сървъра и MySQL-а в браузъра зареждаме „localhost/phpmyadmin/“, ако не са стартирани ще трябва да ги стартираме от контролния панел на XAMPP, ако не са стартирани няма как да направим архив на базата.
След като сме заредили phpmyadmin избираме базата данни, която сме асоциирали сайта, кликваме на раздел експорт. Избираме Custom (Персонализиран) експорт метод, уверяваме се че всички таблици са селектирани, структура и данни. И кликваме на бутона „Go“. Генерирания файл, слагаме до архива на файловете на WordPress и качваме на флаш памет, поща или облак.
При тези, които не се получава, и по време на изтеглянето на архива дава грешка е необходимо да си направят архива на базата данни през конзолата. Тази стъпка, е малко по специфична, но ще я разпишем подробно за да се получи при всички.
Стартираме CMD(Команден прозорец) – от старт меню като изпишем „CMD“ , или след като отворим windows explorer и отидем направо до C:\xampp\mysql\bin и изпишем в полето отгоре „cmd“.
След като сме стартирали CMD, или както по-често го наричаме конзолата, трябва да достопим mysql сървъра, това става със следната команда „cd C:\xampp\mysql\bin“.
Команда номер 2 е „mysqldump -u root -p wp_picaria > C:/xampp/htdocs/wp_picaria.sql“, така ще направим архив в папката htdocs името на архива е wp_picaria.sql.
До тук би трябвало да имаме архивите, архивираните файлове на WordPress, където се съдържат темите, добавките, снимките които сме качвали и базата данни чиито файл е с разширение .sql .
Възстановяване на уебсайт от архив
Изтегляме архивите от флаш памет, облак или поща на новия компютър. Проверяваме дали има инсталирани XAMPP, LAMP или друга алтернатива. Ако нямаме, може да си припомним Урок 1 – инсталиране на XAMPP.
Следва разархивиране на файловете в папка htdocs и импортиране на базата с данни. Импортирането става отново през http://localhost/phpmyadmin/, създаваме база със същото име, след това отиваме на раздел Импортиране и зареждаме файла от базата.
Администраторския панел на WordPress най-общо казано служи за цялостното управление на сайта. Чрез него се прави визия на сайта (front-end) също така може да се настройва до някаква степен и сървърната част (back-end), но това не е препоръчително, особено ако не знаете какво правите. Същото така през админ панела, се създават, публикации, страници следят се коментарите, създават се нови потребители, като администратори, автори и други… могат да се следят посещенията на потребителите. Администраторския панел е най-важното за общата визия и състояние на сайта ни.
Първоначални настройки
Добре е още в началото да направим най-базовите настройки. От раздел Настройки, подраздел Общи, да сложим правилното име на сайта и кратко точно описание за какво ще съдържа сайта ни. Преминаваме няколко раздела на долу, Постоянните връзки, този раздел е много важен особено ако смятаме да направим сайта публичен, и искаме той да бъде добре позициониран в Google. Чрез този раздел, задаваме на WordPress как да генерира URL адресите на всяка публикация. Пример, ако правим сайт за пицария и пишем публикация на тема, рецепта „Как да си направим пица Маргарита“, а адресите ни не са настроени URL адресите ще изглежда така http://picaria.com/?p=123, ако ги направим както трябва би следвало URL адреса да изглежда така http://picaria.com/recepta-za-pica-margarita, вече е малко спорно, за езика на който би следвало да се изписват, но според мен e най-правилно да се изписват на латиница, но и кирилицата няма да е грешно за тези уроци, и винаги с малки букви.
В раздел постоянни връзки маркираме Име на публикация и запазваме.
Създаване на страница
Този разделът най-често се използва за статични страници, тези които присъстват в почти всички сайтове, такива страница са „За нас“, „Контакти“, „Начална страница“, „Общи условия“ и всякакви други, които са ни необходими. Създаване на нова страница става от бутона „Добавяне“
Тъй като WordPress е супер интуитивен, веднага ви подканва да започнете да пишете. Нека първо напишем заглавието на страницата, „За нас“ и от менюто в дясно, раздел Публикации избираме постоянни връзки за да си оправим URL адреса към тази страница, той трябва да е изписан с латински букви или с превод на английски, кратко и ясно да подсказва идеята на страницата, като за страницата „За нас“ подходящо URL би бил „za-nas“ или „about-us“.
Заглавна картинка
От дясното меню, Страници, имаме раздел, Картинка за страници (featured image), от този бутон задаваме основна картинка за страницата „За нас“. Възможните опции са, да прекачим картинка от нашият компютър или да използваме вече качена картинка в библиотеката на WordPress.
Съдържание на страницата
В най-общи линии, съдържанието на страницата се състои от добре форматиран текст в йерархичен вид със заглавия, подзаглавия, списъци, таблици и медийни файлове. За доброто оформление и форматиране, WordPress ни дава широк набор от инструменти. За да започнем да добавяме съдържание към нашата страница, кликваме на плюса отгоре в ляво или на този в средата на страницата. Разликата в двата плюса е че този синият, който е горе в ляво показва всички инструменти, а този в средата показва тези инструменти, който ползваме най-често. Нека добавим няколко параграфа, заглавия и подзаглавия, плюс изображение свалено от интернет. След като сме готови с оформлението на страницата е необходимо, да запазим промените от синия бутон, горе в дясно „Обновяване“.
Публикации
Публикациите, са почти като страниците, с тази разлика, че при тях имаме категории и тагове. Важно е да знаем кога е редно да използваме публикация и кога страница. В различните сайтове, публикациите се използват за различни неща, нека да разгледаме някои варианти:
новинарски сайт – публикациите се използват за писане на новини;
сайт за готварски рецепти – писането на рецепти;
продуктов сайт -описание на продукти;
блог – писане на статии.
Общото между всички типове сайтове, е че публикациите могат да се групират на категории.
Категории
Ако правим новинарски сайт, възможните категории може да са „България“, „Образование“, „Екология“ и тн… като всяка категория може да има под категории.
Нека създадем няколко категории, за целта в раздел публикации кликваме на Категории, и попълваме формата. В първия урок примерът беше за пицария, нека ползваме същия пример и създадем категориите, които може да присъстват в сайт на пицария. в полето кратко име пишем на латиница и спазваме правилото за URL-лите, както при страниците.
Статична начална страница
Статична начална страница е настройка по избор, според това как бихте искали да изглежда началната страница, може да я направите статична или на нея да се извеждат публикациите. Стандартно в WordPress е заложено, на началната страница да се извеждат публикациите, по този начин началната ви страница винаги ще е различна и на нея ще се виждат последните публикувани публикации.
Ако изберете статична страница, то тя ще изглежда така, както я направите.
За да си настройте статична страница, първо ще трябва да я създадете в раздел страници. Също така ще трябва да създадете и страница за публикации, която може да именувате според това как бихте искали да се казва, може да е „Публикации“, „Блог“, „Новини“, „Уроци“ или както би било удачно.
Тази настройка може да направите в раздел Настройки, Четене.
Файлове
В раздел файлове се намират, всички файлове, които сме добавели към сайта. Важното тук е да са оптимизирани за уеб. Големи не обработени снимки и клипове, значително натоварват сървърите, което в последствие се оказва много голям проблем. Сайта започва да се държи странно, бавно зарежда, понякога и не зарежда, което води до по-слаба посещаемост и наказания от Гугъл. Оптимизацията на изображения, и като цяло оптимизация на сайт ще е тема на друг урок. За сега е добре да знаем, когато качим картинка WordPress автоматично създава три варианта (размера) на снимката, малък, среден и голям, това е с цел оптимизация. Тази оптимизация понякога се оказва проблем особено при по-големи сайтове.
Да речем че имаме сайт с пет хиляди поста с различни снимки, това са 75 000 снимки. Това е проблем за някои хостинг компании, което налага преминаване към по-голям план или смяна на хостинг. Това са неща, които е добре да се предвидят преди започването на сайт.
Теми
Темите на WordPress са най-важното нещо за цялостната визия на сайта. Това може да е тема на поне 2-3 урока, затова сега ще засегнем само най-важното, което трябва да се знае. Съществуват стотици хиляди теми, аз бих ги разделил на платени и безплатни, като и в двата случая има хубави и лоши. За това е хубаво да се направи предварително проучване за темата, която смятаме да използваме. Ще изброя няколко неща които да спазваме при избор на тема.
Винаги да търси демо версия на темата, всички теми би следвало да имат демо. Демо, което може да разгледаме и да преценим дали е удачна за темата на сайта ни. Зарежда ли бързо, изкачат ли грешки в конзолата.
Ако разбираме от програмиране може да проверим, HTML кода написа лен е както трябва спазват ли се правилата за писане.
Функциите отговарят ли на нещата от които имаме нужда.
Може ли да се има доверие на автора (източника от където ще я изтеглим) който е правил темата.
Безплатни теми, които принадлежат на проверка, може да изтеглим от официалния сайт на WordPress – http://wordpress.org. Тук всяка безплатна тема разполага и с платена версия. Разликата е че безплатните теми са по-лиметирани от към функции, но това не е проблем за програмисти, защото винаги може да добави собствен код и да надгради стандартните функции. Примерен сайт който съм правил с безплатна тема може да разгледате Авангард реклама
Платени теми, които са проверени, от злонамерен код може да се закупят от http://themeforest.net/, средната цена за тема е между 10-50$. Сайт правен с платена тема е elea-bg.com.
Собствена тема, е тема която вие сте си изкодели. Тема която аз съм правил е за Свиленград Автотранспорт. Плюсовете от това да си направите тема са доста, един от тях е че може да си направите всичко, което искате. Ако е добра може да я обявите за продаване. И нека направим една проста сметка, ако направите тема за 20$ и се продаде 5 000 пъти е 100 000$ грубо това са 180 000 лв. А тези 180 000 лв. са три години заплатата ви ако взимате 5 000 лева на месец. Това е още една добра причина, защо е добре да разбираме от WordPress.
В раздел Изглед, теми, имаме три теми, които идват с инсталацията на WordPress. От бутона добавяне на тема, може да разгледаме над 9 000 безплатни теми, които са минали проверка, и са одобрени от WordPress общността. Инсталирането става много лесно, избираме тема и кликваме на бутона инсталиране. След като се инсталира може, да я активираме. Всяка добре написана тема, разполага с документация, на която подробно е обяснено как се настройва.
Разширения (plugins – добавки)
В раздел Разширения, нещата стоят аналогично, като при темите. Като разширенията, служат за добавяне на функционалност на темата. Съществуват над 50 000 разширения (плъгина), които са одобрени от WordPress общността. Един добър пример за нужда от плъгин, е когато решим че сайтът ни трябва да се превърне в онлайн магазин. Това е доста дълъг и труден процес, ако трябва да се пише код, дори и за най-добрите програмисти. За тази цел идват и разширенията, където не е нужно да сте програмисти, или компютърни специалисти, само е необходимо да се намери подходящото. Най-популярния плъгин за електронен магазин е WooCommerce. Само за няколко клика сайта ви се превръща в електронен магазин.
Ако отидем в раздел разширения, и кликнем на добавяне на още и в полето за търсене въведем WooCommerce, може да видим че има над пет милиона активации, което е знак, че разширението е от предпочитаните.
Целта на този урок, е да даде на учениците базови познания при разработването на самостоятелен уеб сайт, с помощта на една от най известните платформи WordPress . За тази цел ще е необходимо да се инсталират няколко приложения: PHP, Apache сървър, MySQL база данни и евентуално текстов редактор. Посоченият пример може да служи за една добра база, която винаги може да се усъвършенства и преизползва за различни проекти. Посочения тук пример е подходящ за работа под Windows 10 операционна система. Възможна е работата и с по-стари операционни системи, като Windows 7, 8 и нагоре, но са възможни леки разминавания във версиите и настройките.
Нека започнем с набавянето на нужните програми. За целта ще използваме приложението XAMPP, което включва в себе си, комплект от нужните програми. XAMPP ще ни спести доста време и главоболия за инсталиране и настройване на всичко поотделно.
Инсталация на XAMPP
Сайта от който може да изтеглите приложението е apachefriends.org, от там се избира XAMPP for Windows. Към този момент най-новата версията е 8.1.5 с но ние ще изтеглим 7.4.29 от секция „Downloads“. За по-стари операционни системи се предполага по-стара версия.
След успешно изтегляне, следва инсталация. Като е добре инсталатора да се стартира като администратор с десния бутон „Стартиране като администратор“ (Run as administrator), хубаво е да се махнат отметките на програмите, които няма да са ни необходими, за да не запълваме компютъра с допълнителни програми.
XAMPP, с оставяне на отметките с програми, които ще използваме в този урок
Следващия етап от инсталацията е къде искаме да инсталираме приложението, по стандарт е в локален диск „C\xampp“, ще го оставим така.
Следващите екрани, език Английски нека остане така за да не бъркаме терминологията, премахваме отметка и от следващия екран, продължаваме напред и изчакваме инсталацията да приключи. След успешна инсталация, ще бъдем подканени директно да стартираме контролния панел на xampp с поставяне на отметка и натискане на бутона Finish.
След като се стартира контролният панел е добре да се стартира apache сървъра и MySQL, и да им се разреши достъпа до определени ресурси на операционната система. При успешна инсталация би следвало да видите следния екран.
XAMPP – пример за успешно стартирани Apache и MySQL
Тестваме като заредим в брузъра „localhost/“ би трябвало да ни излезе поздравителната страница на XAMPP. Добре е и да тестваме SQL сървъра, като заредим в браузъра „localhost/phpmyadmin/“, накратко това е програма за управление на базите данни. Тук ще се върнем малко по-късно в този урок.
Изтегляне на WordPress
Следващата част в този урок е изтеглянето на WordPress, но тук трябва да обърнем внимание и да направим разграничение на различните варианти, които съществуват.
wordpress.com е уеб базирана платформа, която дава възможност за хостване и публикуване на малки уебсайтове и блогове, тя е доста лимитиране и не позволява къстамизиране и надграждане със собствен бекенд код и функции.
wordpress.org е варианта, който ние ще разгледаме. Той дава доста по-голямо поле за изява и надстройване с функции и писане на собствен код. Но това не означава, че нямаме никакви ограничения.
Изтеглянето е задължително винаги да става от официалния сайт, защото вероятността да си навлечем вирус е доста голяма, ако използваме други източници. Зареждаме сайта wordpress.org и от синия бутон „Get WordPress“ изтегляме, текуща версия 5.9.3. Възможно е при изтегляне да е обновен до по-нова версия, но това не би трябвало да е проблем, за нещата, които ще разгледаме. Редно е да изтеглим .zip версията а не tar.gz освен ако не сме на Линукс.
Разархивираме цялото съдържание от изтегляния zip файл в подпапката htdocs на XAMPP, тоест целия път трябва да е „C:\xampp\htdocs“, папката wordpress от архива я поставяме вътре.
Преименуваме името на папката с името на нашия проект, който ще разработваме. Това вече е индивидуално но нека, сега за примера се предържаме с едни и същи имена.
Примерния проект ще е за пицария и затова ще преименуваме папката wordpress на picaria.com. В браузъра зареждаме „localhost/picaria.com/“, следва екрана за избиране на език на wordpress, избираме български и продължаваме напред.
WordPress настройки
Конфигуриране на база данни
Преди да действаме, е добре да си създадем базата данни, това действие ще извършим през phpmyadmin, като го достъпим на адрес localhost/phpmyadmin/. Отиваме на раздел БД (BD) и създаваме нова база с име „wp_picaria“ с колация „utf8mb4_general_ci“. Дефакто с това действие създаваме MySQL база данни, която ще бъде асоциирана с нашия WordPress сайт.
Следвайки логиката до момента, може да създадем няколко сайта на нашия компютър, като за всеки сайт си създаваме база данни. Добра практика е базата данни да е с име близо до името на сайта плюс префикс примерно „wp10_picaria“. Сложни пароли, особено сайта ако се пуска в продукшън.
След като сме създали базата, се връщаме отново на екрана на WordPress и кликаме бутона „Да действаме!“. Следващата форма, която трябва да попълним е много важна, в нея задаваме име на сайта и правим асоцияцията на базата данни. Базата, която направихме преди малко wp_picaria (или wp10_picaria, точно както сте я написали при създаването и). По този начин казваме на WordPress коя база да използва и къде да записва данните от нашия уебсайт, за потребителско име задаваме „root„, за парола оставяме празно поле, изтриваме полето където пише „парола“.
Асоциация на база данни със сайта на WordPress, wp_picaria е базата, която създадохме в phpmyadmin
При случай на грешка е възможно да сме задали грешно име на базата данни. В такъв случай трябва да проверим в phpmyadmin „localhost/phpmyadmin/“ какво име сме зад
али. Ако базата ни е ОК следва екрана с заглавие на сайта и създаване на потребител, който ще е с Администраторски права.
Следваме стъпките в следващия екран, където ще сложим заглавие на сайта, потребителско име и парола, които в никакъв случай не трябва да се използват ако сайтът ще се пуска в продъкшън, но за тестове и разработки е подходящо. С това потребителско име и парола ще използваме за вход в администраторския панел.
Инсталираме WordPress и следва вход в админ панела.
Кратко обобщение – WordPress e CMS система (Система за управление на съдържанието), качествата които я правят толкова предпочитана са доста, някои от тях са:
Open source – буквално отворен код, което позволява на специалист от цял свят да допринасят за нейното усъвършенстване, сигурност, функционалност дори и преводите на различни езици.
Подходяща е както за програмисти, дизайнери, копирайтъри, влогари, дори и хора, които са с по-малко опит с компютрите и технологиите.
Поради голямата си популярност разполага и с голям набор от теми и плъгини.
Поле за изява, особено ако сте PHP програмист. Може да се направи тема, която да се продаде хиляди пъти, или плъгин, който всеки сайт да го иска.
Създаване на електронен магазин или блог само за няколко часа.
Заключение – тези няколко точки, според мен ясно показват, защо си струва да се задълбае в света на WordPress.